:root{
      --bg: #ffffff;
      --bg-soft: #f3f7fb;
      --fg: #0f172a;
      --muted: #4b5563;
      --accent: #0f4c81;
      --accent-2: #2a9de4;
      --card: #ffffff;
      --border: #dbe4f0;
      --ring: #58b0ea;
      --pillar-icon: #0f172a;
      --maxw: 1200px;
      --radius: 16px;
      --shadow: 0 10px 30px rgba(2,6,23,.08);
    }

    /* Dark theme tokens */
    @media (prefers-color-scheme: dark){
      :root:not([data-theme]){
        --bg:#0b1220; --bg-soft:#0e1a2b; --fg:#e6eaf5; --muted:#a0acc2; --card:#0f172a;
        --border:rgba(88,176,234,.3); --ring:#2a9de4; --pillar-icon:#e6eaf5; --shadow:0 10px 30px rgba(0,0,0,.5);
      }
    }
    :root[data-theme="dark"]{
      --bg:#0b1220; --bg-soft:#0e1a2b; --fg:#e6eaf5; --muted:#a0acc2; --card:#0f172a;
      --border:rgba(88,176,234,.3); --ring:#2a9de4; --pillar-icon:#e6eaf5; --shadow:0 10px 30px rgba(0,0,0,.5);
    }
    :root[data-theme="light"]{
      --bg:#ffffff; --bg-soft:#f3f7fb; --fg:#0f172a; --muted:#4b5563; --card:#ffffff;
      --border:#dbe4f0; --ring:#58b0ea; --pillar-icon:#0f172a; --shadow:0 10px 30px rgba(2,6,23,.08);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--fg); background:
        radial-gradient(1200px 600px at 10% -10%, rgba(15,76,129,.16), transparent 60%),
        radial-gradient(900px 500px at 90% 0%, rgba(42,157,228,.15), transparent 60%),
        linear-gradient(var(--bg), var(--bg));
    }
    a{color:inherit}
    .container{max-width:var(--maxw); margin-inline:auto; padding:0 20px}

    /* Header */
    header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px); background:transparent; border-bottom:1px solid var(--border)}
    .nav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px clamp(12px, 4vw, 24px); position:relative}
    .brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; font-size:18px; color:var(--accent)}
    .brand .logo{width:40px; height:auto; display:block; filter:drop-shadow(0 6px 18px rgba(15,76,129,.25))}
    :root[data-theme="dark"] .brand{color:var(--accent-2)}
    nav ul{display:flex; gap:14px; list-style:none; margin:0; padding:0}
    nav a{padding:8px 12px; border-radius:10px; text-decoration:none; color:var(--fg); border:1px solid transparent}
    nav a:hover, nav a:focus-visible{background:color-mix(in srgb, var(--accent-2) 18%, transparent); border-color:color-mix(in srgb, var(--accent) 26%, transparent); outline:none}
    .cta{padding:8px 14px; border-radius:12px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; text-decoration:none; font-weight:600; border:1px solid color-mix(in srgb, var(--accent-2) 45%, transparent); box-shadow:0 6px 22px rgba(15,76,129,.28)}
    .cta:hover, .cta:focus-visible{filter:saturate(112%); box-shadow:0 8px 24px rgba(15,76,129,.35)}
    .desktop-cta{margin-left:12px}
    .mobile-cta{display:none}
    .mobile-menu-header,
    .mobile-menu-cta,
    .mobile-menu-meta,
    .mobile-menu-divider{display:none}
    .mobile-menu-header{flex-direction:column; gap:6px; color:var(--muted)}
    .mobile-menu-header .eyebrow{font-size:12px; letter-spacing:0.16em; font-weight:700; text-transform:uppercase; color:var(--accent); opacity:0.8}
    :root[data-theme="dark"] .mobile-menu-header .eyebrow{color:var(--accent-2)}
    .mobile-menu-header p{margin:0; font-size:14px; line-height:1.5; color:var(--muted)}
    .mobile-menu-cta{gap:12px; flex-direction:column}
    .mobile-menu-cta p{margin:0; font-size:13px; line-height:1.5; color:var(--muted)}
    .mobile-menu-meta{flex-direction:column; gap:6px; font-size:14px}
    .mobile-menu-meta .menu-link{display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--fg); font-weight:600}
    .mobile-menu-meta .menu-link:hover,
    .mobile-menu-meta .menu-link:focus-visible{color:var(--accent-2)}
    .mobile-menu-divider{display:none; width:100%; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--border) 90%, transparent) 20%, color-mix(in srgb, var(--border) 90%, transparent) 80%, transparent)}
    .drawer-close{display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:none; background:transparent; color:var(--muted); font-size:32px; line-height:1; cursor:pointer; transition:color .2s ease, background .2s ease, transform .2s ease; position:absolute; top:16px; right:16px}
    .drawer-close:hover,
    .drawer-close:focus-visible{background:color-mix(in srgb, var(--bg) 70%, transparent); color:var(--fg); outline:none; transform:scale(1.05)}
    .menu-toggle{display:none; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:color-mix(in srgb, var(--bg) 40%, transparent); color:var(--fg); cursor:pointer; transition:background .2s ease}
    .menu-toggle:hover{background:color-mix(in srgb, var(--bg) 60%, transparent)}
    .menu-toggle svg{width:20px; height:20px}
    .menu-toggle .close-icon{display:none}
    .nav.menu-open .menu-toggle .menu-icon{display:none}
    .nav.menu-open .menu-toggle .close-icon{display:inline}

    /* Theme toggle */
    .theme-toggle{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-right:10px; border-radius:12px; border:1px solid var(--border); background:color-mix(in srgb, var(--bg) 40%, transparent); color:var(--fg); cursor:pointer}
    .theme-toggle:hover{background:color-mix(in srgb, var(--bg) 60%, transparent)}
    .theme-toggle svg{width:18px; height:18px}
    .theme-toggle .moon{display:none}
    :root[data-theme="dark"] .theme-toggle .sun{display:none}
    :root[data-theme="dark"] .theme-toggle .moon{display:inline-block}

    /* Hero */
    .hero{position:relative; isolation:isolate; min-height:76vh}
    .hero .container{display:grid; grid-template-columns: 1.2fr .8fr; gap:48px; padding:120px 20px; max-width:1320px}
    .pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:color-mix(in srgb, var(--bg) 30%, transparent); font-size:15px}
    h1{margin:14px 0 10px; font-size:clamp(28px, 4.2vw, 48px); line-height:1.08}
    .lead{color:var(--muted); font-size:clamp(17px, 1.6vw, 22px)}
    .hero-cta{display:flex; gap:16px; margin-top:28px}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:14px; border:2px solid transparent; background:#fff; color:var(--fg); text-decoration:none; font-weight:700; box-shadow:0 10px 24px rgba(15,76,129,.08); transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease}
    .btn:hover{transform:translateY(-1px); box-shadow:0 14px 32px rgba(2,6,23,.10)}
    .btn:focus-visible{outline:3px solid color-mix(in srgb, var(--accent-2) 60%, white); outline-offset:2px}
    .btn.primary{background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent-2) 70%, white)); color:#fff; border:0; box-shadow:0 16px 32px rgba(15,76,129,.28), 0 2px 8px rgba(2,6,23,.06)}
    .btn.primary:hover{filter:brightness(1.03); transform:translateY(-1.5px); box-shadow:0 20px 40px rgba(15,76,129,.34), 0 4px 10px rgba(2,6,23,.08)}
    .btn.outline{background:color-mix(in srgb, var(--accent-2) 10%, white); color:var(--accent); border:2px solid var(--accent); box-shadow:0 10px 24px rgba(15,76,129,.12)}
    .btn.outline:hover{background:color-mix(in srgb, var(--accent-2) 16%, white)}
    :root[data-theme="dark"] .btn.outline{background:color-mix(in srgb, var(--bg) 85%, transparent); color:color-mix(in srgb, var(--accent-2) 92%, white); border-color:color-mix(in srgb, var(--accent-2) 70%, transparent); box-shadow:0 14px 30px rgba(8,20,40,.5)}
    :root[data-theme="dark"] .btn.outline:hover{background:color-mix(in srgb, var(--accent-2) 18%, transparent); box-shadow:0 18px 40px rgba(8,20,40,.55)}
    .btn-lg{padding:16px 26px; font-size:18px}

    /* Headline font */
    .hero h1{font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; font-weight:600; letter-spacing:-0.005em; font-size:clamp(44px, 7vw, 84px); line-height:1.12; font-synthesis:none}

    /* Animated gradient word in hero */
    .btn svg{width:20px; height:20px}
    .text-gradient{background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradient-move 6s linear infinite; white-space:nowrap}
    @keyframes gradient-move{to{background-position:200% center}}

    /* Floating effect for the gradient word */
    .text-gradient.float{display:inline-block; animation:gradient-move 6s linear infinite, float-y 5s ease-in-out infinite}
    @keyframes float-y{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
    @media (prefers-reduced-motion: reduce){ .text-gradient.float{animation:none} }

    /* Motion: reveal on load & on scroll */
    :root{ --ease-smooth: cubic-bezier(0.22,1,0.36,1) }
    .reveal{opacity:0; transform:translateY(10px); will-change:transform,opacity; filter:saturate(.96)}
    .reveal.fade-right{transform:translateX(-18px)}
    .reveal.fade-left{transform:translateX(18px)}
    .reveal.up{transform:translateY(14px)}
    .reveal.scale{transform:scale(.98)}
    .reveal.is-visible{opacity:1; transform:none; filter:none; transition:opacity .72s var(--ease-smooth), transform .72s var(--ease-smooth), filter .72s var(--ease-smooth)}
    .delay-1{transition-delay:.09s}
    .delay-2{transition-delay:.18s}
    .delay-3{transition-delay:.27s}
    @media (prefers-reduced-motion: reduce){
      .reveal,.reveal.is-visible{opacity:1 !important; transform:none !important; transition:none !important}
    }

    /* Network animation (hero right) */
    .network-card{position:relative; padding:0; overflow:hidden; min-height:clamp(420px, 52vh, 600px); background:transparent}
    .network-canvas{display:block; width:100%; height:100%}

    /* Page gradient helpers */
    .hero::before{
      content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
      background:
        radial-gradient(800px 400px at 10% -10%, rgba(15,76,129,.12), transparent 60%),
        radial-gradient(600px 320px at 100% 0%, rgba(42,157,228,.10), transparent 60%),
        radial-gradient(900px 500px at 50% 120%, rgba(33,126,195,.08), transparent 60%);
    }
    .section-soft{
      background:
        radial-gradient(1100px 520px at -10% 10%, rgba(15,76,129,.08), transparent 60%),
        radial-gradient(1100px 520px at 110% 90%, rgba(42,157,228,.08), transparent 60%),
        linear-gradient(#f3f7fb, #ffffff);
    }
    .section-alt{
      background:
        radial-gradient(900px 480px at 50% -10%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 60%),
        linear-gradient(var(--bg), var(--bg-soft));
    }

    /* Pill icon */
    .pill .ico{width:16px; height:16px; display:inline-block; color:#4ade80}

    /* Cards & Sections */
    section{padding:64px 0; border-top:1px solid var(--border)}
    @keyframes title-gradient-sheen{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }
    .section-title,
    .form-title{
      font-family:'Clash Display', 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      font-size:clamp(36px, 4.4vw, 64px);
      margin:0 auto 18px;
      text-align:center;
      letter-spacing:-0.01em;
      line-height:1.05;
      color:var(--fg);
      background-image:linear-gradient(120deg, var(--accent) 0%, color-mix(in srgb, var(--accent-2) 80%, white) 45%, color-mix(in srgb, var(--accent) 80%, var(--accent-2)) 100%);
      background-size:200% 200%;
      background-clip:text;
      -webkit-background-clip:text;
      color:transparent;
      text-shadow:0 8px 24px rgba(15,23,42,.14);
      animation:title-gradient-sheen 12s ease-in-out infinite;
    }
    .section-title::after,
    .form-title::after{
      content:"";
      display:block;
      width:72px;
      height:4px;
      border-radius:999px;
      margin:16px auto 0;
      background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, white), color-mix(in srgb, var(--accent-2) 80%, white));
      box-shadow:0 6px 16px rgba(15,76,129,.22);
    }
    .section-sub{color:var(--muted); margin:0 0 24px}
    .grid{display:grid; gap:16px}
    .grid.cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
    .grid.cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
    .card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
    .card h3{margin:0 0 8px; font-size:20px}
    .muted{color:var(--muted)}
    .badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
    .badge{font-size:12px; padding:6px 8px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--bg) 25%, transparent); color:var(--muted)}

    /* About (redesigned) */
    .about-lead{max-width:920px; font-size:clamp(16px,1.5vw,20px)}
    .about-services{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px; margin:18px 0 30px}
    .chip{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:color-mix(in srgb, var(--bg) 30%, transparent); font-weight:600}
    .chip svg{width:16px; height:16px; opacity:.9; color:#4ade80}
    .grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .about-pillars{margin-top:8px}
    .pillar{text-align:center; padding:8px}
    .ring{position:relative; width:140px; height:140px; border-radius:999px; padding:4px; margin:0 auto 12px; background:conic-gradient(from 200deg, var(--accent), color-mix(in srgb, var(--accent-2) 70%, white), var(--accent), var(--accent)); transition:filter .3s ease, transform .25s ease}
    .ring .inner{display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:inherit; background:var(--card); box-shadow:0 10px 24px rgba(15,76,129,.08)}
    .ring .inner svg{color:var(--pillar-icon)}
    /* halo on hover */
    .ring::after{content:""; position:absolute; inset:-10px; border-radius:inherit; pointer-events:none; background:radial-gradient(closest-side, rgba(15,76,129,.12), rgba(42,157,228,.12) 45%, transparent 70%); opacity:0; transform:scale(.96); transition:opacity .35s var(--ease-smooth), transform .35s var(--ease-smooth)}
    .pillar:hover .ring::after{opacity:1; transform:scale(1.02)}
    .pillar:hover .ring{filter:drop-shadow(0 10px 22px rgba(15,23,42,.15))}
    @media (prefers-reduced-motion: reduce){ .ring::after{display:none} }
    .pillar h3{margin:6px 0 4px; font-size:16px}
    .pillar p{margin:0; color:var(--muted); font-style:italic}


    /* A11y helpers */
    .visually-hidden{position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}