:root{
    --bg:#000000;
    --bg-2:#1B1611;
    --panel:#221B13;
    --panel-2:#2A2117;
    --ink:#F4EADA;
    --muted:#9E9281;
    --muted-2:#74695B;
    --amber:#E89A3C;
    --copper:#C9692E;
    --line:rgba(244,234,218,.12);
    --line-2:rgba(244,234,218,.06);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Hanken Grotesk',sans-serif;
    font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
  }
  /* grain + warm ambient glow */
  body::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(900px 600px at 78% -5%,  #ffffff29, transparent 60%),
      radial-gradient(700px 500px at 8% 18%,   #ffffff1A, transparent 60%),
      radial-gradient(800px 700px at 50% 105%, #ffffff12, transparent 60%);
  }
  body::after{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .wrap{max-width:1200px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
  a{color:inherit;text-decoration:none}
  .mono{font-family:'JetBrains Mono',monospace}
  .kicker{
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
    letter-spacing:.28em;text-transform:uppercase;color:var(--amber);
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(20,16,11,.72);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-2);
  }
  nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:flex;align-items:center;gap:11px;font-family:'Fraunces',serif;font-weight:600;font-size:22px;letter-spacing:.01em}
  .brand .dot{width:11px;height:11px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px 2px rgba(232,154,60,.8);animation:pulse 2.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
  .navlinks{display:flex;align-items:center;gap:34px}
  .navlinks a:not(.btn){font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .25s}
  .navlinks a:not(.btn):hover{color:var(--ink)}
  .btn{
    font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
    padding:11px 20px;border-radius:40px;border:1px solid var(--amber);color:var(--amber);
    transition:.28s ease;white-space:nowrap;
  }
  .btn:hover{background:var(--amber);color:#1a1208;box-shadow:0 0 26px -4px rgba(232,154,60,.7)}
  .btn-solid{background:var(--amber);color:#1a1208;border-color:var(--amber)}
  .btn-solid:hover{filter:brightness(1.08)}
  @media(max-width:820px){.navlinks .nl{display:none}}

  /* ---------- HERO ---------- */
  .hero{position:relative;padding:92px 0 70px}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
  .hero h1{
    font-family:'Fraunces',serif;font-weight:600;line-height:.96;letter-spacing:-.02em;
    font-size:clamp(50px,8vw,100px);margin:22px 0 26px;
  }
  .hero h1 em{font-style:italic;font-weight:400;color:var(--amber)}
  .hero p.lead{font-size:19px;color:var(--muted);max-width:30em;margin-bottom:34px}
  .hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
  .hero-stats{display:flex;gap:38px;margin-top:48px;border-top:1px solid var(--line-2);padding-top:26px}
  .hero-stats .s b{display:block;font-family:'Fraunces',serif;font-size:30px;line-height:1}
  .hero-stats .s span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .hero-art{display:flex;justify-content:center;position:relative}
  .hero-art .float{animation:bob 5.5s ease-in-out infinite;filter:drop-shadow(0 40px 50px rgba(0,0,0,.6))}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(-4deg)}}
  .hero-art .ring{position:absolute;width:380px;height:380px;border-radius:50%;border:1px dashed var(--line);top:50%;left:50%;transform:translate(-50%,-50%);animation:spin 38s linear infinite}
  @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
  @media(max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-art{order:-1}.hero-art .ring{width:300px;height:300px}}

  /* ---------- MARQUEE ---------- */
  .marquee{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:18px 0;overflow:hidden;background:rgba(0,0,0,.18)}
  .marquee-track{display:flex;gap:50px;white-space:nowrap;animation:scroll 26s linear infinite;width:max-content}
  .marquee span{font-family:'Fraunces',serif;font-style:italic;font-size:22px;color:var(--muted)}
  .marquee span b{color:var(--amber);font-style:normal;font-weight:400;margin-right:50px}
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* ---------- SECTION SHELL ---------- */
  section{padding:96px 0;position:relative}
  .sec-head{max-width:720px;margin-bottom:54px}
  .sec-head h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(34px,5vw,53px);line-height:1.04;letter-spacing:-.015em;margin:14px 0 18px}
  .sec-head p{color:var(--muted);font-size:18px}

  /* ---------- ETHOS ---------- */
  .ethos{background:linear-gradient(180deg,transparent, rgba(0,0,0,.22))}
  .ethos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .ecard{border:1px solid var(--line);border-radius:16px;padding:32px 28px;background:linear-gradient(160deg,var(--panel),var(--bg-2));transition:.3s}
  .ecard:hover{border-color:rgba(232,154,60,.4);transform:translateY(-4px)}
  .ecard .num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--copper);letter-spacing:.2em}
  .ecard h3{font-family:'Fraunces',serif;font-weight:500;font-size:24px;margin:14px 0 10px}
  .ecard p{color:var(--muted);font-size:15.5px}
  @media(max-width:760px){.ethos-grid{grid-template-columns:1fr}}

  /* ---------- PEDALS ---------- */
  .pedal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:26px}
  .pcard{
    border:1px solid var(--line);border-radius:18px;overflow:hidden;
    background:linear-gradient(165deg,var(--panel-2),var(--bg-2));
    display:flex;flex-direction:column;transition:.35s ease;position:relative;
  }
  .pcard:hover{transform:translateY(-6px);border-color:var(--led)}
  .pcard:hover .pedal-stage{box-shadow:inset 0 0 90px -30px var(--led)}
  .pedal-stage{
    padding:30px 0 22px;display:flex;justify-content:center;align-items:center;
    background:radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,.34), transparent 70%);
    transition:box-shadow .4s;
  }
  .pinfo{padding:6px 26px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
  .ptype{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--led)}
  .pcard h3{font-family:'Fraunces',serif;font-weight:600;font-size:27px;line-height:1}
  .pcard p{color:var(--muted);font-size:14.5px;flex:1}
  .pmeta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line-2);padding-top:16px;margin-top:4px}
  .price{font-family:'Fraunces',serif;font-size:24px}
  .price small{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);letter-spacing:.1em;display:block;text-transform:uppercase}
  .buy{
    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    padding:10px 16px;border-radius:30px;border:1px solid var(--led);color:var(--led);transition:.26s;display:inline-flex;gap:7px;align-items:center;
  }
  .buy:hover{background:var(--led);color:#15110b;box-shadow:0 0 22px -4px var(--led)}
  .buy svg{transition:transform .26s}
  .buy:hover svg{transform:translateX(3px)}

  /* knob hover rotation + led glow (driven by generated svg) */
  .pedal-art .knob{transform-box:fill-box;transform-origin:center;transition:transform .8s cubic-bezier(.2,.9,.2,1)}
  .pcard:hover .pedal-art .knob{transform:rotate(var(--kr,30deg))}
  .pedal-art .led-glow{opacity:.35;transition:opacity .4s}
  .pcard:hover .pedal-art .led-glow{opacity:.95}

  /* ---------- SPEC BAND ---------- */
  .specs{background:linear-gradient(180deg, rgba(0,0,0,.25), transparent)}
  .spec-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .spec{background:var(--bg-2);padding:30px 22px;text-align:center}
  .spec .ico{font-family:'Fraunces',serif;font-size:30px;color:var(--amber)}
  .spec b{display:block;font-size:15px;margin:12px 0 6px;font-weight:600}
  .spec span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);letter-spacing:.08em}
  @media(max-width:900px){.spec-row{grid-template-columns:repeat(2,1fr)}}

  /* ---------- BUY CTA ---------- */
  .cta{text-align:center;padding:110px 0}
  .cta .panel{border:1px solid var(--line);border-radius:24px;padding:64px 32px;background:linear-gradient(160deg,var(--panel),var(--bg-2));position:relative;overflow:hidden}
  .cta .panel::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 50% 0,rgba(232,154,60,.18),transparent 65%)}
  .cta h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(34px,5vw,54px);line-height:1.04;margin-bottom:18px;position:relative}
  .cta p{color:var(--muted);max-width:36em;margin:0 auto 32px;position:relative}
  .cta .hero-cta{justify-content:center;position:relative}

  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid var(--line-2);padding:54px 0 40px}
  .foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:34px}
  .foot-grid h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
  .foot-grid a{display:block;color:var(--muted);font-size:14.5px;padding:4px 0;transition:color .2s}
  .foot-grid a:hover{color:var(--amber)}
  .foot-bot{margin-top:44px;padding-top:24px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted-2);letter-spacing:.08em}

  /* reveal */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}

/* ---- */

  .brand .logo{height:25px;width:auto;display:block}
  footer .brand .logo{height:24px}
  .hero-art img.float{max-width:540px;width:118%;height:auto;filter:drop-shadow(0 38px 46px rgba(0,0,0,.65))}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
  .hero-art .ring{width:360px;height:360px}
  @media(max-width:820px){.hero-art img.float{width:92%;max-width:430px}.hero-art .ring{width:280px;height:280px}}

/* ---- */

  .pedal-photo{height:264px;width:auto;display:block;transition:transform .55s cubic-bezier(.2,.9,.2,1);filter:drop-shadow(0 16px 22px rgba(0,0,0,.55))}
  .pcard:hover .pedal-photo{transform:scale(1.07) rotate(-1.2deg)}