:root{
  /* 1vh frozen as px by JS. A mobile browser resizes the viewport when its toolbar slides in and out,
     so live vh units would re-scale every section height mid-scroll and shove the page under the user.
     Falls back to a real vh when JS is unavailable. */
  --vh:1vh;
  --black:#000;--ink:#0b0b0c;--graphite:#1c1c1e;--steel-3:#3a3a3c;--steel:#7a7a7d;
  --silver:#bdbdbf;--paper:#f5f5f7;--paper-2:#ececef;--line:#c9c9cc;
  --mx:50%;--my:42%;--reveal:0;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:#000;color:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
html{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--paper);color:#000}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:.92}

.label{font-size:clamp(10px,1vw,11px);letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--steel)}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---------- fixed chrome ---------- */
header.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,4vw,52px);mix-blend-mode:difference;color:#fff}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.06em;font-size:18px}
.brand svg{width:21px;height:21px}
.nav-links{display:flex;gap:28px}
.nav-links a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;transition:opacity .3s}
.nav-links a:hover{opacity:1}
.nav-cta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(255,255,255,.5);padding:9px 18px;border-radius:100px;transition:background .3s,color .3s}
.nav-cta:hover{background:#fff;color:#000}
@media (max-width:820px){.nav-links{display:none}}

/* ---------- caliper ---------- */
.caliper{position:fixed;top:0;right:0;height:100vh;width:60px;z-index:40;pointer-events:none;mix-blend-mode:difference;color:#fff}
.caliper .track{position:absolute;top:12vh;bottom:12vh;right:24px;width:1px;background:rgba(255,255,255,.35)}
.caliper .tick{position:absolute;right:18px;width:9px;height:1px;background:rgba(255,255,255,.5)}
.caliper .tick.major{width:15px;background:#fff}
.caliper .cursor{position:absolute;right:18px;width:22px;height:1px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8);top:12vh}
.caliper .readout{position:absolute;right:32px;top:12vh;transform:translateY(-50%);text-align:right;white-space:nowrap}
.caliper .readout b{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.caliper .readout span{display:block;font-size:9px;letter-spacing:.24em;opacity:.6;margin-top:3px;text-transform:uppercase}
@media (max-width:820px){
  .caliper{width:100%;height:40px;top:auto;bottom:0;left:0}
  .caliper .track{top:auto;bottom:19px;left:16px;right:16px;width:auto;height:1px}
  .caliper .tick{display:none}
  .caliper .cursor{right:auto;bottom:19px;width:1px;height:13px}
  .caliper .readout{top:auto;bottom:11px;right:16px;transform:none}
  .caliper .readout b{display:inline;font-size:10px}
  .caliper .readout span{display:inline;margin:0 0 0 8px}
}

.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.045;mix-blend-mode:overlay}

/* ---------- generic scene (full-bleed photo) ---------- */
section{position:relative;width:100%}
.pad{padding:0 clamp(18px,5vw,90px)}
/* overlay stack: each panel sticks; gaps give dwell before the next slides over */
.panel{position:sticky;top:0;height:calc(var(--vh)*100);overflow:hidden;background:#000;will-change:transform,filter;box-shadow:0 -44px 110px -20px rgba(0,0,0,.9)}
.gap{height:calc(var(--vh)*62);position:relative;z-index:-1}
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;will-change:transform}
.grad{position:absolute;inset:0;z-index:2;pointer-events:none}
.grad.b{background:linear-gradient(to top,rgba(0,0,0,.75),transparent 46%),linear-gradient(to bottom,rgba(0,0,0,.5),transparent 30%)}
.grad.l{background:linear-gradient(105deg,rgba(0,0,0,.72),rgba(0,0,0,.25) 46%,transparent 68%)}
.grad.r{background:linear-gradient(255deg,rgba(0,0,0,.7),rgba(0,0,0,.2) 46%,transparent 66%)}
.eyebrow{color:var(--silver)}
.copy{position:absolute;z-index:5;max-width:min(90vw,760px)}
.copy.bl{left:clamp(18px,5vw,90px);bottom:calc(var(--vh)*12)}
.copy.tl{left:clamp(18px,5vw,90px);top:calc(var(--vh)*16)}
.copy h2{font-size:clamp(38px,7vw,120px);line-height:.9;margin-top:14px;text-shadow:0 6px 34px rgba(0,0,0,.45)}
.copy h2 em{font-style:normal;color:var(--silver)}
.copy .lede{margin-top:18px;max-width:40ch;font-size:clamp(14px,1.3vw,17px);line-height:1.5;color:var(--silver)}
.copy .big-spec{margin-top:26px;font-size:clamp(40px,6vw,92px);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.copy .big-spec small{font-size:.28em;letter-spacing:.2em;color:var(--steel);text-transform:uppercase;display:inline-block;margin-left:8px;vertical-align:middle}

/* light sweep */
.sweep{position:absolute;top:0;bottom:0;width:34%;z-index:4;pointer-events:none;left:-40%;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.16) 46%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.16) 54%,transparent)}

/* callouts */
.callout{position:absolute;z-index:6;opacity:0}
.callout .dot{position:absolute;top:-4px;left:-4px;width:9px;height:9px;border:1px solid #fff;border-radius:50%}
.callout .dot::after{content:"";position:absolute;inset:2px;background:#fff;border-radius:50%}
.callout .line{position:absolute;top:0;left:6px;height:1px;background:rgba(255,255,255,.65);transform-origin:left;transform:scaleX(0)}
.callout .lbl{position:absolute;top:-8px;white-space:nowrap;font-size:clamp(9px,1vw,11px);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:4px 8px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14);border-radius:100px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.callout.left .line{left:auto;right:6px;transform-origin:right}
.callout.left .lbl{text-align:right}

/* ---------- 01 title ---------- */
#title{height:calc(var(--vh)*100);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#000}
#title .tw{opacity:0}
.tmark{width:52px;height:52px;margin:0 auto 24px}
#title h1{font-size:clamp(12px,1.4vw,15px);letter-spacing:.42em;text-transform:uppercase;font-weight:400;color:var(--silver)}
#title .sub{margin-top:18px;font-size:11px;letter-spacing:.3em;color:var(--steel);text-transform:uppercase}
.scrollhint{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;color:var(--steel);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px}
.scrollhint i{width:1px;height:32px;background:linear-gradient(var(--steel),transparent)}

/* ---------- 01 hero (immediate wow) ---------- */
.hero-ph{transform:scale(1.08)}
.hero-grad{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.2) 44%,rgba(0,0,0,.4) 100%),linear-gradient(105deg,rgba(0,0,0,.62),transparent 56%)}
.hero-sweep{z-index:4}
.hero-inner{position:absolute;z-index:5;left:clamp(18px,5vw,90px);bottom:calc(var(--vh)*13);max-width:min(92vw,820px)}
.hero-inner .eyebrow{color:var(--silver);display:block}
.hero-word{font-size:clamp(84px,17vw,260px);line-height:.8;letter-spacing:-.04em;font-weight:700;color:#fff;margin-top:14px;text-shadow:0 10px 50px rgba(0,0,0,.55)}
.hero-sub{margin-top:16px;font-size:clamp(15px,1.5vw,20px);line-height:1.4;color:var(--silver);max-width:34ch}
.hero-offer{display:flex;align-items:center;gap:clamp(20px,3vw,44px);margin-top:32px;flex-wrap:wrap}
.hero-offer .of{display:flex;flex-direction:column}
.hero-offer .of .v{font-size:clamp(24px,2.6vw,36px);font-weight:600;color:#fff;line-height:1}
.hero-offer .of .k{font-size:10px;letter-spacing:.24em;color:var(--steel);text-transform:uppercase;margin-top:7px}
.hero-buy{margin-left:4px}
.hero-el{opacity:0}
#hero .scrollhint{left:auto;right:clamp(18px,5vw,60px);transform:none;bottom:calc(var(--vh)*5)}

/* ---------- 03 manifesto ---------- */
#manifesto{display:flex;align-items:center;background:var(--paper);color:var(--graphite)}
#manifesto h2{font-size:clamp(40px,8vw,150px);max-width:16ch;margin-top:28px}
#manifesto .foot{display:flex;gap:48px;margin-top:52px;flex-wrap:wrap}
#manifesto .foot div{max-width:26ch}
#manifesto .foot .n{font-size:12px;letter-spacing:.2em;color:var(--steel);margin-bottom:9px;text-transform:uppercase}
#manifesto .foot p{font-size:15px;line-height:1.55;color:var(--steel-3)}
.reveal-up{opacity:0;transform:translateY(28px)}

/* ---------- 08 specs ---------- */
#specs{background:var(--paper-2);color:var(--graphite);display:flex;flex-direction:column;justify-content:center}
#specs .head{margin-bottom:calc(var(--vh)*4)}
#specs .head h2{font-size:clamp(30px,4.6vw,72px);margin-top:12px}
#specs .head .eyebrow{color:var(--steel)}
.specs-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center}
#specs.pad{padding-left:clamp(18px,5vw,90px);padding-right:clamp(18px,5vw,90px)}
.specs-figure{position:relative}
.specs-figure img{width:100%;max-height:calc(var(--vh)*58);object-fit:contain;border-radius:2px;filter:contrast(1.02)}
.specs-figure .frame{position:absolute;inset:0;pointer-events:none}
.specs-figure .frame line,.specs-figure .frame circle{stroke:rgba(28,28,30,.5);stroke-width:1;fill:none}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.spec-grid .s{padding:22px 6px;border-bottom:1px solid var(--line)}
.spec-grid .s:nth-child(odd){border-right:1px solid var(--line);padding-right:22px}
.spec-grid .s:nth-child(even){padding-left:22px}
.spec-grid .v{font-size:clamp(22px,2.6vw,34px);font-weight:600;font-variant-numeric:tabular-nums}
.spec-grid .k{font-size:11px;letter-spacing:.2em;color:var(--steel);text-transform:uppercase;margin-top:7px}
.spec-grid .s.warranty .v{color:var(--graphite)}
@media (max-width:820px){
  #specs .head{margin-bottom:calc(var(--vh)*3)}
  #specs .head h2{font-size:clamp(26px,8vw,46px)}
  .specs-wrap{grid-template-columns:1fr;gap:16px}
  .specs-figure img{max-height:calc(var(--vh)*28)}
  .specs-figure svg{ display: none }
  /* :nth-child(odd/even) вище задають бокові відступи 22px і за специфічністю сильніші за .spec-grid .s,
     тому без них у селекторі 12px 6px застосовувалось би лише зверху/знизу */
  .spec-grid .s,.spec-grid .s:nth-child(odd),.spec-grid .s:nth-child(even){padding:12px 6px}
  .spec-grid .v{font-size:clamp(18px,5.5vw,26px)}
}

/* ---------- 09 buy ---------- */
#buy{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#000}
#buy .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;filter:grayscale(.2) brightness(.7);z-index:0}
#buy .bg-grad{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 50% 40%,transparent,rgba(0,0,0,.85))}
#buy .inner{position:relative;z-index:2}
#buy .fmark{width:56px;height:56px;margin:0 auto 26px;opacity:0}
#buy h2{font-size:clamp(52px,12vw,180px);font-weight:700;letter-spacing:.02em}
#buy .tl{font-size:clamp(12px,1.4vw,16px);letter-spacing:.3em;text-transform:uppercase;color:var(--silver);margin-top:16px}
.readout{display:flex;gap:clamp(28px,6vw,72px);justify-content:center;align-items:flex-end;margin-top:46px}
.readout .r{position:relative}
.readout .r .v{font-size:clamp(34px,5.4vw,74px);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.readout .r .tick{height:1px;background:rgba(255,255,255,.5);margin-top:12px}
.readout .r .k{font-size:10px;letter-spacing:.26em;color:var(--steel);text-transform:uppercase;margin-top:10px}
.readout .r.price .v{color:#fff}
.magnet{margin-top:48px}
.buy-btn{display:inline-flex;align-items:center;gap:14px;background:var(--paper);color:#000;font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:20px 42px;border-radius:100px;border:none;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1);will-change:transform}
.buy-btn:hover{transform:scale(1.03)}
.buy-btn .dot{width:7px;height:7px;border-radius:50%;background:#000}
.note{margin-top:20px;font-size:11px;letter-spacing:.14em;color:var(--steel);text-transform:uppercase}

footer{background:#000;color:var(--steel);text-align:center;padding:40px 20px 64px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
footer .row{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}

/* ---------- responsive typography (fluid; minimal overrides) ---------- */
@media (max-width:820px){
  .gap{height:calc(var(--vh)*38)}
  .copy.bl{bottom:calc(var(--vh)*12)}
  .copy h2{font-size:clamp(34px,10vw,72px)}
  .copy .lede{font-size:14px}

  /* hero split: product on top, offer on bottom — seam blended into black */
  #hero .hero-ph{height:calc(var(--vh)*62);bottom:auto;object-position:50% 56%}
  #hero .hero-grad{height:calc(var(--vh)*62);background:linear-gradient(to top,#000 0%,rgba(0,0,0,.82) 14%,rgba(0,0,0,.32) 30%,rgba(0,0,0,.08) 44%,transparent 60%)}
  #hero .hero-sweep{height:calc(var(--vh)*62)}
  #hero .hero-inner{position:absolute;top:calc(var(--vh)*46);bottom:0;left:0;right:0;max-width:none;padding:0 22px calc(var(--vh)*2);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(to bottom,transparent 0%,#000 20%)}
  .hero-word{font-size:clamp(64px,19vw,120px);margin-top:8px}
  .hero-sub{font-size:15px;max-width:30ch}
  .hero-offer{gap:18px 26px;margin-top:22px}
  .hero-offer .of .v{font-size:clamp(22px,7vw,30px)}
  #hero .scrollhint{display:none}

  #manifesto h2{font-size:clamp(36px,11vw,64px)}
  #manifesto .foot{flex-direction:column;gap:20px;margin-top:34px}
  #manifesto .foot div{max-width:none}
  #manifesto .foot p{font-size:14px}

  .callout .lbl{font-size:9px}
  .readout{gap:34px}
  #buy h2{font-size:clamp(56px,17vw,120px)}
}

@media (prefers-reduced-motion:reduce){
  .ph{transform:none!important}
}