/* Both faces were chosen by measurement against the pack's own cover image,
   rectified out of perspective with a homography (1920x1080, 3.07x the linear
   resolution of the promo video's page rectangle).
   Display: Montserrat 400 - passes both gates (edge RMS 2.96, cap delta +4.22 at 4x)
   and its stroke/cap 0.106 matches the measured 0.111. See README for the one
   compromise (the reference face is not a free font).
   Body: Outfit 400 - x-height/cap 0.684 against the measured 0.691, stem/cap 0.130
   against 0.127. Jost, the obvious guess from the two earlier templates in this
   series, is rejected: cap delta -18px, far outside the 5px gate. */
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("assets/fonts/Montserrat-latin-var.woff2") format("woff2");
}
@font-face{
  font-family:"Outfit"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("assets/fonts/Outfit-latin-var.woff2") format("woff2");
}

/* Amethyst — Figma template #38, cloned 1:1.
   Design canvas is 1920x1080; --px is one design pixel, so every size below is the
   measured value. Positions are % of the stage, which is the viewport. */

:root{
  --px: min(0.0520833vw, 0.0925926vh);

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-ui: "Outfit", system-ui, sans-serif;

  --ink: #17141F;
  --white: #fff;

  --z-world: 0;
  --z-feat: 10;
  --z-hero: 20;
  --z-chrome: 100;

  --glow: 0 0 calc(10 * var(--px)) rgba(255,255,255,.55),
          0 0 calc(34 * var(--px)) rgba(228,190,255,.55),
          0 0 calc(90 * var(--px)) rgba(150,80,230,.45);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:auto; }

body{
  margin:0;
  background:#100A1C;
  color:var(--white);
  font-family:var(--font-ui);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

/* ---------------------------------------------------------------- chrome */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-chrome);
  height:calc(98 * var(--px));
  display:flex; align-items:center;
  padding:0 calc(36 * var(--px)) 0 calc(44 * var(--px));
  padding-top:env(safe-area-inset-top);
}

.nav__brand{
  display:flex; align-items:center; gap:calc(10 * var(--px));
  font-size:calc(22 * var(--px)); font-weight:400; letter-spacing:.01em;
}
.nav__mark{
  width:calc(24 * var(--px)); height:calc(24 * var(--px));
  fill:none; stroke:var(--white); stroke-width:1.6; stroke-linecap:round;
}

.nav__capsule{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:calc(8 * var(--px));
  padding:calc(9 * var(--px));
  border-radius:999px;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(calc(24 * var(--px))) saturate(1.2);
  -webkit-backdrop-filter:blur(calc(24 * var(--px))) saturate(1.2);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 calc(4 * var(--px)) calc(24 * var(--px)) rgba(10,5,30,.25),
             inset 0 1px 0 rgba(255,255,255,.15);
}
.nav__item{
  padding:calc(11 * var(--px)) calc(22 * var(--px));
  border-radius:999px;
  font-size:calc(21 * var(--px)); font-weight:300; letter-spacing:.01em;
  color:rgba(255,255,255,.9);
  white-space:nowrap;
  transition:color .15s ease-out, background-color .15s ease-out;
}
.nav__item:hover{ color:var(--white); }
.nav__item.is-active{
  background:var(--white); color:var(--ink); font-weight:500;
  box-shadow:0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(20,10,40,.2);
}

.nav__right{
  margin-left:auto;
  display:flex; align-items:center; gap:calc(16 * var(--px));
}
.nav__login{
  padding:calc(13 * var(--px)) calc(26 * var(--px));
  border-radius:999px;
  font-size:calc(20 * var(--px));
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(calc(16 * var(--px)));
  -webkit-backdrop-filter:blur(calc(16 * var(--px)));
  border:1px solid rgba(255,255,255,.4);
}
.nav__menu{
  width:calc(58 * var(--px)); height:calc(58 * var(--px));
  display:grid; place-items:center;
  border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(calc(8 * var(--px)));
  -webkit-backdrop-filter:blur(calc(8 * var(--px)));
}
.nav__menu svg{
  width:calc(26 * var(--px)); height:calc(26 * var(--px));
  fill:none; stroke:var(--white); stroke-width:1.6; stroke-linecap:round;
}

.jump{
  position:fixed; z-index:var(--z-chrome);
  right:calc(40 * var(--px));
  bottom:calc(58 * var(--px) + env(safe-area-inset-bottom));
  width:calc(86 * var(--px)); height:calc(86 * var(--px));
  display:grid; place-items:center;
  border-radius:50%; cursor:pointer;
  background:rgba(15,10,35,.15);
  border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(calc(8 * var(--px)));
  -webkit-backdrop-filter:blur(calc(8 * var(--px)));
}
.jump svg{
  width:calc(30 * var(--px)); height:calc(30 * var(--px));
  fill:none; stroke:var(--white); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------------------------------------------------------------- stage */

.track{ height:400svh; position:relative; }

.stage{
  position:sticky; top:0;
  height:100svh; width:100%;
  overflow:clip;
}

.world{ position:absolute; inset:0; z-index:var(--z-world); }
picture{ display:contents; }
.world__still,
.world__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.world__still--end{ opacity:0; }
.world__video{ opacity:0; }
.world.is-video .world__video{ opacity:1; }
.world.is-video .world__still{ opacity:0; }

/* ---------------------------------------------------------------- hero */

.hero,
.feat{
  position:absolute; inset:0;
  will-change:transform;
}
.hero{ z-index:var(--z-hero); transform:translate3d(0,var(--heroY,0),0); }
.feat{ z-index:var(--z-feat); transform:translate3d(0,var(--featY,105svh),0); }

.hero > *{ position:absolute; }

.hero__title{
  left:0; top:18.2%; right:0;
  margin:0; padding:0;
  font-family:var(--font-display);
  font-weight:400; text-transform:uppercase;
  font-size:calc(76 * var(--px));
  line-height:calc(76.7 * var(--px));
  letter-spacing:-.078em;
  text-shadow:var(--glow);
}
.hero__line{ display:block; transform:scaleX(1.058); transform-origin:left center; }
.hero__line--1{ margin-left:4.2%; }
.hero__line--2{ margin-left:14.4%; }
.hero__line--3{ margin-left:7.7%; }
.hero__line--4{ margin-left:14.5%; }

.hero__globe{
  position:absolute; left:5.8%; top:calc(3 * 76.7 * var(--px) - 8 * var(--px));
  width:14.4%; height:calc(101 * var(--px));
  fill:none; stroke:rgba(255,255,255,.75); stroke-width:1;
  pointer-events:none;
}

.hero__lede{
  left:3.8%; top:48.3%; margin:0;
  font-size:calc(24 * var(--px)); line-height:1.4;
  color:rgba(255,255,255,.95);
  text-shadow:0 0 calc(16 * var(--px)) rgba(90,40,140,.6);
  text-wrap:pretty;
}

.hero__cta{
  left:3.8%; top:58.2%;
  display:flex; align-items:center; gap:calc(22 * var(--px));
}
.pill{
  display:grid; place-items:center;
  min-width:calc(193 * var(--px)); height:calc(84 * var(--px));
  padding:0 calc(30 * var(--px));
  border-radius:999px;
  background:var(--white); color:var(--ink);
  font-size:calc(26 * var(--px)); font-weight:500;
  box-shadow:0 calc(10 * var(--px)) calc(30 * var(--px)) rgba(15,8,40,.35);
}
.circle{
  width:calc(70 * var(--px)); height:calc(70 * var(--px));
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(calc(8 * var(--px)));
  -webkit-backdrop-filter:blur(calc(8 * var(--px)));
}
.circle svg{
  width:calc(24 * var(--px)); height:calc(24 * var(--px));
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.circle--solid{
  background:#EFE9F5; border:0; color:var(--ink);
  width:calc(74 * var(--px)); height:calc(74 * var(--px));
}

/* stat strip */

.stats{
  left:4.15%; top:78.7%;
  display:flex; align-items:stretch; gap:calc(42 * var(--px));
}
.stat{
  width:calc(190 * var(--px)); height:calc(156 * var(--px));
  border-radius:calc(32 * var(--px));
  background:rgba(150,120,230,.14);
  backdrop-filter:blur(calc(18 * var(--px)));
  -webkit-backdrop-filter:blur(calc(18 * var(--px)));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 0 calc(40 * var(--px)) rgba(255,255,255,.06),
             0 calc(8 * var(--px)) calc(32 * var(--px)) rgba(10,5,30,.25);
  padding:calc(26 * var(--px)) calc(30 * var(--px));
  display:flex; flex-direction:column; justify-content:flex-end;
}
.stat__value{
  margin:0;
  font-size:calc(48 * var(--px)); font-weight:600;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.stat__value span{
  font-size:calc(20 * var(--px)); font-weight:500;
  vertical-align:super; margin-left:calc(2 * var(--px));
}
.stat__label{
  margin:calc(10 * var(--px)) 0 0;
  font-size:calc(20 * var(--px)); font-weight:300; letter-spacing:.015em;
  color:rgba(255,255,255,.9);
}
.stat--photo{
  padding:0; overflow:hidden;
  width:calc(196 * var(--px));
  background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,.55);
}
.stat--photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* right-hand promo card */

.promo{
  left:81.9%; top:53.1%;
  width:16.3%;
}
.promo__back{
  position:absolute; left:3%; right:3%; top:calc(-24 * var(--px));
  height:calc(80 * var(--px));
  border-radius:calc(24 * var(--px));
  background:linear-gradient(100deg,#E14FD4 0%,#8A3BE8 60%,#5B2BD6 100%);
}
.promo__card{
  position:relative;
  border-radius:calc(24 * var(--px));
  background:linear-gradient(180deg,#fff 0%,#F2EDF7 100%);
  box-shadow:0 calc(24 * var(--px)) calc(60 * var(--px)) rgba(20,8,45,.45);
  padding:calc(12 * var(--px)) calc(12 * var(--px)) calc(18 * var(--px));
  color:var(--ink);
}
.promo__photo{
  width:100%; height:calc(175 * var(--px));
  object-fit:cover; display:block;
  border-radius:calc(18 * var(--px));
}
.promo__title{
  margin:calc(16 * var(--px)) 0 0 calc(14 * var(--px));
  font-family:var(--font-display);
  font-size:calc(28 * var(--px)); font-weight:400; line-height:1.18;
  text-transform:uppercase; letter-spacing:-.03em;
  padding-right:calc(74 * var(--px));
  text-wrap:balance;
}
.promo__card .circle--solid{
  position:absolute; right:calc(16 * var(--px)); bottom:calc(16 * var(--px));
}

/* ---------------------------------------------------------------- features */

.feat__block{ position:absolute; width:17.2%; }
.feat__index{
  position:absolute; left:calc(-46 * var(--px)); top:calc(4 * var(--px));
  margin:0;
  font-size:calc(23 * var(--px)); font-style:italic; letter-spacing:.05em;
  color:rgba(255,255,255,.7);
}
.feat__title{
  margin:0 0 calc(22 * var(--px));
  font-family:var(--font-display);
  font-size:calc(58 * var(--px)); font-weight:400;
  text-transform:uppercase; letter-spacing:-.05em; line-height:1;
  text-shadow:0 0 calc(10 * var(--px)) rgba(255,255,255,.4),
              0 0 calc(34 * var(--px)) rgba(210,160,255,.35),
              0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(16,8,34,.6);
  text-wrap:balance;
}
.feat__body{
  margin:0;
  font-size:calc(20 * var(--px)); font-weight:300; line-height:1.38;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px calc(3 * var(--px)) rgba(16,8,34,.85),
              0 0 calc(22 * var(--px)) rgba(16,8,34,.7);
  text-wrap:pretty;
}

.feat__block--performance{ left:8.3%;  top:19.0%; }
.feat__block--elegance   { left:78.9%; top:19.0%; }
.feat__block--innovation { left:11.3%; top:56.0%; }
.feat__block--power      { left:72.8%; top:56.2%; }
.feat__block--comfort    { left:42.3%; top:73.0%; }

/* ---------------------------------------------------------------- responsive */

@media (max-width:900px){
  :root{ --px: min(0.13vw, 0.0925926vh); }

  .nav{ height:calc(80 * var(--px)); padding:0 5vw; }
  .nav__capsule{ display:none; }
  .nav__brand{ font-size:calc(34 * var(--px)); }
  .nav__mark{ width:calc(34 * var(--px)); height:calc(34 * var(--px)); }
  .nav__login{ font-size:calc(28 * var(--px)); }
  .nav__menu{ width:calc(80 * var(--px)); height:calc(80 * var(--px)); }
  .nav__menu svg{ width:calc(34 * var(--px)); height:calc(34 * var(--px)); }
  .jump{ right:5vw; bottom:calc(24 * var(--px) + env(safe-area-inset-bottom));
         width:calc(84 * var(--px)); height:calc(84 * var(--px)); }

  .track{ height:700lvh; }

  .hero > *{ position:static; }
  .hero{
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:0 5vw calc(150 * var(--px));
  }
  .hero__title{
    font-size:clamp(40px, 9.2vw, 92px);
    line-height:1.02; margin-bottom:.5em;
  }
  .hero__line--1,.hero__line--2,.hero__line--3,.hero__line--4{ margin-left:0; }
  /* relative for the globe to anchor to - but the desktop rule also sets top/left,
     and those become real offsets the moment the box stops being static */
  .hero__title{ position:relative; inset:auto; }
  /* anchored to the title box, not to the flex flow, so it keeps sitting on the
     last line instead of landing on the lede */
  .hero__globe{
    position:absolute; left:0; top:70%;
    width:56vw; height:auto; aspect-ratio:276/102; opacity:.5;
  }
  .hero__lede{ font-size:clamp(15px,3.6vw,26px); max-width:34ch; margin-bottom:1.4em; }
  .hero__lede br{ display:none; }
  .hero__cta{ margin-bottom:calc(52 * var(--px)); }
  .pill{ min-width:calc(230 * var(--px)); height:calc(104 * var(--px)); font-size:calc(32 * var(--px)); }
  .circle{ width:calc(92 * var(--px)); height:calc(92 * var(--px)); }
  .circle svg{ width:calc(32 * var(--px)); height:calc(32 * var(--px)); }

  .stats{
    display:grid; grid-template-columns:1fr 1fr; gap:calc(28 * var(--px));
    width:100%;
  }
  .stat,.stat--photo{ width:auto; height:calc(210 * var(--px)); }

  .promo{ display:none; }

  .feat{ display:block; }
  .feat__block{
    position:static; width:auto; max-width:60ch;
    margin:0 5vw calc(130 * var(--px));
    padding-top:calc(60 * var(--px));
  }
  .feat__block:first-child{ padding-top:calc(150 * var(--px)); }
  .feat__index{ position:static; margin-bottom:calc(8 * var(--px)); }
  .feat__title{ font-size:clamp(34px,7.4vw,72px); }
  .feat__body{ font-size:clamp(15px,3.4vw,26px); line-height:1.5; }
}

@media (prefers-reduced-motion:reduce){
  .world__video{ display:none; }
  .nav__item{ transition:none; }
}