:root{
    --navy:#0a1220;
    --navy-2:#101b32;
    --navy-3:#16233f;
    --gold:#f4b400;
    --gold-deep:#c98900;
    --cream:#eeeae0;
    --teal:#12777e;
    --maroon:#5c2530;
    --line: rgba(238,234,224,0.12);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--navy);
    color:var(--cream);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--gold); color:var(--navy); }

  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:.28em;
    text-transform:uppercase;
    font-size:.72rem;
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:.6rem;
  }
  .eyebrow::before{
    content:"";
    width:18px;height:1px;
    background:var(--gold);
    display:inline-block;
  }

  h1,h2,h3{
    font-family:'Anton',sans-serif;
    text-transform:uppercase;
    font-weight:400;
    line-height:0.95;
    letter-spacing:.01em;
  }

  /* ---------- NAV ---------- */
  nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.4rem 2rem;
    mix-blend-mode:normal;
    transition:background .3s ease, padding .3s ease, border-color .3s ease;
    border-bottom:1px solid transparent;
  }
  nav.scrolled{
    background:rgba(10,18,32,0.86);
    backdrop-filter:blur(10px);
    padding:1rem 2rem;
    border-bottom:1px solid var(--line);
  }
  .logo-lockup{
    font-family:'Anton',sans-serif;
    font-size:1.3rem;
    letter-spacing:.03em;
    color:var(--cream);
  }
  .logo-lockup span{color:var(--gold);}
  .nav-tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:.68rem;
    letter-spacing:.18em;
    color:var(--cream);
    border:1px solid var(--line);
    padding:.4rem .8rem;
    border-radius:2px;
    text-transform:uppercase;
  }

  /* ---------- OIL GAUGE (signature element) ---------- */
  .gauge{
    position:fixed;
    right:1.4rem;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:min(46vh, 380px);
    z-index:90;
    display:flex;
    flex-direction:column;
    align-items:center;
    pointer-events:none;
  }
  .gauge-tube{
    position:relative;
    width:14px;
    flex:1;
    border-radius:8px;
    background:linear-gradient(180deg, rgba(238,234,224,.06), rgba(238,234,224,.03));
    border:1px solid var(--line);
    overflow:hidden;
  }
  .gauge-fill{
    position:absolute;
    bottom:0;left:0;right:0;
    height:0%;
    background:linear-gradient(180deg,#ffd75e,var(--gold) 40%,var(--gold-deep));
    box-shadow:0 0 12px rgba(244,180,0,.55);
    transition:height .08s linear;
  }
  .gauge-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:.58rem;
    letter-spacing:.14em;
    color:var(--cream);
    opacity:.55;
    margin:.4rem 0;
  }
  @media (max-width: 860px){ .gauge{ display:none; } }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    height:100vh;
    min-height:640px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
  }
  #heroCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    z-index:0;
  }
  .hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
  }
      .hero-scrim{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(10,18,32,.55) 0%, rgba(10,18,32,.15) 30%, rgba(10,18,32,.55) 68%, rgba(10,18,32,.97) 100%),
      linear-gradient(90deg, rgba(10,18,32,.55) 0%, rgba(10,18,32,0) 35%);
    z-index:1;
  }
  .hero-content{
    position:relative;
    z-index:2;
    padding:8rem 2rem 5.5rem;
    max-width:1100px;
  }
  .hero-content .eyebrow{margin-bottom:1.4rem;}
  .hero-content h1{
    font-size:clamp(2.8rem, 8vw, 6.4rem);
    color:var(--cream);
  }
  .hero-content h1 em{
    font-style:normal;
    color:var(--gold);
  }

  /* ---------- PRODUCT CAPTION (small, sits under the header) ---------- */
  .product-caption{
    display:flex;
    align-items:baseline;
    gap:.6rem;
    margin-top:1rem;
    flex-wrap:wrap;
  }
  .product-caption .pc-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:.62rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--cream);
    opacity:.45;
  }
  .product-caption .pc-name{
    font-family:'Anton',sans-serif;
    text-transform:uppercase;
    font-size:1rem;
    letter-spacing:.01em;
    color:var(--gold);
  }
  .product-caption .pc-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:.72rem;
    letter-spacing:.04em;
    color:var(--cream);
    opacity:.7;
  }

  .hero-sub{
    font-size:clamp(1rem,1.6vw,1.2rem);
    max-width:520px;
    color:var(--cream);
    opacity:.78;
    margin-top:1.3rem;
    line-height:1.55;
  }

  /* ---------- PRODUCT STAGE ---------- */
  .hero-visual{
    --accent:#f4b400;
    position:relative;
    width:min(34vw, 480px);
    height:min(78vh, 720px);
    flex:0 0 auto;
    margin:0 2vw 0 0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .hero-glow{
    position:absolute;
    left:50%; top:38%;
    width:120%; aspect-ratio:1/1;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 20%, transparent) 42%, transparent 70%);
    transition:background .5s ease;
    will-change:transform;
    pointer-events:none;
  }
  .hero-bottle{
    position:absolute;
    left:50%; bottom:0;
    height:90%;
    width:auto;
    max-width:96%;
    display:none;
    filter:drop-shadow(0 40px 50px rgba(0,0,0,.55));
    transform:translateX(-50%) translateY(var(--py,0)) rotate(var(--prot,0deg)) scale(var(--pscale,1));
    will-change:transform;
  }
  .hero-bottle.active{
    display:block;
    animation:bottleIn .5s ease;
  }
  @keyframes bottleIn{
    from{ opacity:0; transform:translateX(-50%) translateY(calc(var(--py,0) + 14px)) scale(0.97); }
    to{ opacity:1; }
  }
  .hero-tag{
    position:absolute;
    right:-.4rem; top:14%;
    max-width:190px;
    font-family:'IBM Plex Mono',monospace;
    font-size:.62rem;
    letter-spacing:.06em;
    color:var(--cream);
    background:rgba(10,18,32,.55);
    border:1px solid var(--line);
    padding:.5rem .7rem;
    border-radius:2px;
    text-align:right;
    line-height:1.55;
    backdrop-filter:blur(6px);
    z-index:2;
  }
  .hero-tag b{
    color:var(--accent, var(--gold));
    display:block;
    font-family:'Anton',sans-serif;
    font-size:.85rem;
    letter-spacing:.02em;
    margin-bottom:.25rem;
    text-transform:uppercase;
  }
  .product-dots{
    position:absolute;
    left:50%; bottom:.6rem;
    transform:translateX(-50%);
    display:flex;
    gap:.5rem;
    z-index:2;
  }
  .product-dots .dot{
    width:8px;height:8px;
    border-radius:50%;
    border:1px solid var(--line);
    background:transparent;
    padding:0;
    cursor:pointer;
    transition:background .25s ease, transform .25s ease;
  }
  .product-dots .dot.active{
    background:var(--accent, var(--gold));
    transform:scale(1.25);
  }
  @media (max-width: 900px){
    .hero-inner{ flex-direction:column-reverse; align-items:center; gap:1.2rem; }
    .hero-visual{ width:64vw; height:40vh; margin:0; }
    .hero-content{ padding-top:6rem; padding-bottom:1rem; text-align:center; }
    .hero-sub{ margin-left:auto; margin-right:auto; }
    .product-caption{ justify-content:center; }
    .hero-tag{ display:none; }
  }

  .scroll-cue{
    position:absolute;
    bottom:1.8rem;left:2rem;
    z-index:2;
    display:flex;
    align-items:center;
    gap:.7rem;
    font-family:'IBM Plex Mono',monospace;
    font-size:.65rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--cream);
    opacity:.6;
  }
  .scroll-cue .line{
    width:1px;height:28px;
    background:var(--cream);
    opacity:.5;
    animation:pour 2.2s ease-in-out infinite;
    transform-origin:top;
  }
  @keyframes pour{
    0%{transform:scaleY(0);opacity:0;}
    40%{transform:scaleY(1);opacity:.8;}
    100%{transform:scaleY(1);opacity:0;}
  }

  /* ---------- SECTION SHELL ---------- */
  section{
    position:relative;
    padding:7rem 2rem;
    max-width:1280px;
    margin:0 auto;
  }
  .section-head{
    display:flex;
    flex-direction:column;
    gap:1.1rem;
    max-width:640px;
    margin-bottom:3.2rem;
  }
  .section-head h2{ font-size:clamp(2rem,4.4vw,3.2rem); }
  .section-head p{ color:var(--cream); opacity:.72; line-height:1.6; font-size:1.02rem; }

  .reveal{
    opacity:0;
    transform:translateY(36px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal.d1{transition-delay:.08s;}
  .reveal.d2{transition-delay:.16s;}
  .reveal.d3{transition-delay:.24s;}
  .reveal.d4{transition-delay:.32s;}

  /* ---------- SCIENCE ---------- */
  .science{
    background:var(--navy-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .science-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:3.5rem;
    align-items:center;
  }
  @media (max-width:900px){ .science-grid{grid-template-columns:1fr;} }

  .molecule{
    position:relative;
    aspect-ratio:1/1;
    max-width:420px;
    margin:0 auto;
  }
  .molecule svg{width:100%;height:100%;}
  .molecule circle.node{ fill:var(--navy-3); stroke:var(--gold); stroke-width:1.4; }
  .molecule circle.node.core{ fill:var(--gold); stroke:none; }
  .molecule line{ stroke:var(--cream); stroke-opacity:.35; stroke-width:1.2; }
  .molecule .orbit{
    fill:none; stroke:var(--cream); stroke-opacity:.12; stroke-width:1;
  }
  .molecule .spin{ transform-origin:50% 50%; animation:spin 26s linear infinite; }
  .molecule .spin-rev{ transform-origin:50% 50%; animation:spin 34s linear infinite reverse; }
  @keyframes spin{ to{ transform:rotate(360deg);} }

  .grade-readout{
    font-family:'IBM Plex Mono',monospace;
    display:flex;
    align-items:baseline;
    gap:1rem;
    margin-top:1.6rem;
  }
  .grade-readout .num{
    font-family:'Anton',sans-serif;
    font-size:3.2rem;
    color:var(--gold);
    min-width:190px;
    letter-spacing:.01em;
  }
  .grade-readout .desc{
    font-size:.82rem;
    opacity:.65;
    max-width:260px;
    line-height:1.5;
  }
  .grade-track{
    margin-top:2.2rem;
    display:flex;
    gap:.5rem;
  }
  .grade-track .tick{
    flex:1;height:3px;
    background:var(--line);
    border-radius:2px;
    overflow:hidden;
  }
  .grade-track .tick i{
    display:block;height:100%;width:0%;
    background:var(--gold);
    transition:width .4s ease;
  }

  .spec-list{ margin-top:2.4rem; display:flex; flex-direction:column; gap:1rem; }
  .spec-list .row{
    display:flex; justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding-bottom:.9rem;
    font-size:.92rem;
  }
  .spec-list .row span:first-child{ opacity:.6; }
  .spec-list .row span:last-child{ font-family:'IBM Plex Mono',monospace; color:var(--gold); }

  /* ---------- RANGE ---------- */
  .range-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1.2rem;
  }
  @media (max-width:1100px){ .range-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:700px){ .range-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:460px){ .range-grid{grid-template-columns:1fr;} }

  .range-card{
    position:relative;
    height:420px;
    border-radius:6px;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--navy-2);
  }
  .range-card img{
    position:absolute; inset:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .range-card:hover img{ transform:scale(1.07); }
  .range-card.featured{ background:radial-gradient(circle at 50% 30%, rgba(244,180,0,.14), var(--navy-2) 65%); }
  .range-card.featured img{
    object-fit:contain;
    padding:2.2rem 2.6rem 3.4rem;
    filter:drop-shadow(0 18px 22px rgba(0,0,0,.5));
  }
  .range-card.featured:hover img{ transform:scale(1.04); }
  .range-card .scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,18,32,0) 40%, rgba(10,18,32,.94) 100%);
  }
  .range-card .info{
    position:absolute; left:0; right:0; bottom:0;
    padding:1.3rem 1.2rem;
    z-index:2;
  }
  .range-card .info .code{
    font-family:'IBM Plex Mono',monospace;
    font-size:.68rem;
    letter-spacing:.14em;
    color:var(--gold);
    display:block;
    margin-bottom:.35rem;
  }
  .range-card .info h3{ font-size:1.15rem; color:var(--cream); }
  .range-card .tag{
    position:absolute; top:1rem; left:1rem; z-index:2;
    font-family:'IBM Plex Mono',monospace;
    font-size:.62rem; letter-spacing:.1em;
    background:rgba(10,18,32,.6);
    border:1px solid var(--line);
    padding:.3rem .55rem;
    border-radius:2px;
    color:var(--cream);
  }

  /* ---------- COUNTDOWN / NOTIFY ---------- */
  .notify{
    background:
      radial-gradient(circle at 15% 20%, rgba(244,180,0,.10), transparent 45%),
      var(--navy);
    text-align:center;
  }
  .notify .section-head{ margin:0 auto 3rem; align-items:center; text-align:center; }
  .countdown{
    display:flex;
    justify-content:center;
    gap:clamp(1rem,3vw,2.6rem);
    margin-bottom:3rem;
  }
  .countdown .unit{
    display:flex; flex-direction:column; align-items:center;
    min-width:74px;
  }
  .countdown .unit .val{
    font-family:'Anton',sans-serif;
    font-size:clamp(2.2rem,6vw,3.6rem);
    color:var(--gold);
    line-height:1;
  }
  .countdown .unit .lbl{
    font-family:'IBM Plex Mono',monospace;
    font-size:.62rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:.55;
    margin-top:.5rem;
  }
  .countdown .sep{
    font-family:'Anton',sans-serif;
    font-size:clamp(2rem,5vw,3rem);
    color:var(--line);
    align-self:flex-start;
    margin-top:-2px;
  }

  form.signup{
    display:flex;
    max-width:460px;
    margin:0 auto;
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
    background:var(--navy-2);
  }
  form.signup input{
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    padding:1rem 1.2rem;
    color:var(--cream);
    font-family:'Inter',sans-serif;
    font-size:.95rem;
  }
  form.signup input::placeholder{ color:rgba(238,234,224,.4); }
  form.signup button{
    background:var(--gold);
    color:var(--navy);
    border:none;
    padding:0 1.6rem;
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    font-size:.78rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .2s ease;
  }
  form.signup button:hover{ background:var(--gold-deep); }
  .form-note{
    font-family:'IBM Plex Mono',monospace;
    font-size:.7rem;
    opacity:.45;
    margin-top:1rem;
  }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:2.6rem 2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    max-width:1280px;
    margin:0 auto;
    font-family:'IBM Plex Mono',monospace;
    font-size:.72rem;
    opacity:.55;
  }
  footer a{ color:var(--cream); text-decoration:none; opacity:.8; }
  footer .foot-links{ display:flex; gap:1.4rem; }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    .reveal{ opacity:1; transform:none; }
  }