:root {
    --bg:      #07001a;
    --bg-2:    #0d0028;
    --cyan:    #00fff0;
    --magenta: #ff00c8;
    --gold:    #ffb800;
    --white:   #e8e8ff;
    --font-display: 'Orbitron', monospace;
    --font-mono:    'Share Tech Mono', monospace;
    --font-body:    'Exo 2', sans-serif;
  }

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

  body {
    background: var(--bg);
    color: var(--white);
    font-family: var(--font-body);
    overflow-x: hidden;
  }

  body::after {
    content:'';
    position:fixed; inset:0;
    background: repeating-linear-gradient(
      0deg, transparent, transparent 2px,
      rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px
    );
    pointer-events:none;
    z-index:8000;
  }

  /* ===========================
     CURTAIN
  =========================== */
  #curtain {
    position:fixed; inset:0;
    background:linear-gradient(135deg,var(--bg-2),#1a0030);
    z-index:9990; transform:translateY(-100%);
    pointer-events:none;
    display:flex; align-items:center; justify-content:center;
  }
  #curtain .curtain-text {
    font-family:var(--font-mono); font-size:0.75rem;
    letter-spacing:0.3em; color:var(--cyan);
    opacity:0; transition:opacity 0.3s;
  }
  #curtain.entering { animation:curtainIn .5s cubic-bezier(.76,0,.24,1) forwards; }
  #curtain.entering .curtain-text { opacity:1; }
  #curtain.leaving  { animation:curtainOut .55s cubic-bezier(.76,0,.24,1) forwards; }
  @keyframes curtainIn  { from{transform:translateY(-100%)} to{transform:translateY(0)} }
  @keyframes curtainOut { from{transform:translateY(0)} to{transform:translateY(100%)} }

  /* ===========================
     NAV
  =========================== */
  nav {
    position:fixed; top:0; left:0; right:0; z-index:500;
    padding:1.5rem 3rem;
    display:flex; justify-content:space-between; align-items:center;
    background:linear-gradient(to bottom,rgba(7,0,26,0.95),transparent);
  }
  .nav-wordmark {
    font-family:var(--font-display); font-size:0.7rem; font-weight:700;
    color:var(--cyan); letter-spacing:0.25em; text-decoration:none;
  }
  .nav-links { display:flex; gap:2.5rem; list-style:none; align-items:center; }
  .nav-links a {
    font-family:var(--font-mono); font-size:0.78rem;
    color:rgba(232,232,255,0.65); text-decoration:none;
    letter-spacing:0.08em; transition:color 0.2s; position:relative;
  }
  .nav-links a::after {
    content:''; position:absolute; bottom:-3px; left:0;
    width:0; height:1px; background:var(--cyan); transition:width 0.3s;
  }
  .nav-links a:hover { color:var(--cyan); }
  .nav-links a:hover::after { width:100%; }
  .nav-cta {
    font-family:var(--font-display) !important; font-size:0.68rem !important;
    font-weight:700 !important; letter-spacing:0.15em !important;
    color:var(--bg) !important; background:var(--cyan);
    padding:0.55rem 1.3rem; transition:background 0.2s !important;
    text-decoration:none;
  }
  .nav-cta:hover { background:var(--magenta) !important; }
  .nav-cta::after { display:none !important; }

  /* ===========================
     PAGE HEADER
  =========================== */
  #page-header {
    position:relative;
    padding:9rem 2rem 0rem;
    text-align:center;
    overflow:hidden;
  }
  #header-canvas {
    position:absolute; bottom:0; left:0;
    width:100%; height:60%; z-index:0; opacity:0.45;
  }
  .page-header-inner { position:relative; z-index:1; max-width:860px; margin:0 auto; }
  .page-label {
    font-family:var(--font-mono); font-size:0.68rem;
    letter-spacing:0.35em; color:var(--magenta);
    text-transform:uppercase; margin-bottom:1.2rem;
    opacity:0; animation:fadeUp 0.7s ease 0.3s forwards;
  }
  .page-title {
    font-family:var(--font-display);
    font-size:clamp(2rem,5vw,3.1rem);
    font-weight:900; line-height:1.1; margin-bottom:1.5rem;
    opacity:0; animation:fadeUp 0.7s ease 0.45s forwards;
  }
  .page-title em { font-style:normal; color:var(--cyan); }
  .page-sub {
    font-family:var(--font-mono); font-size:0.88rem;
    color:rgba(232,232,255,0.9); letter-spacing:0.1em; line-height:2;
    opacity:0; animation:fadeUp 0.7s ease 0.6s forwards;
  }
  @keyframes fadeUp {
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* ===========================
     SECTION COMMON
  =========================== */
  section { position:relative; padding:6rem 3rem; }
  .section-inner { max-width:1200px; margin:0 auto; }
  .section-label {
    font-family:var(--font-mono); font-size:0.68rem;
    letter-spacing:0.3em; color:var(--magenta);
    text-transform:uppercase; margin-bottom:0.8rem;
    
  }
  .section-title {
    font-family:var(--font-display);
    font-size:clamp(1.5rem,3vw,2.2rem);
    font-weight:900; line-height:1.2; margin-bottom:3rem;
    
  }
  .section-divider {
    width:100%; height:1px;
    background:linear-gradient(to right,transparent,rgba(0,255,240,0.15),transparent);
  }

  /* ===========================
     PRODUCT CARDS
  =========================== */
  #products { background:var(--bg); }

  .products-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    align-items:start;
  }

  /* --- Shared card base --- */
  .product-card {
    position:relative;
    padding:3.5rem 3rem 3rem;
    border:1px solid transparent;
    
    transition:box-shadow 0.4s;
  }
  .product-card::before {
    content:'';
    position:absolute; inset:0;
    background:var(--card-bg);
    clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));
    z-index:0;
  }
  .product-card > * { position:relative; z-index:1; }

  /* --- Learning Lab (cyan) --- */
  .card-lab {
    --card-bg: linear-gradient(145deg,rgba(0,255,240,0.04),rgba(0,255,240,0.01));
    border-color:rgba(0,255,240,0.2);
  }
  .card-lab:hover { box-shadow:0 0 50px rgba(0,255,240,0.06); }
  .card-lab .product-accent { color:var(--cyan); }
  .card-lab .product-price-num { color:var(--cyan); text-shadow:0 0 30px rgba(0,255,240,0.3); }
  .card-lab .feature-check { color:var(--cyan); }
  .card-lab .product-cta {
    border-color:var(--cyan); color:var(--cyan);
  }
  .card-lab .product-cta::before { background:var(--cyan); }
  .card-lab .product-cta:hover { color:var(--bg); }

  /* --- Tech Support (magenta) --- */
  .card-support {
    --card-bg: linear-gradient(145deg,rgba(255,0,200,0.05),rgba(255,0,200,0.01));
    border-color:rgba(255,0,200,0.25);
  }
  .card-support:hover { box-shadow:0 0 50px rgba(255,0,200,0.07); }
  .card-support .product-accent { color:var(--magenta); }
  .card-support .product-price-num { color:var(--magenta); text-shadow:0 0 30px rgba(255,0,200,0.3); }
  .card-support .feature-check { color:var(--magenta); }
  .card-support .product-cta {
    border-color:var(--magenta); color:var(--magenta);
  }
  .card-support .product-cta::before { background:var(--magenta); }
  .card-support .product-cta:hover { color:var(--bg); }

  /* --- Card badge --- */
  .product-badge {
    display:inline-block;
    font-family:var(--font-mono); font-size:0.62rem;
    letter-spacing:0.25em; text-transform:uppercase;
    border:1px solid currentColor;
    padding:0.28rem 0.75rem;
    margin-bottom:2rem;
    opacity:0.7;
  }

  /* --- Card label --- */
  .product-label {
    font-family:var(--font-mono); font-size:0.68rem;
    letter-spacing:0.25em; text-transform:uppercase;
    margin-bottom:0.6rem; opacity:0.5;
  }

  /* --- Product name --- */
  .product-name {
    font-family:var(--font-display);
    font-size:clamp(1.4rem,2.5vw,1.9rem);
    font-weight:900; line-height:1.1;
    letter-spacing:0.06em; margin-bottom:1rem;
  }

  /* --- Product tagline --- */
  .product-tagline {
    font-size:0.9rem; font-weight:300;
    color:rgba(232,232,255,0.55); line-height:1.7;
    margin-bottom:2.2rem; max-width:420px;
  }

  /* --- Price --- */
  .product-price {
    display:flex; align-items:baseline; gap:0.4rem;
    margin-bottom:0.5rem;
  }
  .product-price-num {
    font-family:var(--font-display);
    font-size:3.8rem; font-weight:900; line-height:1;
  }
  .product-price-period {
    font-family:var(--font-mono); font-size:0.75rem;
    color:rgba(232,232,255,0.35); letter-spacing:0.12em;
  }
  .product-price-note {
    font-family:var(--font-mono); font-size:0.7rem;
    color:rgba(232,232,255,0.25); letter-spacing:0.1em;
    margin-bottom:2.5rem;
  }

  /* --- Divider --- */
  .card-rule {
    width:100%; height:1px;
    background:rgba(255,255,255,0.06);
    margin-bottom:2rem;
  }

  /* --- Features --- */
  .feature-list {
    list-style:none;
    display:flex; flex-direction:column; gap:0.95rem;
    margin-bottom:2.5rem;
  }
  .feature-list li {
    display:flex; gap:1rem; align-items:flex-start;
    font-size:0.88rem; color:rgba(232,232,255,0.7);
    line-height:1.55;
  }
  .feature-check {
    font-family:var(--font-mono); font-size:0.8rem;
    flex-shrink:0; margin-top:0.1rem;
  }
  .feature-list li strong {
    color:var(--white); font-weight:600;
  }

  /* --- CTA --- */
  .product-cta {
    display:inline-block; width:100%; text-align:center;
    font-family:var(--font-display); font-size:0.72rem;
    font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
    padding:1.05rem 1.5rem;
    background:transparent;
    position:relative; overflow:hidden;
    transition:color 0.35s; text-decoration:none;
    cursor:pointer;
  }
  .product-cta::before {
    content:''; position:absolute;
    top:0; left:-100%; width:100%; height:100%;
    transition:left 0.35s cubic-bezier(.16,1,.3,1); z-index:-1;
  }
  .product-cta:hover::before { left:0; }

  /* --- Availability chip --- */
  .availability-chip {
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:var(--font-mono); font-size:0.65rem;
    letter-spacing:0.15em; text-transform:uppercase;
    color:rgba(232,232,255,0.3);
    border:1px solid rgba(255,255,255,0.07);
    padding:0.4rem 0.9rem; margin-top:1.2rem;
  }
  .availability-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 6px var(--gold);
    animation:pulse 2s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

  /* ===========================
     HOW IT WORKS
  =========================== */
  #how-it-works { background:var(--bg-2); }

  /* Stack above .section-title — GSAP transform on the title can steal clicks from the right tab */
  #how-it-works .section-label,
  #how-it-works .section-title {
    position: relative;
    z-index: 1;
  }
  .how-tabs {
    display:flex; gap:0; margin-bottom:3.5rem;
    border-bottom:1px solid rgba(255,255,255,0.07);
    position: relative;
    z-index: 2;
  }
  .how-tab {
    font-family:var(--font-display); font-size:0.68rem;
    font-weight:700; letter-spacing:0.15em; text-transform:uppercase;
    padding:0.9rem 2rem; background:transparent;
    border:none; border-bottom:2px solid transparent;
    color:rgba(232,232,255,0.3); cursor:pointer;
    transition:color 0.2s, border-color 0.2s;
    margin-bottom:-1px;
  }
  .how-tab:hover { color:rgba(232,232,255,0.6); }
  .how-tab.active-lab    { color:var(--cyan);    border-bottom-color:var(--cyan); }
  .how-tab.active-support{ color:var(--magenta); border-bottom-color:var(--magenta); }

  .how-panel { display:none; }
  .how-panel.active { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }

  .how-steps { display:flex; flex-direction:column; gap:0; }
  .how-step {
    display:flex; gap:1.8rem;
    padding:2rem 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
    
  }
  .how-step:last-child { border-bottom:none; }
  .step-num {
    font-family:var(--font-display); font-size:0.6rem;
    font-weight:700; letter-spacing:0.2em;
    flex-shrink:0; margin-top:0.3rem; width:3ch;
  }
  .step-content h4 {
    font-family:var(--font-display); font-size:0.78rem;
    font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    margin-bottom:0.5rem;
  }
  .step-content p {
    font-size:0.88rem; color:rgba(232,232,255,0.55);
    line-height:1.75; font-weight:300;
  }

  .how-aside {
    
  }
  .aside-box {
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.07);
    padding:2.5rem 2rem;
    margin-bottom:1.5rem;
  }
  .aside-box h4 {
    font-family:var(--font-display); font-size:0.72rem;
    font-weight:700; letter-spacing:0.15em; text-transform:uppercase;
    margin-bottom:1.2rem;
  }
  .aside-box p, .aside-box li {
    font-size:0.85rem; color:rgba(232,232,255,0.5);
    line-height:1.8; font-weight:300;
  }
  .aside-box ul { list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
  .aside-box ul li::before { content:'→  '; font-family:var(--font-mono); opacity:0.4; }

  /* ===========================
     OFFICE HOURS
  =========================== */
  #office-hours {
    background:radial-gradient(ellipse at center, rgba(255,184,0,0.04) 0%, transparent 65%);
  }
  #office-hours .section-inner { max-width:860px; }

  .oh-header {
    display:flex; align-items:flex-end; justify-content:space-between;
    margin-bottom:3rem; gap:2rem; flex-wrap:wrap;
  }
  .oh-badge {
    font-family:var(--font-mono); font-size:0.65rem;
    letter-spacing:0.25em; text-transform:uppercase;
    color:var(--gold); border:1px solid rgba(255,184,0,0.3);
    padding:0.35rem 0.9rem;
    display:inline-flex; align-items:center; gap:0.5rem;
  }
  .oh-badge::before { content:'★'; font-size:0.55rem; }

  .oh-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
    margin-bottom:3rem;
  }
  .oh-session {
    border:1px solid rgba(255,184,0,0.12);
    background:rgba(255,184,0,0.02);
    padding:2rem 1.8rem;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
    
    transition:border-color 0.3s;
  }
  .oh-session:hover { border-color:rgba(255,184,0,0.28); }
  .oh-time {
    font-family:var(--font-display); font-size:1.2rem;
    font-weight:900; color:var(--gold);
    letter-spacing:0.08em; margin-bottom:0.4rem;
  }
  .oh-days {
    font-family:var(--font-mono); font-size:0.68rem;
    letter-spacing:0.18em; color:rgba(255,184,0,0.5);
    text-transform:uppercase; margin-bottom:1.2rem;
  }
  .oh-desc {
    font-size:0.85rem; color:rgba(232,232,255,0.5);
    line-height:1.75; font-weight:300;
  }
  .oh-rule {
    padding:1.5rem;
    border-top:2px solid rgba(255,184,0,0.2);
    
  }
  .oh-rule-label {
    font-family:var(--font-display); font-size:0.62rem;
    font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold); margin-bottom:0.6rem; opacity:0.7;
  }
  .oh-rule-text {
    font-size:0.82rem; color:rgba(232,232,255,0.45); line-height:1.7;
  }

  /* ===========================
     COMPARISON / CONTEXT
  =========================== */
  #context { background:var(--bg-2); }

  .context-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:4rem;
    align-items:start;
  }
  .context-col h3 {
    font-family:var(--font-display); font-size:0.82rem;
    font-weight:700; letter-spacing:0.15em; text-transform:uppercase;
    margin-bottom:1.8rem;
  }
  .context-col h3.cyan   { color:var(--cyan); }
  .context-col h3.gold   { color:var(--gold); }
  .compare-list { list-style:none; display:flex; flex-direction:column; gap:1rem; }
  .compare-list li {
    display:flex; gap:1rem; align-items:flex-start;
    font-size:0.88rem; color:rgba(232,232,255,0.6);
    line-height:1.6; font-weight:300;
    padding-bottom:1rem;
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .compare-list li:last-child { border-bottom:none; }
  .compare-list .cmark { flex-shrink:0; margin-top:0.1rem; }
  .compare-list .cmark.g { color:var(--cyan); font-family:var(--font-mono); }
  .compare-list .cmark.b { color:rgba(255,80,80,0.5); font-family:var(--font-mono); }
  .compare-list strong { color:var(--white); font-weight:600; }

  /* ===========================
     BUNDLE
  =========================== */
  #bundle {
    text-align:center;
    padding:5rem 3rem;
  }
  .bundle-box {
    max-width:640px; margin:0 auto;
    border:1px solid rgba(255,184,0,0.25);
    background:rgba(255,184,0,0.02);
    padding:4rem 3.5rem;
    clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));
    
  }
  .bundle-label {
    font-family:var(--font-mono); font-size:0.68rem;
    letter-spacing:0.3em; color:var(--gold);
    text-transform:uppercase; margin-bottom:1rem;
  }
  .bundle-name {
    font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2rem);
    font-weight:900; color:var(--white);
    margin-bottom:1rem; letter-spacing:0.06em;
  }
  .bundle-price-row {
    display:flex; align-items:center; justify-content:center;
    gap:1.5rem; margin:1.8rem 0 0.5rem; flex-wrap:wrap;
  }
  .bundle-was {
    font-family:var(--font-display); font-size:1.6rem;
    font-weight:900; color:rgba(232,232,255,0.15);
    text-decoration:line-through;
  }
  .bundle-arrow {
    font-family:var(--font-mono); font-size:1rem;
    color:rgba(255,184,0,0.4);
  }
  .bundle-now {
    font-family:var(--font-display); font-size:3rem;
    font-weight:900; color:var(--gold);
    text-shadow:0 0 30px rgba(255,184,0,0.3);
  }
  .bundle-save {
    font-family:var(--font-mono); font-size:0.72rem;
    letter-spacing:0.18em; color:var(--gold);
    opacity:0.6; margin-bottom:2rem;
  }
  .bundle-body {
    font-size:0.88rem; font-weight:300;
    color:rgba(232,232,255,0.5); line-height:1.8;
    margin-bottom:2.5rem;
  }
  .btn-gold {
    display:inline-block;
    font-family:var(--font-display); font-size:0.72rem;
    font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
    padding:1rem 2.5rem;
    background:transparent; border:1px solid var(--gold);
    color:var(--gold); text-decoration:none; cursor:pointer;
    position:relative; overflow:hidden; transition:color 0.35s;
  }
  .btn-gold::before {
    content:''; position:absolute;
    top:0; left:-100%; width:100%; height:100%;
    background:var(--gold);
    transition:left 0.35s cubic-bezier(.16,1,.3,1); z-index:-1;
  }
  .btn-gold:hover { color:var(--bg); }
  .btn-gold:hover::before { left:0; }

  /* ===========================
     FAQ
  =========================== */
  #faq { background:var(--bg); }
  #faq .section-inner { max-width:780px; }

  .faq-list { display:flex; flex-direction:column; gap:0; }
  .faq-item {
    border-bottom:1px solid rgba(255,255,255,0.06);
    
  }
  .faq-q {
    width:100%; background:none; border:none;
    display:flex; justify-content:space-between; align-items:center;
    gap:1.5rem;
    padding:1.6rem 0; cursor:pointer; text-align:left;
  }
  .faq-q-text {
    font-family:var(--font-display); font-size:0.8rem;
    font-weight:700; letter-spacing:0.08em; color:var(--white);
    line-height:1.4;
  }
  .faq-icon {
    font-family:var(--font-mono); font-size:1rem;
    color:var(--cyan); flex-shrink:0;
    transition:transform 0.35s; line-height:1;
  }
  .faq-item.open .faq-icon { transform:rotate(45deg); }
  .faq-a {
    max-height:0; overflow:hidden;
    transition:max-height 0.45s cubic-bezier(.16,1,.3,1);
  }
  .faq-item.open .faq-a { max-height:300px; }
  .faq-a-inner {
    font-size:0.88rem; font-weight:300;
    color:rgba(232,232,255,0.55); line-height:1.85;
    padding-bottom:1.6rem;
  }
  .faq-a-inner strong { color:var(--white); font-weight:600; }

  /* ===========================
     FINAL CTA
  =========================== */
  #final-cta {
    text-align:center; padding:7rem 3rem;
    background:radial-gradient(ellipse at center, rgba(0,255,240,0.05) 0%, transparent 65%);
  }
  .final-cta-inner { max-width:680px; margin:0 auto; }
  .final-pre {
    font-family:var(--font-mono); font-size:0.68rem;
    letter-spacing:0.3em; color:rgba(0,255,240,0.4);
    text-transform:uppercase; margin-bottom:1rem;
  }
  .final-h {
    font-family:var(--font-display);
    font-size:clamp(1.6rem,3.5vw,2.5rem);
    font-weight:900; line-height:1.2;
    margin-bottom:1.2rem;
    
  }
  .final-sub {
    font-family:var(--font-mono); font-size:0.82rem;
    color:rgba(232,232,255,0.9); line-height:1.9;
    letter-spacing:0.06em; margin-bottom:2.5rem;
  }
  .cta-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
  .book-call-wrap { text-align:center; margin-top:0.75rem; }
  .btn-primary {
    display:inline-block;
    font-family:var(--font-display); font-size:0.72rem;
    font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
    padding:1rem 2.2rem;
    background:transparent; border:1px solid var(--cyan);
    color:var(--cyan); text-decoration:none; cursor:pointer;
    position:relative; overflow:hidden; transition:color 0.35s;
  }
  .btn-primary::before {
    content:''; position:absolute;
    top:0; left:-100%; width:100%; height:100%;
    background:var(--cyan);
    transition:left 0.35s cubic-bezier(.16,1,.3,1); z-index:-1;
  }
  .btn-primary:hover { color:var(--bg); }
  .btn-primary:hover::before { left:0; }
  .btn-ghost {
    display:inline-block;
    font-family:var(--font-mono); font-size:0.78rem;
    letter-spacing:0.1em; padding:1rem 1.8rem;
    background:transparent; border:1px solid rgba(255,255,255,0.12);
    color:rgba(232,232,255,0.45); text-decoration:none; cursor:pointer;
    transition:border-color 0.3s, color 0.3s;
  }
  .btn-ghost:hover { border-color:var(--magenta); color:var(--magenta); }

  /* ===========================
     FOOTER
  =========================== */
  footer {
    padding:3rem; border-top:1px solid rgba(0,255,240,0.08);
  }
  .footer-top {
    display:flex; justify-content:space-between; align-items:center;
    max-width:1200px; margin:0 auto 1.5rem;
  }
  .footer-wordmark {
    font-family:var(--font-display); font-size:0.68rem;
    letter-spacing:0.3em; color:rgba(232,232,255,0.2);
  }
  .footer-links { display:flex; gap:2rem; list-style:none; }
  .footer-links a {
    font-family:var(--font-mono); font-size:0.72rem;
    color:rgba(232,232,255,0.2); text-decoration:none;
    letter-spacing:0.08em; transition:color 0.2s;
  }
  .footer-links a:hover { color:var(--cyan); }
  .footer-bottom {
    text-align:center; font-family:var(--font-mono);
    font-size:0.7rem; color:rgba(232,232,255,0.15); line-height:1.8;
  }

  /* ===========================
     RESPONSIVE
  =========================== */
  @media (max-width:960px) {
    nav { padding:1.2rem 1.5rem; }
    .nav-links li:not(:last-child) { display:none; }
    section { padding:4rem 1.5rem; }
    #page-header { padding:9rem 1.5rem 4rem; }
    .products-grid  { grid-template-columns:1fr; }
    .how-panel.active { grid-template-columns:1fr; gap:2.5rem; }
    .oh-grid  { grid-template-columns:1fr; }
    .oh-rules { grid-template-columns:1fr; }
    .context-grid { grid-template-columns:1fr; gap:2.5rem; }
    .footer-top { flex-direction:column; gap:1rem; }
  }