/* =========================
   THEME TOKENS
   ========================= */
   :root{
    --bg:#0b0b0b;
    --panel:#101010;
    --ink:#f5f5f5;
    --muted:#bdbdbd;
    --line:#222;
  
    /* subtle textures */
    --dots:url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'>\
      <circle cx='1' cy='1' r='1' fill='white' fill-opacity='.06'/>\
    </svg>");
    --lines:url(\"data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'>\
      <defs><pattern id='p' width='64' height='64' patternUnits='userSpaceOnUse' patternTransform='rotate(35)'>\
        <path d='M0 0 L0 64' stroke='white' stroke-opacity='.04' stroke-width='1'/>\
      </pattern></defs>\
      <rect width='64' height='64' fill='url(#p)'/>\
    </svg>\");
    --rings:url(\"data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'>\
      <g fill='none' stroke='white' stroke-opacity='.08'>\
        <circle cx='480' cy='120' r='90'/><circle cx='480' cy='120' r='150'/>\
        <circle cx='480' cy='120' r='210'/><circle cx='480' cy='120' r='270'/>\
      </g>\
    </svg>\");
  }
  
  /* =========================
     BASE
     ========================= */
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
    background:
      radial-gradient(90rem 25rem at 70% -10%, rgba(255,255,255,.06), rgba(0,0,0,0)),
      var(--lines),
      var(--dots),
      var(--bg);
    background-color:var(--bg);
    background-blend-mode:screen,normal,normal,normal;
    color:var(--ink);
    line-height:1.55;
  }
  
  /* Headings & UI type */
  h1,h2,.brand,.nav__right a,.metric__num{
    font-family:'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  
  /* Containers & sections */
  .container{ max-width:1100px; margin:0 auto; padding:0 20px; }
  .section{ position:relative; z-index:1; padding:80px 20px; max-width:1200px; margin:0 auto; border-bottom:1px solid var(--line); }
  .section:first-of-type{ border-top:1px solid var(--line); }
  .section__title{ font-size:32px; font-weight:700; margin:0 0 24px; letter-spacing:.2px; }
  
  /* =========================
     NAV & BUTTONS
     ========================= */
  .nav{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px; border-bottom:1px solid var(--line);
    backdrop-filter:saturate(120%) blur(6px); background:rgba(11,11,11,.7);
  }
  .brand{ color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.6px; }
  .nav__right a{ color:var(--ink); text-decoration:none; margin-left:20px; font-weight:600; font-size:14px; }
  .nav__right a:hover{ color:#fff; }
  .nav__right a[aria-current="page"]{ color:#fff; border-bottom:1px solid var(--line); }
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:46px; padding:0 18px; border-radius:999px; text-decoration:none;
    font-weight:600; letter-spacing:.2px; transition:all .2s ease; border:1px solid var(--ink);
  }
  .btn--solid{ background:var(--ink); color:#000; border-color:var(--ink); }
  .btn--solid:hover{ transform:translateY(-1px); filter:brightness(.9); }
  .btn--outline{ color:var(--ink); background:transparent; border-color:var(--line); }
  .btn--ghost{ color:var(--ink); background:transparent; }
  .btn--ghost:hover, .btn--outline:hover{ border-color:var(--ink); transform:translateY(-1px); }
  
  /* =========================
     HERO
     ========================= */
  .hero{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.1fr .9fr; gap:40px;
    align-items:center; padding:90px 20px 40px; max-width:1200px; margin:0 auto;
    border-bottom:1px solid var(--line);
  }
  .hero::after{
    content:""; position:absolute; right:-140px; top:-140px; width:520px; height:520px;
    background-image:var(--rings); background-repeat:no-repeat; background-size:contain;
    pointer-events:none; opacity:.9;
  }
  .hero__copy h1{ font-size:56px; line-height:1.02; margin:0 0 16px; letter-spacing:.2px; }
  .hero__copy p{ color:var(--muted); margin:0 0 22px; max-width:560px; }
  .hero__ctas .btn{ margin-right:10px; }
  .hero__globe{ position:relative; min-height:440px; border-radius:16px; overflow:hidden; }
  .hero__globe::before{
    content:""; position:absolute; inset:-20%; border-radius:inherit; z-index:0;
    background:
      radial-gradient(320px 320px at 60% 40%, rgba(255,255,255,.10), rgba(0,0,0,0));
  }
  #globeCanvas{ width:100%; height:100%; display:block; position:relative; z-index:1; }
  
  /* =========================
     WHAT WE DO (2×2 + EXPAND)
     ========================= */
  .section--grid .cards{ display:grid; gap:16px; }
  #what-we-do .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .card{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:20px; transition:transform .15s ease, border-color .15s ease;
    backdrop-filter:saturate(120%) blur(2px);
  }
  .card:hover{ transform:translateY(-3px); border-color:#2e2e2e; }
  .card__icon{ width:40px; height:40px; display:grid; place-items:center; margin-bottom:10px; }
  .card h3{ margin:6px 0 6px; font-size:18px; font-weight:700; }
  .card p{ color:var(--muted); margin:0; }
  
  /* Expandable details */
  .whatwedo .whatwedo__card{ display:flex; flex-direction:column; gap:12px; }
  .whatwedo__gist{ color:var(--muted); margin:0; }
  .whatwedo__details{
    border:1px solid var(--line); border-radius:12px; padding:14px;
    background:rgba(255,255,255,0.02); animation:wwdFade .18s ease;
  }
  .whatwedo__details ul{ margin:0; padding-left:18px; }
  .whatwedo__details li{ color:var(--muted); margin:6px 0; }
  .whatwedo__toggle{
    margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
    background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:999px;
    height:38px; padding:0 14px; cursor:pointer; font-weight:600;
    transition:transform .15s ease, border-color .15s ease, background-color .15s ease;
  }
  .whatwedo__toggle:hover{ border-color:#2e2e2e; transform:translateY(-1px); }
  @keyframes wwdFade{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:translateY(0);} }
  
  /* =========================
     BENEFITS (METRICS)
     ========================= */
  .section--metrics{ background-image:var(--dots); background-size:32px 32px; background-attachment:fixed; }
  .metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .metric{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  }
  .metric__num{ font-size:28px; font-weight:700; margin-bottom:6px; }
  .metric__label{ color:var(--muted); font-size:14px; }
  
  /* =========================
     HOW IT WORKS
     ========================= */
  .section--flow{
    background: radial-gradient(60rem 20rem at -10% 0%, rgba(255,255,255,.05), rgba(0,0,0,0)), var(--lines);
    background-blend-mode:screen;
  }
  .section--flow .flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0; margin:0; list-style:none; }
  .section--flow .flow li{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; }
  .section--flow .flow strong{ display:block; font-size:18px; margin-bottom:6px; }
  /* Icons */
  .flow__icon{
    width:40px; height:40px; border:1px solid var(--line); border-radius:8px;
    display:flex; align-items:center; justify-content:center; margin-bottom:10px; background:var(--panel);
  }
  
  /* =========================
     CHIPS & CTA
     ========================= */
  .section--scroller{ background-image:var(--dots); background-size:32px 32px; }
  .section--scroller .chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{
    border:1px solid var(--line); padding:8px 12px; border-radius:999px; color:var(--ink); background:var(--panel);
    font-weight:600; font-size:14px;
  }
  .section--cta{ text-align:center; background: radial-gradient(50rem 20rem at 50% -20%, rgba(255,255,255,.08), rgba(0,0,0,0)); }
  .section--cta p{ color:var(--muted); margin:0 0 14px; }
  
  /* =========================
     FOOTER
     ========================= */
  .footer{
    display:flex; justify-content:center; gap:10px; align-items:center;
    border-top:1px solid var(--line); color:var(--muted);
    padding:24px 16px; font-size:14px;
  }
  .footer .sep{ opacity:.35; }
  
  /* =========================
     VISION PAGE (MAG SPLIT + WHITE RINGS)
     ========================= */
  .page-hero{ padding:64px 0 22px; border-bottom:1px solid var(--line); }
  .page-hero__title{ font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-size:40px; margin:0 0 10px; }
  .page-hero__lead{ color:var(--muted); max-width:820px; }
  
  /* Split layout */
  .vision-split{
    display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:start;
  }
  .vision-title{ font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-size:40px; margin:0 0 10px; }
  .vision-lead{ color:var(--muted); margin:0 0 16px; max-width:780px; }
  .vision-block{ margin:16px 0; }
  .vision-sub{ font-size:18px; margin:0 0 6px; }
  .vision-list{ margin:0; padding-left:18px; display:grid; gap:6px; }
  .vision-note{ margin-top:8px; color:var(--muted); border:1px dashed var(--line); border-radius:10px; padding:10px 12px; }
  
  /* Right column stats */
  .vision-split__right{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .statcard{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:18px; text-align:center; min-height:190px; display:flex; flex-direction:column; justify-content:center;
  }
  /* White rings */
  .statcard__ring{
    --ring-size:120px;
    width:var(--ring-size); height:var(--ring-size); margin:0 auto 12px; border-radius:50%;
    background:
      radial-gradient(closest-side, rgba(255,255,255,.10), rgba(0,0,0,0) 70%),
      conic-gradient(#ffffff 22%, rgba(255,255,255,.10) 0);
    box-shadow: 0 0 36px rgba(255,255,255,.05) inset, 0 0 18px rgba(255,255,255,.04);
    display:grid; place-items:center;
  }
  .statcard__num{ color:#fff; font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-size:26px; font-weight:700; }
  .statcard__label{ color:var(--muted); font-size:14px; }
  
  /* Ticker & sources (vision) */
  .dataticker{ margin-top:22px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.02); }
  .dataticker__track{ display:flex; gap:28px; padding:10px 14px; white-space:nowrap; animation:dt-marquee 22s linear infinite; }
  .tick{ opacity:.9; }
  @keyframes dt-marquee{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .dataticker__track{ animation:none; } }
  .sources{ margin-top:16px; }
  .sources > summary{ cursor:pointer; color:var(--muted); font-weight:600; list-style:none; outline:none; }
  .sources > summary::-webkit-details-marker{ display:none; }
  .sources[open] > summary{ color:var(--ink); }
  .sources ol{ margin:10px 0 0 18px; color:var(--muted); }
  
  /* =========================
     RESPONSIVE
     ========================= */
  @media (max-width:1100px){
    .hero{ grid-template-columns:1fr; }
  }
  @media (max-width:980px){
    #what-we-do .cards{ grid-template-columns:1fr; }
    .metrics{ grid-template-columns:1fr 1fr; }
    .section--flow .flow{ grid-template-columns:1fr; }
    .vision-split{ grid-template-columns:1fr; gap:24px; }
    .vision-split__right{ grid-template-columns:1fr 1fr; }
    .hero__copy h1{ font-size:42px; }
  }
  @media (max-width:640px){
    .vision-split__right{ grid-template-columns:1fr; }
    .statcard__ring{ --ring-size:100px; }
  }