:root {
      --bg: #0b2c56; /* deep blue */
      --bg-2: #0f2433; /* slightly lighter */
      --card: #11293a; /* cards */
      --text: #e6f1ff; /* primary text */
      --muted: #b6c5d6; /* secondary text */
      --brand: #3bc1ff; /* accent */
      --brand-2: #64ffda; /* accent 2 */
      --ok: #2ecc71;
      --warn: #f39c12;
      --err: #e74c3c;
      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.25);
      --maxw: 1120px;
    }

    /* Light mode */
    @media (prefers-color-scheme: light) {
    :root {
      --primary: #0b2c56;
      --secondary: #1a4a7c;
      --accent: #9d9d9d;
      --light: #ffffff;
      --text: #ffffff; /* darker text for light background */
    }

    body {
      background: #ffffff;
      color: var(--text);
    }

    h1, h2, h3, h4, h5, h6 {
      color: #ffffff;
    }

    header.navbar {
      background-color: #ffffff;
    }

    .footer {
      background-color: #ffffff;
      color: #0b2c56;
    }
   /* Dark mode */
    @media (prefers-color-scheme: dark) {
      :root {
        --primary: #0b2c56;
        --secondary: #1a4a7c;
        --accent: #9d9d9d;
        --light: #ffffff;
        --text: #ffffff; /* lighter text for dark background */
      }

      body {
        background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
        color: var(--text);
      }

      h1, h2, h3, h4, h5, h6 {
        color: #ffffff !important;
      }

      header.navbar {
        background-color: var(--card);
      }

      .footer {
        background-color: var(--card);
        color: var(--text);
      }
    }
    
    header.navbar { box-shadow: 0 1px 12px rgba(0,0,0,.06); }
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
    a { color: inherit; text-decoration: none; }
    .container { width: 100%; max-width: var(--maxw); padding: 0 20px; margin: 0 auto; }
    .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .9rem 1.2rem; background: var(--brand); color: #06121c; border-radius: calc(var(--radius) + 4px); font-weight: 700; box-shadow: var(--shadow); border: 0; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
    .btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
    .btn.secondary { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.2); box-shadow: none; }

    header.navbar { position: sticky; top: 0; z-index: 50; background-color: #ffffff; backdrop-filter: blur(10px); }
    nav .row { display: flex; align-items: center; justify-content: space-between; height: 64px; }
    .brand { display: flex; align-items: center; gap: .75rem; font-weight: 800; letter-spacing: .3px; }
    .brand img { max-width: 290px; height: auto; border-radius: 8px; }
    .navlinks { display: flex; gap: 1rem; align-items: center; }
    .navlinks a { padding: .5rem .75rem; border-radius: 10px; color: #0b2c56; }
    .navlinks a:hover, .navlinks a[aria-current="page"] { color: #0b2c56; background: rgba(255,255,255,.06); }
    .nav-toggle { display: none; }

    .hero { padding: 72px 0 48px; position: relative; overflow: clip; }
    .hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; }
    h1 { font-size: clamp(2rem, 2.8vw + 1rem, 3.2rem); line-height: 1.1; margin: 0; }
    .lead { font-size: clamp(1rem, .5vw + .9rem, 1.2rem); color: #ffffff; margin: 16px 0 24px; }
    .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
    .hero-card { background: radial-gradient(1100px 400px at 0% 0%, rgba(59, 193, 255, .08), transparent), var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
    .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .6rem; font-size: .85rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: var(--muted); }

    section { padding: 56px 0; }
    .section-title { font-size: clamp(1.4rem, .8vw + 1.2rem, 2rem); margin: 0 0 8px; }
    .section-sub { color: var(--muted); margin: 0 0 24px; }

    .grid { display: grid; gap: 18px; }
    .grid.cards { grid-template-columns: repeat(12, 1fr); }
    .card { grid-column: span 4; background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
    .card h3 { margin: 0 0 6px; font-size: 1.1rem; }
    .card p { margin: 0; color: var(--muted); }
    .card ul { margin: 8px 0 0 1rem; color: var(--muted); }

    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .badge { background: rgba(100, 255, 218, .12); color: var(--brand-2); border: 1px solid rgba(100,255,218,.3); padding: .25rem .55rem; border-radius: 999px; font-size: .8rem; }

    .blockquote { border-left: 3px solid var(--brand-2); padding-left: 12px; margin: 8px 0; color: var(--muted); font-style: italic; }

    .logos { display: grid; gap: 12px; grid-template-columns: repeat(6, 1fr); opacity: .85; }
    .logo { background: var(--card); border: 1px dashed rgba(255,255,255,.15); border-radius: 12px; height: 52px; display: grid; place-items: center; font-size: .85rem; color: var(--muted); }

    .cta { text-align: center; padding: 64px 0; }

    .footer { margin-top: 24px; padding: 28px 0 60px; background-color: #ffffff; color: #0b2c56; border-top: 1px solid rgba(255,255,255,.08); }
    .footer .cols { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1.2fr; gap: 20px; }
    .footer small, .footer a { color: #0b2c56; }

    /* Responsive */
    @media (max-width: 980px) {
      .hero-grid { grid-template-columns: 1fr; }
      .split { grid-template-columns: 1fr; }
      .card { grid-column: span 6; }
      .footer .cols { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .navlinks { display: none; position: absolute; right: 10px; top: 64px; background: rgba(6,18,28,.95); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 8px; flex-direction: column; }
      .navlinks.show { display: flex; }
      .nav-toggle { display: inline-flex; background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: .45rem .6rem; }
      .card { grid-column: span 12; }
      .logos { grid-template-columns: repeat(3, 1fr); }
      .footer .cols { grid-template-columns: 1fr; }
    }

    /* Accessibility helpers */
    .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; }
    .skip-link { position: absolute; left: 8px; top: -40px; background: var(--brand); color: #06121c; padding: .5rem .75rem; border-radius: 10px; transition: top .2s; z-index: 999; }
    .skip-link:focus { top: 8px; }

    /* Breadcrumbs */
    .breadcrumbs { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: .9rem; }
    .breadcrumbs a { color: var(--muted); }
    .breadcrumbs .sep { opacity: .5; }