:root{
    --panel-black:#161210;
    --panel-brown:#251e18;
    --panel-brown-2:#2e251d;
    --seam:#453626;
    --cream:#ede1c2;
    --cream-dim:#c9bd9e;
    --chrome:#a8adb3;
    --chrome-dark:#5a5e63;
    --amber:#ff9d42;
    --amber-dim:#c97530;
    --vu-red:#e2483f;
    --led-green:#5fd88f;
    --shadow: 0 12px 30px rgba(0,0,0,.45);
    --radius: 10px;
    --icon-gray:#393631;
    --icon-gray-edge:#4d493f;
    --icon-ink:#c9bd9e;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:
      radial-gradient(1200px 600px at 15% -10%, #2a2118 0%, transparent 60%),
      var(--panel-black);
    color:var(--cream-dim);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{ background:var(--amber); color:#1a1310; }

  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }

  .display{
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:.03em;
    color:var(--cream);
    font-weight:400;
  }
  .mono{ font-family:'JetBrains Mono',monospace; }

  .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

  /* ---------- textures ---------- */
  .tolex{
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.025) 0, transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(255,255,255,.02) 0, transparent 40%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px);
    background-color:var(--panel-brown);
  }

  /* ---------- nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:linear-gradient(180deg, #1c1611 0%, #171310 100%);
    border-bottom:1px solid var(--seam);
  }
  .navbar{
    display:flex; align-items:center;
    min-height:78px; padding:0 24px; max-width:1180px; margin:0 auto; gap:20px;
  }
  .brand{
    display:flex; align-items:center; flex-shrink:0;
  }
  .brand img{
    height:48px; width:146px;
    /* border-radius:11px;
    box-shadow:0 3px 10px rgba(0,0,0,.5), 0 0 0 1px var(--seam); */
  }

  .navlinks{
    display:flex; align-items:center; gap:2px;
    flex-wrap:nowrap; white-space:nowrap;
    flex:1 1 auto;
  }
  .navlinks > .nl{ position:relative; flex-shrink:0; }
  .navlinks a.top, .navlinks button.top{
    background:none; border:none; cursor:pointer;
    color:var(--chrome); font:600 12px/1 'Inter',sans-serif;
    letter-spacing:.14em; text-transform:uppercase;
    padding:9px 12px; border-radius:6px;
    transition:color .15s, background .15s;
  }
  .navlinks a.top:hover, .navlinks button.top:hover{ color:var(--cream); background:rgba(255,255,255,.05); }

  .dropdown{
    display:none; position:absolute; top:100%; left:0;
    padding-top:10px;
    min-width:210px;
    white-space:normal;
  }
  .dropdown-inner{
    background:var(--panel-brown-2); border:1px solid var(--seam);
    border-radius:8px; padding:6px; box-shadow:var(--shadow);
  }
  .nl:hover .dropdown, .dropdown:hover{ display:block; }
  .dropdown a{
    display:block; padding:8px 12px; font-size:13px; color:var(--cream-dim);
    border-radius:5px;
  }
  .dropdown a:hover{ background:rgba(255,157,66,.12); color:var(--amber); }

  .jack-btn{
    display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
    margin-left:16px;
    background:linear-gradient(180deg,#3a2f24,#241b14);
    border:1px solid var(--seam);
    color:var(--cream); font:700 11px/1 'Inter',sans-serif;
    letter-spacing:.12em; text-transform:uppercase;
    padding:10px 16px; border-radius:24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 10px rgba(0,0,0,.35);
  }
  .jack-btn:hover{ border-color:var(--amber-dim); color:var(--amber); }

  /* ---------- mobile hamburger + drawer ---------- */
  .nav-toggle-checkbox{ display:none; }
  .hamburger{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:40px; padding:9px; margin-left:auto;
    cursor:pointer; flex-shrink:0; border-radius:8px;
  }
  .hamburger span{
    display:block; width:100%; height:2px; background:var(--cream);
    border-radius:2px; transition:transform .2s ease, opacity .2s ease;
  }
  .mobile-drawer{ display:none; }

  @media (max-width:760px){
    .navlinks{ display:none; }
    .hamburger{ display:flex; margin-left:0; }
    .jack-btn{
      margin-left:auto; flex-shrink:0;
      padding:9px 14px; font-size:10px; letter-spacing:.08em;
    }

    .nav-toggle-checkbox:checked ~ .navbar .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .nav-toggle-checkbox:checked ~ .navbar .hamburger span:nth-child(2){ opacity:0; }
    .nav-toggle-checkbox:checked ~ .navbar .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    .nav-toggle-checkbox:checked ~ .mobile-drawer{ display:block; }

    .mobile-drawer{
      background:var(--panel-brown-2);
      border-top:1px solid var(--seam);
      border-bottom:1px solid var(--seam);
      max-height:calc(100vh - 78px);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
    }
    .mobile-drawer-inner{ padding:8px 20px 20px; }

    .m-group{ border-bottom:1px solid var(--seam); }
    .m-group summary{
      list-style:none; cursor:pointer;
      display:flex; align-items:center; justify-content:space-between;
      padding:16px 4px;
      font:700 12px/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase;
      color:var(--cream);
    }
    .m-group summary::-webkit-details-marker{ display:none; }
    .m-group summary::after{ content:'+'; font-size:18px; color:var(--amber); }
    .m-group[open] summary::after{ content:'\2212'; }
    .m-list{ display:flex; flex-direction:column; padding:0 4px 14px; }
    .m-list a{
      padding:11px 8px; font-size:14px; color:var(--cream-dim);
      border-radius:6px;
    }
    .m-list a:active{ background:rgba(255,157,66,.12); color:var(--amber); }

    .m-link{
      display:block; padding:16px 4px; border-bottom:1px solid var(--seam);
      font:700 12px/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase;
      color:var(--cream);
    }
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font:700 11px/1 'JetBrains Mono',monospace;
    letter-spacing:.18em; text-transform:uppercase;
    color:var(--chrome);
    margin-bottom:18px;
  }
  .led{
    width:9px; height:9px; border-radius:50%;
    background:var(--led-green);
    box-shadow:0 0 8px 2px rgba(95,216,143,.7);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.45;} }
  .hero-sub{
    font-size:20px; color:var(--cream-dim); max-width:640px;
    font-weight:500; margin-bottom:8px;
  }
  .hero-copy{ max-width:640px; color:var(--chrome); font-size:15.5px; margin-bottom:30px;}

  .cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:50px; }
  .cta-primary{
    background:linear-gradient(180deg, var(--amber), var(--amber-dim));
    color:#1c1310; font:800 13px/1 'Inter',sans-serif;
    letter-spacing:.06em; text-transform:uppercase;
    padding:15px 26px; border-radius:8px;
    box-shadow:0 8px 20px rgba(255,157,66,.25), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .cta-secondary{
    border:1px solid var(--seam); color:var(--cream-dim);
    font:600 13px/1 'Inter',sans-serif; letter-spacing:.05em;
    padding:15px 22px; border-radius:8px;
  }
  .cta-secondary:hover{ border-color:var(--chrome); color:var(--cream); }
  .badge-link{
    display:inline-flex; align-items:center; line-height:0; flex-shrink:0;
  }
  .badge-link img{ height:48px; width:auto; display:block; }

  /* ---------- channel sections ---------- */
  .channel{
    padding:80px 0;
    border-top:1px solid var(--seam);
  }
  .channel .wrap{
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  }
  .channel.flip .wrap{ direction:rtl; }
  .channel.flip .wrap > *{ direction:ltr; }

  .ch-tag{
    display:inline-flex; align-items:center; gap:10px;
    font:700 11px/1 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase;
    color:var(--amber); margin-bottom:16px;
    padding:6px 12px; border:1px solid var(--amber-dim); border-radius:20px;
  }
  .channel h2{ font-size:clamp(32px,4vw,44px); margin:0 0 18px; }
  .channel p{ color:var(--chrome); font-size:15px; max-width:520px; }

  .art{
    border-radius:var(--radius); border:1px solid var(--seam);
    overflow:hidden; box-shadow:var(--shadow);
    background:var(--panel-brown);
  }
  .art img{ width:100%; height:auto; display:block; }

  @media (max-width: 860px){
    .channel .wrap{ grid-template-columns:1fr; gap:28px; }
    .channel.flip .wrap{ direction:ltr; }
  }

  /* ---------- footer ---------- */
  footer{
    background:linear-gradient(180deg, var(--panel-black), #0e0b09);
    border-top:1px solid var(--seam);
    padding:60px 0 30px;
  }
  .foot-grid{
    display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:32px;
    margin-bottom:44px;
  }
  .foot-grid h4{
    font:700 11px/1 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase;
    color:var(--chrome); margin:0 0 16px;
  }
  .foot-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .foot-grid a{ font-size:13.5px; color:var(--cream-dim); }
  .foot-grid a:hover{ color:var(--amber); }
  .foot-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .foot-brand img{ height:22px; }
  .foot-copy{ font-size:12px; color:var(--chrome-dark); }

  .jacks{ display:flex; gap:12px; margin-top:14px; }
  .jack{
    width:34px; height:34px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #33291d, #17130f 75%);
    border:2px solid var(--chrome-dark);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; color:var(--chrome);
  }
  .jack:hover{ border-color:var(--amber); color:var(--amber); }

  .foot-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    border-top:1px solid var(--seam); padding-top:22px;
  }

  @media (max-width:900px){
    .foot-grid{ grid-template-columns:1fr 1fr 1fr; }
  }
  @media (max-width:700px){
    .foot-grid{ grid-template-columns:1fr 1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    .led{ animation:none; }
  }
  .section-head{ margin-bottom:30px; }
  .section-head h2{ font-size:clamp(30px,4vw,42px); margin:8px 0 8px; }
  .section-head p{ color:var(--chrome); font-size:14.5px; max-width:520px; margin:0; }

  /* ---------- homepage: hero ribbon + product grid ---------- */
  .art{ position:relative; }