/* ===========================================================
   MochiMotion — Master Stylesheet (style.css)
   Used by: index.html, guide.html, repair.html, program.html, insurance.html
   Fonts: Inter + JetBrains Mono (loaded via Google Fonts in each page)
   =========================================================== */

* { margin:0; padding:0; box-sizing:border-box; }
  :root {
    --bg:#ffffff;
    --ink:#0a0a0a;
    --muted:#7a7a7a;
    --line:#ececec;
    --line-strong:#d8d8d8;
    --accent:#5865F2; /* discord */
    --hover:#f6f6f6;
    --dock-pink:#f7a8cd;
    --dock-blue:#a6c8ff;
    --dock-grad:linear-gradient(90deg,#f7a8cd,#a6c8ff);
    --dock-grad-soft:linear-gradient(90deg,#fdeef6,#eef4ff);
  }
  html { scroll-behavior:smooth; }
  body {
    font-family:'Inter', system-ui, -apple-system, sans-serif;
    background:var(--bg);
    color:var(--ink);
    font-weight:300;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .mono { font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); }

  /* NAV */
  nav {
    position:fixed; top:0; left:0; right:0;
    padding:22px 40px;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    z-index:100;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    will-change:transform;
  }
  .logo { justify-self:start; font-weight:500; font-size:14px; letter-spacing:0.18em; }
  .logo span { color:var(--muted); }
  .nav-links { display:flex; gap:36px; }
  .nav-links a { color:var(--ink); text-decoration:none; font-size:13px; font-weight:400; opacity:0.7; transition:opacity .2s; }
  .nav-links a:hover { opacity:1; }

  /* ===== macOS-STYLE DOCK NAVBAR ===== */
  .dock {
    justify-self:center;
    display:flex;
    align-items:flex-end;
    gap:6px;
    height:64px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.7);
    border:1px solid var(--line);
    box-shadow:0 6px 24px rgba(30,32,48,0.06);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    will-change:transform;
  }
  .dock-item {
    --scale:1;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:2px;
    padding:0 4px;
    height:100%;
    text-decoration:none;
    color:#7b7790;
    transform:scale(var(--scale));
    transform-origin:bottom center;
    transition:transform .18s cubic-bezier(.2,.8,.2,1), color .18s;
    white-space:nowrap;
  }
  .dock-item .ic {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:14px;
    flex-shrink:0;
    transition:background .18s;
  }
  .dock-item svg { width:20px; height:20px; }
  .dock-item .lbl { font-size:12.5px; font-weight:600; line-height:1; }
  .dock-item:hover { color:#2a2740; }
  .dock-item.active { color:#c07bb8; }
  .dock-item.active .ic { background:var(--dock-grad-soft); }
  /* glow above active item */
  .dock-item.active::before {
    content:"";
    position:absolute;
    top:-6px;
    left:50%;
    transform:translateX(-50%);
    width:34px;
    height:5px;
    border-radius:999px;
    background:var(--dock-grad);
    box-shadow:
      0 0 16px 3px rgba(247,168,205,0.55),
      0 0 22px 6px rgba(166,200,255,0.45);
  }
  .nav-right {
    justify-self:end;
    width:auto;
    display:flex; align-items:center; gap:16px;
  }
  .nav-cta {
    display:inline-flex; align-items:center; gap:8px;
    justify-self:end; align-self:center;
    width:auto; flex:0 0 auto; white-space:nowrap;
    padding:9px 16px;
    border:1px solid var(--ink);
    border-radius:999px;
    font-size:12px; font-weight:500;
    text-decoration:none; color:var(--ink);
    transition:background .2s, color .2s;
  }
  .nav-cta:hover { background:var(--ink); color:#fff; }
  .nav-cta svg { width:13px; height:13px; }

  /* CART BUTTON — deliberately not hidden at the mobile breakpoint (unlike
     .nav-cta above): cart access should stay reachable at every viewport
     width, not tucked behind the hamburger menu. */
  .cart-btn {
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 auto;
    width:38px; height:38px;
    background:transparent;
    border:1px solid var(--line-strong);
    border-radius:50%;
    color:var(--ink);
    cursor:pointer;
    transition:background .2s, border-color .2s;
  }
  .cart-btn:hover { background:var(--hover); border-color:var(--ink); }
  .cart-btn svg { width:17px; height:17px; }
  .cart-badge {
    position:absolute; top:-4px; right:-4px;
    min-width:16px; height:16px; padding:0 3px;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent); color:#fff;
    border-radius:999px;
    font-size:10px; font-weight:600; font-family:'JetBrains Mono', monospace;
    line-height:1;
  }

  /* CART DRAWER — slides in from the right, mirrors .modal-overlay's
     backdrop-blur treatment but the panel itself docks to an edge instead
     of centering, same idea as .mobile-nav's full-bleed slide-down. */
  .cart-overlay {
    position:fixed; inset:0;
    background:rgba(255,255,255,0.4);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    z-index:210;
    display:none;
    opacity:0;
    transition:opacity .3s;
  }
  .cart-overlay.active { display:block; opacity:1; }
  .cart-drawer {
    position:fixed; top:0; right:0; bottom:0;
    width:100%; max-width:420px;
    background:#fff;
    border-left:1px solid var(--line-strong);
    display:flex; flex-direction:column;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  .cart-overlay.active .cart-drawer { transform:translateX(0); }
  .cart-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 24px;
    border-bottom:1px solid var(--line);
  }
  .cart-head h3 { font-size:18px; font-weight:500; }
  .cart-items { flex:1; overflow-y:auto; padding:8px 24px; }
  .cart-empty { color:var(--muted); font-size:13.5px; text-align:center; padding:40px 0; line-height:1.6; }
  .cart-item {
    display:flex; gap:14px;
    padding:16px 0;
    border-bottom:1px solid var(--line);
  }
  .cart-item-thumb {
    flex-shrink:0; width:64px; height:64px;
    border-radius:6px; overflow:hidden;
    background:#fafafa;
    display:flex; align-items:center; justify-content:center;
  }
  .cart-item-thumb img { width:100%; height:100%; object-fit:cover; }
  .cart-item-thumb svg { width:55%; height:55%; opacity:0.85; }
  .cart-item-body { flex:1; min-width:0; }
  .cart-item-name { font-size:13.5px; font-weight:500; line-height:1.4; margin-bottom:4px; }
  .cart-item-price { font-size:12.5px; color:var(--muted); margin-bottom:8px; }
  .cart-item-qty { display:flex; align-items:center; gap:8px; }
  .qty-btn {
    width:24px; height:24px;
    display:flex; align-items:center; justify-content:center;
    background:transparent;
    border:1px solid var(--line-strong);
    border-radius:50%;
    font-size:14px; line-height:1; color:var(--ink);
    cursor:pointer;
    transition:background .2s;
  }
  .qty-btn:hover:not(:disabled) { background:var(--hover); }
  .qty-btn:disabled { opacity:0.35; cursor:not-allowed; }
  .qty-val { font-size:13px; font-family:'JetBrains Mono', monospace; min-width:16px; text-align:center; }
  .cart-item-remove {
    margin-left:auto;
    background:none; border:none;
    font-size:12px; color:var(--muted);
    text-decoration:underline; text-underline-offset:2px;
    cursor:pointer;
  }
  .cart-item-remove:hover { color:#c22; }
  .cart-footer { padding:20px 24px 24px; border-top:1px solid var(--line); }
  .cart-total-row {
    display:flex; justify-content:space-between; align-items:center;
    font-size:15px; font-weight:500;
    margin-bottom:14px;
  }
  .cart-note {
    font-size:11.5px; color:#a15c00;
    background:#fff3e0; border:1px solid #f0d9b3;
    padding:8px 10px; border-radius:6px;
    margin-bottom:12px; line-height:1.5;
  }
  .cart-cta-col { display:flex; flex-direction:column; gap:10px; }
  .cart-cta-col .modal-cta { margin-top:0; width:100%; }

  /* HERO */
  header.hero {
    min-height:100vh;
    padding:160px 40px 80px;
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative;
  }
  header.hero-video {
    padding:120px 40px 40px;
    align-items:center;
    justify-content:center;
    gap:36px;
  }
  .hero-canvas-el {
    display:block;
    height:72vh;
    max-width:100%;
    width:auto;
    border-radius:14px;
    background:transparent;
    pointer-events:none;
  }
  .hero-top { display:flex; justify-content:space-between; align-items:flex-end; gap:60px; flex-wrap:wrap; }
  .hero h1 {
    font-size:clamp(48px, 9vw, 140px);
    font-weight:200;
    letter-spacing:-0.04em;
    line-height:0.95;
    max-width:1100px;
  }
  .hero h1 em { font-style:normal; color:var(--muted); font-weight:200; }
  .hero-meta { text-align:right; max-width:280px; }
  .hero-meta p { font-size:13px; color:var(--muted); margin-top:8px; }

  .hero-bottom {
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-top:120px;
    padding-top:30px;
    border-top:1px solid var(--line);
    gap:40px; flex-wrap:wrap;
  }
  .hero-tag { font-size:13px; color:var(--muted); max-width:340px; line-height:1.6; }
  .scroll-cue { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--muted); letter-spacing:0.15em; text-transform:uppercase; }
  .scroll-cue::before { content:""; width:40px; height:1px; background:var(--ink); display:inline-block; }

  /* SECTION HEADER */
  section { padding:120px 40px; }
  .section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; gap:40px; flex-wrap:wrap; }
  .section-head h2 {
    font-size:clamp(32px, 5vw, 64px);
    font-weight:200;
    letter-spacing:-0.03em;
    line-height:1;
  }
  .section-head .desc { max-width:340px; font-size:14px; color:var(--muted); line-height:1.7; }

  /* FILTERS */
  .filters {
    display:flex; gap:6px; margin-bottom:40px; flex-wrap:wrap;
  }
  .filter-btn {
    padding:8px 16px;
    border:1px solid var(--line-strong);
    background:transparent;
    border-radius:999px;
    font-family:inherit;
    font-size:12px;
    color:var(--ink);
    cursor:pointer;
    transition:background-color .2s, border-color .2s, color .2s;
    font-weight:400;
  }
  .filter-btn:hover { background:var(--hover); }
  .filter-btn.active { background:var(--ink); color:#fff; border-color:var(--ink); }

  /* SHOP SEARCH + SORT — same visual language as .filter-btn (border,
     radius, font-size, transparent background), not a new style system. */
  .shop-tools { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
  .shop-tool-input, .shop-tool-select {
    padding:8px 16px;
    border:1px solid var(--line-strong);
    background:transparent;
    border-radius:999px;
    font-family:inherit;
    font-size:12px;
    color:var(--ink);
  }
  .shop-tool-input { flex:1; min-width:180px; }
  .shop-tool-input::placeholder { color:var(--muted); }
  .shop-tool-select { cursor:pointer; }

  /* PRODUCT GRID */
  .grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .card {
    background:#fff;
    padding:24px;
    cursor:pointer;
    transition:background .25s;
    display:flex; flex-direction:column;
    position:relative;
  }
  .card:hover { background:var(--hover); }
  .card .thumb {
    aspect-ratio:1/1;
    background:#fafafa;
    border-radius:4px;
    margin-bottom:18px;
    overflow:hidden;
    position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .card .thumb svg { width:55%; height:55%; opacity:0.85; transition:transform .4s ease; }
  .card:hover .thumb svg { transform:scale(1.06); }
  .card .thumb picture { display:block; width:100%; height:100%; }
  .card .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .card:hover .thumb img { transform:scale(1.04); }
  .card .thumb.mochi-bg { background:#f7eee3; }
  .card .thumb.mochi-bg svg { width:88%; height:88%; opacity:1; }
  .card .thumb.mochi-bg img { object-fit:contain; padding:6px; }
  .card .badge {
    position:absolute; top:10px; left:10px;
    background:#fff;
    border:1px solid var(--line);
    padding:4px 8px;
    border-radius:999px;
    font-size:10px;
    font-family:'JetBrains Mono', monospace;
    color:var(--muted);
    letter-spacing:0.05em;
  }
  .card .badge.new { background:var(--ink); color:#fff; border-color:var(--ink); }
  .card .badge.best { background:#d94a6e; color:#fff; border-color:#d94a6e; }
  .card .badge.pro { background:#5a3a5e; color:#fff; border-color:#5a3a5e; }
  .card .badge.used { background:#3b6e54; color:#fff; border-color:#3b6e54; }
  .card .badge.firsthand { background:#2563eb; color:#fff; border-color:#2563eb; }
  .card .badge.soon { background:#888; color:#fff; border-color:#888; }
  .card.coming-soon { opacity:0.78; }
  .card.coming-soon .price { color:var(--muted); font-size:13px; font-weight:400; }
  .card.coming-soon .price .currency { display:none; }
  .card-body { display:flex; flex-direction:column; gap:6px; }
  .card .cat { font-size:11px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.06em; text-transform:uppercase; }
  .card h3 { font-size:16px; font-weight:500; letter-spacing:-0.01em; }
  .card .price-row { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .card .price { font-size:14px; font-weight:500; }
  .card .price .currency { color:var(--muted); font-weight:300; font-size:12px; margin-right:2px; }
  .card .arrow {
    width:28px; height:28px; border-radius:50%;
    border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    transition:transform .25s, background .25s, border-color .25s;
  }
  .card:hover .arrow { background:var(--ink); border-color:var(--ink); transform:rotate(-45deg); }
  .card:hover .arrow svg { stroke:#fff; }
  .card .arrow svg { width:12px; height:12px; stroke:var(--ink); stroke-width:1.5; fill:none; transition:stroke .25s; }
  /* .card-add-row always wraps the button now (plus the qty stepper for
     every product except SlimeVR trackers) — the row owns the top margin
     that used to live on the button itself. */
  .card-add-row { display:flex; align-items:center; gap:8px; margin-top:10px; }
  .card-add-cart {
    display:flex; align-items:center; justify-content:center; gap:8px;
    flex:1; width:100%; padding:10px;
    background:transparent;
    border:1px solid var(--line-strong);
    border-radius:6px;
    font-family:inherit; font-size:12.5px; font-weight:500; color:var(--ink);
    cursor:pointer;
    transition:background .2s, border-color .2s;
  }
  .card-add-cart:hover { background:var(--hover); border-color:var(--ink); }
  .card-add-cart svg { width:14px; height:14px; }
  .qty-stepper { display:flex; align-items:center; gap:6px; flex-shrink:0; }

  .modal-qty-row { display:flex; align-items:center; gap:12px; margin-top:16px; }
  .modal-qty-label { font-size:13px; color:var(--muted); }

  /* MODAL */
  .modal-overlay {
    position:fixed; inset:0;
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    z-index:200;
    display:none;
    align-items:center; justify-content:center;
    padding:40px 20px;
    opacity:0;
    transition:opacity .3s;
  }
  .modal-overlay.active { display:flex; opacity:1; }
  .modal {
    background:#fff;
    border:1px solid var(--line-strong);
    border-radius:8px;
    max-width:980px; width:100%;
    max-height:90vh; overflow-y:auto;
    display:grid; grid-template-columns:1fr 1fr;
    transform:translateY(20px);
    transition:transform .3s;
  }
  .modal-overlay.active .modal { transform:translateY(0); }
  .modal-img {
    background:#fafafa;
    aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
    border-right:1px solid var(--line);
    overflow:hidden;
  }
  .modal-img svg { width:60%; height:60%; }
  .modal-img img { width:100%; height:100%; object-fit:cover; }
  .modal-img.mochi-bg { background:#f7eee3; }
  .modal-img.mochi-bg svg { width:85%; height:85%; }
  .modal-img.mochi-bg img { object-fit:contain; padding:20px; }
  .modal-body { padding:48px 40px; display:flex; flex-direction:column; gap:18px; }
  .modal-body .cat { font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; }
  .modal-body h3 { font-size:34px; font-weight:300; letter-spacing:-0.02em; line-height:1.05; }
  .modal-body .desc { font-size:14px; color:#444; line-height:1.7; margin-top:6px; }
  .modal-specs { margin-top:14px; border-top:1px solid var(--line); padding-top:18px; display:flex; flex-direction:column; gap:8px; }
  .spec-row { display:flex; justify-content:space-between; font-size:13px; }
  .spec-row span:first-child { color:var(--muted); }
  .modal-price-row { margin-top:16px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
  .modal-price { font-size:24px; font-weight:400; }
  .modal-price .currency { color:var(--muted); font-size:14px; margin-right:4px; }
  .stock { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
  .stock .dot { width:6px; height:6px; border-radius:50%; background:#22c55e; }
  .modal-cta-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
  .modal-cta-row .modal-cta { width:auto; flex:1; margin-top:0; }
  .modal-cta.outline {
    background:transparent;
    color:var(--accent);
    border:1.5px solid var(--accent);
  }
  .modal-cta.outline:hover { background:var(--accent); color:#fff; opacity:1; }
  /* Deliberately not --accent (Discord blurple) — this button pays by card,
     not Discord, so it gets its own deep-indigo color to read as a separate
     path rather than a third Discord button. */
  .modal-cta.stripe {
    background:transparent;
    color:#4338ca;
    border:1.5px solid #4338ca;
  }
  .modal-cta.stripe:hover { background:#4338ca; color:#fff; opacity:1; }
  /* Neutral (not accent/stripe-colored) — this is a non-checkout action, so
     it deliberately reads as visually distinct from the three purchase paths. */
  .modal-cta.cart {
    background:transparent;
    color:var(--ink);
    border:1.5px solid var(--line-strong);
  }
  .modal-cta.cart:hover { background:var(--hover); opacity:1; }
  .modal-cta:disabled { opacity:0.5; pointer-events:none; cursor:not-allowed; }
  .modal-cta {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:16px 22px;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:6px;
    font-family:inherit; font-size:14px; font-weight:500;
    text-decoration:none;
    margin-top:18px;
    cursor:pointer;
    transition:opacity .2s, transform .15s;
  }
  .modal-cta:hover { opacity:0.92; }
  .modal-cta:active { transform:scale(0.99); }
  .modal-cta svg { width:18px; height:18px; fill:currentColor; }
  .modal-note { font-size:11px; color:var(--muted); margin-top:8px; text-align:center; }
  .modal-close {
    position:absolute; top:20px; right:20px;
    width:36px; height:36px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--line-strong);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    z-index:1;
    transition:background .2s;
  }
  .modal-close:hover { background:var(--hover); }
  .modal-close::before, .modal-close::after {
    content:""; position:absolute; width:14px; height:1px; background:var(--ink);
  }
  .modal-close::before { transform:rotate(45deg); }
  .modal-close::after { transform:rotate(-45deg); }

  /* CTA SECTION */
  .cta-band {
    margin:0 40px;
    background:#0a0a0a;
    color:#fff;
    border-radius:12px;
    padding:80px 60px;
    display:flex; justify-content:space-between; align-items:center; gap:40px;
    flex-wrap:wrap;
  }
  .cta-band h2 { font-size:clamp(28px, 4vw, 48px); font-weight:200; letter-spacing:-0.02em; line-height:1.1; max-width:600px; }
  .cta-band p { color:#aaa; font-size:14px; margin-top:12px; max-width:520px; }
  .cta-band .discord-btn {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--accent); color:#fff;
    padding:16px 26px; border-radius:8px;
    text-decoration:none; font-size:14px; font-weight:500;
    transition:transform .15s, opacity .2s;
  }
  .cta-band .discord-btn:hover { opacity:.92; }
  .cta-band .discord-btn svg { width:20px; height:20px; fill:currentColor; }

  /* PERF: skip rendering work for offscreen sections until they're scrolled
     near — excludes #shop since it's the anchor target for the nav link and
     filter buttons. */
  #about, #contact {
    content-visibility:auto;
    contain-intrinsic-size:1px 900px;
  }

  /* FOOTER */
  footer { padding:60px 40px 40px; border-top:1px solid var(--line); margin-top:80px; }
  .foot-grid { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
  .foot-col h4 { font-size:11px; font-family:'JetBrains Mono', monospace; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:400; }
  .foot-col a { display:block; color:var(--ink); text-decoration:none; font-size:13px; padding:4px 0; opacity:0.75; }
  .foot-col a:hover { opacity:1; }
  .foot-bottom { display:flex; justify-content:space-between; margin-top:50px; padding-top:24px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); flex-wrap:wrap; gap:10px; }

  /* GUIDE MODAL */
  .guide-box {
    background:#fff;
    border:1px solid var(--line-strong);
    border-radius:10px;
    max-width:720px; width:100%;
    max-height:90vh; overflow-y:auto;
    padding:44px 44px 36px;
    position:relative;
    transform:translateY(20px);
    transition:transform .3s;
  }
  .modal-overlay.active .guide-box { transform:translateY(0); }
  .guide-head { margin-bottom:26px; }
  .guide-head .mono { margin-bottom:12px; }
  .guide-head h3 { font-size:28px; font-weight:300; letter-spacing:-0.02em; line-height:1.15; }
  .guide-head p { font-size:13px; color:var(--muted); margin-top:10px; line-height:1.6; max-width:520px; }
  .guide-tabs { display:flex; gap:6px; margin-bottom:28px; flex-wrap:wrap; }
  .guide-tab {
    padding:9px 16px;
    border:1px solid var(--line-strong);
    background:transparent;
    border-radius:999px;
    font-family:inherit; font-size:12px;
    color:var(--ink); cursor:pointer;
    transition:background-color .2s, border-color .2s, color .2s; font-weight:400;
  }
  .guide-tab:hover { background:var(--hover); }
  .guide-tab.active { background:var(--ink); color:#fff; border-color:var(--ink); }
  .guide-panel { display:none; }
  .guide-panel.active { display:block; animation:guideFade .35s ease; }
  @keyframes guideFade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
  .guide-steps { list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:4px; }
  .guide-steps li {
    counter-increment:step;
    position:relative;
    padding:18px 0 18px 52px;
    border-top:1px solid var(--line);
  }
  .guide-steps li:first-child { border-top:none; }
  .guide-steps li::before {
    content:counter(step);
    position:absolute; left:0; top:18px;
    width:32px; height:32px;
    border-radius:50%;
    background:var(--ink); color:#fff;
    font-family:'JetBrains Mono', monospace; font-size:13px;
    display:flex; align-items:center; justify-content:center;
  }
  .guide-steps li h4 { font-size:15px; font-weight:500; margin-bottom:4px; }
  .guide-steps li p { font-size:13px; color:#555; line-height:1.65; }
  .guide-steps li p b { font-weight:600; color:var(--ink); }
  .guide-steps li p a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
  .guide-steps li img {
    display:block;
    width:100%;
    max-width:480px;
    aspect-ratio:16/9;
    object-fit:cover;
    margin-top:14px;
    border-radius:6px;
    border:1px solid var(--line);
    background:#fafafa;
  }
  .guide-bullets {
    list-style:none;
    margin-top:8px;
    display:flex; flex-direction:column; gap:4px;
  }
  .guide-bullets li {
    counter-increment:none;
    border:none; padding:0 0 0 14px;
    font-size:13px; color:#555; line-height:1.6;
    position:relative;
  }
  .guide-bullets li::before {
    content:"–";
    position:static; left:auto; top:auto;
    width:auto; height:auto;
    background:transparent; color:var(--muted);
    margin-right:6px;
    font-family:inherit; font-size:13px;
    display:inline;
  }
  .guide-bullets li b { color:var(--ink); }
  .guide-source {
    font-size:11.5px;
    color:var(--muted);
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }
  .guide-source a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

  /* REPAIR MODAL SPECIFIC */
  .repair-highlights {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:14px;
    margin:8px 0 32px;
  }
  .repair-hl {
    display:flex; gap:14px; align-items:flex-start;
    padding:16px;
    background:#f9f6f0;
    border:1px solid #ecdfca;
    border-radius:8px;
  }
  .repair-hl-num {
    flex-shrink:0;
    width:42px; height:42px;
    border-radius:50%;
    background:var(--ink); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace;
    font-size:13px; font-weight:500;
  }
  .repair-hl h5 { font-size:14px; font-weight:600; margin-bottom:3px; }
  .repair-hl p { font-size:12px; color:#666; line-height:1.55; }
  .repair-section-title {
    font-size:13px;
    font-family:'JetBrains Mono', monospace;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--muted);
    margin:32px 0 14px;
    padding-bottom:8px;
    border-bottom:1px solid var(--line);
    font-weight:400;
  }
  .repair-brands {
    display:flex; flex-wrap:wrap; gap:6px;
    margin-bottom:8px;
  }
  .repair-brands span {
    font-size:12px;
    padding:6px 12px;
    background:var(--hover);
    border:1px solid var(--line);
    border-radius:999px;
    color:#333;
  }
  .repair-prices {
    display:flex; flex-direction:column;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
  }
  .repair-price-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px;
    font-size:13px;
    border-top:1px solid var(--line);
  }
  .repair-price-row:first-child { border-top:none; }
  .repair-price-row span { color:#555; }
  .repair-price-row b { font-weight:500; font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--ink); }

  /* PROGRAM MODAL */
  .programs { display:flex; flex-direction:column; gap:14px; margin-bottom:8px; }
  .program-card {
    display:flex; gap:18px; align-items:center;
    padding:18px 20px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    transition:background .2s, border-color .2s;
  }
  .program-card:hover { background:var(--hover); border-color:var(--line-strong); }
  .program-icon {
    flex-shrink:0;
    width:56px; height:56px;
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
  }
  .program-icon svg { width:32px; height:32px; }
  .program-icon img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
  .program-body { flex:1; min-width:0; }
  .program-meta {
    font-size:10.5px;
    font-family:'JetBrains Mono', monospace;
    text-transform:uppercase; letter-spacing:0.06em;
    color:var(--muted);
    margin-bottom:3px;
  }
  .program-body h4 { font-size:16px; font-weight:500; letter-spacing:-0.01em; margin-bottom:4px; }
  .program-body p { font-size:12.5px; color:#555; line-height:1.55; }
  .program-cta {
    flex-shrink:0;
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 14px;
    background:var(--ink); color:#fff;
    border-radius:6px;
    font-size:12px; font-weight:500;
    text-decoration:none;
    transition:opacity .2s;
  }
  .program-cta:hover { opacity:0.85; }
  .program-cta svg { width:13px; height:13px; }
  @media (max-width:780px){
    .program-card { flex-wrap:wrap; gap:12px; }
    .program-cta { width:100%; justify-content:center; padding:12px; }
  }
  .guide-tip {
    margin-top:20px;
    background:#f7eee3;
    border-radius:8px;
    padding:14px 16px;
    font-size:12.5px; color:#5a4a32; line-height:1.6;
  }
  .guide-tip b { font-weight:600; }
  .guide-cta {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; margin-top:24px;
    padding:15px 22px;
    background:var(--accent); color:#fff;
    border-radius:6px;
    text-decoration:none; font-size:13.5px; font-weight:500;
    transition:opacity .2s;
  }
  .guide-cta:hover { opacity:0.92; }
  .guide-cta svg { width:17px; height:17px; }

  /* RESPONSIVE */
  @media (max-width:1100px){
    .dock-item .lbl { display:none; }
    .dock-item { padding:0 8px; }
    .dock-item svg { width:18px; height:18px; }
  }
  @media (max-width:780px){
    nav { padding:16px 20px; }
    .nav-links { display:none; }
    .dock { display:none; }
    header.hero, section { padding-left:20px; padding-right:20px; }
    header.hero { padding-top:120px; }
    .hero-bottom { margin-top:60px; }
    .modal { grid-template-columns:1fr; }
    .modal-img { border-right:none; border-bottom:1px solid var(--line); }
    .modal-body { padding:32px 24px; }
    .modal-cta-row .modal-cta { flex:1 1 100%; }
    .cta-band { margin:0 20px; padding:50px 28px; }
    footer { padding:40px 20px; }
    .guide-box { padding:32px 22px 28px; }
    .guide-head h3 { font-size:22px; }
    .guide-steps li { padding-left:46px; }
  }

  /* fade-in animation */
  .fade-up { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
  .fade-up.in { opacity:1; transform:translateY(0); }

  /* ===== HAMBURGER ===== */
  .hamburger {
    display:none; flex-direction:column; justify-content:center; gap:5px;
    background:none; border:none; cursor:pointer; padding:6px;
    width:36px; height:36px;
  }
  .hamburger span {
    display:block; width:22px; height:1.5px; background:var(--ink);
    transition:transform .25s ease, opacity .2s ease, transform .25s ease;
  }
  .hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
  .hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

  /* ===== MOBILE NAV ===== */
  .mobile-nav {
    display:none; position:fixed; inset:0; top:65px;
    background:rgba(255,255,255,0.97); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    z-index:98; flex-direction:column; padding:28px 24px 40px; overflow-y:auto;
  }
  .mobile-nav.open { display:flex; }
  .mobile-nav-link {
    display:block; padding:17px 0; font-size:22px; font-weight:300; letter-spacing:-0.02em;
    color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); transition:color .15s;
  }
  .mobile-nav-link:hover { color:var(--accent); }
  .mobile-nav-discord {
    display:inline-flex; align-items:center; gap:10px; margin-top:28px;
    padding:14px 22px; background:var(--accent); color:#fff; border-radius:8px;
    text-decoration:none; font-size:14px; font-weight:500; transition:opacity .2s;
  }
  .mobile-nav-discord:hover { opacity:.9; }

  /* ===== FAQ ACCORDION ===== */
  .faq-list { display:flex; flex-direction:column; border-bottom:1px solid var(--line); }
  .faq-q {
    display:flex; justify-content:space-between; align-items:center;
    padding:17px 0; font-size:14.5px; font-weight:400; cursor:pointer;
    gap:20px; user-select:none; border-top:1px solid var(--line); transition:color .15s;
  }
  .faq-q:hover { color:var(--accent); }
  .faq-icon {
    flex-shrink:0; width:22px; height:22px; border-radius:50%;
    border:1px solid var(--line-strong); position:relative;
    transition:background .2s, border-color .2s;
  }
  .faq-icon::before, .faq-icon::after {
    content:""; position:absolute; top:50%; left:50%;
    background:var(--ink); transition:transform .25s ease, opacity .2s;
  }
  .faq-icon::before { width:10px; height:1px; transform:translate(-50%,-50%); }
  .faq-icon::after  { width:1px; height:10px; transform:translate(-50%,-50%); }
  .faq-item.open .faq-icon { background:var(--ink); border-color:var(--ink); }
  .faq-item.open .faq-icon::before { background:#fff; }
  .faq-item.open .faq-icon::after  { background:#fff; transform:translate(-50%,-50%) rotate(90deg) scaleY(0); opacity:0; }
  .faq-a {
    display:none; padding:2px 0 18px; font-size:13.5px; color:#555; line-height:1.72; max-width:560px;
  }
  .faq-a a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
  .faq-item.open .faq-a { display:block; animation:guideFade .3s ease; }

  /* ===== MOBILE POLISH ===== */
  @media (max-width:780px) {
    .hamburger { display:flex; }
    .nav-cta  { display:none; }
    .modal-overlay { padding:14px 10px; }
  }