:root{
    --ink:#0a1e2b;
    --ink-2:#12303f;
    --paper:#f6f9fb;
    --paper-2:#ffffff;
    --line:#d5e2ea;
    --muted:#5a7180;
    --text:#173341;
    --signal:#00a7be;
    --signal-deep:#0b7d8f;
    --signal-glow:rgba(0,167,190,.14);
    --amber:#e8a13a;
    --pos:#12a878;
    --surface:#e7eff4;
    --radius:4px;
    --maxw:1180px;
    /* display/heading face — swap this one value to change every heading */
    --display:"Space Grotesk",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    background:var(--surface);
    color:var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    /* `clip`, never `hidden`. overflow-x:hidden forces overflow-y to compute to
       `auto`, which makes this a scroll container and renders a classic
       space-taking scrollbar on some mobile browsers — that was the pale bar
       down the right edge. `clip` creates no scroll container. It is only a
       safety net: real overflow is fixed at the source (see .stat). */
    overflow-x:clip;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  a{color:inherit;text-decoration:none}
  .mono{font-family:"IBM Plex Mono",monospace}

  .eyebrow{
    font-family:"IBM Plex Mono",monospace;
    font-size:12px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--signal-deep);font-weight:500;
  }
  h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;color:var(--ink);letter-spacing:-.015em}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(246,249,251,.82);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:68px}
  .brand{display:flex;align-items:baseline;gap:9px;font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
  .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--signal);display:inline-block;box-shadow:0 0 0 4px var(--signal-glow);align-self:center}
  /* NewLab brand mark (inline SVG) sits left of the wordmark */
  .brand-logo{height:26px;width:auto;display:block;align-self:center;flex-shrink:0}
  .brand span{color:var(--signal-deep)}
  /* seven items have to share the bar with the brand, phone and lang toggle, so
     the gap flexes rather than wrapping the nav onto a second line */
  .nav-links{display:flex;align-items:center;gap:clamp(15px,2vw,30px)}
  .nav-links a{font-size:14.5px;color:var(--text);font-weight:500;transition:color .2s;position:relative}
  .nav-links a:hover{color:var(--signal-deep)}
  /* current page marker — set by site.js from the URL, so it needs no per-page markup */
  .nav-links a.current{color:var(--signal-deep)}
  .nav-links a.current::after{
    content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
    background:var(--signal);border-radius:2px;
  }
  .nav-right{display:flex;align-items:center;gap:18px}
  .phone{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted);white-space:nowrap}
  .lang{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .lang button{
    font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
    padding:6px 10px;background:transparent;border:0;cursor:pointer;color:var(--muted);letter-spacing:.05em;
  }
  .lang button.active{background:var(--ink);color:#fff}
  .burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
  .burger span{width:22px;height:2px;background:var(--ink);display:block;transition:.25s}

  /* ---------- hero: dark stage + 3D helix particle field ---------- */
  .hero{
    position:relative;overflow:hidden;
    /* svh = small viewport height: stays put when the mobile URL bar hides/shows,
       so the hero (and the canvas inside it) stops resizing mid-scroll. */
    min-height:clamp(560px,80vh,740px);
    min-height:clamp(560px,80svh,740px);
    display:flex;align-items:center;
    padding:76px 0 64px;
    border-bottom:1px solid rgba(255,255,255,.08);
    /* this gradient is also the graceful fallback if canvas/JS never runs —
       the hero still reads as a deliberate dark stage with no particles */
    background:
      radial-gradient(1100px 620px at 68% 48%, #10394d 0%, rgba(16,57,77,0) 68%),
      radial-gradient(900px 700px at 92% 12%, rgba(0,167,190,.13) 0%, rgba(0,167,190,0) 70%),
      linear-gradient(160deg, #0a2233 0%, #071a28 45%, #04101a 100%);
  }
  #helix{
    position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none;
    /* Soft-fade top and bottom so the coil reads as continuing past the stage
       rather than being sliced flat by overflow:hidden. Left-side readability is
       handled by the .hero::after scrim, which sits ABOVE this layer — so one
       axis is enough here and we avoid mask-composite support issues entirely. */
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 84%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 84%,transparent 100%);
  }
  .hero::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    /* The readability scrim lives here, on the full-bleed hero, rather than on a
       box around the copy. A radial scrim sized to the text box never reaches
       transparency before its own top/bottom edges, which showed up as a visible
       rectangle behind the headline. A full-width linear gradient has no edges. */
    background:
      linear-gradient(90deg, rgba(4,16,26,.90) 0%, rgba(4,16,26,.66) 24%, rgba(4,16,26,.22) 44%, rgba(4,16,26,0) 60%),
      radial-gradient(120% 100% at 60% 50%, transparent 40%, rgba(2,10,17,.55) 100%);
  }
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;width:100%}
  .hero-copy{position:relative}
  /* hero copy inverted to light-on-dark */
  .hero .eyebrow{color:#4fd3e6}
  .hero h1{font-size:clamp(38px,5.4vw,62px);margin:18px 0 22px;color:#f2fafc;text-shadow:0 2px 30px rgba(2,12,20,.55)}
  .hero .lead{font-size:18.5px;color:#9fbecb;max-width:34ch;margin-bottom:34px}
  /* the hero's primary CTA is the main action on the whole site, so it leads:
     bigger, bolder, a stronger glow and a slow attention pulse */
  .hero .btn-primary{
    background:var(--signal);color:#03222a;font-size:16.5px;font-weight:700;
    padding:16px 32px;border-radius:6px;letter-spacing:.01em;
    /* even halo, not a drop shadow: x=0 and a near-zero y keep the glow centred
       around the button instead of pooling below it */
    box-shadow:0 2px 30px -4px rgba(0,167,190,.65);
    animation:ctaPulse 3.4s ease-in-out infinite;
  }
  .hero .btn-primary:hover{background:#28c0d4;transform:translateY(-2px);
    box-shadow:0 5px 40px -4px rgba(0,167,190,.95)}
  .hero .btn-primary .arrow{font-size:18px}
  @keyframes ctaPulse{
    0%,100%{box-shadow:0 2px 28px -6px rgba(0,167,190,.55)}
    50%{box-shadow:0 2px 40px -2px rgba(0,167,190,.82)}
  }
  /* keep the secondary action quieter so the hierarchy is obvious */
  .hero .btn-ghost{background:rgba(255,255,255,.04);color:#cfe1e9;border-color:rgba(148,197,214,.30)}
  .hero .btn-ghost:hover{border-color:var(--signal);color:#7fe3f2;background:rgba(0,167,190,.10)}
  .cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
  .btn{
    font-family:"IBM Plex Sans",sans-serif;font-size:15px;font-weight:600;
    padding:13px 24px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;
    transition:transform .15s,box-shadow .2s,background .2s;display:inline-flex;align-items:center;gap:9px;
  }
  .btn-primary{background:var(--ink);color:#fff}
  .btn-primary:hover{background:var(--ink-2);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--signal);color:var(--signal-deep)}
  .btn .arrow{transition:transform .2s}
  .btn:hover .arrow{transform:translateX(3px)}

  /* amplification plot */
  .plot{
    position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;
    padding:20px 20px 14px;box-shadow:0 24px 60px -32px rgba(10,30,43,.4);
  }
  .plot-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .plot-head .t{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
  .plot-head .live{display:flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--signal-deep)}
  .plot-head .live i{width:7px;height:7px;border-radius:50%;background:var(--signal);animation:pulse 1.6s infinite}
  @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--signal-glow)}50%{opacity:.5;box-shadow:0 0 0 5px transparent}}
  /* generic live indicator (reused by detect panel) */
  .live{display:flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--signal-deep)}
  .live i{width:7px;height:7px;border-radius:50%;background:var(--signal);animation:pulse 1.6s infinite}

  /* interactive "what we detect" panel */
  .detect{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;
    padding:18px 18px 15px;box-shadow:0 24px 60px -32px rgba(10,30,43,.4)}
  .detect-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
  .detect-head .t{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .detect-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
  .detect-tabs button{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;
    padding:6px 12px;border:1px solid var(--line);border-radius:20px;background:transparent;color:var(--muted);cursor:pointer;transition:.2s}
  .detect-tabs button:hover{border-color:var(--signal);color:var(--signal-deep)}
  .detect-tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
  .detect-tabs button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
  /* Fixed, capped column counts (2 → 3 → 4) so dense panels like HPV28 pack
     tight without a single min-width over-spreading long analyte names on wide
     screens. Long names wrap inside their own cell. */
  .detect-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;min-height:132px;align-content:start}
  @media(min-width:560px){ .detect-grid{grid-template-columns:repeat(3,1fr)} }
  @media(min-width:900px){ .detect-grid{grid-template-columns:repeat(4,1fr)} }
  /* pending panels: a quiet centred notice instead of an empty grid */
  .detect-pending{grid-column:1/-1;display:flex;align-items:center;justify-content:center;
    min-height:120px;padding:20px;text-align:center;color:var(--muted);
    font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.03em;
    border:1px dashed var(--line);border-radius:6px}
  .target{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:6px;min-width:0;
    background:var(--paper);opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease,border-color .35s,background .35s}
  .target.in{opacity:1;transform:none}
  .target.on{border-color:rgba(18,168,120,.4);background:rgba(18,168,120,.06)}
  .target .d{width:8px;height:8px;border-radius:50%;background:var(--line);flex-shrink:0;transition:background .3s,box-shadow .3s}
  .target.on .d{background:var(--pos);box-shadow:0 0 0 3px rgba(18,168,120,.16)}
  /* internal control: present in the panel but not a detected pathogen, so it
     reads in a neutral signal tone rather than the green "detected" state */
  .target.control{border-color:rgba(0,167,190,.35);background:rgba(0,167,190,.05)}
  .target.control .d{background:var(--signal-deep);box-shadow:0 0 0 3px rgba(0,167,190,.14)}
  .target.control .nm{color:var(--muted)}
  /* min-width:0 + break lets long unbreakable target names (e.g. Influenza
     A-H1pdm09) wrap instead of forcing the grid column past the viewport */
  .target .nm{font-size:12.5px;color:var(--text);font-weight:500;line-height:1.15;min-width:0;overflow-wrap:anywhere}
  /* dimmed = a target NOT covered by the hovered product. Comes after .on/.in so
     it wins when a chip is both revealed and dimmed. */
  .target.dim{opacity:.32;border-color:var(--line);background:var(--paper)}
  .target.dim .d{background:var(--line);box-shadow:none}

  /* product row — one pill per real Seegene assay; hover/tap lights its targets */
  .detect-products{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 14px}
  .detect-products[hidden]{display:none}
  .prodpill{
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;letter-spacing:.02em;
    padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper-2);
    color:var(--text);cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:7px;
  }
  .prodpill:hover{border-color:var(--signal);color:var(--signal-deep)}
  .prodpill.active{border-color:var(--signal-deep);background:var(--signal-glow);color:var(--signal-deep);font-weight:600}
  .prodpill:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
  /* pending = product listed, exact composition still being confirmed */
  .prodpill.pending{border-style:dashed;color:var(--muted)}
  .prodpill.pending::before{content:"○ ";color:var(--muted)}
  .prodpill.pending.active{border-style:solid}

  /* the details LINK — this is what navigates; its arrow signals that */
  .detect-cta{display:inline-flex;align-items:center;gap:7px;margin-top:14px;text-decoration:none;
    font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.02em;
    color:var(--signal-deep);border:1px solid var(--line);border-radius:8px;padding:9px 15px;
    transition:border-color .2s,background .2s}
  .detect-cta[hidden]{display:none}
  .detect-cta::after{content:"→";transition:transform .2s}
  .detect-cta:hover{border-color:var(--signal);background:var(--signal-glow)}
  .detect-cta:hover::after{transform:translateX(3px)}
  .detect-cta:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

  .detect-foot{display:flex;justify-content:space-between;align-items:center;margin-top:13px;
    font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
  .detect-foot .hl{color:var(--signal-deep);font-weight:600}
  /* the panel now stands alone in its own light section rather than in the hero */
  .detect-section .detect{max-width:700px;margin:0 auto}

  /* ---------- inner-page header band ----------
     Inner pages get the same dark stage as the hero but without the canvas: the
     helix stays a home-page signature, and repeating it on every page would both
     dilute it and put a second animation loop on the phone. */
  .pagehead{
    position:relative;overflow:hidden;
    padding:clamp(56px,9vw,86px) 0 clamp(46px,7vw,66px);
    border-bottom:1px solid rgba(255,255,255,.08);
    background:
      radial-gradient(900px 520px at 74% 42%, #10394d 0%, rgba(16,57,77,0) 68%),
      radial-gradient(760px 560px at 96% 6%, rgba(0,167,190,.13) 0%, rgba(0,167,190,0) 70%),
      linear-gradient(160deg, #0a2233 0%, #071a28 48%, #04101a 100%);
  }
  .pagehead::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 100% at 62% 50%, transparent 42%, rgba(2,10,17,.5) 100%);
  }
  .pagehead .wrap{position:relative;z-index:1}
  .pagehead .eyebrow{color:#4fd3e6}
  .pagehead h1{
    font-size:clamp(30px,4.4vw,48px);margin:16px 0 0;color:#f2fafc;
    letter-spacing:-.015em;max-width:20ch;
  }
  .pagehead p{color:#9fbecb;font-size:17px;margin-top:16px;max-width:56ch}

  /* breadcrumb-ish back link on inner pages */
  .crumb{
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:#7fa6b6;display:inline-flex;align-items:center;gap:8px;
    transition:color .2s;
  }
  .crumb:hover{color:var(--signal)}

  /* ---------- trust strip ---------- */
  .strip{border-bottom:1px solid var(--line);background:transparent}
  .strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  /* min-width:0 is load-bearing: a grid `1fr` track is minmax(auto,1fr), and its
     auto minimum is min-content. Long unbroken words like "multipleks" at 34px
     push the track wider than its share and blow the whole grid past the
     viewport. min-width:0 lets the track shrink; overflow-wrap lets the word
     break rather than overflow the cell. */
  .stat{padding:30px 26px;border-right:1px solid var(--line);min-width:0}
  .stat:last-child{border-right:0}
  .stat .n{font-family:var(--display);font-size:34px;color:var(--ink);line-height:1;font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere}
  .stat .n small{font-size:18px;color:var(--signal-deep)}
  .stat .l{font-size:13.5px;color:var(--muted);margin-top:8px}

  /* ---------- sections ---------- */
  section.block{padding:88px 0}
  .sec-head{max-width:620px;margin-bottom:46px}
  .sec-head h2{font-size:clamp(28px,3.6vw,40px);margin:14px 0 16px}
  .sec-head p{color:var(--muted);font-size:17px}

  /* offer */
  .offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .card{background:var(--paper-2);padding:30px 28px;transition:background .25s;position:relative}
  .card:hover{background:#fbfdfe}
  .card .idx{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--signal-deep);letter-spacing:.1em}
  .card h3{font-size:21px;margin:16px 0 10px}
  .card p{font-size:14.5px;color:var(--muted)}
  .card .tag{margin-top:16px;display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:4px 11px}

  .highlight{
    margin-top:26px;background:var(--ink);border-radius:8px;padding:44px;color:#dfeef2;
    display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden;
  }
  .highlight::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;
    background:radial-gradient(circle,var(--signal-glow),transparent 70%);pointer-events:none}
  .highlight .eyebrow{color:var(--signal)}
  .highlight h3{color:#fff;font-size:28px;margin:14px 0 14px}
  .highlight p{color:#a9c6d1;font-size:15.5px}
  .highlight ul{list-style:none;display:flex;flex-direction:column;gap:12px}
  .highlight li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#cfe4ea}
  .highlight li b{color:#fff;font-weight:600}
  .highlight li .mk{color:var(--signal);font-family:"IBM Plex Mono",monospace;flex-shrink:0}

  /* seegene / partner */
  .partner{background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  /* This element is a <div class="wrap block partner-grid">, and the padding
     rule is `section.block` — which a div never matches. So the block had NO
     vertical padding at all and the last paragraph ran straight into the stats
     strip below. That was the real source of the cramping; the padding is set
     here explicitly rather than relying on a selector that cannot apply. */
  .partner-grid{
    display:grid;grid-template-columns:.8fr 1.2fr;
    gap:clamp(40px,5.5vw,76px);
    align-items:center;                 /* logo centred against the prose */
    padding:clamp(58px,7vw,92px) 0;
  }
  .partner-badge{
    border:1px solid var(--line);border-radius:8px;padding:40px;text-align:center;background:var(--paper);
  }
  .partner-badge .mono{font-size:12px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
  .partner-badge .big{font-family:var(--display);font-size:42px;color:var(--ink);font-weight:600;margin:12px 0 6px;letter-spacing:-.03em}
  .partner-badge .big span{color:var(--signal-deep)}
  .partner-badge .sub{font-size:13px;color:var(--muted)}
  /* Seegene's own wordmark. Shown because NewLab is their exclusive Polish
     distributor; it is a third-party trademark, so it is never recoloured or
     redrawn — only scaled. Black artwork, so keep it on light backgrounds. */
  .partner-logo{display:block;width:100%;max-width:252px;height:auto;margin:14px auto 16px}

  /* named technology cards */
  .tech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .tech{background:var(--paper-2);padding:26px 26px 24px}
  .tech .tm{font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
  .tech .tm sup{font-size:11px;color:var(--signal-deep);vertical-align:super;margin-left:1px}
  .tech p{font-size:14.5px;color:var(--muted);margin-top:9px}

  /* technology deep-dive rows — reads as a spec sheet: name pinned left,
     substance right, hairline between entries */
  .techdeep{display:grid;grid-template-columns:.4fr 1.6fr;gap:clamp(26px,4vw,54px);
    padding:clamp(30px,4vw,42px) 0;border-top:1px solid var(--line)}
  .techdeep:first-of-type{border-top:0;padding-top:0}
  .techdeep .tname{font-family:var(--display);font-size:clamp(24px,2.6vw,30px);font-weight:600;
    color:var(--ink);letter-spacing:-.02em;line-height:1.1}
  .techdeep .tname sup{font-size:12px;color:var(--signal-deep);vertical-align:super;margin-left:1px}
  .techdeep .tfull{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--signal-deep);margin-top:10px;line-height:1.5}
  .techdeep .tbody p{font-size:15.5px;color:var(--muted);line-height:1.75;max-width:62ch;margin-bottom:14px}
  .techdeep .tbody p:last-of-type{margin-bottom:0}
  .tpoints{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:18px}
  .tpoints li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--text)}
  .tpoints .mk{color:var(--signal-deep);font-family:"IBM Plex Mono",monospace;flex-shrink:0}

  /* ---- panel detail page (panel.html) ---- */
  .panel-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:26px}
  .panel-specs .spec{background:var(--paper-2);padding:22px 24px}
  .panel-specs .k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin-bottom:9px}
  .panel-specs .v{font-size:15.5px;color:var(--ink);font-weight:500;line-height:1.45}
  .fmt-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .fmt{border:1px solid var(--line);border-radius:8px;background:var(--paper-2);padding:20px 22px;
    display:flex;flex-direction:column;gap:6px}
  .fmt-r{font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
  .fmt-r span{font-size:13px;color:var(--muted);font-weight:400;font-family:"IBM Plex Sans",sans-serif}
  .fmt-c{font-size:13px;color:var(--signal-deep)}

  /* certificate chips */
  .certs{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
  .cert{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--signal-deep);
    border:1px solid var(--line);background:var(--paper-2);border-radius:20px;padding:7px 14px}
  /* provenance note — keeps third-party figures clearly attributed */
  .srcnote{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.55}
  /* Three equal dense paragraphs read as a wall. The heading gets room, the
     first paragraph carries as a lead, and the measure is capped so lines stay
     comfortable instead of running the full column width. */
  .partner-body h2{font-size:clamp(25px,3vw,33px);margin-bottom:28px;max-width:24ch;line-height:1.16}
  .partner-body p{color:var(--muted);font-size:16px;line-height:1.8;margin-bottom:24px;max-width:58ch}
  .partner-body p:first-of-type{font-size:17.5px;line-height:1.72;color:var(--text)}
  .partner-body p:last-child{margin-bottom:0}

  /* values */
  .values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
  .value{display:flex;gap:18px;padding:26px;border:1px solid var(--line);border-radius:8px;background:var(--paper-2)}
  .value .vi{flex-shrink:0;width:42px;height:42px;border-radius:8px;background:var(--signal-glow);
    display:flex;align-items:center;justify-content:center;color:var(--signal-deep)}
  .value h3{font-size:19px;margin-bottom:7px}
  .value p{font-size:14.5px;color:var(--muted)}

  /* contact */
  .contact{background:var(--ink);color:#dfeef2;position:relative;overflow:hidden}
  .contact h2{color:#fff}
  .contact .sec-head p{color:#a9c6d1}
  .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px}
  .contact-info{display:flex;flex-direction:column;gap:26px}
  .ci{border-top:1px solid rgba(255,255,255,.12);padding-top:18px}
  .ci .k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--signal);margin-bottom:6px}
  .ci .v{font-size:16px;color:#eaf4f7}
  .ci a.v:hover{color:var(--signal)}
  form{background:var(--paper-2);border-radius:8px;padding:32px;color:var(--text)}
  form label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink)}
  form .field{margin-bottom:18px}
  form input,form textarea{
    width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px;
    font-family:inherit;font-size:14.5px;color:var(--text);background:var(--paper);
  }
  form input:focus,form textarea:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:transparent}
  form textarea{resize:vertical;min-height:96px}
  form .btn-primary{width:100%;justify-content:center;background:var(--signal-deep)}
  form .btn-primary:hover{background:var(--signal)}
  .form-note{font-size:11.5px;color:var(--muted);margin-top:12px;line-height:1.5}

  /* footer */
  footer{background:var(--ink-2);color:#8fb0bd;padding:38px 0;border-top:1px solid rgba(255,255,255,.08)}
  .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:13px}
  .foot .brand{color:#fff;font-size:18px}
  .foot .brand .dot{box-shadow:none}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---- site surface: soft signal glows, fixed behind everything ----
     (the square grid texture was removed — it read as cheap) */
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(55% 50% at 12% 8%, rgba(0,167,190,.16), transparent 60%),
      radial-gradient(50% 45% at 90% 6%, rgba(0,167,190,.09), transparent 60%),
      radial-gradient(48% 55% at 93% 92%, rgba(0,167,190,.13), transparent 62%);
  }
  /* let the surface show through light sections; white cards float above it */
  .strip,.partner,.flow{background:transparent}
  .contact .wrap{position:relative;z-index:1}
  .hero .wrap{position:relative;z-index:3;width:100%}

  /* corner glows carry across the dark slabs too */
  .contact::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(45% 55% at 12% 16%, rgba(0,167,190,.20), transparent 65%),
      radial-gradient(42% 50% at 90% 84%, rgba(0,167,190,.13), transparent 65%);
  }
  .highlight>*{position:relative;z-index:1}

  /* diagnostic-path — builds on scroll */
  .flow{position:relative;background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .flow-line{position:absolute;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--signal),var(--signal-deep));
    transition:width 1.6s cubic-bezier(.4,0,.2,1)}
  .flow.in .flow-line{width:100%}
  .flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
  .flow-step{position:relative;opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .flow.in .flow-step{opacity:1;transform:none}
  .flow.in .flow-step:nth-child(1){transition-delay:.15s}
  .flow.in .flow-step:nth-child(2){transition-delay:.45s}
  .flow.in .flow-step:nth-child(3){transition-delay:.75s}
  .flow.in .flow-step:nth-child(4){transition-delay:1.05s}
  .flow-node{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--paper);
    display:flex;align-items:center;justify-content:center;color:var(--signal-deep);margin-bottom:16px;transition:border-color .4s,background .4s}
  .flow.in .flow-step:nth-child(1) .flow-node{transition-delay:.35s}
  .flow.in .flow-step:nth-child(2) .flow-node{transition-delay:.65s}
  .flow.in .flow-step:nth-child(3) .flow-node{transition-delay:.95s}
  .flow.in .flow-step:nth-child(4) .flow-node{transition-delay:1.25s}
  .flow.in .flow-node{border-color:var(--signal);background:var(--signal-glow)}
  .flow-num{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--signal-deep);letter-spacing:.12em}
  .flow-step h3{font-size:18px;margin:9px 0 8px}
  .flow-step p{font-size:14px;color:var(--muted)}

  /* ---------- responsive ---------- */
  @media(max-width:900px){
    .hero-grid,.partner-grid,.contact-grid,.highlight{grid-template-columns:1fr}
    .strip-grid{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(2){border-right:0}
    .stat{border-bottom:1px solid var(--line)}
    .offer-grid{grid-template-columns:repeat(2,1fr)}
    .values-grid{grid-template-columns:1fr}
    .tech-grid{grid-template-columns:1fr}
    .techdeep{grid-template-columns:1fr;gap:16px}
    .panel-specs{grid-template-columns:1fr}
    .fmt-list{grid-template-columns:1fr}
    .hero .lead{max-width:none}
    /* shorter hero so the trust strip peeks above the fold on a phone */
    .hero{min-height:clamp(440px,70vh,600px);min-height:clamp(440px,70svh,600px)}
    /* Single column: the helix sits behind the copy, so it stays subordinate —
       but the opaque band has to span the coil's ACTUAL painted extent, which
       at phone sizes runs roughly 18%-94% of the canvas height. The previous
       band peaked at 58% and was nearly transparent by the coil's bottom, so
       the lower third dissolved and what remained read as a cropped fragment.
       The coil is now solved to overrun the stage symmetrically at both ends on
       every viewport, so the base rule's fade serves both layouts and only the
       strength differs here — nothing left to tune per breakpoint. */
    #helix{opacity:.5}
    .flow-steps{grid-template-columns:repeat(2,1fr);gap:22px}
    .flow-line{display:none}
  }
  /* the phone is the first thing to go when the bar gets tight — it is repeated
     in the footer and on the contact page, so nothing is lost */
  @media(max-width:1150px){ .phone{display:none} }

  /* Hand over to the burger at the same 900px the layout already breaks at.
     With seven nav items the old 680px hand-over left the bar wrapping onto two
     lines through the whole tablet range. */
  @media(max-width:900px){
    .nav-links{display:none}
    .burger{display:flex}
    .nav-links.open{
      display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;
      background:var(--paper-2);border-bottom:1px solid var(--line);padding:18px 28px;gap:18px;
      box-shadow:0 18px 40px -28px rgba(10,30,43,.5);
    }
    .nav-links.open a.current::after{display:none}
  }

  @media(max-width:680px){
    /* .nav-links.open is defined in the 900px block above and inherited here */
    .offer-grid{grid-template-columns:1fr}
    .strip-grid{grid-template-columns:1fr 1fr}
    /* two stats per row on a phone: shrink the numeral and tighten padding so
       the longest labels actually fit their track */
    .stat{padding:22px 16px}
    .stat .n{font-size:clamp(20px,6.2vw,26px)}
    .stat .l{font-size:12.5px}
    .flow-steps{grid-template-columns:1fr}
    .foot{flex-direction:column;text-align:center}
    section.block{padding:60px 0}
    .highlight{padding:30px}
    .partner-badge{padding:30px}
  }
  /* Smallest phones (iPhone SE and similar at 320px): the brand wordmark plus
     the language toggle and burger were wider than the bar, pushing the whole
     page sideways. Scale the header down rather than letting it overflow. */
  @media(max-width:380px){
    /* longhand, not `padding:0 18px` — the shorthand also resets the vertical
       padding, and .partner-grid is a .wrap, so the shorthand silently wiped
       its top/bottom padding and let the prose overlap the stats strip. */
    .wrap{padding-left:18px;padding-right:18px}
    .brand{font-size:17px;gap:7px}
    .brand-logo{height:22px}
    .nav-right{gap:12px}
    .lang button{padding:5px 8px}
  }

  @media(prefers-reduced-motion:reduce){
    .plot-head .live i,.live i{animation:none}
    .hero::before,.contact::before{animation:none}
    .hero .btn-primary{animation:none}
    .target{opacity:1;transform:none}
    .flow-step{opacity:1;transform:none}
    .flow-line{transition:none}
    .reveal{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
  }