:root{--bg:#0e0f12;--bg2:#17181d;--fg:#f2f2f0;--mut:#9a9da6;--red:#ff4a1c}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 "Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
a{color:inherit}:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.nav{position:sticky;top:0;z-index:9;display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;background:rgba(14,15,18,.82);backdrop-filter:blur(12px);border-bottom:1px solid #2a2c33}
.logo{font:900 20px var(--disp);letter-spacing:.08em;text-decoration:none}.logo b{color:var(--red);margin-left:4px}
#links{display:flex;gap:22px;font-size:14px}#links a{text-decoration:none;color:var(--mut)}#links a:hover{color:var(--fg)}#menu{display:none}
.grid,.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero{min-height:88vh;padding:6vh 5vw;background:radial-gradient(60% 50% at 75% 40%,#ff4a1c26,transparent),linear-gradient(#ffffff08 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/48px 48px}
.tag{display:inline-block;border:1px solid var(--red);color:var(--red);padding:4px 12px;border-radius:99px;font-size:13px}
.slogan{font:900 clamp(40px,7vw,92px)/.95 var(--disp);letter-spacing:.03em;margin:.3em 0}
.slogan .w{display:block}.slogan .w:nth-child(2){color:var(--red)}.slogan.small{font-size:28px}
.w{animation:rise .9s both}.w2{animation-delay:.5s}.w3{animation-delay:1s}
@keyframes rise{from{opacity:0;transform:translateY(24px);letter-spacing:.2em}}
.hero-seal{width:100%;filter:drop-shadow(0 30px 50px #ff4a1c55);animation:float 5s ease-in-out infinite,rise 1.2s 1.3s both}
@keyframes float{50%{transform:translateY(-10px) rotate(-1.5deg)}}
.sub{color:var(--mut);max-width:34ch;font-size:19px}
.btn{display:inline-block;background:var(--red);color:#111;font-weight:800;padding:14px 24px;border:0;border-radius:6px;text-decoration:none;cursor:pointer;font-size:16px}
.btn.ghost{background:none;color:var(--fg);border:1px solid #555}
.sec{padding:90px 5vw;max-width:1200px;margin:auto}h2{font:900 clamp(28px,4.5vw,52px)/1.05 var(--disp);letter-spacing:.02em;max-width:18ch;margin:0 0 36px}
h3{margin:0 0 6px}.lead{max-width:62ch;color:#ccc}.big{font-size:20px;min-height:3.2em}.note{color:var(--mut);font-size:14px}
.cards{display:grid;gap:14px}.cards.two{grid-template-columns:1fr 1fr}
.card,details{background:var(--bg2);border:1px solid #2a2c33;border-radius:10px;padding:18px;transition:.25s}.card:hover,details:hover{border-color:var(--red);transform:translateY(-3px)}
summary{cursor:pointer;font-weight:800;font-size:19px}details p{color:var(--mut);margin:8px 0 0}
.tabs{display:flex;gap:8px;margin-bottom:16px}.tabs.wrap{flex-wrap:wrap}
.tabs button{background:var(--bg2);color:var(--fg);border:1px solid #333;padding:10px 16px;border-radius:99px;cursor:pointer;font:inherit;font-size:15px}.tabs button.on{background:var(--red);color:#111;border-color:var(--red);font-weight:800}
.demo{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}svg{max-width:100%;height:auto}
#scene{background:var(--bg2);border-radius:12px}#door{transform-origin:60px 130px;transition:transform .8s}
#sealL,#sealR{transition:transform .8s}#seal{opacity:0;transition:.6s;transform:translateY(-14px)}#void,#lens{opacity:0;transition:.4s}
#scene.step1 #seal,#scene.step2 #seal,#scene.step3 #seal{opacity:1;transform:none}
#scene.step2 #door,#scene.step3 #door{transform:perspective(300px) rotateY(-22deg)}
#scene.step2 #sealL,#scene.step3 #sealL{transform:translateX(-14px) rotate(-3deg)}#scene.step2 #sealR,#scene.step3 #sealR{transform:translateX(10px) rotate(2deg)}
#scene.step2 #void,#scene.step3 #void{opacity:1}#scene.step3 #lens{opacity:1}
.pill{display:inline-block;padding:4px 14px;border-radius:99px;font-weight:800;font-size:14px;background:#1f3d2a;color:#7dffa6}.pill.bad{background:#4a1a12;color:var(--red)}
.hp{position:absolute;left:-9999px}.panel{background:var(--bg2);border-radius:14px;padding:28px}
.rail{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}.rail .card{flex:0 0 min(280px,80vw);scroll-snap-align:start;border-top:4px solid var(--c)}
.label{font-size:12px;color:var(--mut);border:1px solid #444;padding:2px 8px;border-radius:99px}
table{width:100%;border-collapse:collapse;margin:24px 0}th,td{text-align:left;padding:12px;border-bottom:1px solid #2a2c33;font-size:15px}th{color:var(--red)}
.road{list-style:none;padding:0;display:grid;gap:10px}.road li{background:var(--bg2);padding:14px 18px;border-left:4px solid #444;border-radius:6px;display:flex;justify-content:space-between;gap:12px}.road li.now{border-color:var(--red)}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px}label{display:grid;gap:6px;font-size:14px;color:var(--mut)}.full{grid-column:1/-1}
input,select,textarea{background:var(--bg2);color:var(--fg);border:1px solid #3a3d44;border-radius:6px;padding:12px;font:inherit}
footer{border-top:1px solid #2a2c33;padding:50px 5vw;color:var(--mut);font-size:14px;max-width:1200px;margin:auto}
@media(max-width:820px){.grid,.grid2,.demo{grid-template-columns:1fr}.cards.two,form{grid-template-columns:1fr}#menu{display:block;background:none;color:var(--fg);border:1px solid #555;padding:8px 14px;border-radius:6px}
#links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);padding:16px 5vw;border-bottom:1px solid #333}#links.open{display:flex}.sec{padding:60px 5vw}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.hero-seal{width:100%;height:auto;object-fit:contain}.wide{width:100%;height:auto;border-radius:14px}
.crop{background-image:url(assets/pouch-seals.webp);background-size:600% auto;aspect-ratio:297/887;width:min(150px,40%);margin:16px auto 0}
.art{display:grid;justify-items:center}.rail .crop{width:100%;margin:0 0 12px;max-width:150px}
.hero-seal{width:100%;height:auto;object-fit:contain}.wide{width:100%;height:auto;border-radius:14px}
.crop{background-image:url(assets/pouch-seals.webp);background-size:600% auto;aspect-ratio:297/887;width:min(150px,40%);margin:16px auto 0}
.art{display:grid;justify-items:center}.rail .crop{width:100%;margin:0 0 12px;max-width:150px}

/* ===== Phase 2: cinematic ===== */
:root{--bg:#050505;--bg2:#111;--mut:#A1A1AA;--red:#E50914}
@property --acc{syntax:'<color>';inherits:true;initial-value:#E50914}
body{background:#050505;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif}
h2{font:800 clamp(34px,6.4vw,92px)/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;letter-spacing:-.035em;max-width:15ch}
.sec{padding:130px 5vw}.btn{transition:transform .25s,background .25s}.btn{background:var(--red);color:#fff}
.bar{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%;z-index:30}
.nav{background:transparent;border-bottom-color:transparent;transition:background .4s,border-color .4s}.nav.solid{background:rgba(5,5,5,.8);border-bottom-color:#222}
#links a{background:linear-gradient(var(--red),var(--red)) 0 100%/0 2px no-repeat;transition:background-size .3s,color .3s;padding-bottom:3px}#links a:hover{background-size:100% 2px}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
/* hero */
.hero{display:block;position:relative;min-height:100vh;min-height:100svh;padding:0;text-align:center;overflow:hidden;background:#050505}
.brand{position:absolute;top:84px;left:0;right:0;margin:0;font:900 italic 22px var(--disp);letter-spacing:.06em;animation:fade 1.2s .1s both}.brand b{color:var(--red);margin-left:4px}
.seq{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.seq span{grid-area:1/1;font:900 italic clamp(54px,15vw,210px)/1 var(--disp);opacity:0;animation:seq 1.05s both}
.seq span:nth-child(1){animation-delay:.6s}.seq span:nth-child(2){animation-delay:1.6s;color:var(--red)}.seq span:nth-child(3){animation-delay:2.6s}
.lockup{position:absolute;top:calc(84px + 7svh);left:0;right:0;padding:0 5vw;animation:up 1.3s 3.5s both}
.lockup .slogan{font-size:clamp(30px,6.2vw,88px);margin:.1em 0 .25em}.slogan em{font-style:normal;color:var(--red)}
.lockup .sub{margin:0 auto 14px;max-width:36ch}.tag{border:0;color:var(--mut);padding:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px}
.glow{position:absolute;left:50%;bottom:-22svh;width:100vmin;height:64vmin;transform:translateX(-50%);background:radial-gradient(closest-side,#E5091466,transparent);animation:fade 3s 3.6s both}
.prod{position:absolute;left:50%;bottom:-5svh;transform:translateX(-50%) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s}
.prod img{display:block;height:50svh;width:auto;animation:emerge 2.4s 3.6s cubic-bezier(.2,.8,.2,1) both,float 7s 6s ease-in-out infinite;filter:drop-shadow(0 30px 60px #E5091455)}
@keyframes fade{from{opacity:0}}@keyframes up{from{opacity:0;transform:translateY(26px)}}
@keyframes emerge{from{opacity:0;transform:translateY(140px) scale(.86);filter:brightness(.15) blur(10px)}}
@keyframes float{50%{transform:translateY(-12px) rotate(.8deg)}}
@keyframes seq{0%{opacity:0;transform:scale(1.18);filter:blur(14px)}25%,70%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:scale(.96)}}
/* pinned scenes: --p/--a/--b/--c are set from scroll progress */
.pin{position:relative;height:320vh;--p:0;--a:0;--b:0;--c:0}.how{height:440vh}.exp{height:300vh}
.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
#intro .stick{background:radial-gradient(circle at 50% 55%,#E5091455,#050505 66%)}
.dim{position:absolute;inset:0;background:#000;opacity:calc(var(--p)*.7)}
.prod2{position:relative;transform:scale(calc(.85 + var(--p)*1.1)) rotate(calc(var(--p)*-5deg));will-change:transform}
.prod2 img{display:block;height:56svh;width:auto;-webkit-box-reflect:below 2px linear-gradient(transparent 70%,rgba(255,255,255,.18));filter:drop-shadow(0 0 70px #E5091466)}
.cap{position:absolute;left:0;right:0;bottom:9svh;margin:0;padding:0 6vw;text-align:center;font-weight:800;font-size:clamp(26px,5vw,60px);letter-spacing:-.03em;text-shadow:0 2px 30px #000}
.k1{opacity:calc(1 - var(--a));transform:translateY(calc(var(--a)*-20px))}.k2{opacity:calc(var(--a)*(1 - var(--b)));transform:translateY(calc((1 - var(--a))*20px))}.k3{opacity:var(--b);transform:translateY(calc((1 - var(--b))*20px))}
/* exploded view */
.exp .stick{grid-template-columns:1fr 1fr;gap:4vw;padding:0 6vw}
.xv{width:min(70vw,440px);aspect-ratio:3/2;perspective:1400px;justify-self:center}
.xi{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(60deg) rotateZ(-35deg) translateY(calc(var(--p)*-6%))}
.L{position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 1px #fff3,0 20px 40px #0008}
.L4{background:linear-gradient(#ececf1,#b4b4bd);transform:translateZ(0)}
.L3{background:rgba(150,175,210,.4);backdrop-filter:blur(2px);transform:translateZ(calc(var(--p)*55px))}
.L2{background:repeating-linear-gradient(45deg,#ffd100aa 0 14px,#000a 14px 28px);transform:translateZ(calc(var(--p)*110px))}
.L1{background:linear-gradient(135deg,#ff2a36,#b0060f);color:#111;display:grid;place-items:center;font:900 italic clamp(22px,5vw,46px) var(--disp);transform:translateZ(calc(var(--p)*165px))}
.lbls{list-style:none;margin:0;padding:0;display:grid;gap:22px}.lbls li{opacity:calc((var(--p) - var(--d))*5);transform:translateX(calc((1 - var(--p))*20px));color:var(--mut);font-size:15px;border-left:2px solid var(--red);padding-left:14px}
.lbls b{display:block;color:#fff;font-size:clamp(17px,2.2vw,24px)}.lbls .fine2{border:0;font-size:12px;opacity:calc((var(--p) - .65)*5)}
/* how-it-works scene */
.how .stick{grid-template-rows:auto 1fr;justify-items:center;padding-top:86px}
.wds{position:relative;width:min(92vw,900px);height:24svh;text-align:center}.wd{position:absolute;inset:0}
.wd b{display:block;font:800 clamp(44px,9vw,120px)/1 -apple-system,"SF Pro Display","Inter",Arial,sans-serif;letter-spacing:-.04em}.wd span{display:block;color:var(--mut);font-size:clamp(15px,2vw,22px);max-width:34ch;margin:8px auto 0}
.wd.a{opacity:calc(1 - var(--b)*4)}.wd.b{opacity:min(calc(var(--b)*4 - 1),calc(1 - var(--c)*4))}.wd.c{opacity:calc(var(--c)*4 - 1)}.wd.c b{color:var(--red)}
.scene{position:relative;align-self:center;width:min(92vw,calc(52svh*1.6));aspect-ratio:16/10;perspective:1000px;transform-origin:77% 50%;transform:scale(calc(1 + var(--c)*1.5));opacity:min(1,calc(1.3 - var(--c)*2.5))}
.frm{position:absolute;inset:4% 22%;border:min(1.6vw,12px) solid #2a2c32;background:#08080a;border-radius:4px}
.leaf{position:absolute;inset:7% 24%;background:linear-gradient(160deg,#454850,#25272c);transform-origin:left center;transform:rotateY(calc(var(--b)*-40deg));box-shadow:0 10px 40px #000a}
.leaf:after{content:"";position:absolute;right:7%;top:50%;width:3%;aspect-ratio:1;border-radius:50%;background:#c9c9cf}
.sw{position:absolute;aspect-ratio:3/1}.sw img{position:absolute;left:50%;top:50%;width:34.5%;height:auto;transform:translate(-50%,-50%) rotate(90deg)}
.scene .sw{width:25%;left:64.5%;top:50%;margin-top:-4.2%}
.full{opacity:calc(var(--a)*3*(1 - var(--b)*20));transform:translateY(calc((1 - var(--a))*-70px)) scale(calc(1.3 - var(--a)*.3))}
.hl{clip-path:polygon(0 0,52% 0,48% 25%,53% 50%,47% 75%,52% 100%,0 100%)}.hr{clip-path:polygon(52% 0,100% 0,100% 100%,52% 100%,47% 75%,53% 50%,48% 25%)}
.scene .hl{opacity:calc(var(--b)*20);transform:translateX(calc(var(--b)*-60%)) rotate(calc(var(--b)*-6deg))}
.scene .hr{opacity:calc(var(--b)*20);transform:translateX(calc(var(--b)*10%)) rotate(calc(var(--b)*4deg))}
.cmp{position:absolute;left:0;right:0;top:38svh;display:flex;gap:5vw;justify-content:center;opacity:calc(var(--c)*3 - 1.8);pointer-events:none}
.cmp figure{margin:0;width:min(42vw,420px)}.pair{position:relative;aspect-ratio:3/1;background:#111;border-radius:12px;border:1px solid #2a2c33}.pair .sw{inset:0;width:100%;margin:0}
.pair .d1{transform:translateX(-10%) rotate(-4deg)}.pair .d2{transform:translateX(10%) rotate(4deg)}
.cmp figcaption{text-align:center;margin-top:12px;font-weight:700}.cmp figure:last-child figcaption{color:var(--red)}
.fine{position:absolute;bottom:3svh;left:0;right:0;margin:0;text-align:center;color:var(--mut);font-size:12px;padding:0 6vw}
/* sections */
.cards details{background:none;border:0;border-bottom:1px solid #26272c;border-radius:0;padding:22px 0}.cards details:hover{transform:none;border-color:var(--red)}summary{font-size:clamp(22px,3vw,34px);letter-spacing:-.02em}
.cards.two{gap:0 40px}.card{background:none;border:0;border-top:1px solid #26272c;border-radius:0;padding:24px 0}.card:hover{transform:none;border-color:var(--red)}
.road li{background:none;border:0;border-left:2px solid #333;border-radius:0;padding:18px 24px;font-size:20px}.road li.now{border-color:var(--red)}.road li b{font-weight:700}
.slogan.small{font-size:clamp(30px,6vw,72px)}
/* industries */
.indbg{--acc:#E50914;transition:--acc .9s;background:radial-gradient(70% 60% at 28% 62%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%),#050505}
.sw2{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}.sw2 button{display:flex;align-items:center;gap:10px;background:#ffffff0d;color:#fff;border:1px solid #ffffff22;padding:10px 16px;border-radius:99px;font:inherit;font-size:15px;cursor:pointer;transition:background .3s,border-color .3s}
.sw2 i{width:16px;height:16px;border-radius:50%;background:var(--c)}.sw2 button.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 22%,transparent)}
.stage{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
.pshow{position:relative;display:grid;place-items:center;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s}
.pglow{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--acc),transparent);opacity:.45;filter:blur(30px);transition:background .9s}
#indImg{position:relative;height:min(62svh,520px);width:auto;-webkit-box-reflect:below 2px linear-gradient(transparent 72%,rgba(255,255,255,.16))}#indImg.in{animation:swap .75s cubic-bezier(.2,.8,.2,1) both}
@keyframes swap{from{opacity:0;transform:translateY(30px) scale(.92) rotateY(-24deg);filter:blur(8px)}}
.bd h3{font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.035em;color:var(--acc);margin:0 0 14px}.bd p,.bd ul,.bd h3{animation:up .7s both}.bd p:nth-of-type(2){animation-delay:.08s}.bd p:nth-of-type(3){animation-delay:.16s}.bd ul{animation-delay:.24s}
.bd ul{padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}.bd li{border:1px solid var(--acc);color:#fff;padding:5px 14px;border-radius:99px;font-size:14px}
.bd svg{max-width:120px;opacity:.7;margin-top:6px}.rail img{display:block;height:220px;width:auto;margin:0 auto 14px}
@media(max-width:820px){.pin{height:260vh}.how{height:380vh}.exp{height:240vh}.exp .stick{grid-template-columns:1fr;align-content:center;gap:3svh}.stage{grid-template-columns:1fr}.prod img{height:40svh}.prod{bottom:-4svh}.lockup{top:calc(84px + 3svh)}#indImg{height:40svh}.cmp{top:34svh;flex-direction:column;align-items:center;gap:3svh}.cmp figure{width:min(70vw,320px)}.sec{padding:80px 5vw}.lbls{gap:12px;padding:0 4vw}.xv{width:min(62vw,320px)}.glow{filter:none}}
.rm .seq{display:none}.rm .rv{opacity:1;transform:none}.rm .pin{height:auto}.rm .stick{position:relative;height:auto;min-height:100svh;padding:90px 0 40px}.rm .pin{--p:1;--a:1;--b:1;--c:1}
.lockup .slogan{font-size:clamp(28px,4.8vw,70px)}
.prod{bottom:-9svh}.prod img{height:44svh}
.scene .sw{width:34%;left:60%;margin-top:-5.7%}
@media(max-width:820px){.prod{bottom:-4svh}.prod img{height:40svh}.lockup .slogan{font-size:clamp(28px,8vw,44px)}}

/* ===== Quality pass ===== */
:root{--disp:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--ui:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif}
body,h2,.wd b{font-family:var(--ui)}h2,.wd b{font-weight:800}
.slogan,.brand,.seq span{text-transform:uppercase;font-weight:900;font-style:italic}.lockup .slogan{font-size:clamp(34px,6.2vw,92px);letter-spacing:.01em}.seq span{letter-spacing:.01em}
.logo{font-style:italic;letter-spacing:.05em}.brand{font-size:26px}
/* 1. intro scene: one caption area, sequential windows, product lifted clear of the text */
.prod2{margin-top:-12svh;transform:scale(calc(.8 + var(--p)*.6)) rotate(calc(var(--p)*-4deg))}.prod2 img{height:50svh}
.caps{position:absolute;left:0;right:0;bottom:0;height:26svh;display:grid;place-items:center;padding:0 6vw;background:linear-gradient(transparent,#050505 55%)}
.caps p{grid-area:1/1;margin:0;max-width:20ch;text-align:center;font:800 clamp(26px,4.6vw,56px)/1.05 var(--ui);letter-spacing:-.035em}
.caps .k1{opacity:calc(2 - var(--p)*6);transform:none}.caps .k2{opacity:min(calc(var(--p)*6 - 2),calc(4 - var(--p)*6));transform:none}.caps .k3{opacity:calc(var(--p)*6 - 4);transform:none}
/* 4. door scene: wall light, panelled door, lit opening, floor shadow */
.scene{filter:drop-shadow(0 30px 50px #000a)}
.scene:before{content:"";position:absolute;inset:-6% 8%;background:radial-gradient(60% 55% at 50% 45%,#ffffff12,transparent 70%)}
.scene:after{content:"";position:absolute;left:20%;right:20%;bottom:-3%;height:7%;background:radial-gradient(closest-side,#000d,transparent)}
.frm{background:radial-gradient(circle at 78% 50%,rgba(255,196,140,calc(var(--b)*.4)),#050506 72%);border-color:#34363d;box-shadow:inset 0 0 40px #000}
.leaf{background:linear-gradient(100deg,#4d5058,#2c2e34 60%,#212328)}
.leaf:before{content:"";position:absolute;inset:9% 14%;border:1px solid #ffffff1c;box-shadow:inset 0 0 30px #0007,0 1px 0 #ffffff10}
.leaf:after{width:3.4%;background:radial-gradient(circle at 35% 30%,#fff,#9a9aa3 60%,#55565c);box-shadow:0 2px 8px #000}
.scene .sw img{filter:drop-shadow(0 6px 12px #000b)}
/* 5. lower page: composed vision, contact and roadmap */
#about{text-align:center;max-width:none;padding:160px 5vw;background:radial-gradient(50% 60% at 50% 55%,#E5091430,transparent 70%)}
#about h2,#about .lead{margin-left:auto;margin-right:auto}#about h2{max-width:14ch}#about .lead{font-size:clamp(17px,2vw,22px);color:var(--mut)}
#about .slogan.small{font-size:clamp(40px,8.5vw,130px);line-height:.95;margin-top:.5em}
footer .slogan.small{font-size:clamp(22px,3vw,34px)}
#contact{display:grid;grid-template-columns:1fr 1.1fr;gap:0 6vw;align-items:start}#contact h2,#contact .lead{grid-column:1}#contact form{grid-column:2;grid-row:1/span 3;max-width:none;background:#ffffff08;border:1px solid #ffffff18;border-radius:20px;padding:28px;backdrop-filter:blur(10px)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px #E5091433}.btn.full{padding:16px}
.road{position:relative;padding-left:30px;gap:0}.road:before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:2px;background:linear-gradient(var(--red) 0,#E5091400 22%),#2a2b30}
.road li{position:relative;color:var(--mut);border:0;padding:20px 0;border-bottom:1px solid #1d1e22}.road li b{color:#fff}.road li:before{content:"";position:absolute;left:-30px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#050505;border:2px solid #3a3b41}
.road li.now{color:var(--red);font-weight:700}.road li.now:before{background:var(--red);border-color:var(--red);box-shadow:0 0 14px var(--red)}
@media(max-width:820px){#contact{grid-template-columns:1fr}#contact form{grid-column:1;grid-row:auto;padding:20px}#about{padding:100px 5vw}.prod2 img{height:42svh}.caps{height:24svh}.lockup .slogan{font-size:clamp(34px,10vw,52px)}.brand{font-size:22px}}
.rm .caps p{grid-area:auto}.rm .caps{position:relative;display:block;height:auto}.rm .caps .k1,.rm .caps .k2{display:none}.rm .caps .k3{opacity:1}
#contact h2{font-size:clamp(34px,4.6vw,68px);max-width:11ch}#about .slogan.small{font-size:clamp(34px,7vw,110px)}

/* ===== Phase 3 ===== */
html:not(.js) .pin{height:auto;--p:1;--a:1;--b:1;--c:1}html:not(.js) .stick{position:relative;height:auto;min-height:100svh}
/* Scene B: technical annotations + light sweep across the real seal image */
.stick{--hw:12svh}.an{position:absolute;max-width:190px;font-size:13px;line-height:1.35;color:var(--mut);opacity:calc((var(--p) - var(--d,.12))*8);transform:translateY(calc((1 - var(--p))*14px));pointer-events:none}
.an b{display:block;color:#fff;font-size:15px}.an i{position:absolute;top:.5em;width:28px;height:1px;background:var(--red)}.an i:after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.a1,.a3{right:calc(50% + var(--hw) + 46px);text-align:right}.a1 i,.a3 i{left:calc(100% + 8px)}.a1 i:after,.a3 i:after{right:-2px}
.a2,.a4{left:calc(50% + var(--hw) + 46px)}.a2 i,.a4 i{right:calc(100% + 8px)}.a2 i:after,.a4 i:after{left:-2px}
.a1{top:12svh}.a2{top:25svh;--d:.2}.a3{top:50svh;--d:.32}.a4{top:61svh;--d:.42}
.prod2:after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:url(assets/pouch-red.webp) center/contain no-repeat;mask:url(assets/pouch-red.webp) center/contain no-repeat;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%) 0 0/300% 100%;background-position:calc(120% - var(--p)*140%) 0;mix-blend-mode:overlay}
/* Scene C-E: verdict line */
.verdict{position:absolute;left:0;right:0;bottom:9svh;margin:0;padding:0 8vw;text-align:center;font:800 clamp(18px,2.4vw,30px)/1.2 var(--ui);letter-spacing:-.02em;opacity:calc(var(--c)*3 - 2)}
/* Exploded view: film lifts, tamper layer appears, adhesive separates, liner drops */
.xi{transform:rotateX(60deg) rotateZ(-35deg) translateY(calc(var(--p)*-2%))}
.L1{transform:translateZ(calc(var(--p)*190px))}.L2{opacity:calc(.35 + var(--p)*3);transform:translateZ(calc(var(--p)*95px))}.L3{transform:translateZ(calc(var(--p)*-20px))}.L4{transform:translateZ(calc(var(--p)*-120px))}
/* continuity: soft section edges, parallax, headline reveal */
.indbg{-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.wide{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);will-change:transform}
h2.rv{letter-spacing:-.06em;filter:blur(8px)}h2.rv.in{letter-spacing:-.035em;filter:none;transition:opacity 1s,transform 1s cubic-bezier(.2,.8,.2,1),letter-spacing 1.2s cubic-bezier(.2,.8,.2,1),filter 1s}
/* selector: exit animation + touch targets */
#indImg.out{animation:outimg .28s ease-in forwards}@keyframes outimg{to{opacity:0;transform:translateY(-26px) scale(.94) rotateY(20deg);filter:blur(6px)}}
.bd{transition:opacity .25s,transform .25s}.bd.out{opacity:0;transform:translateY(-12px)}.sw2 button{min-height:46px}
@media(max-width:820px){.stick{--hw:10svh}.an{max-width:92px;font-size:11px}.an b{font-size:12px}.an i{width:14px}.a1,.a3{right:calc(50% + var(--hw) + 24px)}.a2,.a4{left:calc(50% + var(--hw) + 24px)}h2.rv{filter:none}.sw2{gap:8px}.sw2 button{flex:1 1 44%;justify-content:center}}
.rm .an{opacity:1;transform:none}.rm .verdict{opacity:1}.rm .px{transform:none!important}
input,select,textarea{min-width:0;max-width:100%;width:100%}label{min-width:0}
@media(max-width:820px){#contact,form{grid-template-columns:minmax(0,1fr)}}

/* ===== Phase 4 ===== */
.tl{list-style:none;margin:48px 0 0;padding:0 0 0 40px;position:relative;--prog:1}
.tl:before,.tl:after{content:"";position:absolute;left:7px;top:8px;width:2px}.tl:before{bottom:8px;background:#26272c}
.tl:after{height:calc((100% - 16px)*var(--prog));background:var(--red);box-shadow:0 0 12px #E5091488}
.tl li{position:relative;padding:0 0 40px;--c:#8a8d96}.tl li:before{content:"";position:absolute;left:-40px;top:4px;width:16px;height:16px;border-radius:50%;background:#050505;border:2px solid var(--c);z-index:1}
.tl li[data-s=done]{--c:#6f9c7a}.tl li[data-s=done]:before{background:var(--c)}.tl li[data-s=prog]{--c:#E50914}.tl li[data-s=prog]:before{box-shadow:0 0 14px var(--c)}.tl li[data-s=plan]{--c:#8a8d96}.tl li[data-s=fut]{--c:#55575e}.tl li[data-s=fut] b{color:#8d9098}
.st{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);border:1px solid var(--c);padding:2px 12px;border-radius:99px;margin-bottom:10px}
.tl li b{display:block;font:800 clamp(24px,3.6vw,44px)/1.08 var(--ui);letter-spacing:-.035em}.tl li p{color:var(--mut);max-width:62ch;margin:10px 0 0}
.tl .gate{--c:#fff;border-top:1px dashed #44464d;padding:22px 0 40px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}.tl .gate:before{display:none}
.dev,.specs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:5vw;margin-top:48px;align-items:start}
.dtabs button{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid #26272c;color:#6d7078;padding:22px 0;min-height:48px;font:800 clamp(22px,3vw,36px)/1.1 var(--ui);letter-spacing:-.03em;cursor:pointer;transition:color .3s,border-color .3s}.dtabs button.on{color:#fff;border-color:var(--red)}
.dpn{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:28px;align-items:center}.dpn p{font-size:clamp(17px,2vw,22px);color:#d4d4d8;margin:0 0 16px}.dpn img{width:100%;max-height:52svh;object-fit:contain;filter:drop-shadow(0 20px 40px #E5091444)}.dpn:not(:has(img)){grid-template-columns:1fr}
html.js .dpn{display:none}html.js .dpn.on{display:grid;animation:up .5s both}.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.chips li{border:1px solid #ffffff2a;border-radius:99px;padding:6px 14px;font-size:14px;color:#d4d4d8}
.zn{fill:#ffffff08;stroke:#ffffff44;stroke-width:1.5;transition:fill .35s,stroke .35s}
.specs[data-z=all] .zn.t,.specs[data-z=all] .zn.b,.specs[data-z=tab] .zn.t,.specs[data-z=body] .zn.b,.specs[data-z=brk] .zn.k,.specs[data-z=adh] .zn.a{fill:#E5091433;stroke:#E50914}
.specs svg{width:100%;max-height:68svh;display:block}.specs{align-items:center;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.srow{display:flex;justify-content:space-between;gap:16px;width:100%;min-height:52px;align-items:center;background:none;border:0;border-bottom:1px solid #26272c;color:var(--mut);padding:14px 0;font:inherit;font-size:clamp(16px,1.8vw,20px);cursor:pointer;text-align:left;transition:color .3s,border-color .3s}.srow b{color:#fff;text-align:right}.srow:hover,.srow.on{color:#fff}.srow.on{border-color:var(--red)}
.rm .tl{--prog:1}
@media(max-width:820px){.dev,.specs{grid-template-columns:minmax(0,1fr);gap:28px}.dpn{grid-template-columns:minmax(0,1fr)}.dpn img{max-height:38svh}.specs svg{max-height:52svh}.dtabs{display:flex;overflow-x:auto;gap:18px}.dtabs button{width:auto;white-space:nowrap;font-size:20px;padding:14px 0}.srow b{font-size:15px}}
.specs[data-z=body] .zn.a,.specs[data-z=body] .zn.k{fill:#E5091426;stroke:#E5091466}

/* ===== Phase 5 ===== */
.core{height:360vh}.test{height:260vh}
.core .stick{align-content:center;text-align:center;padding:0 6vw}.core .wds{position:relative;z-index:1;width:min(92vw,1100px);height:42svh}
.core .wd{display:grid;align-content:center}.core .wd b{font-size:clamp(38px,8vw,112px);line-height:.98;color:#fff;letter-spacing:-.04em}.core .wd.c b{color:#fff}.core .wd span{font-size:clamp(17px,2.2vw,26px);max-width:30ch}
.cimg{position:absolute;height:74svh;width:auto;opacity:.2;transform:scale(calc(.85 + var(--p)*.35)) rotate(calc(var(--p)*6deg));filter:drop-shadow(0 0 80px #E50914aa)}
.eyebrow{position:absolute;top:calc(86px + 3svh);margin:0;color:var(--mut);letter-spacing:.2em;text-transform:uppercase;font-size:13px}
.tsv{height:62svh;width:auto;max-width:90vw;overflow:visible;filter:drop-shadow(0 30px 50px #E5091433)}.th{transform-box:view-box;transform-origin:115px 170px}
.th.t{transform:translateY(calc(var(--p)*-30px)) rotate(calc(var(--p)*-5deg))}.th.b{transform:translateY(calc(var(--p)*30px)) rotate(calc(var(--p)*3deg))}
.result{position:absolute;bottom:11svh;left:0;right:0;text-align:center;opacity:calc(var(--p)*3 - 1.2);transform:translateY(calc((1 - var(--p))*20px))}
.result b{display:block;font:800 clamp(26px,5.4vw,72px)/1 var(--ui);letter-spacing:-.04em;color:#7fb28a}.result span{color:var(--mut);font-size:clamp(14px,1.8vw,20px)}
.lh{font:800 clamp(22px,3vw,34px) var(--ui);letter-spacing:-.03em;margin:0 0 16px}.nl{list-style:none;padding:0;margin:0;max-width:60ch}.nl li{padding:14px 0;border-bottom:1px solid #26272c;color:var(--mut)}
.rtabs{display:flex;margin:44px 0 36px;border-bottom:1px solid #26272c}.rtabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:#6d7078;font:800 clamp(22px,3.6vw,44px) var(--ui);letter-spacing:-.03em;padding:18px 0;min-height:48px;cursor:pointer;transition:color .3s,border-color .3s}.rtabs button.on{color:#fff;border-color:var(--red)}
.evo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5vw;align-items:center}
.evv{position:relative;background:radial-gradient(closest-side,#E5091433,transparent);border-radius:20px;padding:10px}.evv svg,.mini svg{width:100%;height:auto;display:block;max-height:62svh}
.evv .tag2{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:12px;color:var(--mut);letter-spacing:.1em;text-transform:uppercase}
.f-perf,.f-align{opacity:0;transition:opacity .7s}.rev[data-r="3"] .f-perf,.rev[data-r="4"] .f-perf,.rev[data-r="4"] .f-align{opacity:1}.rev[data-r="3"] .f-perf,.rev[data-r="4"] .f-align{filter:drop-shadow(0 0 5px #fff)}
.evt h3{font:800 clamp(30px,4.4vw,56px)/1.05 var(--ui);letter-spacing:-.035em;margin:12px 0 18px}.evt h4{margin:22px 0 6px;color:var(--mut);font-size:12px;letter-spacing:.14em;text-transform:uppercase}.evt p{font-size:clamp(17px,1.9vw,22px);margin:0;color:#e4e4e7}.evt ul{margin:0;padding:0;list-style:none}.evt li{padding:9px 0;border-bottom:1px solid #26272c;color:#d4d4d8}
.evt.swp{animation:up .55s both}
.alg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:center;margin-top:44px}.alg svg{width:100%;max-height:70svh}
.seal{transition:transform 1s cubic-bezier(.2,.8,.2,1)}.alg.wo .seal{transform:translateY(32px)}.gd{transition:opacity .6s}.alg.wo .gd{opacity:0}
.tabs2{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.tabs2 button{min-height:46px;background:#ffffff0d;color:#fff;border:1px solid #ffffff22;padding:10px 18px;border-radius:99px;font:inherit;font-size:15px;cursor:pointer}.tabs2 button.on{background:var(--red);border-color:var(--red)}
.srow.more{display:none}.srows.open .srow.more{display:flex}.smore{background:none;border:0;color:var(--red);font:inherit;font-weight:700;padding:16px 0;cursor:pointer;min-height:48px}
.jr{margin-top:40px}.je{background:none;border:0;border-top:1px solid #26272c;border-radius:0;padding:0}.je:hover{transform:none}.je summary{display:flex;gap:24px;align-items:center;padding:24px 0;list-style:none}.je summary::-webkit-details-marker{display:none}
.je summary b{display:block;font:800 clamp(24px,3.4vw,40px)/1.1 var(--ui);letter-spacing:-.03em;margin:8px 0}.je em{font-style:normal;color:var(--mut);font-size:16px}.je p{color:#d4d4d8;max-width:62ch;margin:0 0 26px 134px}.je .st{--c:#8a8d96}
.mini{flex:0 0 110px;height:130px;display:grid;place-items:center}.mini svg,.mini img{height:130px;width:auto;max-width:100%}
@media(max-width:820px){.evo,.alg{grid-template-columns:minmax(0,1fr);gap:24px}.rtabs button{font-size:22px}.evv svg{max-height:44svh}.je p{margin-left:0}.je summary{gap:16px}.mini{flex-basis:70px;height:90px}.mini svg,.mini img{height:90px}.core .wds{height:48svh}.tsv{height:52svh}.result{bottom:8svh}}
.fs{min-height:1.4em;margin:0}.fs.ok{color:#7fb28a}.fs.err{color:#ff7b7b}[aria-invalid="true"]{border-color:var(--red)!important}.btn:disabled{opacity:.6;cursor:wait}