/* Page-specific styles (home hero, process page, SVG animations) */

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding:64px 0 72px;
  background:radial-gradient(120% 130% at 12% 0%, #f7f1e4 0%, var(--oat) 46%, var(--oat2) 100%)}
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:600}
.hero h1 em{font-style:italic;color:var(--copper)}
.hero .lead-2{font-size:1.18rem;margin-top:1.2rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero-badges{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2.4rem;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.hero-badges b{color:var(--espresso)}

/* ---- loop signature ---- */
.loopwrap{display:flex;justify-content:center}
.loopwrap svg{width:100%;max-width:440px;height:auto}

/* ---- process / tech hero ---- */
.hero--tech{background:#241910;color:#e7dcc9;position:relative;overflow:hidden;padding:74px 0 88px}
.hero--tech::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 72% 28%, rgba(168,82,28,.30), transparent 58%),
             radial-gradient(90% 90% at 8% 105%, rgba(95,107,58,.20), transparent 55%)}
.hero-grid{position:absolute;inset:0;opacity:.6;pointer-events:none;
  background-image:linear-gradient(rgba(233,217,194,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(233,217,194,.05) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(125% 100% at 62% 30%, #000 28%, transparent 82%);
          mask-image:radial-gradient(125% 100% at 62% 30%, #000 28%, transparent 82%)}
.hero--tech .container{position:relative;z-index:2}
.hero--tech h1{color:#fbf4e7;font-size:clamp(2.2rem,4.7vw,3.5rem);font-weight:600}
.hero--tech h1 em{color:var(--crema);font-style:italic}
.hero--tech .lead-2{color:#d2c3ac;font-size:1.12rem;margin-top:1.1rem}
.eyebrow--tech{color:var(--crema)}
.spec-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem}
.spec-strip span{font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:#e7dcc9;border:1px solid rgba(227,178,98,.4);
  border-radius:30px;padding:.36rem .8rem;background:rgba(255,255,255,.03)}
.btn-ghost--light{border-color:#e7dcc9;color:#fbf4e7}
.btn-ghost--light:hover{background:#fbf4e7;color:#241910}
.machine-stage{filter:drop-shadow(0 26px 54px rgba(0,0,0,.55))}
.machine-stage svg{width:100%;height:auto;max-width:520px;display:block;margin:0 auto}

/* ---- home banner carousel ---- */
.home-banners{position:relative;border-bottom:3px solid var(--copper);
  background:linear-gradient(168deg,#fcefdc 0%,#f3dcc0 40%,#e8c99a 100%)}
.home-banners::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,var(--copper-deep),var(--crema),var(--copper-deep))}
.banner-slide{position:relative;min-height:580px;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(180deg,#fff9f0 0%,#fceacc 55%,#f3c882 100%)}
.banner-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.banner-light{position:absolute;inset:0;
  background:radial-gradient(75% 65% at 18% 28%,rgba(255,255,255,.55) 0%,transparent 58%),
    radial-gradient(60% 55% at 92% 18%,rgba(255,255,255,.42) 0%,transparent 52%)}
.banner-ripples{position:absolute;right:4%;top:50%;width:min(56%,500px);aspect-ratio:1;transform:translateY(-50%)}
.banner-ripples span{position:absolute;border-radius:50%;border:1px solid rgba(168,82,28,.13)}
.banner-ripples span:nth-child(1){inset:0}
.banner-ripples span:nth-child(2){inset:9%;border-color:rgba(227,178,98,.2)}
.banner-ripples span:nth-child(3){inset:19%;border-color:rgba(168,82,28,.1)}
.banner-ripples span:nth-child(4){inset:30%;border-style:dashed;border-color:rgba(227,178,98,.16)}
.banner-ripples span:nth-child(5){inset:42%;border-color:rgba(168,82,28,.08);
  background:radial-gradient(circle,rgba(255,255,255,.35) 0%,transparent 70%)}
.banner-slide--food .banner-ripples{right:2%;width:min(58%,520px)}
.banner-slide--food .banner-light{
  background:radial-gradient(70% 60% at 15% 30%,rgba(255,255,255,.5) 0%,transparent 55%),
    radial-gradient(55% 50% at 90% 20%,rgba(249,217,154,.25) 0%,transparent 50%)}
.banner-slide--handcrafted .banner-ripples{right:6%;transform:translateY(-48%)}
.banner-slide--handcrafted .banner-light{
  background:radial-gradient(72% 62% at 20% 32%,rgba(255,255,255,.48) 0%,transparent 56%),
    radial-gradient(58% 52% at 88% 22%,rgba(243,220,192,.3) 0%,transparent 54%)}
.banner-slide--wellness .banner-ripples{right:3%;transform:translateY(-52%)}
.banner-slide--wellness .banner-light{
  background:radial-gradient(78% 68% at 16% 26%,rgba(255,255,255,.52) 0%,transparent 57%),
    radial-gradient(62% 56% at 94% 16%,rgba(252,234,204,.28) 0%,transparent 52%)}
.banner-waves{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:min(38%,200px);opacity:.9}
.banner-inner{position:relative;z-index:2;display:flex;align-items:center;gap:48px;padding-bottom:24px}
.carousel-item .banner-content,.carousel-item .banner-product{opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.carousel-item.active .banner-content{opacity:1;transform:translateY(0);transition-delay:.1s}
.carousel-item.active .banner-product{opacity:1;transform:translateY(0)}
.carousel-item.active .banner-product:nth-child(1){transition-delay:.22s}
.carousel-item.active .banner-product:nth-child(2){transition-delay:.34s}
.carousel-item.active .banner-product:nth-child(3){transition-delay:.46s}
.banner-content{flex:1 1 32%;min-width:0;max-width:420px;color:var(--espresso);padding:54px 0}
/* category badge */
.banner-content .eyebrow{display:inline-flex;align-items:center;gap:.55rem;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,248,235,.45));
  border:1px solid rgba(168,82,28,.28);color:var(--copper-deep);
  padding:.45rem 1rem;border-radius:40px;letter-spacing:.2em;font-size:.64rem;
  box-shadow:0 4px 16px rgba(168,82,28,.08)}
.banner-content .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--crema),var(--copper));box-shadow:0 0 0 3px rgba(227,178,98,.25)}
.banner-content h2{color:var(--espresso);margin:1rem 0 .85rem;font-size:clamp(2rem,4.6vw,3.15rem);
  letter-spacing:-.02em;line-height:1.05;text-shadow:none}
.banner-content h2::after{content:"";display:block;width:52px;height:3px;margin-top:.85rem;border-radius:2px;
  background:linear-gradient(90deg,var(--copper),var(--crema))}
.banner-content p{color:var(--ink-soft);font-size:1.1rem;max-width:42ch;margin:0 0 1.75rem;line-height:1.65}
.banner-content .btn-copper{box-shadow:0 12px 28px rgba(168,82,28,.26)}
.banner-cta .cta-arrow{display:inline-block;margin-left:.5rem;transition:transform .25s ease}
.banner-cta:hover .cta-arrow{transform:translateX(4px)}
/* product cluster */
.banner-products{position:relative;flex:1 1 66%;display:flex;flex-wrap:wrap;gap:22px;justify-content:flex-end;
  align-items:flex-end;padding:20px 0 32px}
.banner-products::before{content:"";position:absolute;left:50%;bottom:8px;width:min(92%,520px);height:28px;
  transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(168,82,28,.12) 0%,transparent 72%);
  filter:blur(6px);z-index:0}
.banner-product{position:relative;display:block;margin:0;flex:0 1 248px;max-width:260px;text-decoration:none;z-index:1;
  background:#fff;border:2px solid rgba(255,255,255,.92);border-radius:18px;overflow:hidden;
  box-shadow:0 16px 40px rgba(43,30,21,.12),0 0 0 1px rgba(201,165,122,.2);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease}
.banner-product:nth-child(2){margin-bottom:28px}
.banner-product:hover{transform:translateY(-8px)!important;
  box-shadow:0 26px 52px rgba(43,30,21,.16),0 0 0 2px rgba(227,178,98,.32)}
.banner-product-img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--oat2)}
.banner-product-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);
  transform:translateX(-120%);transition:transform .65s ease}
.banner-product:hover .banner-product-img::before{transform:translateX(120%)}
.banner-product-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.banner-product-img::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,transparent 55%,rgba(43,30,21,.14) 100%)}
.banner-product:hover .banner-product-img img{transform:scale(1.08)}
.banner-product-name{display:block;padding:.72rem 1rem .85rem;font-size:.84rem;font-weight:600;
  color:var(--espresso);letter-spacing:.01em;line-height:1.35;text-align:center;
  border-top:1px solid rgba(201,165,122,.22);background:rgba(255,255,255,.55)}
.banner-product:hover .banner-product-name{color:var(--copper-deep)}
.banner-product .bp-go{position:absolute;right:12px;bottom:12px;z-index:2;
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--copper),var(--copper-deep));color:#fff;font-size:1.05rem;line-height:1;
  box-shadow:0 8px 22px rgba(125,60,19,.4);opacity:.92;transform:none;
  transition:opacity .35s ease,transform .35s ease}
.banner-product:hover .bp-go{opacity:1;transform:scale(1.08)}
/* clean, cohesive cross-fade between slides */
.banner-carousel.carousel-fade .carousel-item{transition:opacity .8s ease-in-out}
/* pill indicators */
.banner-carousel .carousel-indicators{margin-bottom:1.2rem}
.banner-carousel .carousel-indicators [data-bs-target]{width:9px;height:9px;margin:0 5px;border:0;
  border-radius:50%;background:rgba(43,30,21,.22);opacity:1;
  transition:width .35s ease,background .35s ease,border-radius .35s ease}
.banner-carousel .carousel-indicators .active{width:32px;border-radius:6px;
  background:linear-gradient(90deg,var(--copper-deep),var(--copper));box-shadow:0 2px 12px rgba(168,82,28,.35)}

@keyframes vapourflow{to{stroke-dashoffset:-40}}
.vapour{animation:vapourflow 1.7s linear infinite}
.flow{stroke-dasharray:5 7}
@keyframes flowdown{to{stroke-dashoffset:-24}}
.flow.oil{animation:flowdown 1.3s linear infinite}
.flow.dec{animation:flowdown 1.05s linear infinite}
.flow.spent{animation:flowdown 1.7s linear infinite}
@keyframes drip{0%,68%{transform:translateY(0);opacity:.5}84%{opacity:1}100%{transform:translateY(7px);opacity:0}}
.drip{transform-box:fill-box;transform-origin:center;animation:drip 2.6s ease-in infinite}
@keyframes coreSpin{to{transform:rotate(360deg)}}
.core{transform-box:fill-box;transform-origin:center;animation:coreSpin 9s linear infinite}

@media (max-width:991px){
  .hero{padding:48px 0 56px}
  .hero--tech{padding:48px 0 56px}
  .hero .lead-2,.hero--tech .lead-2{font-size:1.05rem}
  .spec-strip{gap:.4rem}
  .spec-strip span{font-size:.62rem;padding:.32rem .65rem}
  .machine-stage{margin-top:1rem;filter:drop-shadow(0 16px 32px rgba(0,0,0,.45))}
  .loopwrap svg{max-width:min(100%,360px)}
  .machine-stage{margin-top:14px}
  .banner-slide{min-height:460px}
  .banner-content{padding:40px 0;flex-basis:34%}
  .banner-inner{gap:28px}
  .banner-products{gap:16px}
  .banner-product{flex-basis:165px}
  .banner-product:nth-child(n){transform:none;margin-top:0;margin-bottom:0}
}

/* phones / small tablets: stack as images → title → content → button */
@media (max-width:767px){
  .banner-slide{min-height:0}
  .banner-ripples{width:85%;right:-20%;opacity:.55}
  .banner-waves{height:120px;opacity:.65}
  .banner-inner{flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:0}
  .banner-products{order:-1;flex:none;width:100%;flex-wrap:nowrap;justify-content:center;gap:10px;padding:34px 0 0}
  .banner-content{flex:none;width:100%;max-width:none;padding:0 0 32px}
  .banner-product{flex:1 1 0;min-width:0;max-width:none;border-radius:12px;
    transform:none!important;background:none;border:0;box-shadow:none;margin-bottom:0!important}
  .banner-products::before{display:none}
  .banner-product:hover{transform:none!important}
  .banner-product-img{background:none}
  .banner-product-name{display:none}
}

@media (max-width:575px){
  .hero h1{font-size:clamp(1.85rem,8vw,2.5rem)}
  .hero--tech h1{font-size:clamp(1.75rem,7.5vw,2.35rem)}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn-copper,.hero-cta .btn-ghost{width:100%}
  .banner-content p{font-size:.98rem}
}

@media (prefers-reduced-motion:reduce){
  .vapour,.flow,.drip,.core{animation:none}
  .carousel-item .banner-content,.carousel-item .banner-product{opacity:1;transform:none;transition:none}
}