/* ── Custom colour tokens ── */
    :root {
      --navy-950: #050b18;
      --navy-900: #0a1628;
      --navy-800: #0f1f3d;
      --navy-700: #1a3057;
      --electric-blue: #3b82f6;
      --electric-blue-dim: rgba(59,130,246,.15);
      --neon-green: #22c55e;
      --violet: #8b5cf6;
      --muted-gray: #94a3b8;
      --card-bg: #12233f;
    }

    * { box-sizing: border-box; }

    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--navy-950);
      color: #f8fafc;
      overflow-x: hidden;
    }

    /* ── Utility overrides ── */
    .text-electric   { color: var(--electric-blue) ; }
    .text-neon       { color: var(--neon-green) ; }
    .text-vio        { color: var(--violet) ; }
    .text-muted-hl   { color: var(--muted-gray) ; }

    .bg-card         { background-color: var(--card-bg); }
    .bg-navy-800     { background-color: var(--navy-800); }
    .bg-navy-900     { background-color: var(--navy-900); }
    .bg-navy-950     { background-color: var(--navy-950); }

    /* ── Navbar ── */
    .navbar-hl {
      background: rgba(5,11,24,.85);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(30,60,100,.4);
    }
    .brand-name { font-size: 1.4rem; font-weight: 700; letter-spacing: -.5px; }

    /* Login btn */
    .btn-login {
      color: var(--electric-blue);
      background: rgba(59,130,246,.1);
      border: 1px solid rgba(59,130,246,.35);
      font-weight: 500;
      padding: .4rem 1.1rem;
      border-radius: .5rem;
      transition: background .2s, color .2s;
    }
    .btn-login:hover { background: rgba(59,130,246,.22); color: #fff; }

    /* ── Hero ── */
    .hero-section {
      position: relative;
      padding: 4.5rem 1.5rem 4rem;
      overflow: hidden;
    }
    .hero-bg-svg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      opacity: .18;
      pointer-events: none;
    }
    @keyframes drawLine {
      from { stroke-dashoffset: 2000; }
      to   { stroke-dashoffset: 0; }
    }
    @keyframes drawLine2 {
      from { stroke-dashoffset: 2000; }
      to   { stroke-dashoffset: 0; }
    }
    .hero-line-1 {
      stroke-dasharray: 2000;
      animation: drawLine 4s ease-in-out infinite alternate;
    }
    .hero-line-2 {
      stroke-dasharray: 2000;
      animation: drawLine 4s 1s ease-in-out infinite alternate;
    }
    .hero-line-3 {
      stroke-dasharray: 2000;
      animation: drawLine 4s 2s ease-in-out infinite alternate;
    }

    .badge-platform {
      display: inline-flex; align-items: center; gap: .4rem;
      font-size: .75rem; font-weight: 600; letter-spacing: .12em;
      text-transform: uppercase; color: var(--muted-gray);
      background: rgba(34,197,94,.07);
      border: 1px solid rgba(34,197,94,.18);
      padding: .3rem .9rem; border-radius: 999px;
      margin-bottom: 1.1rem;
    }

    /* ── Primary / ghost CTAs ── */
    .btn-primary-hl {
      background: var(--electric-blue);
      color: #fff;
      border: none;
      font-weight: 600;
      padding: .7rem 1.8rem;
      border-radius: .6rem;
      box-shadow: 0 0 20px rgba(59,130,246,.45);
      transition: box-shadow .2s, background .2s;
    }
    .btn-primary-hl:hover {
      background: #2563eb;
      box-shadow: 0 0 32px rgba(59,130,246,.65);
      color: #fff;
    }

    .btn-ghost-hl {
      background: rgba(15,31,61,.55);
      color: #e2e8f0;
      border: 1px solid rgba(30,60,100,.5);
      font-weight: 500;
      padding: .7rem 1.8rem;
      border-radius: .6rem;
      transition: background .2s;
    }
    .btn-ghost-hl:hover { background: var(--navy-800); color: #fff; }

    /* ── Section titles ── */
    .section-title {
      font-size: clamp(1.75rem, 4vw, 2.8rem);
      font-weight: 800;
      line-height: 1.2;
    }

    /* ── Cards ── */
    .hl-card {
      background: var(--card-bg);
      border-radius: .9rem;
      padding: 1.4rem 1.5rem;
      border: 1px solid rgba(26,48,87,.55);
      transition: border-color .25s, box-shadow .25s;
    }
    .hl-card:hover {
      border-color: rgba(59,130,246,.28);
      box-shadow: 0 4px 28px rgba(0,0,0,.3);
    }

    .icon-wrap {
      display: inline-flex;
      align-items: center; justify-content: center;
      width: 2.4rem; height: 2.4rem;
      border-radius: .55rem;
      flex-shrink: 0;
    }
    .icon-blue  { background: rgba(59,130,246,.12); color: var(--electric-blue); }
    .icon-green { background: rgba(34,197,94,.12);  color: var(--neon-green); }
    .icon-vio   { background: rgba(139,92,246,.12); color: var(--violet); }

    /* ── Section spacer ── */
    .section-pad { padding: 4rem 1.5rem; }

    /* ── Divider gradient ── */
    .divider-gradient {
      height: 3px;
      width: 5rem;
      border-radius: 999px;
      background: linear-gradient(to right, var(--neon-green), var(--electric-blue), var(--violet));
      margin: 0 auto 1rem;
    }

    /* ── Feature Tabs ── */
    .nav-tabs-hl {
      border: none;
      background: rgba(15,31,61,.5);
      border-radius: .7rem;
      padding: .3rem;
      gap: .3rem;
    }
    .nav-tabs-hl .nav-link {
      border: none;
      color: var(--muted-gray);
      border-radius: .55rem;
      padding: .55rem 1.3rem;
      font-weight: 500;
      transition: background .2s, color .2s, box-shadow .2s;
    }
    .nav-tabs-hl .nav-link.active {
      background: var(--violet);
      color: #fff;
      box-shadow: 0 0 16px rgba(139,92,246,.45);
    }
    .tab-content-hl {
      background: var(--card-bg);
      border-radius: .9rem;
      border: 1px solid rgba(26,48,87,.5);
      padding: 1.8rem;
    }
    .stat-mini {
      background: rgba(10,22,40,.55);
      border: 1px solid rgba(26,48,87,.5);
      border-radius: .6rem;
      padding: .9rem 1rem;
    }

    /* ── Performance impact inline cards ── */
    .kpi-card {
      background: rgba(15,31,61,.8);
      border-radius: .75rem;
      padding: .85rem 1.1rem;
      display: flex;
      align-items: center;
      gap: .85rem;
      transition: border-color .25s;
    }
    .kpi-card.border-green { border: 1px solid rgba(34,197,94,.22); }
    .kpi-card.border-green:hover { border-color: rgba(34,197,94,.42); }
    .kpi-card.border-blue  { border: 1px solid rgba(59,130,246,.22); }
    .kpi-card.border-blue:hover  { border-color: rgba(59,130,246,.42); }
    .kpi-card.border-vio   { border: 1px solid rgba(139,92,246,.22); }
    .kpi-card.border-vio:hover   { border-color: rgba(139,92,246,.42); }

    /* ── Final CTA box ── */
    .cta-box {
      background: var(--card-bg);
      border: 1px solid rgba(59,130,246,.3);
      border-radius: 1.1rem;
      padding: 3rem 2rem;
      box-shadow: 0 0 40px rgba(59,130,246,.12);
    }

    /* ── Footer ── */
    .footer-hl {
      background: var(--navy-950);
      border-top: 1px solid rgba(26,48,87,.5);
      padding: 2.2rem 1.5rem;
    }
    .footer-hl a {
      color: var(--muted-gray);
      text-decoration: none;
      font-size: .875rem;
      transition: color .2s;
    }
    .footer-hl a:hover { color: var(--electric-blue); }

    /* ── Gradient text ── */
    .gradient-text {
      background: linear-gradient(135deg, #fff 0%, #fff 60%, rgba(255,255,255,.75) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }