:root{
    /* CyberInsight palette — brand guidelines v1.1 section 3 */
    --navy:#06254A;        /* Cyber Navy   */
    --deep:#0D4A8F;        /* Deep Blue    */
    --blue:#1A6FD4;        /* Insight Blue — primary */
    --sky:#3B93E8;         /* Sky Blue — highlights, large text only (3.2:1) */
    --ice:#EAF3FD;         /* Ice          */
    --slate:#5A6B7F;       /* Slate        */

    /* surfaces derived from Cyber Navy, so the whole page stays in the brand hue */
    --ground:#041A34; --ground-2:#062240; --surface:#082C55; --surface-2:#0B3768;
    --line:#134A86; --line-soft:#0D3767;
    --ink:var(--ice); --ink-2:#A9C6E8; --ink-3:#7093BC;
    --blue-br:var(--sky); --blue-dp:var(--deep); --cyan:var(--sky);
    --glow:rgba(26,111,212,.42);
    --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
    --wrap:1180px;
  }
  /* Montserrat 600/500 for headings only — body stays on the system stack per
     guidelines section 4. Self-hosted; OFL licence ships alongside at /fonts/. */
  @font-face{font-family:"Montserrat";src:url("/fonts/Montserrat-500.ttf") format("truetype");
    font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:"Montserrat";src:url("/fonts/Montserrat-600.ttf") format("truetype");
    font-weight:600;font-style:normal;font-display:swap}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
    font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;position:relative;z-index:2}
  a{color:inherit}
  h1,h2,h3{font-family:var(--sans);font-weight:600;line-height:1.12;letter-spacing:-.022em;margin:0;text-wrap:balance}
  h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
  h3{font-size:1.06rem;font-weight:600}
  p{margin:0}
  .eyebrow{
    font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--blue-br);margin-bottom:15px;display:flex;align-items:center;gap:9px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--blue),transparent)}

  /* ============ header ============ */
  header{position:sticky;top:0;z-index:60;background:rgba(5,10,22,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
  .nav{display:flex;align-items:center;gap:28px;height:68px}
  .brand{display:flex;align-items:center;text-decoration:none;padding:4px 0}
    /* No glow, shadow or bevel on the mark — brand guidelines section 7.4.
     Clear space is held with padding rather than decoration. */
  .brand img{display:block;height:36px;width:auto}
  .nav-links{display:flex;gap:26px;margin-left:auto;font-size:.92rem;white-space:nowrap}
  @media (max-width:1400px){.nav-links{gap:19px;font-size:.87rem}}
  @media (max-width:1270px){.nav-links{gap:15px;font-size:.83rem}}
  .nav-links a{color:var(--ink-2);text-decoration:none;position:relative;padding:4px 0;transition:color .18s}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .28s cubic-bezier(.4,0,.2,1)}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{width:100%}
  .nav-cta{display:flex;gap:10px;white-space:nowrap}
  @media (max-width:1180px){.nav-links{display:none}}

  .btn{
    display:inline-flex;align-items:center;gap:9px;font-weight:650;font-size:.92rem;
    padding:10px 18px;border-radius:10px;text-decoration:none;border:1px solid transparent;
    position:relative;overflow:hidden;transition:transform .18s,box-shadow .25s,border-color .2s,color .2s;
  }
  .btn-primary{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dp) 100%);color:#fff;box-shadow:0 4px 22px -6px var(--glow)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px -8px var(--glow)}
  .btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transition:left .6s}
  .btn-primary:hover::after{left:130%}
  .btn-ghost{border-color:var(--line);color:var(--ink-2);background:rgba(255,255,255,.02)}
  .btn-ghost:hover{border-color:var(--blue);color:var(--ink);transform:translateY(-2px)}
  .btn-lg{padding:14px 26px;font-size:1rem;border-radius:12px}
  a:focus-visible,button:focus-visible{outline:2px solid var(--blue-br);outline-offset:3px}

  /* ============ hero ============ */
  .hero{position:relative;min-height:clamp(620px,92vh,900px);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line-soft)}
  #net{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
  .hero::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(circle at 50% 45%,transparent 0%,rgba(5,10,22,.35) 55%,var(--ground) 92%);
  }
  .hero .wrap{z-index:2}
  .hero h1{font-size:clamp(2.2rem,6vw,4.1rem);max-width:16ch}
  .hero h1 .grad{background:linear-gradient(115deg,var(--blue-br) 0%,var(--cyan) 55%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .scramble{font-family:var(--mono);font-size:.8em;letter-spacing:-.01em}
  .hero p.lead{margin-top:22px;font-size:clamp(1.02rem,1.9vw,1.2rem);color:var(--ink-2);max-width:54ch}
  .hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}
  .status{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(46,123,255,.07);font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;color:var(--ink-2)}
  .dot{width:7px;height:7px;border-radius:50%;background:#2BE08A;box-shadow:0 0 0 0 rgba(43,224,138,.65);animation:beat 2s infinite}
  @keyframes beat{0%{box-shadow:0 0 0 0 rgba(43,224,138,.6)}70%{box-shadow:0 0 0 8px rgba(43,224,138,0)}100%{box-shadow:0 0 0 0 rgba(43,224,138,0)}}
  .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:var(--ink-3);font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px}
  .scroll-hint i{display:block;width:1px;height:32px;background:linear-gradient(180deg,var(--blue),transparent);animation:drop 2s ease-in-out infinite}
  @keyframes drop{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

  /* hero mosaic */
  .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;width:100%}
  @media (max-width:1040px){.hero-grid{grid-template-columns:1fr;gap:40px}.mosaic{display:none}}
  .mosaic{
    display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:auto auto;gap:14px;
    perspective:1100px;
  }
  .tile{
    position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(99,164,255,.20);
    box-shadow:0 22px 60px -26px rgba(0,0,0,.95);
    transform:translate3d(0,0,0);transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .35s;
    will-change:transform;
  }
  .tile img{display:block;width:100%;height:100%;object-fit:cover}
  .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,22,.05),rgba(5,10,22,.55));pointer-events:none}
  .tile:hover{border-color:rgba(99,164,255,.55)}
  .tile-tall{grid-row:span 2;height:394px}
  .tile-sq{height:190px}
  .tile-cap{
    position:absolute;left:12px;bottom:10px;z-index:2;font-family:var(--mono);font-size:.62rem;
    letter-spacing:.14em;text-transform:uppercase;color:#CBDDF7;text-shadow:0 1px 6px rgba(0,0,0,.8);
  }
  .mosaic-badge{
    position:absolute;right:-14px;bottom:-14px;z-index:5;background:linear-gradient(135deg,var(--blue),var(--blue-dp));
    color:#fff;border-radius:14px;padding:13px 17px;box-shadow:0 16px 38px -12px var(--glow);
  }
  .mosaic-badge b{display:block;font-size:1.5rem;line-height:1;letter-spacing:-.03em}
  .mosaic-badge span{font-size:.7rem;opacity:.9;font-family:var(--mono);letter-spacing:.08em}
  .mosaic-wrap{position:relative}

  /* service card photo headers */
  .card-photo{margin:-26px -26px 18px;height:120px;overflow:hidden;position:relative}
  .card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .card:hover .card-photo img{transform:scale(1.07)}
  .card-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,22,.15),var(--surface))}

  /* ============ sections ============ */
  section{padding:98px 0;position:relative;border-bottom:1px solid var(--line-soft)}
  .sec-head{max-width:60ch;margin-bottom:46px}
  .sec-head p{margin-top:15px;color:var(--ink-2)}

  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}

  .grid{display:grid;gap:20px}
  .grid-4{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}

  /* spotlight cards */
  .card{
    position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;
    overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s;
  }
  .card::before{
    content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(46,123,255,.16),transparent 62%);
  }
  .card:hover{transform:translateY(-5px);border-color:#28436E}
  .card:hover::before{opacity:1}
  .card .ico{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,rgba(46,123,255,.20),rgba(34,211,255,.07));display:flex;align-items:center;justify-content:center;margin-bottom:18px;border:1px solid rgba(46,123,255,.28)}
  .card .ico svg{width:20px;height:20px;stroke:var(--blue-br);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .card p{margin-top:10px;color:var(--ink-2);font-size:.93rem}
  .card ul{margin:15px 0 0;padding:0;list-style:none;font-size:.87rem;color:var(--ink-2)}
  .card ul li{padding-left:18px;position:relative;margin-bottom:6px}
  .card ul li::before{content:"";position:absolute;left:2px;top:.6em;width:5px;height:5px;border-radius:1px;background:var(--blue);transform:rotate(45deg)}

  /* ============ email split ============ */
  .mail-split{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start}
  @media (max-width:940px){.mail-split{grid-template-columns:1fr;gap:38px}}
  .feature-list{margin:28px 0 0;padding:0;list-style:none}
  .feature-list li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
  .feature-list li:last-child{border-bottom:0}
  .feature-list .tick{flex:0 0 21px;width:21px;height:21px;border-radius:6px;background:rgba(46,123,255,.14);border:1px solid rgba(46,123,255,.3);display:flex;align-items:center;justify-content:center;margin-top:3px}
  .feature-list .tick svg{width:11px;height:11px;stroke:var(--blue-br);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .feature-list b{display:block;font-size:.95rem}
  .feature-list span{font-size:.87rem;color:var(--ink-2)}

  /* terminal */
  .term{background:#060C18;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 22px 60px -28px rgba(0,0,0,.9)}
  .term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
  .term-bar i{width:10px;height:10px;border-radius:50%;display:block}
  .term-title{margin-left:9px;font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
  .term-body{padding:18px;font-family:var(--mono);font-size:.79rem;line-height:1.95;min-height:250px}
  .term-body .l{display:block;white-space:pre-wrap;word-break:break-word}
  .term-body .p{color:var(--blue-br)}
  .term-body .ok{color:#2BE08A}
  .term-body .dim{color:var(--ink-3)}
  .term-body .warn{color:#FFC53D}
  .cursor{display:inline-block;width:8px;height:14px;background:var(--blue-br);vertical-align:middle;animation:blink 1.05s steps(2) infinite}
  @keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

  .quote-card{background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:18px;padding:30px;margin-top:24px}
  .quote-card .row{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;padding:7px 0;color:var(--ink-2)}
  .quote-card .row b{color:var(--ink)}
  .quote-card hr{border:0;border-top:1px solid var(--line);margin:18px 0}
  .price-hero{display:flex;align-items:flex-start;gap:8px;line-height:1}
  .price-cur{font-size:1.7rem;font-weight:700;color:var(--blue-br);margin-top:8px}
  .price-num{font-size:4.1rem;font-weight:880;letter-spacing:-.05em;
    background:linear-gradient(140deg,#fff 10%,var(--blue-br) 90%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .price-per{align-self:flex-end;margin-bottom:11px;font-size:.84rem;color:var(--ink-2);line-height:1.35}
  .price-sub{margin-top:14px;font-size:.9rem;color:var(--ink-2)}

  /* ============ photo band ============ */
  .band{
    position:relative;min-height:clamp(360px,46vh,520px);display:flex;align-items:center;
    background-image:url("/img/band-datacenter.jpg");background-size:cover;background-position:center;
    background-attachment:fixed;border-bottom:1px solid var(--line-soft);overflow:hidden;
  }
  /* fixed attachment janks on touch devices — pin it there instead */
  @media (hover:none),(max-width:900px){.band{background-attachment:scroll}}
  .band::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(5,10,22,.95) 8%,rgba(5,10,22,.72) 48%,rgba(27,79,216,.34) 100%);
  }
  .band-inner{position:relative;z-index:2;max-width:44ch}
  .band h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
  .band p{margin-top:15px;color:#B9CBE6}
  .band-meta{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
  .chip{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
    padding:6px 12px;border:1px solid rgba(99,164,255,.35);border-radius:999px;color:#B9CBE6;background:rgba(5,10,22,.5)}

  .photo-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-bottom:22px}
  .photo-card img{display:block;width:100%;height:210px;object-fit:cover}
  .photo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,10,22,.72) 100%)}
  .photo-card figcaption{position:absolute;left:16px;bottom:13px;z-index:2;font-family:var(--mono);
    font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#C6D8F2}

  /* ============ stats ============ */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .stats div{background:var(--surface);padding:30px 26px;position:relative;overflow:hidden}
  .stats div::after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1)}
  .stats div.in::after{transform:scaleX(1)}
  .stats .n{font-family:var(--mono);font-size:2rem;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1}
  .stats .n small{font-size:1.1rem;color:var(--blue-br)}
  .stats .l{margin-top:11px;font-size:.87rem;color:var(--ink-2)}

  /* ============ infrastructure ============ */
  .infra{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
  .infra .box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;position:relative;overflow:hidden}
  .infra .box .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-br)}
  .infra .box h3{margin-top:10px}
  .infra .box p{margin-top:8px;font-size:.9rem;color:var(--ink-2)}

  /* ============ gaming community ============ */
  .gc{position:relative;overflow:hidden;background:linear-gradient(160deg,#06101F 0%,var(--ground) 70%)}
  .gc::before{
    content:"";position:absolute;top:-25%;right:-10%;width:720px;height:720px;
    background:radial-gradient(circle,rgba(46,123,255,.20),transparent 68%);pointer-events:none;
  }
  .gc-split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
  @media (max-width:980px){.gc-split{grid-template-columns:1fr;gap:36px}}
  .gc-logo{width:132px;height:auto;margin-bottom:20px;filter:drop-shadow(0 6px 26px rgba(46,123,255,.45))}
  .pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:28px}
  @media (max-width:560px){.pillars{grid-template-columns:repeat(3,1fr)}}
  .pillar{
    background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
    padding:13px 6px;text-align:center;transition:border-color .25s,transform .25s,background .25s;
  }
  .pillar:hover{border-color:var(--blue);transform:translateY(-3px);background:rgba(46,123,255,.08)}
  .pillar svg{width:20px;height:20px;stroke:var(--blue-br);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .pillar span{display:block;margin-top:8px;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
  .gc-media{position:relative}
  .gc-media img{width:100%;height:auto;border-radius:18px;border:1px solid rgba(99,164,255,.28);
    box-shadow:0 30px 80px -30px rgba(0,0,0,.95);display:block}
  .gc-tag{position:absolute;left:16px;top:16px;z-index:2;background:rgba(5,10,22,.82);backdrop-filter:blur(6px);
    border:1px solid rgba(99,164,255,.3);border-radius:999px;padding:7px 15px;font-family:var(--mono);
    font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#CBDDF7}

  /* ============ contact ============ */
  .contact-box{position:relative;background:linear-gradient(150deg,var(--surface-2) 0%,var(--surface) 60%);border:1px solid var(--line);border-radius:22px;padding:56px 44px;text-align:center;overflow:hidden}
  .contact-box::before{content:"";position:absolute;top:-45%;left:50%;transform:translateX(-50%);width:560px;height:560px;background:radial-gradient(circle,var(--glow),transparent 68%);opacity:.5;pointer-events:none}
  .contact-box>*{position:relative}
  .contact-box .eyebrow{justify-content:center}
  .contact-box p{color:var(--ink-2);max-width:52ch;margin:14px auto 30px}
  .contact-actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
  .contact-mail{font-family:var(--mono);font-size:.95rem;color:var(--blue-br);text-decoration:none;word-break:break-all}
  .contact-mail:hover{text-decoration:underline}

  footer{padding:46px 0;color:var(--ink-3);font-size:.86rem}
  .foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
  .foot a{color:var(--ink-3);text-decoration:none}
  .foot a:hover{color:var(--blue-br)}
  .foot-links{display:flex;gap:20px;flex-wrap:wrap}

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition-duration:.01ms!important}
    .reveal{opacity:1;transform:none}
    html{scroll-behavior:auto}
  }

  /* ============================================================
     Colour, within the brand palette (guidelines s3).
     Ice is specified for section backgrounds, and Sky Blue's stated
     role is "highlights, gradients, charts" — both were unused.
     Semantic status colours are functional UI, not brand colours.
     ============================================================ */
  :root{
    --ok:#1E9E62; --warn:#C77700;
    --grad-brand:linear-gradient(135deg,var(--deep) 0%,var(--blue) 52%,var(--sky) 100%);
    --grad-soft:linear-gradient(135deg,rgba(26,111,212,.20),rgba(59,147,232,.06));
  }

  /* --- a light Ice band, flipping the page mid-scroll --- */
  section.light{
    background:linear-gradient(180deg,#FFFFFF 0%,var(--ice) 100%);
    border-bottom:1px solid #CFE1F7;
  }
  section.light h2{color:var(--navy)}
  section.light .sec-head p{color:var(--slate)}
  section.light .eyebrow{color:var(--deep)}
  section.light .eyebrow::before{background:linear-gradient(90deg,var(--blue),transparent)}
  section.light .stats{background:#CFE1F7;border-color:#CFE1F7;box-shadow:0 20px 50px -34px rgba(6,37,74,.5)}
  section.light .stats div{background:#fff}
  section.light .stats .n{
    background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  section.light .stats .n small{color:var(--sky);-webkit-text-fill-color:var(--sky)}
  section.light .stats .l{color:var(--slate)}

  /* --- richer hero aura: three brand blues layered --- */
  .hero::after{
    background:
      radial-gradient(680px 340px at 76% 6%,rgba(59,147,232,.20),transparent 68%),
      radial-gradient(520px 300px at 18% 82%,rgba(13,74,143,.30),transparent 70%),
      radial-gradient(circle at 50% 45%,transparent 0%,rgba(4,26,52,.30) 55%,var(--ground) 94%);
  }

  /* --- each service icon gets its own step of the ramp --- */
  .card:nth-child(1) .ico{background:linear-gradient(135deg,rgba(13,74,143,.45),rgba(13,74,143,.12))}
  .card:nth-child(2) .ico{background:linear-gradient(135deg,rgba(26,111,212,.45),rgba(26,111,212,.12))}
  .card:nth-child(3) .ico{background:linear-gradient(135deg,rgba(59,147,232,.45),rgba(59,147,232,.12))}
  .card:nth-child(4) .ico{background:linear-gradient(135deg,rgba(107,178,245,.45),rgba(107,178,245,.12))}
  .card:nth-child(1) .ico svg{stroke:#7FB2F0}
  .card:nth-child(2) .ico svg{stroke:#8FC0F5}
  .card:nth-child(3) .ico svg{stroke:#A7D0F8}
  .card:nth-child(4) .ico svg{stroke:#BFDFFB}
  /* a coloured hairline along the top of each card, revealed on hover */
  .card::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
    background:var(--grad-brand);transform:scaleX(0);transform-origin:left;
    transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .card:hover::after{transform:scaleX(1)}

  /* --- gradient text for the section eyebrows and key numbers --- */
  .price-num{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
  .stats .n{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* --- pillars: cycle the ramp so the row reads as a spectrum --- */
  .pillar:nth-child(1) svg{stroke:#0D4A8F}
  .pillar:nth-child(2) svg{stroke:#1A6FD4}
  .pillar:nth-child(3) svg{stroke:#3B93E8}
  .pillar:nth-child(4) svg{stroke:#6BB2F5}
  .pillar:nth-child(5) svg{stroke:#9BCDFA}
  .pillar{background:var(--grad-soft)}

  /* --- animated gradient edge on the pricing card --- */
  .quote-card{position:relative}
  .quote-card::before{
    content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px;z-index:0;
    background:linear-gradient(130deg,var(--sky),rgba(26,111,212,.15) 40%,rgba(59,147,232,.9));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  }
  .quote-card>*{position:relative;z-index:1}

  /* --- status colours: functional, not brand --- */
  .dot{background:var(--ok);box-shadow:0 0 0 0 rgba(30,158,98,.6)}
  @keyframes beat{0%{box-shadow:0 0 0 0 rgba(30,158,98,.55)}70%{box-shadow:0 0 0 8px rgba(30,158,98,0)}100%{box-shadow:0 0 0 0 rgba(30,158,98,0)}}
  .term-body .ok{color:#38D48A}

  /* --- infra cards: tint each key differently --- */
  .infra .box:nth-child(1) .k{color:#7FB2F0}
  .infra .box:nth-child(2) .k{color:#8FC0F5}
  .infra .box:nth-child(3) .k{color:#A7D0F8}
  .infra .box:nth-child(4) .k{color:#BFDFFB}
  .infra .box{background:linear-gradient(160deg,var(--surface),rgba(8,44,85,.55))}

  /* --- section rules get a gradient --- */
  section{border-bottom:1px solid transparent;
    border-image:linear-gradient(90deg,transparent,rgba(59,147,232,.28),transparent) 1}


  /* ============================================================
     Signal Amber — the one non-blue accent, spent only where it
     earns attention: price, the primary call to action, and the
     small markers that lead the eye down the page.
     9.6:1 on the dark ground, but only 1.6:1 on Ice — so it is
     never used as text in the light band, only as a solid fill
     with navy on top.
     ============================================================ */
  :root{ --amber:#FFB020; --amber-dp:#E09410; --amber-soft:rgba(255,176,32,.14); }

  /* price badge on the hero mosaic */
  .mosaic-badge{background:linear-gradient(135deg,var(--amber),var(--amber-dp));color:var(--navy);
    box-shadow:0 16px 40px -12px rgba(255,176,32,.5)}
  .mosaic-badge span{opacity:.86}

  /* the price itself */
  .price-num{background:linear-gradient(140deg,#FFD37A 0%,var(--amber) 60%,var(--amber-dp) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .price-cur{color:var(--amber)}

  /* primary conversion button */
  .quote-card .btn-primary{
    background:linear-gradient(135deg,var(--amber) 0%,var(--amber-dp) 100%);
    color:var(--navy);box-shadow:0 6px 24px -8px rgba(255,176,32,.55);
  }
  .quote-card .btn-primary:hover{box-shadow:0 12px 34px -10px rgba(255,176,32,.7)}

  /* eyebrow markers lead the eye */
  .eyebrow::before{background:linear-gradient(90deg,var(--amber),transparent)}
  section.light .eyebrow::before{background:linear-gradient(90deg,var(--amber-dp),transparent)}

  /* card hairline resolves from brand blue into amber */
  .card::after{background:linear-gradient(90deg,var(--deep),var(--blue) 45%,var(--amber))}

  /* light band: amber as a solid rule only, never as text */
  section.light .stats div::after{background:linear-gradient(90deg,var(--blue),var(--amber))}

  /* small markers */
  .tile-cap{border-left:2px solid var(--amber);padding-left:7px}
  .chip{border-color:rgba(255,176,32,.42)}
  .status{border-color:rgba(255,176,32,.35)}
  .card ul li::before{background:var(--amber)}
  .feature-list .tick{background:var(--amber-soft);border-color:rgba(255,176,32,.35)}
  .feature-list .tick svg{stroke:var(--amber)}
  .gc-tag{border-color:rgba(255,176,32,.45)}
  .scroll-hint i{background:linear-gradient(180deg,var(--amber),transparent)}


  /* ============================================================
     Amber header. The lockup switches to the black variant here:
     the reversed (white) one measures 1.8:1 on Signal Amber and
     would be unreadable. Black is 11.5:1 and is the approved
     single-colour variant (guidelines s6).
     ============================================================ */
  header{
    background:linear-gradient(180deg,#FFB833 0%,var(--amber) 55%,#F0A314 100%);
    backdrop-filter:none;
    border-bottom:1px solid rgba(6,37,74,.28);
    box-shadow:0 6px 26px -10px rgba(255,176,32,.45);
  }
  .nav-links a{color:rgba(6,37,74,.82);font-weight:600}
  .nav-links a:hover,.nav-links a:focus-visible{color:var(--navy)}
  .nav-links a::after{background:var(--navy)}
  /* ghost button reads as navy-on-amber */
  header .btn-ghost{border-color:rgba(6,37,74,.42);color:var(--navy);background:rgba(255,255,255,.20)}
  header .btn-ghost:hover{border-color:var(--navy);background:rgba(255,255,255,.34);color:var(--navy)}
  /* primary flips to navy so it still stands out on amber */
  header .btn-primary{background:var(--navy);color:#fff;box-shadow:0 4px 18px -6px rgba(6,37,74,.6)}
  header .btn-primary:hover{background:#0A3566;box-shadow:0 10px 26px -8px rgba(6,37,74,.7)}
  header a:focus-visible,header button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}


  /* ============================================================
     Extended palette. Each colour has exactly one job — that is
     what keeps four accents looking composed instead of loud.

       Cyan    live, active, data, structure markers
       Amber   money and the primary action, nothing else
       Violet  the gaming community, and only there
       Emerald success and healthy status
       Blues   everything structural

     All measured on the navy ground: cyan 9.7:1, amber 9.6:1,
     emerald 9.1:1, violet 5.2:1 — all pass AA.
     ============================================================ */
  :root{
    --cyan:#22D3EE; --cyan-dp:#0FA5BF;
    --violet:#8B7BF7; --violet-dp:#6D5CE0;
    --emerald:#34D399;
    --grad-cool:linear-gradient(135deg,var(--deep) 0%,var(--blue) 40%,var(--cyan) 100%);
  }

  /* --- cyan: live, active, data --- */
  .status{border-color:rgba(34,211,238,.42);background:rgba(34,211,238,.08);color:#BFEFF8}
  .dot{background:var(--emerald);box-shadow:0 0 0 0 rgba(52,211,153,.6)}
  @keyframes beat{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
  .hero h1 .grad{background:linear-gradient(112deg,var(--sky) 0%,var(--cyan) 55%,var(--blue) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .tile-cap{border-left:2px solid var(--cyan)}
  .term-body .p{color:var(--cyan)}
  .term-body .ok{color:var(--emerald)}
  .term-title{color:#7FD9E8}
  .nav-links a::after{background:linear-gradient(90deg,var(--blue),var(--cyan))}
  .scroll-hint i{background:linear-gradient(180deg,var(--cyan),transparent)}
  .chip{border-color:rgba(34,211,238,.38);color:#CFEAF2}
  .feature-list .tick{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.34)}
  .feature-list .tick svg{stroke:var(--cyan)}
  .card ul li::before{background:var(--cyan)}
  .infra .box:nth-child(1) .k{color:#7FB2F0}
  .infra .box:nth-child(2) .k{color:var(--sky)}
  .infra .box:nth-child(3) .k{color:#5FD4E8}
  .infra .box:nth-child(4) .k{color:var(--cyan)}

  /* structural markers move to cyan, so amber stays rare */
  .eyebrow{color:var(--cyan)}
  .eyebrow::before{background:linear-gradient(90deg,var(--cyan),transparent)}
  section.light .eyebrow{color:var(--deep)}
  section.light .eyebrow::before{background:linear-gradient(90deg,var(--cyan-dp),transparent)}

  /* service icons ramp blue -> cyan */
  .card:nth-child(1) .ico svg{stroke:#7FB2F0}
  .card:nth-child(2) .ico svg{stroke:var(--sky)}
  .card:nth-child(3) .ico svg{stroke:#5FD4E8}
  .card:nth-child(4) .ico svg{stroke:var(--cyan)}
  .card:nth-child(4) .ico{background:linear-gradient(135deg,rgba(34,211,238,.42),rgba(34,211,238,.10))}
  .card::after{background:linear-gradient(90deg,var(--deep),var(--blue) 40%,var(--cyan))}
  section.light .stats div::after{background:linear-gradient(90deg,var(--blue),var(--cyan))}
  section.light .stats .n{background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* --- violet: the community, and only there --- */
  .gc::before{background:radial-gradient(circle,rgba(139,123,247,.22),transparent 68%)}
  .gc .eyebrow{color:var(--violet)}
  .gc .eyebrow::before{background:linear-gradient(90deg,var(--violet),transparent)}
  .gc-media img{border-color:rgba(139,123,247,.38)}
  .gc-tag{border-color:rgba(139,123,247,.5);color:#DCD5FB}
  .gc .btn-primary{background:linear-gradient(135deg,var(--violet),var(--violet-dp));color:#fff;
    box-shadow:0 8px 26px -10px rgba(139,123,247,.7)}
  .pillar:hover{border-color:var(--violet);background:rgba(139,123,247,.10)}
  .pillar:nth-child(1) svg{stroke:#6BB2F5}
  .pillar:nth-child(2) svg{stroke:var(--sky)}
  .pillar:nth-child(3) svg{stroke:var(--cyan)}
  .pillar:nth-child(4) svg{stroke:#A79BF9}
  .pillar:nth-child(5) svg{stroke:var(--violet)}
  .gc-logo{filter:drop-shadow(0 6px 26px rgba(139,123,247,.45))}

  /* --- amber: money and the primary action only --- */
  .tile-cap{border-left-color:var(--cyan)}
  .quote-card::before{background:linear-gradient(130deg,var(--cyan),rgba(26,111,212,.18) 45%,var(--amber))}

  /* hero aura picks up a cyan wash */
  .hero::after{
    background:
      radial-gradient(660px 330px at 78% 4%,rgba(34,211,238,.16),transparent 68%),
      radial-gradient(520px 300px at 16% 84%,rgba(13,74,143,.32),transparent 70%),
      radial-gradient(circle at 50% 45%,transparent 0%,rgba(4,26,52,.30) 55%,var(--ground) 94%);
  }


  /* ============================================================
     Neon header. Treated as a lit tube rather than a flat bar:
     a bright specular along the top, a saturated core, a hot
     filament at the bottom edge, and bloom spilling onto the
     hero below. The logo itself stays crisp — guideline 7.4
     forbids glows on the mark, so only the bar emits.
     ============================================================ */
  header{
    position:sticky;
    background:
      linear-gradient(180deg,
        #FFE08A 0%,      /* specular highlight along the top of the tube */
        #FFC648 18%,
        var(--amber) 52%,
        #F0A314 88%,
        #D98A08 100%);
    border-bottom:0;
    box-shadow:
      0 0 0 1px rgba(255,224,138,.55),
      0 2px 10px rgba(255,176,32,.55),
      0 8px 34px rgba(255,176,32,.42),
      0 18px 70px rgba(255,176,32,.26);
  }
  /* the hot filament at the base of the tube */
  header::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:linear-gradient(90deg,
      rgba(255,224,138,0) 0%,
      #FFF3C4 12%,
      #FFE08A 50%,
      #FFF3C4 88%,
      rgba(255,224,138,0) 100%);
    box-shadow:0 0 8px #FFD75E,0 0 18px rgba(255,176,32,.9),0 0 36px rgba(255,176,32,.6);
  }
  /* a faint wash of the glow onto the section beneath */
  header::before{
    content:"";position:absolute;left:0;right:0;top:100%;height:70px;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,176,32,.20),rgba(255,176,32,0));
  }
  .nav{position:relative;z-index:1}

  /* the tube breathes, very slightly */
  @media (prefers-reduced-motion:no-preference){
    header{animation:neon 5.5s ease-in-out infinite}
    @keyframes neon{
      0%,100%{box-shadow:0 0 0 1px rgba(255,224,138,.55),0 2px 10px rgba(255,176,32,.55),
                         0 8px 34px rgba(255,176,32,.42),0 18px 70px rgba(255,176,32,.26)}
      50%    {box-shadow:0 0 0 1px rgba(255,236,176,.75),0 2px 14px rgba(255,176,32,.72),
                         0 10px 44px rgba(255,176,32,.55),0 22px 88px rgba(255,176,32,.34)}
    }
  }
  /* keep the controls legible against the brighter tube */
  header .btn-primary{background:var(--navy);color:#fff;box-shadow:0 4px 16px rgba(6,37,74,.55)}
  header .btn-ghost{background:rgba(255,255,255,.28);border-color:rgba(6,37,74,.5);color:var(--navy)}

/* ================= multi-page additions ================= */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amber);color:var(--navy);
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}

/* --- neon header dims as you scroll away from the top --- */
header{transition:box-shadow .4s ease, background .4s ease}
header::after,header::before{transition:opacity .4s ease}
header.dim{
  background:linear-gradient(180deg,#F0BE63 0%,#E5A833 55%,#CE9312 100%);
  box-shadow:0 1px 0 rgba(6,37,74,.32),0 3px 12px rgba(255,176,32,.10);
  animation:none;
}
header.dim::after{opacity:.18}
header.dim::before{opacity:0}

/* --- mobile nav --- */
.nav-toggle{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:0 8px;margin-left:auto}
.nav-toggle span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-drawer{display:none;flex-direction:column;padding:10px 24px 20px;background:#EFA518;border-top:1px solid rgba(6,37,74,.22)}
.nav-drawer a{color:var(--navy);text-decoration:none;font-weight:600;padding:12px 4px;border-bottom:1px solid rgba(6,37,74,.15)}
.nav-drawer a.active{color:#000}
.nav-drawer .btn{margin-top:14px;justify-content:center}
.nav-drawer.open{display:flex}
@media (max-width:1180px){ .nav-toggle{display:flex} .nav-cta{display:none} }
.nav-links a.active{color:var(--navy)}
.nav-links a.active::after{width:100%}

/* --- page heads --- */
.page-head{padding:74px 0 10px;position:relative}
.page-head h1{font-size:clamp(2rem,4.6vw,3.05rem);max-width:19ch;margin-top:4px}
.page-head .lead{margin-top:18px;color:var(--ink-2);max-width:58ch;font-size:1.05rem}

/* --- live ticker --- */
.ticker-sec{padding:0;border:0}
.ticker{display:flex;align-items:center;gap:16px;margin-top:-26px;position:relative;z-index:5;
  background:linear-gradient(120deg,rgba(8,44,85,.96),rgba(4,26,52,.96));
  border:1px solid var(--line);border-radius:14px;padding:13px 18px;overflow:hidden;
  box-shadow:0 20px 50px -28px rgba(0,0,0,.9)}
.ticker-label{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.16em;color:var(--cyan);white-space:nowrap}
/* The track is the window; the rail is what moves. Transforming the track
   itself moved its own clipping box, so the items slid out from under it
   and printed over the LIVE THREAT FEED label. */
.ticker-track{flex:1;min-width:0;overflow:hidden;position:relative}
.ticker-rail{display:inline-block;white-space:nowrap;will-change:transform}
.ticker-item{display:inline-block;padding-right:44px;font-size:.86rem;color:var(--ink-2)}
.ticker-item b{color:var(--ink);font-weight:600}
.ticker-item.dim{color:var(--ink-3)}
.ticker-more{flex:0 0 auto;font-size:.78rem;color:var(--cyan);text-decoration:none;white-space:nowrap}
.ticker-more:hover{text-decoration:underline}
/* :last-child matched the dot, not the words — the label never shrank */
@media (max-width:760px){.ticker-more{display:none}.ticker-label .tl-txt{display:none}}

/* --- feeds --- */
.feed-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:940px){.feed-grid{grid-template-columns:1fr}}
.feed-col{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.feed-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:13px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.feed-src{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink-3);text-align:right}
.cve-list,.news-list{list-style:none;margin:0;padding:0}
.cve-list li,.news-list li{padding:13px 0;border-bottom:1px dashed var(--line-soft)}
.cve-list li:last-child,.news-list li:last-child{border-bottom:0}
.feed-loading{color:var(--ink-3);font-size:.9rem}
.cve-id{font-family:var(--mono);font-size:.84rem;color:var(--ink);text-decoration:none}
.cve-id:hover{color:var(--cyan);text-decoration:underline}
.cve-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sev{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border-radius:20px;font-weight:600}
.sev-critical{background:rgba(220,60,60,.16);color:#FF9C9C;border:1px solid rgba(220,60,60,.42)}
.sev-high{background:rgba(255,140,40,.14);color:#FFC08A;border:1px solid rgba(255,140,40,.38)}
.sev-medium{background:rgba(255,176,32,.14);color:#FFD98A;border:1px solid rgba(255,176,32,.34)}
.sev-low{background:rgba(34,211,238,.12);color:#9FE9F6;border:1px solid rgba(34,211,238,.32)}
.sev-none{background:rgba(90,107,127,.16);color:#B7C6D8;border:1px solid rgba(90,107,127,.4)}
.cve-sum,.news-sum{margin-top:6px;font-size:.85rem;color:var(--ink-2);line-height:1.55}
.news-title{color:var(--ink);text-decoration:none;font-weight:600;font-size:.93rem}
.news-title:hover{color:var(--cyan)}
.news-meta{margin-top:5px;font-family:var(--mono);font-size:.66rem;color:var(--ink-3)}
.feed-foot{margin-top:14px;font-family:var(--mono);font-size:.66rem;color:var(--ink-3)}

/* --- domain checker --- */
.checker-sec .sec-head{margin-bottom:26px}
.checker{display:flex;gap:12px;flex-wrap:wrap;max-width:640px}
.checker input{flex:1;min-width:250px;padding:15px 18px;border-radius:12px;border:1px solid var(--line);
  background:rgba(4,26,52,.8);color:var(--ink);font-size:1rem;outline:none;font-family:var(--mono)}
.checker input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.2)}
.check-result{margin-top:24px;max-width:780px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:24px;animation:fadeUp .45s cubic-bezier(.16,1,.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.verdict{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.verdict-score{font-family:var(--mono);font-size:1.9rem;font-weight:700;letter-spacing:-.03em}
.verdict-text{font-weight:600;font-size:1.04rem}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:13px;align-items:flex-start;padding:12px 14px;border-radius:11px;
  background:rgba(4,26,52,.5);border:1px solid var(--line-soft)}
.checks .mark{flex:0 0 22px;width:22px;height:22px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-size:.78rem;font-weight:700;margin-top:1px}
.mark-ok{background:rgba(52,211,153,.16);color:var(--emerald);border:1px solid rgba(52,211,153,.42)}
.mark-no{background:rgba(220,60,60,.14);color:#FF9C9C;border:1px solid rgba(220,60,60,.42)}
.mark-warn{background:rgba(255,176,32,.15);color:var(--amber);border:1px solid rgba(255,176,32,.42)}
.checks b{display:block;font-size:.93rem}
.checks span{font-size:.85rem;color:var(--ink-2)}
.checks code{font-family:var(--mono);font-size:.76rem;color:var(--ink-3);word-break:break-all}
.check-note{margin-top:14px;font-size:.79rem;color:var(--ink-3)}
.check-cta{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- training extras --- */
.path .path-tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cyan);border:1px solid rgba(34,211,238,.32);
  border-radius:20px;padding:4px 10px;margin-bottom:14px}
.links{list-style:none;margin:16px 0 0;padding:0}
.links li{padding:8px 0;border-bottom:1px dashed var(--line-soft)}
.links li:last-child{border-bottom:0}
.links a{color:var(--ink-2);text-decoration:none;font-size:.87rem;display:inline-flex;gap:8px}
.links a:hover{color:var(--ink)}
.explain{background:#fff;border:1px solid #CFE1F7;border-radius:15px;padding:24px}
.explain-k{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  background:var(--navy);color:#fff;border-radius:6px;padding:4px 10px;margin-bottom:13px}
.explain h3{color:var(--navy)}
.explain p{margin-top:8px;color:var(--slate);font-size:.9rem}
.explain-foot{margin-top:26px;color:var(--slate);max-width:62ch;font-size:.93rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
section.light .card{background:#fff;border-color:#CFE1F7}
section.light .card h3{color:var(--navy)}
section.light .card p{color:var(--slate)}

/* --- footer --- */
.foot-brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot-brand img{height:31px;width:auto;opacity:.85}
/* ================= training programme ================= */
.lead-note{margin-top:14px;color:var(--ink-3);font-size:.92rem;max-width:58ch}
.lead-note strong{color:var(--cyan)}

/* sticky section nav */
.subnav{position:sticky;top:68px;z-index:40;background:rgba(4,26,52,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:0}
.subnav-inner{display:flex;gap:6px;overflow-x:auto;padding:11px 24px;scrollbar-width:none}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;padding:7px 13px;border-radius:20px;border:1px solid transparent;
  transition:color .2s,border-color .2s,background .2s;white-space:nowrap}
.subnav a:hover{color:var(--ink);border-color:var(--line);background:rgba(34,211,238,.06)}
.subnav a.here{color:var(--cyan);border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.08)}

/* learning tracks */
.track{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:28px;margin-bottom:22px;position:relative;overflow:hidden}
.track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--cyan),var(--blue) 60%,transparent)}
.track-head{display:flex;justify-content:space-between;gap:26px;align-items:flex-start;
  padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.track-head h3{font-size:1.35rem;margin:10px 0 8px}
.track-head p{color:var(--ink-2);font-size:.93rem;max-width:60ch}
.track-meta{flex:0 0 auto;text-align:right}
.track-meta b{display:block;font-family:var(--mono);font-size:1rem;color:var(--cyan)}
.track-meta span{font-size:.78rem;color:var(--ink-3)}
@media (max-width:760px){.track-head{flex-direction:column;gap:12px}.track-meta{text-align:left}}

.modules{list-style:none;margin:0;padding:0;counter-reset:m}
.modules>li{display:flex;gap:18px;padding:20px 0;border-bottom:1px dashed var(--line-soft)}
.modules>li:last-child{border-bottom:0;padding-bottom:0}
.mod-n{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:.9rem;font-weight:700;
  background:rgba(34,211,238,.12);color:var(--cyan);border:1px solid rgba(34,211,238,.3)}
.mod-b{flex:1;min-width:0}
.mod-b h4{margin:4px 0 6px;font-size:1.02rem;font-weight:600;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;font-family:var(--sans)}
.mod-b>p{color:var(--ink-2);font-size:.9rem;margin-bottom:4px}
.lvl{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;font-weight:600}
.lvl-1{background:rgba(52,211,153,.13);color:var(--emerald);border:1px solid rgba(52,211,153,.34)}
.lvl-2{background:rgba(59,147,232,.14);color:var(--sky);border:1px solid rgba(59,147,232,.36)}
.lvl-3{background:rgba(255,176,32,.13);color:var(--amber);border:1px solid rgba(255,176,32,.34)}

.intel-tip{margin-top:24px;padding:18px 22px;border-radius:13px;
  background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.24);
  font-size:.93rem;color:var(--ink-2)}
.intel-tip b{color:var(--cyan)}
.intel-tip em{color:var(--ink);font-style:italic}

/* labs */
.lab{background:#fff;border:1px solid #CFE1F7;border-radius:15px;padding:24px;position:relative}
.lab h3{color:var(--navy);margin:12px 0 8px;font-size:1.05rem}
.lab p{color:var(--slate);font-size:.89rem}
.lab a{display:inline-block;margin-top:13px;font-family:var(--mono);font-size:.78rem;
  color:var(--blue);text-decoration:none;word-break:break-all}
.lab a:hover{text-decoration:underline}
.lab-cost{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;font-weight:700}
.lab-cost.free{background:#DCF5EA;color:#12724D;border:1px solid #9BDCC2}
.lab-cost.part{background:#FFF1D6;color:#8A5B00;border:1px solid #F5CE86}
.lab-warn{margin-top:26px;padding:20px 24px;border-radius:14px;background:#FFF6E5;
  border:1px solid #F3D08F;color:#6B4A00;font-size:.92rem}
.lab-warn b{color:#8A5B00}

/* certifications */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.cert{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:22px;
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s}
.cert:hover{transform:translateY(-4px);border-color:#28436E}
.cert-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.cert-stage{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(34,211,238,.32);border-radius:20px;padding:3px 10px}
.cert-cost{font-family:var(--mono);font-size:.74rem;color:var(--ink-3)}
.cert h3{font-size:1.06rem;margin-bottom:8px}
.cert p{color:var(--ink-2);font-size:.88rem}
.cert-for{display:block;margin-top:13px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:.79rem;color:var(--ink-3)}
.cert-note{margin-top:22px;font-size:.83rem;color:var(--ink-3)}

/* incident playbook */
.playbook{list-style:none;margin:0;padding:0;counter-reset:p}
.playbook li{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line-soft)}
.playbook li:last-child{border-bottom:0}
.playbook .pb-t{flex:0 0 96px;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;
  color:var(--amber);padding-top:2px}
.playbook div{flex:1;color:var(--ink-2);font-size:.95rem;line-height:1.65}
.playbook b{color:var(--ink);display:block;margin-bottom:3px}
.playbook strong{color:var(--amber)}
.pb-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pb-links a{font-size:.82rem;color:var(--cyan);text-decoration:none;border:1px solid rgba(34,211,238,.3);
  border-radius:20px;padding:8px 15px}
.pb-links a:hover{background:rgba(34,211,238,.08)}

/* glossary */
.glossary{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;
  background:#CFE1F7;border:1px solid #CFE1F7;border-radius:15px;overflow:hidden}
.gl{background:#fff;padding:19px 22px}
.gl b{display:block;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;
  color:var(--deep);margin-bottom:6px}
.gl span{font-size:.87rem;color:var(--slate);line-height:1.6}
.gl em{font-style:italic;color:var(--navy)}
/* ================= written guides ================= */
.guide{background:var(--surface);border:1px solid var(--line);border-radius:15px;
  margin-bottom:14px;overflow:hidden;transition:border-color .25s}
.guide[open]{border-color:#28436E}
.guide summary{display:flex;align-items:center;gap:16px;padding:20px 24px;cursor:pointer;
  list-style:none;transition:background .2s}
.guide summary::-webkit-details-marker{display:none}
.guide summary:hover{background:rgba(34,211,238,.05)}
.guide summary::after{content:"+";margin-left:auto;flex:0 0 auto;font-family:var(--mono);
  font-size:1.35rem;color:var(--cyan);line-height:1;transition:transform .3s}
.guide[open] summary::after{transform:rotate(45deg)}
.g-n{flex:0 0 auto;font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--cyan);
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3);
  border-radius:8px;padding:5px 9px}
.g-t{font-weight:600;font-size:1.02rem;color:var(--ink);font-family:var(--sans)}
.g-m{flex:0 0 auto;font-family:var(--mono);font-size:.68rem;color:var(--ink-3);white-space:nowrap}
@media (max-width:700px){.g-m{display:none}.guide summary{padding:16px 18px;gap:12px}}

.g-body{padding:4px 26px 28px;border-top:1px solid var(--line-soft);
  animation:gOpen .35s cubic-bezier(.16,1,.3,1)}
@keyframes gOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.g-body>p{color:var(--ink-2);font-size:.95rem;margin:16px 0;max-width:70ch;line-height:1.72}
.g-body h4{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);
  margin:26px 0 4px;padding-left:14px;border-left:3px solid var(--cyan)}
.g-body strong{color:var(--ink)}
.g-body em{color:var(--ink);font-style:italic}
.g-body a{color:var(--cyan)}

.kbd{font-family:var(--mono);font-size:.86em;background:rgba(4,26,52,.8);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:#BFE3F2;
  word-break:break-word}
.code{font-family:var(--mono);font-size:.82rem;line-height:1.75;color:#CFE6F5;
  background:#04101F;border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:9px;padding:15px 18px;margin:14px 0;overflow-x:auto;white-space:pre}

.ticks{list-style:none;margin:14px 0;padding:0;max-width:70ch}
.ticks li{position:relative;padding:8px 0 8px 26px;color:var(--ink-2);font-size:.93rem;line-height:1.68}
.ticks li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:5px;
  border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg)}
.ticks b{color:var(--ink)}

.g-box{margin-top:26px;padding:18px 22px;border-radius:12px;
  background:rgba(255,176,32,.07);border:1px solid rgba(255,176,32,.28);
  color:var(--ink-2);font-size:.93rem;line-height:1.7}
.g-box b{color:var(--amber)}

/* certification links */
.cert-links{list-style:none;margin:14px 0 0;padding:0}
.cert-links li{padding:5px 0}
.cert-links a{font-size:.83rem;color:var(--cyan);text-decoration:none;display:inline-flex;gap:7px}
.cert-links a::before{content:"\2192";flex:0 0 auto;opacity:.75}
.cert-links a:hover{text-decoration:underline}
/* ================= live attack map ================= */
.map-wrap{background:linear-gradient(165deg,var(--surface),rgba(4,26,52,.9));
  border:1px solid var(--line);border-radius:18px;padding:22px;overflow:hidden;
  box-shadow:0 26px 70px -34px rgba(0,0,0,.9)}

.map-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px}
.map-stats>div{background:rgba(4,26,52,.72);padding:16px 18px}
.ms-n{display:block;font-family:var(--mono);font-size:1.6rem;font-weight:700;letter-spacing:-.02em;
  color:var(--cyan);line-height:1;font-variant-numeric:tabular-nums}
.ms-l{display:block;margin-top:6px;font-size:.76rem;color:var(--ink-3)}

.globe-stage{position:relative;border-radius:13px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 35%,#0a2445 0%,#04162c 60%,#020d1c 100%);
  border:1px solid var(--line-soft)}
#attackGlobe{display:block;width:100%;height:clamp(360px,52vw,560px);
  cursor:grab;touch-action:none;outline:none}
#attackGlobe:focus-visible{box-shadow:inset 0 0 0 2px var(--cyan)}
#attackGlobe.grabbing{cursor:grabbing}

/* controls sit on the canvas; the globe is the interface, not a picture of one */
.globe-ctl{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:8px;z-index:4}
.g-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;cursor:pointer;font-size:1rem;line-height:1;font-weight:600;
  color:var(--ink-2);background:rgba(4,22,44,.82);border:1px solid var(--line);
  backdrop-filter:blur(6px);transition:color .18s,border-color .18s,background .18s}
.g-btn:hover{color:var(--ink);border-color:var(--cyan);background:rgba(8,44,85,.9)}
.g-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.g-reset{font-size:1.05rem}
.g-ico{display:block;width:11px;height:11px;position:relative}
.g-pause::before,.g-pause::after{content:"";position:absolute;top:0;width:3px;height:11px;
  background:currentColor;border-radius:1px}
.g-pause::before{left:1px} .g-pause::after{right:1px}
.g-spin.off .g-pause::before{left:2px;width:0;height:0;border-radius:0;
  border-left:9px solid currentColor;border-top:5.5px solid transparent;
  border-bottom:5.5px solid transparent;background:none}
.g-spin.off .g-pause::after{display:none}

.globe-hint{position:absolute;left:16px;bottom:14px;z-index:4;pointer-events:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--ink-3);
  background:rgba(4,22,44,.72);border:1px solid var(--line-soft);border-radius:99px;
  padding:5px 12px;transition:opacity .5s ease}
.globe-hint.gone{opacity:0}
@media (max-width:560px){.globe-hint{display:none}}

.map-tip{position:absolute;z-index:5;pointer-events:none;background:rgba(3,16,31,.95);
  border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:.8rem;
  box-shadow:0 10px 26px rgba(0,0,0,.6);white-space:nowrap}
.map-tip b{display:block;color:var(--ink);margin-bottom:2px}
.map-tip span{color:var(--cyan);font-family:var(--mono);font-size:.74rem}

.map-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-top:14px}
.map-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.75rem;color:var(--ink-3)}
.map-legend span{display:inline-flex;align-items:center;gap:7px}
.lg-dot{display:inline-block;border-radius:50%}
.lg-s{width:6px;height:6px;background:#22D3EE}
.lg-m{width:10px;height:10px;background:#FFB020}
.lg-l{width:14px;height:14px;background:#FF9C9C}
.lg-tgt{display:inline-block;width:10px;height:10px;border-radius:50%;
  border:1.5px solid #FFB020;background:rgba(255,176,32,.35)}
.map-updated{font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}

.map-split{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px}
@media (max-width:900px){.map-split{grid-template-columns:1fr;gap:20px}}
.map-h3{font-size:1.02rem;margin-bottom:14px}
.rank{list-style:none;margin:0;padding:0;counter-reset:r}
.rank li{display:flex;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px dashed var(--line-soft);font-size:.87rem}
.rank li:last-child{border-bottom:0}
.rk-n{flex:0 0 128px;color:var(--ink)}
.rk-bar{flex:1;height:6px;background:rgba(34,211,238,.10);border-radius:4px;overflow:hidden}
.rk-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--amber));border-radius:4px}
.rk-v{flex:0 0 auto;font-family:var(--mono);font-size:.8rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.rk-ip{flex:0 0 116px;font-family:var(--mono);font-size:.78rem;color:var(--ink)}
.rk-cc{flex:1;color:var(--ink-3);font-size:.8rem}
.rk-ban{flex:0 0 auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 8px;border-radius:20px;
  background:rgba(220,60,60,.14);color:#FF9C9C;border:1px solid rgba(220,60,60,.36)}
.rk-ban.rk-watch{background:rgba(90,107,127,.14);color:#9FB4CC;border-color:rgba(120,145,175,.34)}
.map-note{margin-top:12px;font-size:.78rem;color:var(--ink-3)}
.map-attr{margin-top:22px;font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
/* ================= two-discipline curriculum ================= */
.disc-switch{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
@media (max-width:720px){.disc-switch{grid-template-columns:1fr}}
.disc-btn{display:block;text-align:left;padding:20px 22px;border-radius:15px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);font-family:inherit;
  transition:border-color .25s,transform .25s,background .25s}
.disc-btn:hover{transform:translateY(-3px);border-color:#28436E}
.disc-btn.active{border-color:var(--cyan);background:linear-gradient(160deg,rgba(34,211,238,.10),var(--surface))}
.disc-k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.disc-btn.active .disc-k{color:var(--cyan)}
.disc-btn b{display:block;font-family:var(--sans);font-size:1.16rem;font-weight:600;margin-bottom:5px}
.disc-s{display:block;font-size:.82rem;color:var(--ink-2)}

.disc-intro{padding:18px 22px;border-radius:13px;margin-bottom:22px;font-size:.93rem;
  color:var(--ink-2);background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.22);line-height:1.7}
.disc-intro b{color:var(--cyan)}
.disc-panel[hidden]{display:none}

.spec{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;margin-bottom:16px;transition:border-color .25s}
.spec:hover{border-color:#28436E}
.spec-head{display:flex;gap:18px;align-items:flex-start;padding-bottom:16px;margin-bottom:4px;
  border-bottom:1px solid var(--line)}
.spec-i{flex:0 0 42px;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:.85rem;font-weight:700;
  background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(26,111,212,.1));
  color:var(--cyan);border:1px solid rgba(34,211,238,.32)}
.spec-head>div{flex:1;min-width:0}
.spec-head h3{font-size:1.14rem;margin-bottom:6px}
.spec-head p{color:var(--ink-2);font-size:.9rem;max-width:62ch}
.spec-t{flex:0 0 auto;text-align:right;font-family:var(--mono);font-size:.78rem;
  color:var(--cyan);line-height:1.6}
.spec-t i{color:var(--ink-3);font-style:normal;font-size:.7rem}
@media (max-width:700px){.spec-head{flex-wrap:wrap}.spec-t{text-align:left;width:100%}}

.res{list-style:none;margin:6px 0 0;padding:0}
.res li{padding:12px 0;border-bottom:1px dashed var(--line-soft)}
.res li:last-child{border-bottom:0}
.res a{display:inline-flex;gap:8px;color:var(--ink);text-decoration:none;font-size:.93rem;font-weight:600}
.res a::before{content:"\2197";color:var(--cyan);flex:0 0 auto;font-weight:400}
.res a:hover{color:var(--cyan)}
.res span{display:block;margin-top:4px;padding-left:19px;color:var(--ink-2);font-size:.85rem;line-height:1.6}
.res em{font-style:italic;color:var(--ink)}

/* ---------- learning roadmap (/learn/#start) ---------- */
/* Numbered because the order genuinely matters here — the whole point of the
   section is that people fail by starting at stage three. */
.road{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:none}
.road-step{display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 28px;
  transition:border-color .2s ease}
.road-step:hover{border-color:#28436E}
.road-n{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:1.4rem;font-weight:600;color:var(--navy);
  background:linear-gradient(150deg,var(--amber),var(--amber-dp));
  box-shadow:0 10px 26px -14px rgba(255,176,32,.8)}
.road-body h3{font-size:1.16rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:9px}
.road-t{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-weight:400}
.road-body p{color:var(--ink-2);font-size:.93rem;max-width:74ch;margin:0 0 10px}
.road-do{border-left:2px solid var(--cyan);padding-left:14px;font-size:.88rem !important}
.road-do b{color:var(--cyan)}
.road-go{display:inline-block;margin-top:4px;font-size:.86rem;font-weight:600;color:var(--cyan);
  text-decoration:none}
.road-go:hover{text-decoration:underline}
.road-note{margin-top:24px;padding:18px 22px;border-radius:13px;font-size:.92rem;color:var(--ink-2);
  background:linear-gradient(120deg,rgba(255,176,32,.09),rgba(8,44,85,.6));
  border:1px solid rgba(255,176,32,.28)}
.road-note b{color:var(--amber)}
@media (max-width:640px){
  .road-step{grid-template-columns:1fr;gap:14px;padding:22px}
  .road-n{width:44px;height:44px;font-size:1.2rem}
}

/* ---------- stay current (/learn/#keep) ---------- */
.keep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}
.keep{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 26px;
  transition:border-color .2s ease}
.keep:hover{border-color:#28436E}
.keep h3{font-size:1.02rem;display:flex;align-items:center;gap:11px;margin-bottom:6px;
  padding-bottom:13px;border-bottom:1px solid var(--line-soft)}
.keep-i{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:.85rem;color:var(--cyan);
  background:rgba(59,147,232,.14);border:1px solid rgba(59,147,232,.3)}
.keep .res li{padding:11px 0}

/* ---------- threat intel -> learn cross-link ---------- */
.tolearn{display:grid;grid-template-columns:1.25fr .95fr;gap:44px;align-items:center;
  background:linear-gradient(140deg,rgba(13,74,143,.55),var(--surface));
  border:1px solid var(--line);border-radius:20px;padding:44px 46px}
.tolearn h2{font-size:clamp(1.5rem,2.8vw,2.05rem);margin:4px 0 14px;max-width:22ch}
.tolearn p{color:var(--ink-2);max-width:60ch;margin-bottom:26px}
.tolearn-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tolearn-list li{background:rgba(4,26,52,.5);border:1px solid var(--line-soft);border-radius:13px;
  padding:15px 18px}
.tolearn-list b{display:block;font-family:var(--sans);font-size:.94rem;color:var(--ink);margin-bottom:4px}
.tolearn-list span{display:block;font-size:.83rem;color:var(--ink-2);line-height:1.6}
@media (max-width:940px){.tolearn{grid-template-columns:1fr;gap:30px;padding:34px 26px}}

/* ---------- games we play ---------- */
/* Each tile sets --g (the game's colour) and --lh (how tall its wordmark should
   be drawn). Wordmark proportions vary wildly — VALORANT is nearly 7:1, GTA V is
   about 1:1 — so a shared height would make some look twice the weight of others. */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:16px}
.game{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:24px 24px 22px;text-decoration:none;color:inherit;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.game::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--g),transparent 85%)}
.game::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  border-radius:50%;background:var(--g);opacity:.07;transition:opacity .22s ease}
.game:hover,.game:focus-visible{border-color:var(--g);transform:translateY(-4px);
  box-shadow:0 18px 40px -26px var(--g)}
.game:hover::after,.game:focus-visible::after{opacity:.16}
.game:focus-visible{outline:2px solid var(--g);outline-offset:3px}

.game-logo{display:flex;align-items:center;height:60px;margin-bottom:14px;
  position:relative;z-index:1}
.game-logo img{height:var(--lh,32px);width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));transition:transform .22s ease}
.game:hover .game-logo img{transform:scale(1.04)}

.game-mode{display:block;position:relative;z-index:1;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--g);
  margin-bottom:10px}
.game-note{display:block;position:relative;z-index:1;font-size:.86rem;color:var(--ink-2);
  line-height:1.62;flex:1}
.game-go{display:block;position:relative;z-index:1;margin-top:14px;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.04em;color:var(--ink-3);transition:color .2s ease}
.game-go::after{content:" \2197 ";color:var(--g);font-family:var(--body)}
.game:hover .game-go{color:var(--ink-2)}
.games-note{margin-top:22px;font-size:.86rem;color:var(--ink-3);max-width:70ch}

/* compact strip for the home page teaser */
.game-strip{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.gs{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:99px;
  text-decoration:none;background:rgba(4,26,52,.55);border:1px solid var(--line-soft);
  transition:border-color .2s ease,background .2s ease,transform .2s ease}
.gs:hover{border-color:var(--g);background:rgba(8,44,85,.85);transform:translateY(-2px)}
.gs img{height:var(--lh,16px);width:auto;max-width:104px;object-fit:contain;display:block;
  opacity:.9;transition:opacity .2s ease}
.gs:hover img{opacity:1}
@media (max-width:420px){.gs{height:34px;padding:0 12px}}


/* ---------- get-started / sign-up form ---------- */
.start-split{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
@media (max-width:960px){.start-split{grid-template-columns:1fr;gap:22px}}

.start-form{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:32px 34px}
@media (max-width:560px){.start-form{padding:24px 20px}}

.sf-head{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:13px;
  margin-bottom:26px;background:linear-gradient(120deg,rgba(255,176,32,.12),rgba(8,44,85,.5));
  border:1px solid rgba(255,176,32,.3)}
.sf-credit{flex:0 0 auto;font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--navy);
  background:linear-gradient(135deg,var(--amber),var(--amber-dp));border-radius:99px;padding:6px 14px}
.sf-head p{margin:2px 0 0;font-size:.87rem;color:var(--ink-2);line-height:1.6}

.sf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.sf-grid{grid-template-columns:1fr}}
.sf-wide{grid-column:1/-1}
.sf-field{display:flex;flex-direction:column;gap:7px}
.sf-field>span{font-size:.83rem;color:var(--ink-2);font-weight:600}
.sf-field>span i{color:var(--amber);font-style:normal}
.sf-field>span em{font-style:normal;font-weight:400;color:var(--ink-3);font-size:.78rem}
.sf-field input,.sf-field textarea{width:100%;padding:13px 15px;border-radius:11px;
  border:1px solid var(--line);background:rgba(4,26,52,.6);color:var(--ink);
  font-family:var(--body);font-size:.95rem;transition:border-color .18s,box-shadow .18s}
.sf-field textarea{resize:vertical;min-height:84px;line-height:1.6}
.sf-field input::placeholder,.sf-field textarea::placeholder{color:var(--ink-3);opacity:.75}
.sf-field input:focus,.sf-field textarea:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(59,147,232,.18)}
.sf-field input.bad,.sf-field textarea.bad{border-color:#FF6B6B;box-shadow:0 0 0 3px rgba(255,107,107,.16)}

.sf-radios{display:flex;flex-wrap:wrap;gap:10px;margin-top:7px}
.sf-radios label{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:11px;
  border:1px solid var(--line);background:rgba(4,26,52,.5);cursor:pointer;font-size:.86rem;
  color:var(--ink-2);transition:border-color .18s,color .18s;white-space:nowrap}
@media (max-width:420px){.sf-radios{flex-direction:column;align-items:stretch}}
.sf-radios label:hover{border-color:#28436E;color:var(--ink)}
.sf-radios input{accent-color:var(--blue);margin:0}
.sf-radios input:checked+span{color:var(--ink)}

/* the honeypot must be reachable by a scripted fill but never by a person */
.sf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sf-total{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:13px;overflow:hidden;margin:26px 0 22px}
@media (max-width:460px){.sf-total{grid-template-columns:1fr}}
.sf-total>div{background:rgba(4,26,52,.8);padding:15px 17px}
.sf-t-l{display:block;font-size:.74rem;color:var(--ink-3);margin-bottom:5px}
.sf-total b{font-family:var(--mono);font-size:1.28rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sf-t-credit{background:linear-gradient(120deg,rgba(255,176,32,.14),rgba(4,26,52,.8)) !important}
.sf-t-credit b{color:var(--amber)}

.sf-submit{width:100%;justify-content:center}
.sf-submit:disabled{opacity:.6;cursor:progress}
.sf-small{margin-top:14px;font-size:.79rem;color:var(--ink-3);text-align:center}

.sf-msg{margin-top:18px;padding:16px 18px;border-radius:12px;font-size:.9rem;line-height:1.65}
.sf-ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.38);color:#B8F0DA}
.sf-err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.38);color:#FFC9C9}

.start-aside{display:grid;gap:16px}
.start-card{background:linear-gradient(150deg,rgba(13,74,143,.4),var(--surface));
  border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.start-card h2{font-size:1.08rem;margin-bottom:16px}
.start-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:16px}
.start-steps li{counter-increment:s;position:relative;padding-left:38px}
.start-steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:25px;height:25px;
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.76rem;font-weight:600;color:var(--navy);
  background:linear-gradient(150deg,var(--amber),var(--amber-dp))}
.start-steps b{display:block;font-family:var(--sans);font-size:.93rem;margin-bottom:3px}
.start-steps span{display:block;font-size:.85rem;color:var(--ink-2);line-height:1.6}
.start-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.start-list li{position:relative;padding-left:24px;font-size:.88rem;color:var(--ink-2)}
.start-list li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;
  border-radius:2px;background:var(--cyan);transform:rotate(45deg)}
.start-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:.82rem;color:var(--ink-3)}

/* the price on the home page is a door, so it has to look like one */
.price-link{display:inline-flex;align-items:baseline;text-decoration:none;color:inherit;
  border-radius:12px;transition:transform .2s ease,filter .2s ease}
.price-link:hover{transform:translateY(-2px);filter:brightness(1.08)}
.price-link:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
.price-cta{display:block;margin-top:16px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;color:var(--amber)}
a.mosaic-badge{text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
a.mosaic-badge:hover{transform:translateY(-3px) scale(1.03)}
a.mosaic-badge:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.badge-cta{display:block;font-size:.62rem;letter-spacing:.06em;opacity:.82;margin-top:2px}

/* the price inside the infrastructure band is a link, so it has to read as one */
.band-price{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(255,176,32,.45);
  transition:border-color .18s,color .18s}
.band-price:hover{color:#FFD37A;border-bottom-color:#FFD37A}
.band-offer{margin-top:16px !important}
.band-offer a{display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;
  color:var(--navy);background:linear-gradient(135deg,var(--amber),var(--amber-dp));
  padding:9px 16px;border-radius:99px;text-decoration:none;font-weight:600;
  transition:transform .18s ease,box-shadow .18s ease}
.band-offer a:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(255,176,32,.9)}

/* ---------- talk-to-an-engineer modal ---------- */
.emodal{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;
  background:transparent;overflow:visible;color:var(--ink)}
.emodal::backdrop{background:rgba(2,12,26,.72);backdrop-filter:blur(3px)}
.emodal form{position:relative;background:linear-gradient(155deg,#0b3768,var(--surface) 55%,#062240);
  border:1px solid var(--line);border-radius:20px;padding:34px 36px 30px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);max-height:calc(100vh - 48px);overflow-y:auto}
@media (max-width:560px){.emodal form{padding:26px 20px 24px;border-radius:16px}}

.emodal h2{font-size:clamp(1.25rem,3vw,1.6rem);margin:4px 0 12px;max-width:22ch}
.em-lead{color:var(--ink-2);font-size:.92rem;margin-bottom:24px;max-width:52ch}

.em-close{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.5rem;
  line-height:1;color:var(--ink-2);background:rgba(4,22,44,.7);border:1px solid var(--line);
  transition:color .18s,border-color .18s}
.em-close:hover{color:var(--ink);border-color:var(--cyan)}
.em-close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.em-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:560px){.em-grid{grid-template-columns:1fr}}
.em-wide{grid-column:1/-1}
.em-field{display:flex;flex-direction:column;gap:6px}
.em-field>span{font-size:.81rem;color:var(--ink-2);font-weight:600}
.em-field>span i{color:var(--amber);font-style:normal}
.em-field>span em{font-style:normal;font-weight:400;color:var(--ink-3);font-size:.76rem}
.em-field input,.em-field textarea{width:100%;padding:12px 14px;border-radius:11px;
  border:1px solid var(--line);background:rgba(4,26,52,.62);color:var(--ink);
  font-family:var(--body);font-size:.93rem;transition:border-color .18s,box-shadow .18s}
.em-field textarea{resize:vertical;min-height:104px;line-height:1.6}
.em-field input::placeholder,.em-field textarea::placeholder{color:var(--ink-3);opacity:.75}
.em-field input:focus,.em-field textarea:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(59,147,232,.18)}
.em-field input.bad,.em-field textarea.bad{border-color:#FF6B6B;box-shadow:0 0 0 3px rgba(255,107,107,.16)}

.em-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.em-chips label{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:99px;
  border:1px solid var(--line);background:rgba(4,26,52,.5);cursor:pointer;font-size:.82rem;
  color:var(--ink-2);white-space:nowrap;transition:border-color .18s,color .18s}
.em-chips label:hover{border-color:#28436E;color:var(--ink)}
.em-chips input{accent-color:var(--blue);margin:0}
.em-chips input:checked+span{color:var(--ink)}

.em-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.em-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}
.em-actions .btn{flex:1 1 auto;justify-content:center}
.em-actions .btn:disabled{opacity:.6;cursor:progress}
.em-small{margin-top:14px;margin-bottom:0;font-size:.78rem;color:var(--ink-3)}

.em-msg{margin-top:18px;padding:16px 18px;border-radius:12px;font-size:.9rem;line-height:1.65}
.em-ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.38);color:#B8F0DA}
.em-err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.38);color:#FFC9C9}

@media (prefers-reduced-motion:no-preference){
  .emodal[open] form{animation:emIn .22s cubic-bezier(.2,.7,.3,1)}
  @keyframes emIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
}

/* ---------- track picker: the two doors at the top of /learn/ ---------- */
/* Deliberately the largest thing on the page. Everything below it is one of
   these two answers, so the choice comes before the reading. */
.track-pick{padding-top:34px;padding-bottom:6px}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:820px){.tp-grid{grid-template-columns:1fr}}

.tp-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;cursor:pointer;padding:34px 34px 30px;border-radius:20px;
  min-height:290px;color:inherit;font-family:inherit;
  background:linear-gradient(160deg,rgba(13,74,143,.42),var(--surface) 62%);
  border:1px solid var(--line);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}

/* The photograph sits in its own layer so the scrim can be tuned separately.
   It is weighted to the right because all the type is on the left: the image
   is there to say what the track is at a glance, not to be looked at. Both
   are CC0 (see /img/CREDITS.txt) and already blue-duotoned, so the accent
   tint on top is all that separates the two. */
.tp-bg{position:absolute;inset:-6px;z-index:0;background-size:cover;background-position:center right;
  opacity:.26;filter:blur(1.5px) saturate(.9);
  transition:opacity .3s ease,transform .5s ease;transform:scale(1.04)}
.tp-card:hover .tp-bg{opacity:.36;transform:scale(1.08)}
.tp-it .tp-bg{background-image:url("/img/band-datacenter.jpg")}
/* deliberately NOT the code-on-screen shot: legible glyphs behind copy fight
   the copy at any opacity. A circuit macro is texture, which does not. */
.tp-cy .tp-bg{background-image:url("/img/hero-board.jpg");background-position:center}
/* the scrim: opaque under the text, clearing toward the image on the right */
.tp-card::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(93deg,
      rgba(4,26,52,.96) 0%,
      rgba(4,26,52,.92) 46%,
      rgba(4,26,52,.80) 74%,
      rgba(4,26,52,.66) 100%),
    linear-gradient(0deg, var(--tp-wash), var(--tp-wash))}
.tp-it{--tp-wash:rgba(26,111,212,.20)}
.tp-cy{--tp-wash:rgba(255,176,32,.14)}
.tp-card::after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;
  border-radius:50%;background:var(--tp);opacity:.09;transition:opacity .22s ease}
.tp-card:hover{transform:translateY(-4px);border-color:var(--tp);
  box-shadow:0 26px 60px -34px var(--tp)}
.tp-card:hover::after{opacity:.16}
.tp-card:focus-visible{outline:2px solid var(--tp);outline-offset:3px}
.tp-it{--tp:var(--cyan)}
.tp-cy{--tp:var(--amber)}

/* the selected door stays lit, so the page always says which half you are in */
.tp-card.active{border-color:var(--tp);
  background:linear-gradient(160deg,rgba(13,74,143,.55),var(--surface) 58%)}
.tp-edge{position:absolute;inset:0 0 auto 0;height:4px;z-index:2;background:var(--tp);
  opacity:0;transition:opacity .22s ease}
.tp-card.active .tp-edge{opacity:1}
.tp-card.active::after{opacity:.2}

.tp-k{position:relative;z-index:1;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tp)}
.tp-big{position:relative;z-index:1;display:block;font-family:var(--sans);font-weight:600;
  line-height:1.02;letter-spacing:-.02em;margin:10px 0 6px;color:var(--ink);
  font-size:clamp(2.4rem,5.4vw,3.9rem)}
/* "IT" is two letters and "Cybersecurity" is thirteen — at one shared size the
   left card looks half the weight of the right, so each gets its own. */
.tp-it .tp-big{font-size:clamp(3.4rem,7.2vw,5.2rem)}
.tp-cy .tp-big{font-size:clamp(1.9rem,4vw,2.9rem)}
.tp-name{position:relative;z-index:1;font-family:var(--sans);font-size:1.02rem;font-weight:600;
  color:var(--ink-2);margin-bottom:12px}
.tp-sub{position:relative;z-index:1;font-size:.87rem;color:var(--ink-2);line-height:1.62;
  max-width:40ch;flex:1}
.tp-meta{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-top:18px;
  font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
.tp-meta b{color:var(--ink);font-weight:600}
.tp-meta i{width:4px;height:4px;border-radius:50%;background:var(--line);display:inline-block}
.tp-go{position:relative;z-index:1;margin-top:16px;font-size:.86rem;font-weight:600;color:var(--tp)}
@media (max-width:820px){.tp-card{min-height:0;padding:26px 24px 24px}}

/* ---------- Click Recorder product page ---------- */
.cr-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media (max-width:900px){.cr-split{grid-template-columns:1fr;gap:26px}}
.cr-buy{background:linear-gradient(155deg,rgba(13,74,143,.5),var(--surface));
  border:1px solid var(--line);border-radius:20px;padding:32px 34px}
.cr-price{display:flex;align-items:baseline;gap:8px;margin-bottom:20px}
.cr-cur{font-family:var(--sans);font-size:1.8rem;font-weight:600;color:var(--amber)}
.cr-num{font-family:var(--sans);font-size:4rem;font-weight:600;line-height:1;color:var(--ink);
  letter-spacing:-.03em}
.cr-per{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);line-height:1.5}
.cr-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px}
.cr-list li{position:relative;padding-left:24px;font-size:.9rem;color:var(--ink-2)}
.cr-list li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;
  border-radius:2px;background:var(--amber);transform:rotate(45deg)}
.cr-cta{width:100%;justify-content:center;margin-bottom:10px}
.cr-small{margin:8px 0 0;font-size:.78rem;color:var(--ink-3);text-align:center}
.cr-shot img{width:100%;max-width:446px;height:auto;border-radius:14px;
  border:1px solid var(--line);box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}

/* ---------- products index ---------- */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.prod-grid{grid-template-columns:1fr}}
.prod{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(160deg,rgba(13,74,143,.42),var(--surface) 62%);
  border:1px solid var(--line);border-radius:20px;padding:32px 34px 28px;
  text-decoration:none;color:inherit;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.prod::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--p),transparent 85%)}
.prod::after{content:"";position:absolute;right:-60px;top:-60px;width:210px;height:210px;
  border-radius:50%;background:var(--p);opacity:.07;transition:opacity .22s ease}
.prod:hover{transform:translateY(-4px);border-color:var(--p);
  box-shadow:0 26px 58px -34px var(--p)}
.prod:hover::after{opacity:.15}
.prod:focus-visible{outline:2px solid var(--p);outline-offset:3px}
.prod>*{position:relative;z-index:1}
.prod-tag{align-self:flex-start;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--p);border:1px solid var(--p);border-radius:99px;
  padding:3px 10px;opacity:.85}
.prod-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;margin:18px 0 14px;background:rgba(255,255,255,.05);
  border:1px solid var(--line)}
.prod-ico svg{width:24px;height:24px;fill:none;stroke:var(--p);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.prod h2{font-size:1.4rem;margin-bottom:10px}
.prod-price{display:flex;align-items:baseline;gap:9px;margin:0 0 14px}
.prod-price b{font-family:var(--sans);font-size:2.1rem;font-weight:600;color:var(--p);
  line-height:1;letter-spacing:-.02em}
.prod-price span{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
.prod-sub{color:var(--ink-2);font-size:.9rem;line-height:1.65;margin:0 0 16px;max-width:44ch}
.prod-points{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:7px;flex:1}
.prod-points li{position:relative;padding-left:22px;font-size:.85rem;color:var(--ink-2)}
.prod-points li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;
  border-radius:2px;background:var(--p);transform:rotate(45deg)}
.prod-go{font-size:.88rem;font-weight:600;color:var(--p)}

.prod-free{margin-top:46px;padding-top:36px;border-top:1px solid var(--line-soft)}
.prod-free h2{font-size:1.3rem;margin-bottom:8px}
.prod-free>p{color:var(--ink-2);font-size:.92rem;max-width:60ch;margin-bottom:24px}
.free-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px}
.free{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.free:hover{border-color:var(--cyan);transform:translateY(-3px)}
.free b{display:block;font-family:var(--sans);font-size:.98rem;color:var(--ink);margin-bottom:6px}
.free span{display:block;font-size:.84rem;color:var(--ink-2);line-height:1.6}

/* ---------- squad finder ---------- */
.sq-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px;
  margin-bottom:20px}
.sq-status{font-family:var(--mono);font-size:.82rem;color:var(--ink-2)}
.sq-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-steam{display:inline-flex;align-items:center;gap:9px;background:#1b2838;color:#fff;
  border:1px solid #2a475e;border-radius:10px;padding:10px 18px;font-weight:650;font-size:.9rem;
  text-decoration:none;transition:background .18s ease,border-color .18s ease}
.btn-steam:hover{background:#2a475e;border-color:var(--cyan)}
.sq-compose{background:linear-gradient(155deg,rgba(13,74,143,.42),var(--surface));
  border:1px solid var(--line);border-radius:18px;padding:26px 28px;margin-bottom:24px}
.sq-compose h2{font-size:1.15rem;margin-bottom:16px}
.sq-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  margin-bottom:18px}
.sq-wide{grid-column:1/-1}
.sq-f{display:flex;flex-direction:column;gap:6px}
.sq-f>span{font-size:.8rem;color:var(--ink-2);font-weight:600}
.sq-f>span em{font-style:normal;font-weight:400;color:var(--ink-3);font-size:.75rem}
.sq-f input,.sq-f select{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);
  background:rgba(4,26,52,.62);color:var(--ink);font-family:var(--body);font-size:.92rem}
.sq-f input:focus,.sq-f select:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(59,147,232,.18)}
.sq-msg{margin-top:12px;font-size:.86rem;color:var(--amber)}

.sq-list{display:grid;gap:14px}
.sq-post{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  transition:border-color .2s ease}
.sq-post:hover{border-color:#28436E}
.sq-post.mine{border-color:rgba(255,176,32,.5)}
.sq-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.sq-game{font-family:var(--sans);font-weight:600;font-size:1.05rem;color:var(--ink)}
.sq-need{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--navy);
  background:var(--amber);border-radius:99px;padding:3px 10px;font-weight:700}
.sq-meta{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin-left:auto}
.sq-note{color:var(--ink-2);font-size:.9rem;margin:6px 0 0}
.sq-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sq-tag{font-family:var(--mono);font-size:.7rem;color:var(--ink-2);border:1px solid var(--line);
  border-radius:99px;padding:3px 10px}
.sq-replies{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-soft);display:grid;gap:8px}
.sq-reply{font-size:.86rem;color:var(--ink-2)}
.sq-reply b{color:var(--ink)}
.sq-reply .sq-contact{color:var(--cyan);font-family:var(--mono);font-size:.78rem}
.sq-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.sq-row input{flex:1;min-width:150px;padding:9px 12px;border-radius:9px;border:1px solid var(--line);
  background:rgba(4,26,52,.62);color:var(--ink);font-size:.86rem}
.sq-mini{background:var(--blue);color:#fff;border:0;border-radius:9px;padding:9px 16px;
  font-weight:650;font-size:.84rem;cursor:pointer}
.sq-mini.ghost{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.sq-empty{text-align:center;padding:44px 20px;color:var(--ink-3)}

/* ---------- scam link checker ---------- */
.sc-box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.sc-row{display:flex;gap:10px;flex-wrap:wrap}
.sc-row input{flex:1;min-width:240px;padding:14px 16px;border-radius:11px;border:1px solid var(--line);
  background:rgba(4,26,52,.62);color:var(--ink);font-family:var(--mono);font-size:.9rem}
.sc-row input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(59,147,232,.18)}
.sc-hint{margin:14px 0 0;font-size:.8rem;color:var(--ink-3);line-height:1.7}
.sc-hint code{font-family:var(--mono);color:var(--ink-2);background:rgba(4,26,52,.7);
  padding:2px 6px;border-radius:5px}
.sc-result{margin-top:20px;border-radius:13px;padding:20px 22px;border:1px solid var(--line)}
.sc-result.danger{background:rgba(255,107,107,.09);border-color:rgba(255,107,107,.45)}
.sc-result.caution{background:rgba(255,176,32,.09);border-color:rgba(255,176,32,.45)}
.sc-result.clear{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.4)}
.sc-verdict{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.sc-verdict b{font-family:var(--sans);font-size:1.2rem}
.sc-result.danger .sc-verdict b{color:#FF9C9C}
.sc-result.caution .sc-verdict b{color:var(--amber)}
.sc-result.clear .sc-verdict b{color:#7EE8C0}
.sc-dom{font-family:var(--mono);font-size:.8rem;color:var(--ink-2)}
.sc-advice{color:var(--ink-2);font-size:.9rem;margin:0 0 14px}
.sc-find{display:grid;gap:9px}
.sc-f{display:flex;gap:10px;font-size:.86rem;line-height:1.6}
.sc-f i{flex:0 0 auto;width:16px;height:16px;border-radius:4px;margin-top:3px}
.sc-f.bad i{background:#FF6B6B} .sc-f.warn i{background:var(--amber)}
.sc-f.good i{background:#34D399} .sc-f.info i{background:var(--line)}
.sc-f b{display:block;color:var(--ink)}
.sc-f span{color:var(--ink-2)}

/* discord linking + steam avatars on the squad board */
.sq-av{width:26px;height:26px;border-radius:50%;vertical-align:middle;margin-right:9px;
  border:1px solid var(--line)}
.sq-dc{font-family:var(--mono);font-size:.72rem;color:#8B7BF7}
.sq-mini.discord{background:#5865F2}
.sq-mini.discord:hover{background:#4752c4}
.sq-flash{margin:-8px 0 18px;padding:12px 18px;border-radius:11px;font-size:.88rem;
  background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.4);color:#FFC9C9}
.sq-flash.good{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.4);color:#B8F0DA}

/* ---------- join the community ---------- */
.join-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.join{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px 28px 24px;
  border-radius:18px;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.join:hover{transform:translateY(-4px);border-color:var(--j);box-shadow:0 22px 50px -32px var(--j)}
.join-steam{--j:#66c0f4}.join-discord{--j:#5865F2}.join-board{--j:var(--amber)}
.join-n{position:absolute;top:22px;right:24px;font-family:var(--mono);font-size:.72rem;
  width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:var(--navy);background:var(--j);font-weight:700}
.join b{font-family:var(--sans);font-size:1.05rem;color:var(--ink);padding-right:34px}
.join span:not(.join-n):not(.join-go){font-size:.87rem;color:var(--ink-2);line-height:1.62;flex:1}
.join-go{font-size:.86rem;font-weight:600;color:var(--j);margin-top:4px}

/* The community page leads with the split block rather than a page-head, so its
   h1 takes the heading size the h2 had, and the section supplies the top space
   the removed page-head used to. */
.gc-split h1{font-size:clamp(1.6rem,3.4vw,2.35rem);letter-spacing:-.02em;margin:0}
#community.gc{padding-top:64px}
.join-link{--j:#8B7BF7}

/* install-app control, only visible when the browser offers installation */
.btn-install{border-color:var(--navy)!important;color:var(--navy)!important;font-weight:700}
.btn-install:hover{background:rgba(6,37,74,.1)!important}
.pwa-tip{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:440px;
  margin:0 auto;background:var(--surface);border:1px solid var(--amber);border-radius:15px;
  padding:18px 20px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9);color:var(--ink-2);font-size:.9rem;
  line-height:1.65}
.pwa-tip b{display:block;color:var(--ink);font-family:var(--sans);margin-bottom:6px}
.pwa-tip button{margin-top:12px;background:var(--amber);color:var(--navy);border:0;
  border-radius:9px;padding:9px 16px;font-weight:700;cursor:pointer}

/* --- webmail access + install (sec_webmail.html) --- */
.mailbar{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:20px;padding:30px 34px;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.8)}
.mailbar-text{display:flex;flex-direction:column;gap:5px;min-width:min(100%,320px)}
.mailbar-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.mailbar-url{font-size:clamp(1.35rem,3vw,2rem);font-weight:700;color:var(--ink);
  text-decoration:none;letter-spacing:-.01em;line-height:1.15;overflow-wrap:anywhere}
.mailbar-url:hover{color:var(--cyan)}
.mailbar-note{margin-top:6px;color:var(--ink-2);font-size:.88rem;max-width:46ch}
section.light .mailbar{background:linear-gradient(135deg,#08294D,#0B3768)}
section.light .mailbar-note{color:#A9C6E8}

.mail-perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;margin-top:34px}
.perk{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.perk b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:6px}
.perk span{display:block;color:var(--ink-2);font-size:.86rem;line-height:1.62}

/* --- inline bold inside a .free card's text --- */
.free span b,.perk span b{display:inline;color:var(--ink);font-weight:600;font-size:inherit;margin:0}

/* --- full-width mailbox strip (part_mailbar.html) --- */
.mailstrip{display:block;width:100%;text-decoration:none;position:relative;z-index:2;
  background:linear-gradient(90deg,#062240 0%,#0B3768 55%,#08294D 100%);
  border-bottom:1px solid var(--line);transition:background .25s}
.mailstrip::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--amber),var(--cyan))}
.mailstrip:hover{background:linear-gradient(90deg,#08294D 0%,#12457E 55%,#0B3768 100%)}
.mailstrip-inner{max-width:1200px;margin:0 auto;padding:15px 26px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mailstrip-icon{flex:0 0 auto;width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.34)}
.mailstrip-icon svg{width:19px;height:19px;fill:none;stroke:var(--amber);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mailstrip-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:200px}
.mailstrip-text b{color:#EAF3FD;font-size:.97rem;letter-spacing:-.01em}
.mailstrip-text span{color:#A9C6E8;font-size:.85rem}
.mailstrip-text em{font-style:normal;color:var(--amber);font-family:var(--mono);
  font-size:.83rem}
.mailstrip-go{flex:0 0 auto;font-weight:700;font-size:.88rem;color:#051428;
  background:var(--amber);padding:9px 18px;border-radius:9px;white-space:nowrap;
  transition:transform .2s}
.mailstrip:hover .mailstrip-go{transform:translateX(3px)}
@media (max-width:640px){
  .mailstrip-inner{padding:13px 18px;gap:12px}
  .mailstrip-go{width:100%;text-align:center}
}

/* --- download cards (sec_downloads.html) --- */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}
.dl{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:22px;transition:border-color .2s,transform .2s}
.dl:hover{border-color:var(--blue);transform:translateY(-2px)}
.dl-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dl-top h3{margin:0;font-size:1.06rem}
.dl-price{font-family:var(--mono);font-size:.68rem;color:var(--amber);
  background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.32);
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.dl p{margin:11px 0 18px;color:var(--ink-2);font-size:.88rem;line-height:1.62;flex:1}
.dl p code{font-family:var(--mono);font-size:.82em;color:var(--cyan)}
.dl p b{color:var(--ink);font-weight:600}
.dl .btn{align-self:flex-start}
.dl-note{margin-top:24px;max-width:70ch;color:var(--ink-3);font-size:.84rem;line-height:1.65}
.dl-note a{color:var(--cyan)}