:root{
  --bg:#080b10;
  --surface:#0d1118;
  --ink:#f6f7f2;
  --muted:#a1a8b5;
  --line:rgba(255,255,255,.12);
  --cyan:#73e8ff;
  --blue:#4678ff;
  --violet:#9b7bff;
  --lime:#b8ff77;
  --coral:#ff8a77;
  --radius:26px;
  --shadow:0 36px 120px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background:
    radial-gradient(circle at 18% 0%,rgba(115,232,255,.18),transparent 26rem),
    radial-gradient(circle at 90% 15%,rgba(155,123,255,.18),transparent 28rem),
    linear-gradient(180deg,#08111b 0%,#080b10 42%,#080b10 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
main,header{position:relative;z-index:2}
.section-shell{width:min(1220px,calc(100% - 32px));margin:0 auto}
.water-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.38}
.page-grain{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.site-header{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;
  width:min(1180px,calc(100% - 24px));height:68px;padding:0 14px 0 18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(8,11,16,.64);
  backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(0,0,0,.24);
  transition:height .25s ease,top .25s ease,background .25s ease;
}
.site-header.scrolled{top:10px;height:58px;background:rgba(8,11,16,.84)}
.brand{display:flex;align-items:center;gap:10px;font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.04em}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#f5f7fb;color:#080b10;font-size:12px;letter-spacing:-.04em}
.nav-links{display:flex;gap:26px;color:#c0c6d1;font-weight:700;font-size:14px}
.nav-links a{opacity:.78;transition:.2s}.nav-links a:hover{opacity:1;color:#fff}
.nav-cart{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:#f5f7fb;color:#080b10;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.nav-cart b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#080b10;color:#fff}

.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:#c6d3df;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.eyebrow span{width:42px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 22px;border-radius:999px;font-weight:900}
.btn.primary{background:#f5f7fb;color:#080b10;box-shadow:0 18px 45px rgba(115,232,255,.14)}
.btn.secondary{background:rgba(255,255,255,.06);border:1px solid var(--line)}

.intro-video{height:150vh;margin-bottom:-38vh;position:relative;z-index:4;pointer-events:none}
.intro-video::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#080b10 0%,rgba(8,11,16,.84) 55%,rgba(8,11,16,0) 100%)}
.intro-video-card{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding:86px 16px 30px;will-change:transform}
.video-frame{position:relative;width:min(1060px,calc(100vw - 28px));aspect-ratio:16/9;border-radius:var(--intro-radius,34px);overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0c1118;box-shadow:0 55px 150px rgba(0,0,0,.52)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.video-art{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 25% 18%,rgba(115,232,255,.28),transparent 26rem),radial-gradient(circle at 78% 74%,rgba(255,138,119,.22),transparent 24rem),linear-gradient(135deg,#0a111b,#111827 50%,#070b12)}
.video-art::after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 0 44%,rgba(255,255,255,.12) 50%,transparent 57%);animation:lightSweep 4.6s ease-in-out infinite}
.video-tee{position:absolute;left:50%;top:50%;width:220px;height:260px;filter:drop-shadow(0 32px 45px rgba(0,0,0,.36));animation:videoFloat 5.8s ease-in-out infinite}
.video-tee::before{content:"";position:absolute;inset:0;clip-path:polygon(23% 6%,34% 0,44% 8%,56% 8%,66% 0,77% 6%,90% 20%,81% 30%,79% 100%,21% 100%,19% 30%,10% 20%);border-radius:40px;background:linear-gradient(180deg,var(--a),var(--b))}
.video-tee span{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-family:Archivo,sans-serif;font-weight:900;letter-spacing:.18em;color:#071119}
.tee-a{--a:#7defff;--b:#3978ff;margin-left:-320px;margin-top:-120px;transform:rotate(-12deg)}
.tee-b{--a:#a98cff;--b:#614dff;margin-left:-85px;margin-top:-150px;animation-delay:-1.2s}
.tee-c{--a:#ff9e83;--b:#ff6e8a;margin-left:170px;margin-top:-80px;transform:rotate(10deg);animation-delay:-2.1s}
.video-scan{position:absolute;left:0;right:0;top:-20%;height:28%;background:linear-gradient(180deg,transparent,rgba(115,232,255,.16),transparent);filter:blur(5px);animation:scan 3.4s linear infinite}
.video-overlay{position:absolute;left:22px;right:22px;bottom:22px;display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-radius:20px;background:rgba(8,11,16,.58);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px)}
.video-overlay span{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.14em}.video-overlay b{background:#f5f7fb;color:#080b10;padding:9px 12px;border-radius:999px;font-size:12px;text-transform:uppercase}

.hero{min-height:100vh;padding-top:116px;padding-bottom:56px;display:grid;grid-template-columns:1.02fr .98fr;gap:34px;align-items:center}
.hero h1,.drop-intro h2,.section-head h2,.final-cta h2{font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.07em;line-height:.92}
.hero h1{font-size:clamp(3.3rem,6.4vw,6.2rem);margin:0;max-width:11ch}
.hero-text{max-width:62ch;margin:24px 0 28px;color:var(--muted);font-size:17px;line-height:1.75}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.proof-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.proof-row span{padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:900;color:#d8e3ee;text-transform:uppercase;letter-spacing:.08em}
.hero-showcase{position:relative;min-height:620px}
.hero-video-dock{position:absolute;top:22px;right:22px;width:min(300px,44%);aspect-ratio:16/10;border-radius:22px;border:1px solid rgba(255,255,255,.12);opacity:.001}
.hero-product-card{height:100%;min-height:620px;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;position:relative;perspective:1000px}
.hero-product-card::before{content:"";position:absolute;inset:20% -20% -30%;background:radial-gradient(circle,rgba(115,232,255,.22),transparent 58%);filter:blur(20px)}
.hero-card-copy{position:relative;z-index:2;padding:28px}.hero-card-copy span{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#bcd0df}.hero-card-copy h2{font-family:Archivo,sans-serif;font-size:42px;letter-spacing:-.06em;margin:10px 0 8px}.hero-card-copy p{margin:0;color:var(--muted)}
.hero-card-footer{position:relative;z-index:2;margin:24px;padding:16px;border-radius:22px;background:rgba(8,11,16,.52);border:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}.hero-card-footer span{font-weight:900;font-size:24px}.hero-card-footer button{border:0;border-radius:999px;background:#f5f7fb;color:#080b10;padding:12px 16px;font-weight:900}

.hero-tee,.tee-model{position:relative;justify-self:center;align-self:center;width:min(340px,72%);aspect-ratio:1/1.25;filter:drop-shadow(0 28px 35px rgba(0,0,0,.30));transform-style:preserve-3d}
.hero-tee{animation:gentleFloat 5s ease-in-out infinite}
.tee-body{position:absolute;inset:0;clip-path:polygon(23% 6%,34% 0,44% 8%,56% 8%,66% 0,77% 6%,90% 20%,81% 30%,79% 100%,21% 100%,19% 30%,10% 20%);border-radius:46px;background:linear-gradient(180deg,var(--a),var(--b));box-shadow:inset 0 -28px 34px rgba(0,0,0,.16)}
.tee-print{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:Archivo,sans-serif;font-weight:900;letter-spacing:.16em;font-size:clamp(22px,3vw,36px);color:#081119}.tee-print.light{color:#f7f8fb}
.cyan{--a:#77efff;--b:#3477ff}.violet{--a:#aa8dff;--b:#6151ff}.lime{--a:#bcff80;--b:#36c975}.coral{--a:#ff9a7d;--b:#ff6e8d}.noir{--a:#2a2d35;--b:#08090d}

.brand-strip{overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.strip-track{display:flex;width:max-content;gap:28px;padding:14px 0;animation:marquee 24s linear infinite;color:#dce5ed;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.14em}
.strip-track span{display:flex;gap:28px;align-items:center}.strip-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan)}

.drop-section{padding:92px 0 40px}
.drop-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.drop-intro h2{font-size:clamp(2.8rem,5.5vw,5.4rem);max-width:11ch;margin:0}
.drop-progress{min-width:min(410px,100%)}.progress-bar{height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.progress-bar i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet))}
.drop-progress p{display:flex;justify-content:flex-end;align-items:flex-end;gap:6px;margin:10px 0 0;font-weight:900}.drop-progress b{font-size:30px}.drop-progress span{color:var(--muted)}
.stack-track{height:530vh;position:relative}.stack-pin{position:sticky;top:0;min-height:100vh;display:grid;place-items:center;padding:86px 0 34px}
.product-stack{position:relative;width:min(1460px,calc(100% - 24px));height:80vh;min-height:650px;perspective:1400px}
.product-panel{--x:0px;--y:0px;--scale:1;--rot:0deg;--opacity:1;--blur:0px;--z:1;position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#07080d;border:1px solid rgba(255,255,255,.1);box-shadow:0 38px 130px rgba(0,0,0,.44);padding:16px;display:flex;flex-direction:column;transform:translate3d(var(--x),var(--y),0) scale(var(--scale)) rotateZ(var(--rot));opacity:var(--opacity);filter:blur(var(--blur));z-index:var(--z);will-change:transform,opacity,filter}
.product-panel::after{content:"";position:absolute;left:28px;right:28px;bottom:-20px;height:30px;background:rgba(0,0,0,.45);filter:blur(14px);border-radius:50%;z-index:-1}
.panel-bg{position:absolute;inset:0;opacity:.12}.panel-bg.blue{background:radial-gradient(circle at 48% 45%,#77eaff,transparent 34rem)}.panel-bg.purple{background:radial-gradient(circle at 48% 45%,#a98cff,transparent 34rem)}.panel-bg.green{background:radial-gradient(circle at 48% 45%,#b8ff77,transparent 34rem)}.panel-bg.coral{background:radial-gradient(circle at 48% 45%,#ff8a77,transparent 34rem)}.panel-bg.black{background:radial-gradient(circle at 48% 45%,#a0a5b2,transparent 34rem)}
.panel-top{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding-bottom:12px}.panel-top>span{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#cbd8e8}.panel-top button{border:0;background:#f5f7fb;color:#080b10;border-radius:10px;padding:12px 15px;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.thumbs{display:flex;justify-content:center;gap:8px}.thumbs i{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:var(--t);display:block}.thumbs .active{outline:2px solid rgba(255,255,255,.35)}.thumbs .blue{--t:linear-gradient(135deg,#77eaff,#3477ff)}.thumbs .navy{--t:linear-gradient(135deg,#375a88,#142642)}.thumbs .ice{--t:linear-gradient(135deg,#fff,#dff8ff)}.thumbs .purple{--t:linear-gradient(135deg,#aa8dff,#6151ff)}.thumbs .plum{--t:linear-gradient(135deg,#7452d8,#31205f)}.thumbs .cream{--t:linear-gradient(135deg,#fff6ea,#e6d6bf)}.thumbs .green{--t:linear-gradient(135deg,#bcff80,#36c975)}.thumbs .mint{--t:linear-gradient(135deg,#caffef,#45d7a2)}.thumbs .coral{--t:linear-gradient(135deg,#ff9a7d,#ff6e8d)}.thumbs .peach{--t:linear-gradient(135deg,#ffd0a0,#ff9e62)}.thumbs .black{--t:linear-gradient(135deg,#2a2d35,#08090d)}.thumbs .graphite{--t:linear-gradient(135deg,#6d717d,#2c3038)}
.panel-grid{position:relative;z-index:1;display:grid;grid-template-columns:.92fr 1.65fr .98fr;gap:14px;flex:1;min-height:0}.panel-story{padding:20px 12px 16px;display:flex;flex-direction:column;justify-content:space-between}.panel-story h3{font-family:Archivo,sans-serif;font-size:clamp(2.7rem,4.6vw,4.9rem);line-height:.9;letter-spacing:-.09em;margin:0;max-width:9.5ch}.panel-story p{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin:0;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#d8e5f2}
.panel-visual{border-radius:10px;display:grid;place-items:end center;overflow:hidden;background:#557da3;position:relative}.product-panel:nth-child(2) .panel-visual{background:#7a70b6}.product-panel:nth-child(3) .panel-visual{background:#6fa67e}.product-panel:nth-child(4) .panel-visual{background:#b97872}.product-panel:nth-child(5) .panel-visual{background:#555965}.panel-visual::before{content:"";position:absolute;left:18%;right:18%;bottom:4%;height:14%;background:radial-gradient(ellipse at center,rgba(0,0,0,.38),transparent 70%);filter:blur(15px)}
.tee-model{align-self:end;width:min(410px,88%);margin-bottom:-2px;aspect-ratio:1/1.28;animation:gentleFloat 5.8s ease-in-out infinite}.tee-model .size-tag{position:absolute;left:50%;top:58%;transform:translateX(-50%);padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);font-size:11px;font-weight:900;letter-spacing:.14em;color:#fff}
.panel-buy{padding:14px 0 16px;display:flex;flex-direction:column;justify-content:flex-end}.product-copy{padding:25px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}.product-copy h4{font-family:Archivo,sans-serif;font-size:clamp(2rem,3vw,3.5rem);line-height:.95;letter-spacing:-.08em;margin:0 0 12px}.product-copy p{margin:0;color:#bac7d6;line-height:1.55;font-size:15px}
.price-line{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}.price-line b{font-size:21px}.price-line span{font-size:12px;font-weight:900;letter-spacing:.12em;color:#d8e5f2}.size-row{display:flex;gap:8px;padding:14px 0}.size-row button{width:42px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-weight:900}.size-row button.active{background:#f5f7fb;color:#080b10}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cart-btn,.learn-btn{min-height:54px;border-radius:10px;display:grid;place-items:center;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.cart-btn{background:#f5f7fb;color:#080b10}.learn-btn{background:rgba(255,255,255,.12)}
.color-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px}.color-line div{display:flex;gap:8px}.color-line i{width:13px;height:13px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.12)}.color-line span{text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.12em;color:#d8e5f2}

.quality{padding:90px 0 50px}.section-head{text-align:center;max-width:840px;margin:0 auto 36px}.section-head .eyebrow{justify-content:center}.section-head h2{font-size:clamp(2.6rem,5vw,4.8rem);margin:0 0 14px}.section-head p{margin:0 auto;color:var(--muted);line-height:1.7;max-width:66ch}.quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.quality-card{padding:28px;border-radius:26px;border:1px solid var(--line);background:rgba(255,255,255,.045);box-shadow:0 24px 80px rgba(0,0,0,.24)}.quality-card b{display:block;color:var(--cyan);margin-bottom:32px}.quality-card h3{font-family:Archivo,sans-serif;font-size:28px;letter-spacing:-.05em;margin:0 0 10px}.quality-card p{margin:0;color:var(--muted);line-height:1.7}
.final-cta{margin-bottom:70px;padding:38px;border-radius:30px;background:linear-gradient(135deg,rgba(115,232,255,.13),rgba(155,123,255,.12));border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:20px}.final-cta h2{font-size:clamp(2rem,4.2vw,3.8rem);max-width:14ch;margin:0}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}
@keyframes marquee{to{transform:translateX(-50%)}}@keyframes gentleFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}@keyframes lightSweep{0%,100%{transform:translateX(-40%) rotate(8deg)}50%{transform:translateX(42%) rotate(8deg)}}@keyframes videoFloat{0%,100%{translate:0 0}50%{translate:0 -22px}}@keyframes scan{to{top:112%}}

@media (max-width:1050px){
  .nav-links{display:none}
  .hero{grid-template-columns:1fr;gap:24px}
  .hero-showcase{min-height:560px}.hero-product-card{min-height:560px}
  .drop-intro{display:block}.drop-progress{margin-top:24px}
  .stack-track{height:620vh}.product-stack{height:74vh;min-height:640px}
  .panel-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .panel-story{padding:10px 8px}.panel-story h3{font-size:clamp(2rem,5vw,3.4rem);max-width:15ch}.panel-story p{padding-top:12px}
  .panel-visual{min-height:250px}.tee-model{width:min(260px,78%)}
  .panel-buy{padding:0 8px 8px}.product-copy{padding:16px 0}.quality-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .site-header{top:10px;height:58px}.brand{font-size:14px}.brand-mark{width:34px;height:34px}.nav-cart{padding:9px 11px}
  .intro-video{height:130vh;margin-bottom:-28vh}.intro-video-card{padding-top:78px}.video-frame{width:calc(100vw - 22px);aspect-ratio:10/14;border-radius:var(--intro-radius,26px)}.video-tee{width:145px;height:178px}.tee-a{margin-left:-145px;margin-top:-115px}.tee-b{margin-left:-72px;margin-top:-30px}.tee-c{margin-left:22px;margin-top:-112px}.video-overlay{left:12px;right:12px;bottom:12px}
  .hero{padding-top:98px}.hero h1{font-size:3.05rem}.hero-text{font-size:15px}.hero-showcase{min-height:480px}.hero-product-card{min-height:480px}.hero-card-copy h2{font-size:32px}.hero-tee{width:230px}
  .drop-section{padding-top:70px}.drop-intro h2{font-size:2.55rem}.product-stack{width:calc(100% - 10px);height:75vh;min-height:650px}.product-panel{padding:10px;border-radius:16px}.panel-top{grid-template-columns:1fr auto}.thumbs{grid-column:1/-1;justify-content:flex-start}.panel-story h3{font-size:1.8rem;max-width:100%}.product-copy h4{font-size:1.8rem}.product-copy p{font-size:14px}.price-line{padding:14px 0}.action-row{gap:8px}.cart-btn,.learn-btn{min-height:50px;font-size:11px}.final-cta{display:block}.final-cta .btn{margin-top:20px}
}
@media (max-width:460px){.hero h1{font-size:2.65rem}.product-stack{height:74vh;min-height:620px}.panel-visual{min-height:215px}.tee-model{width:220px}.panel-story h3{font-size:1.55rem}.panel-story p{font-size:10px}.product-copy h4{font-size:1.55rem}.size-row button{width:38px}.color-line{display:block}.color-line span{display:block;margin-top:10px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.water-canvas{display:none}}


/* === STABLE ANIMATION PATCH ===
   Previous animations were too aggressive. This patch removes the blunders:
   no over-scaling, no weird rotation, no intro video flying across the screen on mobile,
   and sticky cards now move in a controlled deck stack.
*/
.intro-video{
  height:118vh !important;
  margin-bottom:-18vh !important;
}
.intro-video-card{
  transform:none !important;
  opacity:1 !important;
}
.video-frame{
  width:min(980px, calc(100vw - 28px)) !important;
  border-radius:30px !important;
}
.hero-video-dock{
  display:none !important;
}
.video-tee{
  animation:stableVideoFloat 7s ease-in-out infinite !important;
}
.tee-a{transform:rotate(-8deg) scale(.92) !important}
.tee-b{transform:rotate(2deg) scale(1.03) !important}
.tee-c{transform:rotate(8deg) scale(.95) !important}
.video-art::after,
.video-scan{
  animation-duration:7s !important;
  opacity:.55 !important;
}

.product-panel{
  transform:
    translate3d(0, var(--y), 0)
    scale(var(--scale)) !important;
  transition:
    box-shadow .22s ease,
    border-color .22s ease !important;
  transform-origin:center top !important;
}
.product-panel.active{
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 42px 125px rgba(0,0,0,.48) !important;
}
.tee-model,
.hero-tee{
  animation:stableProductFloat 7s ease-in-out infinite !important;
}
.water-canvas{
  opacity:.22 !important;
}
@keyframes stableVideoFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -10px}
}
@keyframes stableProductFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@media (max-width:700px){
  .intro-video{
    height:108vh !important;
    margin-bottom:-8vh !important;
  }
  .video-frame{
    aspect-ratio:10/13 !important;
    border-radius:22px !important;
  }
  .video-tee{
    animation:none !important;
  }
  .product-panel{
    transform:translate3d(0, var(--y), 0) scale(var(--scale)) !important;
  }
}


/* === PRODUCT CARD UI PATCH ===
   Focus: not changing whole website, only sticky product card interface.
   Better card hierarchy, better buy panel, better product image area, cleaner controls.
*/
.product-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    #07080d !important;
  border:1px solid rgba(255,255,255,.145) !important;
  padding:14px !important;
}
.product-panel.active{
  border-color:rgba(255,255,255,.26) !important;
}
.panel-grid{
  gap:12px !important;
}
.panel-top{
  padding:4px 4px 13px !important;
}
.panel-top > span{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.panel-top > span::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 18px rgba(115,232,255,.55);
}
.panel-top button{
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.16);
}
.thumbs{
  padding:5px;
  width:max-content;
  justify-self:center;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
}
.thumbs i{
  width:38px !important;
  height:38px !important;
  border-radius:11px !important;
  position:relative;
  overflow:hidden;
}
.thumbs i::after{
  content:"";
  position:absolute;
  inset:6px 10px 5px;
  border-radius:5px 5px 7px 7px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.05));
  clip-path:polygon(23% 6%,34% 0,44% 8%,56% 8%,66% 0,77% 6%,90% 20%,81% 30%,79% 100%,21% 100%,19% 30%,10% 20%);
}
.thumbs .active{
  outline:2px solid rgba(255,255,255,.55) !important;
  box-shadow:0 0 0 4px rgba(115,232,255,.08);
}
.panel-story{
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.075);
  padding:22px 16px 16px !important;
}
.panel-story h3{
  max-width:10.4ch !important;
}
.panel-story p{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.panel-story p::after{
  content:"View detail";
  color:rgba(255,255,255,.55);
  font-size:10px;
  letter-spacing:.12em;
}
.panel-visual{
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.panel-visual::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.11);
  pointer-events:none;
}
.tee-model{
  width:min(430px,90%) !important;
  margin-bottom:10px !important;
}
.tee-model .tee-body{
  border:1px solid rgba(255,255,255,.22);
}
.tee-model .tee-print{
  background:rgba(255,255,255,.12);
  padding:8px 14px;
  border-radius:999px;
  backdrop-filter:blur(10px);
}
.tee-model .size-tag{
  top:64% !important;
  background:rgba(8,11,16,.36) !important;
}
.panel-buy{
  padding:0 !important;
}
.product-copy{
  padding:22px 20px 20px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:16px 16px 0 0;
  background:rgba(255,255,255,.04);
  border-bottom:0 !important;
}
.product-copy h4{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.product-copy h4::after{
  content:"★ 4.9";
  flex:0 0 auto;
  margin-top:5px;
  padding:7px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#f8fafc;
  font-family:Inter,system-ui,sans-serif;
  font-size:12px;
  letter-spacing:.02em;
}
.price-line{
  padding:16px 20px !important;
  background:rgba(255,255,255,.032);
  border-left:1px solid rgba(255,255,255,.11);
  border-right:1px solid rgba(255,255,255,.11);
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.price-line b{
  font-size:26px !important;
  letter-spacing:-.06em;
}
.price-line span{
  padding:7px 9px;
  border-radius:999px;
  background:rgba(115,232,255,.10);
  color:#dffaff !important;
}
.size-row{
  padding:14px 20px !important;
  background:rgba(255,255,255,.032);
  border-left:1px solid rgba(255,255,255,.11);
  border-right:1px solid rgba(255,255,255,.11);
}
.size-row::before{
  content:"Size";
  align-self:center;
  margin-right:auto;
  color:rgba(255,255,255,.58);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.size-row button{
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.size-row button:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.30);
}
.action-row{
  padding:0 20px 16px;
  background:rgba(255,255,255,.032);
  border-left:1px solid rgba(255,255,255,.11);
  border-right:1px solid rgba(255,255,255,.11);
}
.cart-btn,.learn-btn{
  border-radius:12px !important;
  transition:transform .18s ease,filter .18s ease,background .18s ease;
}
.cart-btn:hover,.learn-btn:hover{
  transform:translateY(-2px);
}
.cart-btn{
  box-shadow:0 12px 34px rgba(255,255,255,.08);
}
.color-line{
  padding:16px 20px 18px !important;
  border:1px solid rgba(255,255,255,.11);
  border-top:0;
  border-radius:0 0 16px 16px;
  background:rgba(255,255,255,.04);
}
.color-line i{
  width:16px !important;
  height:16px !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.10), 0 8px 20px rgba(0,0,0,.18) !important;
}
.color-line span{
  color:rgba(255,255,255,.72) !important;
}

@media (max-width:1050px){
  .panel-story{
    display:block !important;
  }
  .panel-story h3{
    max-width:100% !important;
  }
  .panel-story p{
    margin-top:16px !important;
  }
  .product-copy{
    padding:16px 16px 14px !important;
  }
  .price-line,
  .size-row,
  .action-row,
  .color-line{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .tee-model{
    width:min(285px,78%) !important;
    margin-bottom:4px !important;
  }
}
@media (max-width:700px){
  .product-panel{
    padding:9px !important;
  }
  .panel-top{
    gap:8px !important;
  }
  .thumbs{
    padding:4px;
    gap:6px;
  }
  .thumbs i{
    width:32px !important;
    height:32px !important;
  }
  .panel-story{
    padding:15px 13px 12px !important;
  }
  .panel-story p::after{
    display:none;
  }
  .product-copy h4::after{
    font-size:10px;
    padding:6px 8px;
  }
  .price-line b{
    font-size:22px !important;
  }
  .size-row{
    gap:6px !important;
  }
  .size-row::before{
    display:none;
  }
}