/* Home — hero, project pipeline and feature map */

.home{position:relative;height:100vh;min-height:620px;overflow:hidden;background:#0B0807}

/* liquid glass, home tuning */
.lg-fx{-webkit-backdrop-filter:blur(6px) saturate(1.7) brightness(1.06);backdrop-filter:blur(6px) saturate(1.7) brightness(1.06)}
@supports not (background:-webkit-named-image(i)){.lg-fx{filter:url(#lg-card)}.lg-fx.is-panel{filter:url(#lg-panel)}}
.lg-tint{background:linear-gradient(165deg,rgba(255,150,158,.12),rgba(150,14,30,.13) 48%,rgba(22,6,6,.34))}
.lg-shine{box-shadow:inset 1.5px 1.5px 1px rgba(255,255,255,.42),inset -1px -1px 1px rgba(255,255,255,.14),inset 0 0 26px rgba(255,70,88,.12)}
.lg-spec{background:radial-gradient(circle 320px at var(--mx,30vw) var(--my,-10vh),rgba(255,255,255,.13),rgba(255,255,255,0) 65%) fixed}

/* buttons */
.btn-red{height:54px;padding:0 26px;border-radius:27px;font-size:17px;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -3px 8px rgba(70,0,10,.45),0 0 0 1px rgba(255,110,122,.35),0 14px 34px -8px rgba(238,34,59,.65);transition:transform .4s cubic-bezier(.3,1.6,.5,1),box-shadow .4s}
.btn-red::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.38) 46%,rgba(255,255,255,0) 62%);transform:translateX(120%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.btn-red:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(70,0,10,.45),0 0 0 1px rgba(255,130,140,.55),0 20px 46px -8px rgba(238,34,59,.9)}
.btn-red:hover::before{transform:translateX(-120%)}
.btn-red > *{position:relative}
.btn-glass{height:54px;padding:0 24px;border-radius:27px;font-size:17px;box-shadow:0 12px 30px -14px rgba(0,0,0,.9);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.btn-glass:hover .lg-tint{background:linear-gradient(165deg,rgba(255,170,178,.2),rgba(170,20,40,.2) 50%,rgba(30,8,8,.3))}
.btn-glass svg{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.btn-glass:hover svg{transform:translateX(-4px)}
.btn-red .rec{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.85)}

/* layout */
.home-grid{position:absolute;top:96px;right:0;bottom:0;left:0;display:grid;grid-template-columns:minmax(0,48fr) minmax(0,52fr)}
.hero{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(14px,2.5vh,26px);padding:0 clamp(24px,5.6vw,104px) 7vh 16px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;height:36px;margin:0;padding:0 16px;border-radius:18px;font-size:clamp(12.5px,1.6vh,14px);font-weight:500;color:rgba(245,240,237,.86)}
.h1{margin:0;font-weight:900;font-size:clamp(32px,min(4.4vw,7vh),76px);line-height:1.22;color:#F5F0ED;text-shadow:0 0 44px rgba(238,34,59,.28)}
.h1 .l{display:block}
.h1 em{font-style:normal;color:#FF4A5C;text-shadow:0 0 30px rgba(238,34,59,.75)}
.sub{margin:0;max-width:31em;text-wrap:pretty;font-size:clamp(15px,min(1.3vw,2.1vh),19px);line-height:1.9;color:rgba(245,240,237,.76)}
.sub bdi{font-style:italic;font-weight:500;color:#F5F0ED}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* pipeline */
.pipe{display:flex;flex-direction:column;gap:10px;width:100%;max-width:560px;margin-top:clamp(4px,2.6vh,28px)}
.pipe-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:rgba(245,240,237,.64)}
.pipe-label .rec{width:6px;height:6px}
.pipe-tray{height:58px;border-radius:29px;padding:0 6px}
.pipe-track{position:relative;height:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center}
.pipe-line{position:absolute;right:10%;left:10%;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:rgba(245,240,237,.14)}
.pipe-fill{position:absolute;right:10%;top:50%;height:2px;margin-top:-1px;width:0;border-radius:1px;background:linear-gradient(to left,#EE223B,#FF6A79);box-shadow:0 0 10px rgba(238,34,59,.85);animation:pipe-fill 10s cubic-bezier(.6,0,.3,1) infinite}
.pipe-dot{position:absolute;right:10%;top:50%;width:12px;height:12px;margin:-6px -6px 0 0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(238,34,59,.55),0 0 18px 4px rgba(238,34,59,.9);animation:pipe-dot 10s cubic-bezier(.6,0,.3,1) infinite}
.stage{position:relative;justify-self:center;display:flex;align-items:center;justify-content:center;height:32px;padding:0 11px;border-radius:16px;font-size:12.5px;font-weight:500;white-space:nowrap;color:rgba(245,240,237,.66);background:rgba(28,12,12,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.st1{animation:st1 10s linear infinite}.st2{animation:st2 10s linear infinite}.st3{animation:st3 10s linear infinite}.st4{animation:st4 10s linear infinite}.st5{animation:st5 10s linear infinite}
@keyframes st1{0%,94%{color:#fff;background:rgba(92,14,22,.96);box-shadow:inset 0 0 0 1px rgba(255,95,110,.75),0 0 18px rgba(238,34,59,.45)}97%,100%{color:rgba(245,240,237,.66);background:rgba(28,12,12,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}}
@keyframes st2{0%,21%{color:rgba(245,240,237,.66);background:rgba(28,12,12,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}23%,94%{color:#fff;background:rgba(92,14,22,.96);box-shadow:inset 0 0 0 1px rgba(255,95,110,.75),0 0 18px rgba(238,34,59,.45)}97%,100%{color:rgba(245,240,237,.66);background:rgba(28,12,12,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}}
@keyframes st3{0%,41%{color:rgba(245,240,237,.66);background:rgba(28,12,12,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}43%,94%{color:#fff;background:rgba(92,14,22,.96);box-shadow:inset 0 0 0 1px rgba(255,95,110,.75),0 0 18px rgba(238,34,59,.45)}97%,100%{color:rgba(245,240,237,.66);background:rgba(28,12,12,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}}
@keyframes st4{0%,61%{color:rgba(245,240,237,.66);background:rgba(28,12,12,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}63%,94%{color:#fff;background:rgba(92,14,22,.96);box-shadow:inset 0 0 0 1px rgba(255,95,110,.75),0 0 18px rgba(238,34,59,.45)}97%,100%{color:rgba(245,240,237,.66);background:rgba(28,12,12,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}}
@keyframes st5{0%,81%{color:rgba(245,240,237,.66);background:rgba(28,12,12,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}83%,94%{color:#fff;background:rgba(92,14,22,.96);box-shadow:inset 0 0 0 1px rgba(255,95,110,.75),0 0 18px rgba(238,34,59,.45)}97%,100%{color:rgba(245,240,237,.66);background:rgba(28,12,12,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}}
@keyframes pipe-dot{0%{right:10%;opacity:1}12%{right:10%}22%,32%{right:30%}42%,52%{right:50%}62%,72%{right:70%}82%,92%{right:90%;opacity:1}95%{right:90%;opacity:0}97%{right:10%;opacity:0}100%{right:10%;opacity:1}}
@keyframes pipe-fill{0%{width:0;opacity:1}12%{width:0}22%,32%{width:20%}42%,52%{width:40%}62%,72%{width:60%}82%,94%{width:80%;opacity:1}97%{width:80%;opacity:0}98%,100%{width:0;opacity:0}}
.pipe-stars{position:absolute;left:10%;top:-21px;display:flex;gap:2px;transform:translateX(-50%)}
.pipe-stars span{display:block;width:11px;height:11px;background:#FF4A5C;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:0;animation:star 10s linear infinite both;animation-delay:calc(var(--i,0) * .1s)}
@keyframes star{0%,83%{opacity:0;transform:scale(.3) translateY(6px)}86%,94%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}

/* scene: feature map */
.scene{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:0 clamp(16px,3.4vw,52px) 5vh}
.lamp{position:absolute;inset:0;pointer-events:none}
.ambient{position:absolute;left:50%;top:47%;width:150vh;height:150vh;margin:-75vh 0 0 -75vh;border-radius:50%;background:radial-gradient(closest-side,rgba(238,34,59,.3),rgba(238,34,59,.1) 42%,rgba(238,34,59,0) 100%);opacity:min(1,var(--glow,1))}
.map{position:relative;width:min(100%,calc((100vh - 200px) * 1.15));aspect-ratio:1.15/1;container-type:inline-size}
.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lnk{fill:none;stroke:rgba(255,150,160,.62);stroke-width:1.7;stroke-dasharray:4 6;stroke-linecap:round;animation:flow 1.4s linear infinite;transition:stroke .3s ease,stroke-width .3s ease}
@keyframes flow{to{stroke-dashoffset:-20}}
.hub-glow{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,60,80,.55),rgba(238,34,59,.2) 50%,rgba(238,34,59,0) 75%);opacity:min(1,var(--glow,1));animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(max(1,var(--glow,1)))}50%{transform:translate(-50%,-50%) scale(calc(max(1,var(--glow,1))*1.08))}}
.hub{--hw:36cqw;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:var(--hw);height:13%;border-radius:999px;box-shadow:0 22px 48px -14px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.12),0 0 64px -6px rgba(238,34,59,.65)}
.hub .lg-fx{-webkit-backdrop-filter:blur(14px) saturate(1.15) brightness(.5);backdrop-filter:blur(14px) saturate(1.15) brightness(.5)}
.hub .lg-tint{background:linear-gradient(180deg,rgba(40,18,20,.7),rgba(12,6,7,.84) 55%,rgba(5,2,3,.9))}
.hub .lg-shine{box-shadow:inset 0 1.5px 1px rgba(255,255,255,.38),inset 0 -1px 1px rgba(255,255,255,.1),inset 0 -9px 16px -10px rgba(238,34,59,.45)}
.hub-in{display:flex;align-items:center;gap:calc(var(--hw) * .04);direction:ltr}
.hub-in .dr-logo{width:calc(var(--hw) * .53);height:auto}
.hub-st{font-size:calc(var(--hw) * .094);font-style:italic;font-weight:500;color:rgba(245,240,237,.94)}
.feat{position:absolute;width:25%;transform:translateX(-50%)}
.f1{left:83%;top:1%}.f2{left:50%;top:-2%}.f3{left:17%;top:1%}
.f4{left:83%;top:68%}.f5{left:50%;top:72%}.f6{left:17%;top:68%}
.feat-in{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;animation:float 6s ease-in-out var(--fl,0s) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.fill{display:block;width:100%;height:auto;aspect-ratio:1.5/1;margin-bottom:6px;overflow:visible;filter:drop-shadow(0 12px 14px rgba(0,0,0,.55));transition:transform .45s cubic-bezier(.3,1.5,.5,1),filter .45s ease}
.feat:hover .fill{transform:translateY(-4px) scale(1.07);filter:drop-shadow(0 16px 18px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(238,34,59,.5))}
.il-s{transform-box:fill-box;transform-origin:center;animation:il-star 5s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * .14s) infinite both}
@keyframes il-star{0%,14%{opacity:0;transform:scale(.3)}24%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.il-drag{transform-box:fill-box;transform-origin:center;animation:il-drag 6.5s cubic-bezier(.55,0,.3,1) infinite both}
@keyframes il-drag{0%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}6%,16%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}22%{transform:translate(0,-4px) rotate(-7deg) scale(1.08)}36%{transform:translate(-37px,-24px) rotate(-7deg) scale(1.08)}42%,56%{transform:translate(-37px,-20px) rotate(0) scale(1)}62%{transform:translate(-37px,-24px) rotate(-7deg) scale(1.08)}76%{transform:translate(-74px,-4px) rotate(-7deg) scale(1.08)}82%,92%{opacity:1;transform:translate(-74px,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(-74px,0) rotate(0) scale(1)}}
.il-line{stroke-dasharray:100;animation:il-draw 6s cubic-bezier(.6,0,.3,1) infinite both}
@keyframes il-draw{0%,8%{stroke-dashoffset:100;opacity:1}40%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.il-pop{transform-box:fill-box;transform-origin:center;animation:il-pop 6s cubic-bezier(.3,1.6,.5,1) infinite both}
@keyframes il-pop{0%,38%{opacity:1;transform:scale(0)}48%,86%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
.il-type{transform-box:fill-box;transform-origin:center;animation:il-type 1.3s ease-in-out calc(var(--i) * .16s) infinite both}
@keyframes il-type{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-3px);opacity:1}}
.il-run{animation:il-run 2.8s cubic-bezier(.6,0,.4,1) infinite both}
@keyframes il-run{0%{opacity:0;transform:translateX(0)}10%{opacity:1}42%,56%{transform:translateX(31px)}90%{opacity:1}100%{opacity:0;transform:translateX(64px)}}
.f-t{font-size:clamp(12px,1.05vw,16px);font-weight:900;color:#F5F0ED;white-space:nowrap}
.f-s{font-size:clamp(10.5px,.84vw,12.5px);line-height:1.6;color:rgba(245,240,237,.66);white-space:nowrap}
.map:has(.f1:hover) .l1,.map:has(.f2:hover) .l2,.map:has(.f3:hover) .l3,.map:has(.f4:hover) .l4,.map:has(.f5:hover) .l5,.map:has(.f6:hover) .l6{stroke:#FF6B7B;stroke-width:2.4}

/* atmosphere */
.vignette{background:radial-gradient(130% 95% at 50% 42%,rgba(0,0,0,0) 52%,rgba(0,0,0,.62))}

/* intro */
.is-intro .dev{animation:develop 1.7s cubic-bezier(.2,.6,.2,1) backwards;animation-delay:var(--dd,0s)}
@keyframes develop{0%{opacity:0;filter:blur(14px) brightness(2.6) saturate(0)}40%{opacity:.7;filter:blur(4px) brightness(1.6) saturate(.3)}100%{opacity:1;filter:none}}
.is-intro .lamp{animation:lamp-on 1.6s linear both}
@keyframes lamp-on{0%{opacity:0}9%{opacity:.9}12%{opacity:.08}18%{opacity:.7}21%{opacity:.2}24%{opacity:.85}27%{opacity:.35}36%,100%{opacity:1}}
.is-intro .hub{animation:hubIn .8s cubic-bezier(.3,1.5,.5,1) 1s both}
@keyframes hubIn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.is-intro .lnk{animation:lnkIn .6s ease var(--ld,1.3s) both,flow 1.4s linear infinite}
@keyframes lnkIn{from{opacity:0}to{opacity:1}}
.is-intro .feat-in{animation:featIn .7s cubic-bezier(.3,1.4,.5,1) var(--fd,1.5s) both,float 6s ease-in-out calc(var(--fd,1.5s) + .7s) infinite}
@keyframes featIn{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:none}}
.is-intro .nav-wrap{animation:develop 1.4s cubic-bezier(.2,.6,.2,1) .45s backwards}

/* phone */
.m-sub{display:none}
@media (max-width:760px){
.home{height:auto;min-height:100vh}
.nav-wrap{position:fixed}
.nav .lg-tint{background:linear-gradient(180deg,rgba(34,12,14,.84),rgba(14,6,7,.9))}
.nav .lg-fx{-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.sheet{position:fixed}
.home-grid{position:relative;inset:auto;display:flex;flex-direction:column;padding-top:88px}
.hero{justify-content:flex-start;gap:16px;padding:16px 20px 32px}
.btn-red,.btn-glass{height:50px;font-size:16px;padding:0 20px}
.scene{display:block;padding:0 16px 40px}
.links,.hub,.hub-glow,.vignette{display:none}
.m-sub{display:block;max-width:560px;margin:0 auto 10px;padding:0 16px;font-size:14px;font-weight:700;color:#FF4A5C}
.map{width:100%;max-width:560px;margin:0 auto;aspect-ratio:auto;padding:8px 0;border-radius:28px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 40px -24px rgba(0,0,0,.9)}
.feat{position:static;width:auto;transform:none}
.feat+.feat::before{content:"";display:block;height:1px;margin:0 104px 0 16px;background:rgba(245,240,237,.09)}
.home .feat-in{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;min-height:76px;padding:12px 16px;text-align:start;animation:none}
.is-intro .feat-in{animation:featIn .6s cubic-bezier(.3,1.4,.5,1) var(--fd,1.5s) both}
.fill{grid-row:1/3;width:72px;margin:0}
.f-t{align-self:end;font-size:16px;font-weight:700;white-space:normal}
.f-s{display:block;align-self:start;font-size:14px;line-height:1.5;white-space:normal}
}
