@font-face { font-family: 'Funnel Display'; src: url('../fonts/FunnelDisplay-Light.otf') format('opentype');     font-weight: 300; font-display: swap; }
  @font-face { font-family: 'Funnel Display'; src: url('../fonts/FunnelDisplay-Regular.otf') format('opentype');   font-weight: 400; font-display: swap; }
  @font-face { font-family: 'Funnel Display'; src: url('../fonts/FunnelDisplay-Medium.otf') format('opentype');    font-weight: 500; font-display: swap; }
  @font-face { font-family: 'Funnel Display'; src: url('../fonts/FunnelDisplay-SemiBold.otf') format('opentype');  font-weight: 600; font-display: swap; }
  @font-face { font-family: 'Funnel Display'; src: url('../fonts/FunnelDisplay-Bold.otf') format('opentype');      font-weight: 700; font-display: swap; }
  @font-face { font-family: 'Funnel Display'; src: url('../fonts/FunnelDisplay-ExtraBold.otf') format('opentype'); font-weight: 800; font-display: swap; }

  h1, h2, h3, h4 {
    font-family: 'Funnel Display', 'Geist', -apple-system, system-ui, sans-serif;
  }
  :root {
    /* Light clinical palette */
    --bg:        #F9F9F9;
    --bg-soft:   #EFEFEF;
    --bg-paper:  #FCFCFC;
    --ink:       #0E0E10;
    --ink-2:     #1C1C1F;
    --muted:     #6A6A6E;
    --muted-2:   #989898;
    --line:      #E5E5E5;
    --line-2:    #D5D5D5;

    /* Imec labs blue */
    --accent:    #3F98BD;
    --accent-ink:#FFFFFF;
    --accent-soft: rgba(63,152,189,0.16);
    --accent-glow: rgba(63,152,189,0.22);

    /* Benchmark banner gradient stops — lighter in light mode (less saturated against the warm stone bg) */
    --banner-stop-1: rgba(63,152,189,0.14);
    --banner-stop-2: rgba(63,152,189,0.08);
    --banner-stop-3: rgba(63,152,189,0.05);
    --banner-stop-4: rgba(63,152,189,0.10);

    --chip:      #0E0E0F;
    --hl:        #E6FF3D;
    --noise-rgb: 26,26,26;
    --noise-a:   0.05;

    /* Glass tuned for warm stone bg */
    --glass-tint:        rgba(255,253,250,0.55);
    --glass-tint-strong: rgba(255,253,250,0.70);
    --glass-border:      rgba(255,255,255,0.85);
    --glass-inner:       rgba(255,255,255,0.7);
    --glass-shadow:
      0 1px 0 rgba(0,0,0,0.02),
      0 18px 32px -22px rgba(60,50,30,0.22),
      0 40px 60px -30px rgba(60,50,30,0.10);

    --dot-rgb:   10,10,10;
  }

  [data-theme="dark"] {
    --bg:        #0B0B0D;
    --bg-soft:   #131316;
    --bg-paper:  #161618;
    --ink:       #F5F4EF;
    --ink-2:     #E8E7E1;
    --muted:     #8E8A82;
    --muted-2:   #6A675F;
    --line:      #23232A;
    --line-2:    #2E2E36;
    /* Banner gradient — keep dark mode's punchy glow (user said it's perfect) */
    --banner-stop-1: rgba(63,152,189,0.30);
    --banner-stop-2: rgba(63,152,189,0.18);
    --banner-stop-3: rgba(63,152,189,0.12);
    --banner-stop-4: var(--accent-soft);
    --hl:        #E6FF3D;
    --noise-rgb: 255,255,255;
    --noise-a:   0.05;
    --glass-tint:        rgba(255,255,255,0.06);
    --glass-tint-strong: rgba(255,255,255,0.09);
    --glass-border:      rgba(255,255,255,0.14);
    --glass-inner:       rgba(255,255,255,0.10);
    --glass-shadow:
      0 1px 0 rgba(255,255,255,0.04),
      0 18px 32px -22px rgba(0,0,0,0.55),
      0 40px 60px -30px rgba(0,0,0,0.45);
    --dot-rgb:   255,255,255;
  }
  [data-theme="dark"] body { background-image: none; }
  [data-theme="dark"] body::before {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background-color: var(--bg);
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.10  0 0 0 0 0.10  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    color: var(--ink);
    font-family: 'Geist', -apple-system, system-ui, sans-serif;
    font-feature-settings: 'ss01', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  .mono { font-family: 'Geist Mono', ui-monospace, monospace; font-feature-settings: 'zero'; }
  .serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; }
  ::selection { background: var(--accent); color: white; }

  /* Particle canvas sits behind everything but above the body noise */
  #particles {
    position: fixed; inset: 0; width:100%; height:100%;
    pointer-events: none; z-index: 1;
  }
  #root { position: relative; z-index: 2; }

  .glass {
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-inner), var(--glass-shadow);
  }
  .glass-strong {
    background: var(--glass-tint-strong);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-inner), var(--glass-shadow);
    position: relative;
    overflow: hidden;
    transition:
      transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 320ms ease,
      border-color 320ms ease;
  }
  /* Hover state — subtle lift + reveal accent corner glow.
     Featured cards already have their own static <div> glow, so on those the hover
     glow stacks slightly above the static one (acts as a "boost" on hover, never jarring). */
  .glass-strong::after {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 360ms ease;
    z-index: 0;
  }
  .glass-strong:hover {
    transform: translateY(-2px);
    border-color: rgba(63, 152, 189, 0.28);
    box-shadow:
      inset 0 1px 0 var(--glass-inner),
      0 1px 0 rgba(0,0,0,0.02),
      0 26px 44px -22px rgba(60,50,30,0.32),
      0 60px 80px -30px rgba(60,50,30,0.14);
  }
  .glass-strong:hover::after {
    opacity: 1;
  }

  /* dot grid background, very subtle */
  .dotgrid {
    background-image: radial-gradient(circle, rgba(var(--dot-rgb),0.10) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
  }

  /* card hover glow — subtle accent blob in the upper-right corner on hover.
     For cards already showing a static glow (accent variants), this stacks
     on top of the static one and intensifies it. */
  .card-hover { position: relative; }
  .card-hover::after {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 380ms ease;
  }
  .card-hover:hover::after { opacity: 0.75; }

  /* shared keyframes used across components */
  @keyframes pulse-accent {
    0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); }
    50%      { box-shadow: 0 0 0 8px rgba(63,152,189,0.05); }
  }

  /* Pulsing halo around the lead data point on the throughput line chart.
     Scales out and fades, then resets — suggests "live observation". */
  @keyframes chart-endpoint-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(2.6); opacity: 0;    }
    100% { transform: scale(2.6); opacity: 0;    }
  }

  /* Activity bars in the LIVE pill — three tiny lines that flicker, like an
     audio meter. Each bar has a different delay to stagger. */
  @keyframes activity-flicker {
    0%, 100% { transform: scaleY(0.3); }
    50%      { transform: scaleY(1);   }
  }

  /* Terminal-style blinking caret used in the chart glass preview. */
  @keyframes caret-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  /* Subtle horizontal scanline that sweeps across the frosted chart preview —
     reads as "live process running", not "decorative animation". */
  @keyframes scanline-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
  }

  /* Logo ticker — two infinite marquees. The track is rendered with each list
     duplicated and animates translateX from 0 to -50% (or the reverse) for a
     seamless loop. Edge fade is applied via mask-image on the parent. */
  @keyframes ticker-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
  @keyframes ticker-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  .ticker-track {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
  }
  .ticker-track[data-dir="left"]  { animation-name: ticker-left; }
  .ticker-track[data-dir="right"] { animation-name: ticker-right; }
  .ticker-mask {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 22%, black 78%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 22%, black 78%, transparent 100%);
  }

  /* Pixel-dissolve edge — wrapper is anchored on the top edge of the charcoal
     block. Squares are positioned absolutely inside, with top values that can
     be negative (above the edge) or positive (below). zIndex 1 puts the
     squares above the charcoal but below the rings overlay (which is rendered
     later in source). */
  .edge-dissolve {
    position: absolute;
    left: 0; right: 0;
    bottom: 720px;   /* matches .bottom-charcoal height */
    height: 0;
    pointer-events: none;
    z-index: 1;
  }
  /* ============================================================
     RESPONSIVE — collapses multi-column grids and tightens padding
     on narrow viewports. Uses !important to override inline styles. */

  /* Tablet — pull section padding in a bit */
  @media (max-width: 900px) {
    section[data-screen-label] {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }
  }

  /* Mobile — full layout collapse */
  @media (max-width: 768px) {
    /* Major grids stack to one column */
    .responsive-grid {
      grid-template-columns: 1fr !important;
      gap: 28px !important;
    }
    /* Sub-grids that should stay 2-col at tablet width (small inner tiles) */
    .responsive-grid.keep-2col {
      grid-template-columns: 1fr 1fr !important;
      gap: 14px !important;
    }

    /* Sections: tighter side padding, less vertical space */
    section[data-screen-label] {
      padding-left: 20px !important;
      padding-right: 20px !important;
      padding-top: 48px !important;
    }
    /* Hero has its own top padding from the rings layout — leave it modest */
    section[data-screen-label="Hero"] {
      padding-top: 24px !important;
    }
    /* RotatingCallout: inline padding is 120px/80px — halve it on mobile to avoid
       a 200px dead zone (55% of viewport) around a single italic sentence. */
    .rotating-callout { padding: 48px 20px 40px !important; }

    /* Two ecosystems is a thin ticker band — sits right under Hero, needs minimal top room */
    section[data-screen-label="Two ecosystems"] {
      padding-top: 16px !important;
    }
    /* North star: tighter top (Two ecosystems above is a small band); tighter bottom
       before the Benchmark section. */
    section[data-screen-label="North star"] {
      padding-top: 24px !important;
      padding-bottom: 32px !important;
    }
    /* Thin centered accent-blue rule after the Hero CTA — brand mark, not a grey line */
    section[data-screen-label="Hero"]::after {
      content: '';
      display: block;
      width: 140px;
      height: 1px;
      background: var(--accent);
      margin: 8px auto 0;
    }
    /* Hero rings: hide completely on mobile — every variant (video, img, poster,
       Safari MP4 fallback) is suppressed by unmounting in React; this CSS is a
       belt-and-suspenders guard for any pre-hydration or resize edge case. */
    .hero-rings-col { display: none !important; }

    /* Charcoal + rings: stacked layout makes the CTA card much taller, so the
       charcoal needs to extend higher to start in the middle of the card. */
    .bottom-charcoal { height: 1900px !important; }
    .edge-dissolve   { bottom: 1900px !important; }
    .bottom-rings-overlay {
      height: 2050px !important;
      background-size: 320% auto !important;
      background-position: right -80px top 60px !important;
    }

    /* Header: hide nav links (page is one-pager — scroll works), tighten layout. */
    header > div {
      padding-left: 16px !important;
      padding-right: 16px !important;
      gap: 12px !important;
    }
    header nav { display: none !important; }

    /* Blue benchmark band: tighter padding, rounded corners so it reads as a card
       not a full-bleed band. Bottom padding matches sides (20px) for symmetric frame. */
    .bench-band {
      padding: 56px 20px 20px !important;
      border-radius: 20px !important;
    }

    /* CTA section card: tighter inner padding */
    #contact > div { padding: 48px 24px 40px !important; }
    /* The Name + Organization fields use an inline grid-template-columns: 1fr 1fr
       that doesn't get the .responsive-grid stacking treatment. Force single column
       so each field gets full width and proper tap targets. */
    #contact form > div[style*="grid-template-columns"] {
      grid-template-columns: 1fr !important;
    }

    /* Benchmark tabs on mobile: vertical card stack. The original tab-strip reads as
       a header on mobile — users miss that there are 3 selectable views. Card treatment
       with chevron + accent-blue active state makes the affordance obvious. */
    .bench-tabs {
      flex-direction: column !important;
      align-items: stretch !important;
      flex-wrap: nowrap !important;
      gap: 6px !important;
      border-bottom: none !important;
      margin-bottom: 20px !important;
    }
    .bench-tabs > button {
      position: relative !important;
      padding: 14px 44px 14px 16px !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 4px !important;
      border: 1px solid var(--line) !important;
      border-top: 1px solid var(--line) !important;
      border-radius: 10px !important;
      background: rgba(0,0,0,0.02) !important;
      text-align: left !important;
    }
    /* Chevron — signals "tappable, switches view" */
    .bench-tabs > button::after {
      content: '›';
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      line-height: 1;
      font-weight: 300;
      color: var(--muted);
    }
    /* Active state — identified by the absolute-positioned indicator span React renders */
    .bench-tabs > button:has(span[style*="position: absolute"]) {
      border-color: var(--accent) !important;
      background: var(--accent-soft) !important;
    }
    .bench-tabs > button:has(span[style*="position: absolute"])::after {
      color: var(--accent);
    }
    /* Hide the underline indicator — border accent replaces it */
    .bench-tabs > button > span[style*="position: absolute"] {
      display: none !important;
    }
    /* Hide the legend — chart bars are color-coded anyway */
    .bench-tabs > span,
    .bench-tabs > div:last-child { display: none !important; }

    /* Headlines clamp() floors are a bit ambitious for small screens — pin them down */
    h1, h2 { letter-spacing: -0.02em !important; }

    /* Hero headline: reduce min */
    section[data-screen-label="Hero"] h1 {
      font-size: clamp(34px, 9.5vw, 68px) !important;
    }
    /* CTA headline */
    #contact h2 {
      font-size: clamp(36px, 8.8vw, 84px) !important;
    }

    /* Partners ("Three audiences") cards: add breathing room below on mobile so
       there is clear separation before the contact form section begins. */
    #partners { padding-bottom: 4rem !important; }

    /* Footer: tighten dead space between contact card and footer logo. Inline
       styles set paddingTop 56px (outer) and 36px (inner) — override both to 0/24px. */
    footer {
      padding-top: 24px !important;
    }
    footer > div {
      padding-top: 0 !important;
    }
    /* Left-align copyright + legal links block (inline desktop style right-aligns it).
       Let legal links wrap on narrow viewports. */
    footer > div > div:last-child {
      align-items: flex-start !important;
      width: 100% !important;
    }
    footer > div > div:last-child > div {
      flex-wrap: wrap !important;
      gap: 8px 16px !important;
    }

    /* Bottom wrapper: absolutely-positioned decorative backgrounds (charcoal
       block, pixel-dissolve, rings overlay) can be taller than their container
       on mobile and bleed upward into the cards section. Clipping them here
       keeps the decorative layer inside its own section. */
    .bottom-wrapper { overflow: hidden; }
  }

  /* Very narrow viewports — collapse even the kept 2-col grids */
  @media (max-width: 480px) {
    .responsive-grid.keep-2col {
      grid-template-columns: 1fr !important;
    }
    section[data-screen-label] {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
    .bench-band { padding: 48px 16px 56px !important; }
  }