:root{
  --surface-night:#050b12;
  --surface-night-soft:#07131f;
  --surface-deep-blue:#082139;
  --surface-nav:#263340;
  --surface-paper:#f4f4f0;
  --surface-white:#fff;
  --surface-media:#000;
  --surface-media-raised:#02070c;
  --text-primary:#10161d;
  --text-inverse:#f8fbff;
  --text-muted:#aeb8c3;
  --text-secondary:#55616c;
  --border-dark:rgba(255,255,255,.18);
  --border-light:#d6d9da;
  --accent:#0a7cff;
  --accent-bright:#00b7ff;
  --accent-deep:#005ee8;
  --accent-soft:#87d9ff;
  --accent-hover:#27c2ff;
  --accent-gradient:linear-gradient(135deg,var(--accent-bright),var(--accent));
  --hero-overlay:linear-gradient(90deg,rgba(3,9,15,.82) 0%,rgba(3,9,15,.45) 36%,rgba(3,9,15,.05) 68%),linear-gradient(0deg,rgba(3,9,15,.78) 0%,transparent 55%);
  --font:"SF Pro",Arial,"Helvetica Neue",Helvetica,"Noto Sans",sans-serif;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --gutter:clamp(20px,4vw,64px);
  --content-max:1440px;
  --prose-max:760px;
  --media-max:1184px;
  --radius-media:12px;
  --radius-panel:32px;
  --radius-tabs:17px;
  --radius-tab:13px;
  --motion-micro:160ms;
  --motion-standard:280ms;
  --motion-emphasis:560ms;
  --ease-standard:cubic-bezier(.2,.75,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--surface-night)}
body{margin:0;background:var(--surface-night);color:var(--text-inverse);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body,button{font-family:var(--font)}
img,video{display:block;max-width:100%}
button,a{color:inherit}
[hidden]{display:none!important}
.skip-link{position:fixed;z-index:20;top:var(--space-4);left:var(--space-4);width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;background:var(--surface-white);color:var(--text-primary)}
.skip-link:focus{width:auto;height:auto;padding:var(--space-3) var(--space-4);overflow:visible;clip-path:none}
:focus-visible{outline:3px solid var(--accent-bright);outline-offset:4px}
.eyebrow{margin:0 0 var(--space-4);font-size:.78rem;font-weight:700;letter-spacing:.14em}
.text-link{display:inline-flex;align-items:center;gap:var(--space-2);padding-bottom:var(--space-1);border-bottom:1px solid currentColor;font-weight:650;text-decoration:none}
.text-link span{transition:transform var(--motion-micro) ease-out}
.text-link:hover span{transform:translateY(3px)}

.hero{position:relative;isolation:isolate;min-height:clamp(440px,46vw,720px);display:flex;align-items:flex-end;overflow:hidden;background:var(--surface-night)}
.hero-image,.hero-atmosphere{position:absolute;inset:0;width:100%;height:100%}
.hero-image{z-index:-2;object-fit:cover;object-position:center 48%}
.hero-atmosphere{z-index:-1;background:var(--hero-overlay)}
.hero-copy{width:min(100%,var(--content-max));margin:0 auto;padding:0 var(--gutter) clamp(64px,8vw,120px)}
.hero h1{max-width:850px;margin:0 0 var(--space-8);font-size:clamp(2.7rem,6.3vw,6.8rem);font-weight:750;line-height:.94;letter-spacing:-.055em;text-wrap:balance}
.hero h1 span{color:var(--accent-soft)}

.statement{position:relative;padding:clamp(112px,14vw,210px) var(--gutter);text-align:center;background:radial-gradient(circle at 50% 20%,rgba(10,124,255,.14),transparent 38%),linear-gradient(180deg,var(--surface-night),var(--surface-night-soft))}
.statement:after{content:"";position:absolute;left:50%;bottom:0;width:min(720px,72vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--border-dark),transparent)}
.statement h2{max-width:1120px;margin:0 auto var(--space-8);font-size:clamp(2.6rem,5.6vw,6rem);font-weight:730;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.statement h2 span{color:var(--accent-soft)}
.statement>p:last-child{max-width:760px;margin:0 auto;color:var(--text-muted);font-size:clamp(1.05rem,1.5vw,1.35rem);text-wrap:pretty}

.film-section{--film-progress:0;height:230svh;position:relative;background:var(--surface-media);color:var(--text-inverse)}
.film-sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.film-frame{width:100vw;height:100svh;overflow:hidden;transform:scale(.76);border-radius:var(--radius-media);background:var(--surface-media);will-change:transform}
.film-frame video{width:100%;height:100%;object-fit:contain;background:var(--surface-media)}
.film-heading{position:absolute;z-index:2;top:clamp(32px,7vh,76px);left:var(--gutter);max-width:620px;opacity:calc(1 - (var(--film-progress) * 1.35));pointer-events:none}
.film-heading h2{margin:0;font-size:clamp(2rem,4vw,4.75rem);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.film-actions{position:absolute;z-index:3;left:var(--gutter);bottom:var(--space-8);display:flex;align-items:center;gap:var(--space-4)}
.sound-button{min-height:48px;padding:0 var(--space-5);display:inline-flex;align-items:center;gap:var(--space-3);border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(5,11,18,.74);color:var(--text-inverse);backdrop-filter:blur(12px);font-weight:700;cursor:pointer;transition:background var(--motion-micro) ease-out,transform var(--motion-micro) ease-out}
.sound-button:hover{background:rgba(10,124,255,.88);transform:translateY(-2px)}
.sound-button:active{transform:none}
.sound-button svg{width:22px;height:22px;fill:currentColor}
.sound-button .sound-waves{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sound-button[aria-pressed="true"]{background:rgba(10,124,255,.88)}
.film-status{max-width:360px;margin:0;color:rgba(255,255,255,.78);font-size:.78rem}
.film-hint{position:absolute;z-index:2;right:var(--gutter);bottom:var(--space-8);margin:0;color:rgba(255,255,255,.68);font-size:.78rem}

.innovations{position:relative;padding:clamp(104px,11vw,168px) var(--gutter) clamp(120px,13vw,190px);overflow:hidden;background:radial-gradient(circle at 50% 0,rgba(18,83,138,.38),transparent 34%),linear-gradient(180deg,var(--surface-media) 0%,var(--surface-night) 22%,var(--surface-night-soft) 100%);text-align:center}
.section-heading{max-width:var(--prose-max);margin:0 auto var(--space-12)}
.section-heading h2{margin:0 0 var(--space-4);font-size:clamp(2.8rem,5vw,5.4rem);line-height:.98;letter-spacing:-.045em}
.section-heading>p:last-child{margin:0;color:var(--text-muted);font-size:clamp(1rem,1.4vw,1.25rem)}
.innovation-stage{position:relative;max-width:var(--media-max);aspect-ratio:16/9;margin:0 auto var(--space-12);border-radius:var(--radius-media);overflow:hidden;background:var(--surface-media-raised);box-shadow:0 32px 90px rgba(0,0,0,.45)}
.innovation-stage:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.12);border-radius:inherit;pointer-events:none}
.innovation-visual{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.015);transition:opacity var(--motion-standard) ease-in-out,transform var(--motion-standard) var(--ease-standard)}
.innovation-visual.is-active{opacity:1;transform:none}
.innovation-visual video{width:100%;height:100%;object-fit:cover}
.innovation-playback{position:absolute;z-index:3;right:var(--space-4);bottom:var(--space-4);width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(5,11,18,.78);color:var(--text-inverse);backdrop-filter:blur(10px);cursor:pointer;transition:background var(--motion-micro) ease-out,transform var(--motion-micro) ease-out}
.innovation-playback:before{content:"";display:block;width:12px;height:14px;margin:auto;background:linear-gradient(90deg,currentColor 0 33%,transparent 33% 67%,currentColor 67%)}
.innovation-playback[aria-pressed="true"]:before{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid currentColor;background:none;transform:translateX(1px)}
.innovation-playback:hover{background:rgba(10,124,255,.9);transform:translateY(-2px)}
.innovation-playback:active{transform:none}
.innovation-tabs-shell{position:relative;width:min(780px,100%);height:72px;margin:0 auto var(--space-10);padding:4px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-tabs);background:rgba(38,51,64,.88);backdrop-filter:blur(12px)}
.innovation-tabs-scroll{height:100%;overflow-x:auto;scrollbar-width:none}
.innovation-tabs-scroll::-webkit-scrollbar{display:none}
.innovation-tabs{display:flex;height:100%;min-width:max-content}
.innovation-tab{min-width:192px;height:100%;padding:0 var(--space-4);border:0;border-radius:var(--radius-tab);background:transparent;color:var(--text-inverse);font-size:.8rem;font-weight:700;line-height:1.2;cursor:pointer;transition:background var(--motion-micro) ease-out,transform var(--motion-micro) ease-out}
.innovation-tab.is-active{background:var(--accent-gradient)}
.innovation-tab:not(.is-active):hover{background:rgba(255,255,255,.1)}
.innovation-tab:active{transform:scale(.98)}
.innovation-scroll{display:none;position:absolute;z-index:2;top:4px;width:48px;height:62px;border:0;background:linear-gradient(90deg,transparent,var(--surface-nav) 54%);color:var(--text-inverse);cursor:pointer}
.innovation-scroll svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
.innovation-scroll--prev{left:4px;background:linear-gradient(270deg,transparent,var(--surface-nav) 54%)}
.innovation-scroll--next{right:4px}
.innovation-descriptions{max-width:1040px;min-height:270px;margin:0 auto}
.innovation-description{text-align:center}
.innovation-description h3{margin:0 0 var(--space-5);font-size:clamp(1.5rem,2.6vw,2.35rem);line-height:1.1;letter-spacing:-.025em}
.innovation-description p{margin:0 auto;color:var(--text-muted);font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.75;text-wrap:pretty}
.innovation-description p+p{margin-top:var(--space-4)}

.purchase{position:relative;padding:clamp(112px,13vw,190px) var(--gutter);background:radial-gradient(circle at 50% 12%,rgba(10,124,255,.2),transparent 38%),linear-gradient(180deg,var(--surface-night-soft),var(--surface-deep-blue));text-align:center}
.purchase-inner{max-width:1180px;margin:0 auto}
.purchase h2{max-width:900px;margin:0 auto var(--space-5);font-size:clamp(2.6rem,5vw,5.4rem);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.purchase-inner>p:not(.eyebrow){margin:0;color:var(--text-muted);font-size:clamp(1rem,1.4vw,1.25rem)}
.retailer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin:var(--space-16) auto var(--space-8)}
.retailer{min-height:92px;padding:var(--space-6);display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border-dark);background:rgba(255,255,255,.025);font-size:clamp(1.1rem,2vw,1.45rem);font-weight:700;text-decoration:none;transition:transform var(--motion-micro) ease-out,background var(--motion-micro) ease-out,border-color var(--motion-micro) ease-out}
.retailer:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.46);background:rgba(255,255,255,.08)}
.retailer:active{transform:none}
.retailer--primary{border-color:transparent;background:var(--accent-gradient)}
.retailer--primary:hover{background:linear-gradient(135deg,var(--accent-hover),var(--accent-deep))}
.retailer svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.product-link{display:inline-block;margin-top:var(--space-6);font-weight:700}

.faq{display:grid;grid-template-columns:minmax(260px,.68fr) minmax(0,1.32fr);gap:clamp(48px,8vw,136px);padding:clamp(104px,12vw,172px) var(--gutter) clamp(120px,14vw,200px);border-radius:var(--radius-panel) var(--radius-panel) 0 0;background:var(--surface-paper);color:var(--text-primary)}
.faq-intro{position:sticky;top:var(--space-10);align-self:start}
.faq h2{margin:0 0 var(--space-5);font-size:clamp(2.5rem,4.5vw,4.8rem);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.faq-intro>p:last-child{max-width:420px;margin:0;color:var(--text-secondary);font-size:1.05rem}
.faq-list{border-top:1px solid var(--border-light)}
.faq-item{border-bottom:1px solid var(--border-light)}
.faq-item h3{margin:0}
.faq-item button{width:100%;min-height:72px;padding:var(--space-6) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);border:0;background:transparent;color:var(--text-primary);font-size:1rem;font-weight:700;text-align:left;cursor:pointer}
.faq-item button span{position:relative;width:20px;height:20px;flex:0 0 auto}
.faq-item button span:before,.faq-item button span:after{content:"";position:absolute;top:9px;left:1px;width:18px;height:1px;background:currentColor;transition:transform var(--motion-standard) ease-in-out}
.faq-item button span:after{transform:rotate(90deg)}
.faq-item button[aria-expanded="true"] span:after{transform:none}
.faq-answer{padding:0 56px var(--space-6) 0;color:var(--text-secondary)}
.faq-answer p{margin:0;max-width:760px}

@media(max-width:900px){
  .hero{min-height:72svh}
  .hero-image{object-position:center center}
  .hero-atmosphere{background:linear-gradient(0deg,rgba(3,9,15,.92) 0%,rgba(3,9,15,.28) 62%,rgba(3,9,15,.08) 100%)}
  .hero-copy{padding-bottom:clamp(52px,10vh,88px)}
  .statement{padding-block:112px}
  .film-heading{top:var(--space-8)}
  .film-actions{right:var(--gutter);bottom:var(--space-6);align-items:flex-start;flex-direction:column}
  .film-status{max-width:290px}
  .film-hint{display:none}
  .innovations{padding-inline:20px}
  .innovation-stage{margin-bottom:var(--space-8)}
  .innovation-tabs-shell{width:100%;height:64px}
  .innovation-tab{min-width:144px}
  .innovation-scroll{height:54px;display:grid;place-items:center}
  .innovation-descriptions{min-height:340px}
  .retailer-grid{grid-template-columns:1fr}
  .retailer{min-height:78px}
  .faq{grid-template-columns:1fr;gap:var(--space-10);border-radius:24px 24px 0 0}
  .faq-intro{position:static}
}

@media(max-width:560px){
  .hero{min-height:76svh}
  .hero h1{font-size:clamp(2.45rem,12vw,3.55rem)}
  .statement h2{font-size:clamp(2.35rem,11vw,3.4rem)}
  .film-frame{transform:scale(.86)}
  .film-heading h2{font-size:2rem}
  .sound-button{min-height:44px}
  .film-status{font-size:.72rem}
  .section-heading{margin-bottom:var(--space-8)}
  .innovation-stage{border-radius:8px}
  .innovation-playback{right:var(--space-3);bottom:var(--space-3)}
  .innovation-description p{line-height:1.68}
  .innovation-descriptions{min-height:400px}
  .purchase h2{font-size:clamp(2.35rem,11vw,3.5rem)}
  .faq{padding-inline:20px}
  .faq-answer{padding-right:36px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .film-section{height:auto;padding:96px 0;background:var(--surface-media)}
  .film-sticky{position:relative;height:auto;display:block}
  .film-heading{position:static;padding:0 var(--gutter);margin-bottom:var(--space-8);opacity:1}
  .film-frame{width:100%;height:auto;aspect-ratio:16/9;transform:none!important;border-radius:0}
  .film-actions{position:static;padding:var(--space-5) var(--gutter);background:var(--surface-media)}
  .film-hint{display:none}
}