*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    :root {
      --bg:        #050505;
      --bg2:       #0A0A0A;
      --blue:      #006BFF;
      --blue-lt:   #00C6FF;
      --blue-dk:   #003CFF;
      --purple:    #004ECC;
      --glow:      rgba(0,107,255,0.45);
      --glow-soft: rgba(0,107,255,0.12);
      --txt:       #FFFFFF;
      --txt2:      rgba(255,255,255,0.6);
      --txt3:      rgba(255,255,255,0.32);
      --border:    rgba(255,255,255,0.07);
      --border2:   rgba(0,107,255,0.35);
      --r:         20px;
      --r-sm:      12px;
      --r-pill:    100px;
      --t:         300ms ease;
      --grad: linear-gradient(90deg, #003CFF 0%, #006BFF 45%, #00C6FF 100%);
      --grad-anim: linear-gradient(90deg, #003CFF, #006BFF, #00C6FF, #006BFF, #003CFF);
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--txt);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ambient background orbs — fixed so they persist across all sections */
    body::before {
      content: '';
      position: fixed;
      top: -20vh; right: -15vw;
      width: 55vw; height: 55vw;
      background: radial-gradient(circle, rgba(0,80,255,.13) 0%, transparent 65%);
      pointer-events: none; z-index: 0; border-radius: 50%;
      animation: meshDrift1 22s ease-in-out infinite;
    }
    body::after {
      content: '';
      position: fixed;
      bottom: -20vh; left: -15vw;
      width: 50vw; height: 50vw;
      background: radial-gradient(circle, rgba(0,40,200,.1) 0%, transparent 65%);
      pointer-events: none; z-index: 0; border-radius: 50%;
      animation: meshDrift2 27s ease-in-out infinite;
    }
    @keyframes meshDrift1 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%     { transform: translate(-4vw,3vh) scale(1.08); }
    }
    @keyframes meshDrift2 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%     { transform: translate(3vw,-4vh) scale(1.1); }
    }

    /* ── UTILITIES ──────────────────────────────────────── */
    /* No fixed max-width — content fills the screen proportionally */
    .wrap {
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;
      padding: 0 clamp(20px, 4.5vw, 72px);
    }

    /* Premium glassmorphism with real depth */
    .glass {
      background: linear-gradient(135deg,
        rgba(255,255,255,.055) 0%,
        rgba(255,255,255,.018) 100%);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--r);
      box-shadow:
        0 0 0 1px rgba(0,107,255,.09),
        0 8px 32px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 -1px 0 rgba(0,0,0,.15);
      position: relative;
    }
    /* subtle top-edge accent line on every glass card */
    .glass::before {
      content: '';
      position: absolute;
      top: 0; left: 10%; right: 10%; height: 1px;
      background: linear-gradient(90deg,
        transparent, rgba(0,150,255,.45), rgba(0,210,255,.3), transparent);
      border-radius: 0 0 4px 4px;
      pointer-events: none;
    }

    .grad-txt {
      background: var(--grad-anim);
      background-size: 280% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradFlow 7s linear infinite;
    }

    /* ── NEXT animated neon gradient ────────────────────── */
    @keyframes gradFlow {
      0%   { background-position: 0% center; }
      100% { background-position: 300% center; }
    }
    @keyframes glowPulse {
      0%,100% { filter: drop-shadow(0 0 6px rgba(0,107,255,.55)) drop-shadow(0 0 16px rgba(0,198,255,.32)); }
      50%      { filter: drop-shadow(0 0 10px rgba(0,107,255,.8)) drop-shadow(0 0 26px rgba(0,198,255,.55)); }
    }
    .next-word {
      font-family: 'Montserrat', 'Inter', sans-serif;
      font-weight: 800;
      letter-spacing: .07em;
      background: var(--grad-anim);
      background-size: 300% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradFlow 5s linear infinite, glowPulse 3s ease-in-out infinite;
      transition: all .4s ease;
      display: inline-block;
    }
    .next-word:hover {
      transform: translateY(-1px);
      filter: drop-shadow(0 0 14px rgba(0,107,255,.9)) drop-shadow(0 0 32px rgba(0,198,255,.65)) !important;
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      animation: orbDrift 16s ease-in-out infinite;
    }
    @keyframes orbDrift {
      0%,100% { transform: translate(0,0) scale(1); opacity: 1; }
      50%     { transform: translate(16px,-20px) scale(1.08); opacity: .82; }
    }

    /* reveal on scroll */
    .rv {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .rv.in { opacity: 1; transform: none; }

    /* ── BUTTONS ────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 22px;
      border-radius: var(--r-pill);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      border: none;
      transition: all var(--t);
      white-space: nowrap;
    }
    .btn-blue {
      position: relative;
      overflow: hidden;
      background: var(--grad);
      color: #fff;
      transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
    }
    .btn-blue::after {
      content: '';
      position: absolute;
      top: 0; left: -60%;
      width: 45%; height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
      transform: skewX(-20deg);
      pointer-events: none;
      animation: btnSweep 5s ease-in-out infinite;
    }
    @keyframes btnSweep {
      0%   { left: -60%; }
      30%  { left: 130%; }
      100% { left: 130%; }
    }
    .btn-blue:hover {
      filter: brightness(1.12);
      box-shadow: 0 0 28px var(--glow), 0 6px 26px rgba(0,107,255,.35);
      transform: translateY(-2px) scale(1.03);
    }
    .btn-ghost {
      background: rgba(255,255,255,0.055);
      color: #fff;
      border: 1px solid var(--border);
    }
    .btn-ghost:hover {
      background: rgba(255,255,255,0.1);
      border-color: var(--border2);
      transform: translateY(-2px);
    }

    /* ── NAVBAR ─────────────────────────────────────────── */
    @keyframes btnPulse {
      0%,100% { box-shadow: 0 0 14px rgba(0,107,255,.45), 0 0 0 0 rgba(0,107,255,.18); }
      50%      { box-shadow: 0 0 22px rgba(0,107,255,.65), 0 0 0 7px rgba(0,107,255,0); }
    }

    nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 200;
      padding: 14px 0;
      /* always-on subtle gradient so logo is readable even at top */
      background: linear-gradient(180deg, rgba(5,5,5,.82) 0%, rgba(5,5,5,0) 100%);
      transition: background .35s ease, backdrop-filter .35s ease;
    }
    /* glowing bottom border that appears on scroll */
    nav::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%; transform: translateX(-50%);
      width: 70%; height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(0,107,255,.55) 35%, rgba(0,198,255,.4) 65%, transparent 100%);
      opacity: 0;
      transition: opacity .35s ease;
      pointer-events: none;
    }
    nav.up {
      background: rgba(5,5,5,.92);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }
    nav.up::after { opacity: 1; }

    .nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    /* right cluster: links + divider + CTA all flush together */
    .nav-right {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* ── Logo ── */
    .logo {
      display: flex;
      align-items: center;
      gap: 11px;
      text-decoration: none;
      flex-shrink: 0;
    }
    .logo-icon {
      width: 44px; height: 44px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      box-shadow: 0 0 18px rgba(0,107,255,.38);
      transition: box-shadow var(--t), transform var(--t);
    }
    .logo:hover .logo-icon {
      box-shadow: 0 0 28px rgba(0,107,255,.65);
      transform: scale(1.06);
    }
    .logo-icon img { width: 100%; height: 100%; object-fit: contain; }

    .logo-words { line-height: 1.2; }
    .logo-words .top-line {
      display: flex; align-items: baseline; gap: 5px;
      font-size: 13.5px; font-weight: 900; letter-spacing: .1em;
    }
    .logo-words .top-line .future-word { color: var(--txt); }
    .logo-words .sub-line {
      font-size: 9.5px; font-weight: 600; letter-spacing: .2em;
      color: rgba(255,255,255,.62);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .logo-words .sub-line::before,
    .logo-words .sub-line::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.4));
    }
    .logo-words .sub-line::after {
      background: linear-gradient(90deg, rgba(255,255,255,.4), transparent);
    }

    /* ── Nav links ── */
    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      list-style: none;
    }
    .nav-links a {
      text-decoration: none;
      font-size: 13.5px;
      font-weight: 600;
      color: rgba(255,255,255,.86);
      letter-spacing: .015em;
      position: relative;
      padding: 7px 14px;
      border-radius: 100px;
      transition: color var(--t), background var(--t), text-shadow var(--t);
    }
    /* pill background */
    .nav-links a::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 100px;
      background: rgba(0,107,255,.0);
      border: 1px solid rgba(0,107,255,.0);
      transition: background var(--t), border-color var(--t);
    }
    /* gradient underline */
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 5px; left: 50%; right: 50%;
      height: 1.5px;
      background: var(--grad);
      border-radius: 2px;
      transition: left var(--t), right var(--t);
    }
    .nav-links a:hover {
      color: #fff;
      text-shadow: 0 0 14px rgba(0,198,255,.45);
    }
    .nav-links a:hover::before {
      background: rgba(0,107,255,.1);
      border-color: rgba(0,107,255,.22);
    }
    .nav-links a:hover::after {
      left: 14px;
      right: 14px;
    }

    /* ── Divider before CTA ── */
    .nav-divider {
      width: 1px; height: 26px; flex-shrink: 0;
      background: linear-gradient(180deg, transparent, rgba(255,255,255,.14), transparent);
    }

    /* ── CTA button with gentle pulse ── */
    .btn-nav-cta {
      animation: btnPulse 3.5s ease-in-out infinite;
    }
    .btn-nav-cta:hover {
      animation: none;
      box-shadow: 0 0 32px rgba(0,107,255,.75) !important;
    }

    .burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
    }
    .burger span {
      width: 22px; height: 2px;
      background: var(--txt);
      border-radius: 2px;
      transition: all var(--t);
      display: block;
    }

    .mob-menu {
      display: none;
      position: fixed;
      top: 68px; left: 0; right: 0;
      background: rgba(5,5,5,.97);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      padding: 20px 24px;
      flex-direction: column;
      gap: 4px;
      z-index: 199;
    }
    .mob-menu.show { display: flex; }
    .mob-menu a {
      display: block;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      color: var(--txt2);
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      transition: color var(--t);
    }
    .mob-menu a:hover { color: var(--txt); }

    /* ── HERO ───────────────────────────────────────────── */
    #hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 100px 0 60px;
      overflow: hidden;
    }
    #hero > .wrap { width: 100%; }
    .hero-grid {
      display: grid;
      grid-template-columns: 54fr 46fr;
      gap: 48px;
      align-items: center;
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 14px;
      background: rgba(0,107,255,.1);
      border: 1px solid rgba(0,107,255,.3);
      border-radius: var(--r-pill);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--blue-lt);
      margin-bottom: 14px;
    }

    .hero-h1 {
      font-size: clamp(36px, 4.4vw, 64px);
      font-weight: 900;
      line-height: 1.06;
      letter-spacing: -.03em;
      margin-bottom: 16px;
    }

    .hero-p {
      font-size: clamp(14px, 1.1vw, 16px);
      color: rgba(255,255,255,.7);
      line-height: 1.72;
      max-width: 520px;
      margin-bottom: 24px;
    }

    .hero-feats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 24px;
    }
    .feat {
      display: flex;
      align-items: flex-start;
      gap: 11px;
    }
    .feat-ico {
      width: 34px; height: 34px;
      background: rgba(37,99,255,.1);
      border: 1px solid rgba(37,99,255,.2);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: var(--blue-lt);
      flex-shrink: 0;
      transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .35s ease, box-shadow .35s ease;
      animation: icoPulse 3.6s ease-in-out infinite;
    }
    @keyframes icoPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(0,150,255,0); }
      50%     { box-shadow: 0 0 14px 2px rgba(0,150,255,.32); }
    }
    .feat:nth-child(2) .feat-ico { animation-delay: .5s; }
    .feat:nth-child(3) .feat-ico { animation-delay: 1s; }
    .feat:nth-child(4) .feat-ico { animation-delay: 1.5s; }
    .feat:hover .feat-ico {
      transform: translateY(-3px) rotate(8deg);
      background: rgba(37,99,255,.22);
      box-shadow: 0 0 20px rgba(0,150,255,.45);
    }
    .feat b { display: block; font-size: 13px; font-weight: 700; }
    .feat small { font-size: 11px; color: var(--txt3); }

    .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

    /* hero right card */
    .hero-right { position: relative; display: flex; align-items: center; justify-content: center; }

    /* ── Floating wrapper (positions + floats the whole effects stack) ── */
    .card-float {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: cardFloat 5s ease-in-out infinite;
    }
    @keyframes cardFloat {
      0%,100% { transform: translateY(0); }
      50%     { transform: translateY(-4px); }
    }

    /* ── Effects stack: holds halo / waves / border-light / particles around the untouched card ── */
    .card-fx {
      position: relative;
      width: 100%;
      max-width: 420px;
    }
    /* soft pulsing outer glow halo, unclipped */
    .card-fx::before {
      content: '';
      position: absolute;
      inset: -16px;
      border-radius: calc(var(--r) + 16px);
      box-shadow: 0 0 40px 6px rgba(0,150,255,.16);
      opacity: .55;
      pointer-events: none;
      z-index: -1;
      animation: cardGlowPulse 4.5s ease-in-out infinite;
    }
    @keyframes cardGlowPulse {
      0%,100% { box-shadow: 0 0 40px 6px rgba(0,150,255,.14); opacity: .5; }
      50%     { box-shadow: 0 0 64px 10px rgba(0,170,255,.3); opacity: .85; }
    }

    /* abstract flowing energy-wave lines, far behind the card */
    .energy-waves {
      position: absolute;
      inset: -18% -22%;
      width: 144%;
      height: 136%;
      z-index: -2;
      pointer-events: none;
      animation: waveDrift 20s ease-in-out infinite;
    }
    @keyframes waveDrift {
      0%,100% { transform: translate(0,0) scale(1); }
      50%     { transform: translate(12px,-10px) scale(1.04); }
    }

    /* large blurred background halo behind the whole card area, slow breathe + drift */
    .card-halo-a { animation: haloDriftA 13s ease-in-out infinite; }
    @keyframes haloDriftA {
      0%,100% { transform: translate(-50%,-50%) scale(1); }
      50%     { transform: translate(-50%,-50%) scale(1.16); }
    }
    .card-halo-b { animation: haloDriftB 16s ease-in-out infinite; }
    @keyframes haloDriftB {
      0%,100% { transform: translate(-50%,-50%) scale(1) translate(0,0); }
      50%     { transform: translate(-50%,-50%) scale(1.1) translate(10px,-10px); }
    }

    /* tiny drifting ambient particles around the card edges */
    .card-particle {
      position: absolute;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: #00c6ff;
      box-shadow: 0 0 8px 2px rgba(0,198,255,.8);
      opacity: 0;
      z-index: 3;
      pointer-events: none;
      animation: particleDrift ease-in-out infinite;
    }
    @keyframes particleDrift {
      0%   { opacity: 0; transform: translateY(0) scale(.6); }
      20%  { opacity: .85; }
      80%  { opacity: .4; }
      100% { opacity: 0; transform: translateY(-26px) scale(1); }
    }

    .float-card {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 22px;
      overflow: hidden;
      transition: transform .35s ease, box-shadow .35s ease;
    }
    /* abstract orb + mesh backdrop (rendered as real elements below) sits behind a dark base */
    .float-card.glass {
      background:
        linear-gradient(135deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 100%),
        linear-gradient(160deg, rgba(6,10,24,.78) 0%, rgba(4,8,20,.85) 100%);
    }
    .card-content { position: relative; z-index: 1; }
    .float-card:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow:
        0 0 0 1px rgba(0,150,255,.22),
        0 16px 54px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.15),
        0 0 46px rgba(0,160,255,.4);
    }

    .card-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(37,99,255,.14);
      border: 1px solid rgba(37,99,255,.3);
      border-radius: var(--r-pill);
      padding: 4px 11px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .07em;
      color: var(--blue-lt);
      margin-bottom: 15px;
    }

    .card-title {
      font-size: 20px;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 20px;
    }

    /* ── Career transformation snapshot ── */
    .career-snap {
      display: flex; align-items: center; gap: 8px;
      margin: 12px 0 0;
      padding: 11px 12px;
      background: rgba(255,255,255,.033);
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.08);
    }
    .cs-side { flex: 1; min-width: 0; }
    .cs-right { text-align: right; }
    .cs-tag {
      font-size: 9px; font-weight: 700; letter-spacing: .09em;
      color: rgba(255,255,255,.28); text-transform: uppercase; margin-bottom: 3px;
    }
    .cs-tag-a { color: rgba(0,198,255,.7); }
    .cs-name  { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); margin-bottom: 2px; }
    .cs-role  { font-size: 10px; color: rgba(255,255,255,.38); margin-bottom: 3px; line-height: 1.3; }
    .cs-sal   { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.35); }
    .cs-sal-a {
      font-size: 15px; font-weight: 800;
      background: var(--grad); -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; background-clip: text;
      animation: salGlow 4s ease-in-out infinite;
    }
    @keyframes salGlow {
      0%,100% { filter: drop-shadow(0 0 0px rgba(0,198,255,0)); }
      50%      { filter: drop-shadow(0 0 6px rgba(0,198,255,.45)); }
    }
    .cs-mid {
      display: flex; flex-direction: column; align-items: center;
      gap: 5px; flex-shrink: 0; padding: 0 4px;
    }
    .cs-arr { color: rgba(0,198,255,.5); font-size: 16px; line-height: 1; }
    .cs-pct {
      font-size: 9px; font-weight: 800; letter-spacing: .04em;
      background: var(--grad); -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; background-clip: text;
    }
    /* ── Skill tags ── */
    .skill-tags {
      display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0;
    }
    .skill-tags span {
      font-size: 10px; font-weight: 600; letter-spacing: .03em;
      padding: 3px 9px; border-radius: 100px;
      background: rgba(0,107,255,.08); border: 1px solid rgba(0,107,255,.2);
      color: rgba(0,198,255,.75);
      opacity: 0;
      animation: stChip .35s ease forwards;
    }
    .skill-tags span:nth-child(1) { animation-delay: .1s; }
    .skill-tags span:nth-child(2) { animation-delay: .2s; }
    .skill-tags span:nth-child(3) { animation-delay: .3s; }
    .skill-tags span:nth-child(4) { animation-delay: .4s; }
    .skill-tags span:nth-child(5) { animation-delay: .5s; }
    .skill-tags span:nth-child(6) { animation-delay: .6s; }
    .skill-tags span:nth-child(7) { animation-delay: .7s; }
    @keyframes stChip { to { opacity: 1; } }
    /* ── Card footer meta ── */
    .card-meta {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 0; margin-bottom: 10px;
      border-top: 1px solid rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .cm-item { display: flex; align-items: center; gap: 5px; font-size: 10px; }
    .cm-live {
      width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
      flex-shrink: 0;
      box-shadow: 0 0 0 0 rgba(34,197,94,.5);
      animation: livePulse 2.4s ease-out infinite;
    }
    @keyframes livePulse {
      0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
      70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
      100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
    }
    .cm-txt  { color: rgba(255,255,255,.45); }
    .cm-strong { color: rgba(255,255,255,.75); font-weight: 700; }
    .cm-stars { color: #FBBF24; letter-spacing: -.05em; font-size: 11px; }
    .cm-rating { color: rgba(255,255,255,.65); font-weight: 700; }

    /* ── Trend chart in hero card ── */
    .card-chart-wrap {
      margin: 10px 0 14px;
      padding: 10px 12px 8px;
      background: rgba(0,107,255,.05);
      border-radius: 8px;
      border: 1px solid rgba(0,107,255,.14);
    }
    .card-chart { width: 100%; height: auto; display: block; overflow: visible; }
    .cc-area  { opacity: 0; animation: ccFade 1.4s ease .9s forwards; }
    .cc-line  { stroke-dasharray: 440; stroke-dashoffset: 440; animation: ccDraw 1.8s cubic-bezier(.4,0,.2,1) .3s forwards; }
    .cc-dot   { opacity: 0; animation: ccPop  .4s ease 2.1s forwards; }
    .cc-pulse { opacity: 0; transform-origin: 220px 5px; animation: ccPulse 2s ease-out 2.3s infinite; }
    .cc-foot  {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 9.5px; color: rgba(255,255,255,.28); margin-top: 5px;
      font-weight: 500; letter-spacing: .025em;
    }
    .cc-foot-label { color: rgba(0,198,255,.55); font-weight: 700; }
    @keyframes ccDraw  { to { stroke-dashoffset: 0; } }
    @keyframes ccFade  { to { opacity: 1; } }
    @keyframes ccPop   { to { opacity: 1; } }
    @keyframes ccPulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }


    .ring {
      position: absolute;
      border: 1px solid;
      border-radius: 50%;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      pointer-events: none;
    }

    /* ── TRUSTED ────────────────────────────────────────── */
    #trusted {
      position: relative;
      overflow: hidden;
      padding: 32px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    #trusted::after {
      content: '';
      position: absolute;
      top: 0; left: -40%;
      width: 28%; height: 100%;
      background: linear-gradient(100deg, transparent, rgba(0,150,255,.10), transparent);
      pointer-events: none;
      animation: logoSweep 9s ease-in-out infinite;
    }
    @keyframes logoSweep {
      0%   { left: -40%; }
      20%  { left: 130%; }
      100% { left: 130%; }
    }
    .trust-lbl {
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .16em;
      color: var(--txt3);
      margin-bottom: 18px;
    }
    /* continuous looping logo marquee */
    .trust-marquee {
      overflow: hidden;
      width: 100%;
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }
    .trust-track {
      display: flex;
      width: max-content;
      animation: trustLoop 24s linear infinite;
      will-change: transform;
    }
    .trust-track:hover { animation-play-state: paused; }
    @keyframes trustLoop {
      from { transform: translateX(0); }
      to   { transform: translateX(-25%); }
    }
    .trust-row {
      display: flex;
      align-items: center;
      gap: 52px;
      flex-shrink: 0;
      padding: 0 26px;
    }
    .trust-logo {
      display: flex; align-items: center; gap: 10px;
      opacity: .85;
      transition: opacity var(--t), transform var(--t);
      cursor: default; user-select: none;
    }
    .trust-logo:hover { opacity: 1; transform: translateY(-2px); }
    .trust-logo svg { flex-shrink: 0; height: 28px; width: auto; }
    .trust-logo span { font-size: 19px; font-weight: 800; letter-spacing: .02em; color: #fff; white-space: nowrap; }

    /* ── SECTION SHARED ─────────────────────────────────── */
    section { padding: 72px 0; position: relative; z-index: 1; }

    .sec-hd {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 36px;
    }
    .sec-title {
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: 900;
      letter-spacing: -.028em;
      line-height: 1.08;
    }
    .sec-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--blue-lt);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      flex-shrink: 0;
      transition: gap var(--t);
    }
    .sec-link:hover { gap: 10px; }

    /* ── PROGRAMS ───────────────────────────────────────── */
    #programs { background: linear-gradient(180deg, rgba(0,40,120,.06) 0%, transparent 100%); }

    .prog-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 20px;
    }
    .prog-card {
      padding: 24px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    }
    .prog-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 64px rgba(0,107,255,.18),
                  0 0 0 1px rgba(0,107,255,.25);
      border-color: rgba(0,107,255,.3);
    }
    .prog-ico {
      width: 40px; height: 40px;
      border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
      background: var(--grad);
    }
    .prog-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
    .prog-card p { font-size: 13px; color: var(--txt2); line-height: 1.6; margin-bottom: 12px; }
    .prog-meta { font-size: 11px; color: var(--txt3); font-weight: 600; letter-spacing: .04em; margin-bottom: 14px; }
    .prog-foot { display: flex; align-items: center; justify-content: space-between; }
    .prog-foot span { font-size: 13px; font-weight: 600; color: var(--blue-lt); }
    .circle-btn {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(37,99,255,.1);
      border: 1px solid rgba(37,99,255,.2);
      display: flex; align-items: center; justify-content: center;
      color: var(--blue-lt);
      transition: all var(--t);
    }
    .circle-btn svg { transition: transform .3s ease; }
    .prog-card:hover .circle-btn { background: var(--blue); border-color: var(--blue); color: #fff; }
    .prog-card:hover .circle-btn svg { transform: translate(2px,-2px); }

    /* ── PATHWAYS ───────────────────────────────────────── */
    #pathways {
      background: linear-gradient(180deg, rgba(0,20,80,.08) 0%, rgba(0,5,20,.04) 100%);
      border-top: 1px solid rgba(0,107,255,.1);
      border-bottom: 1px solid rgba(0,107,255,.1);
    }

    .path-grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 40px;
      align-items: start;
    }
    .path-left h2 { font-size: clamp(24px,2.6vw,32px); font-weight: 900; letter-spacing: -.022em; line-height: 1.15; margin-bottom: 12px; }
    .path-left p { font-size: 14px; color: var(--txt2); line-height: 1.65; margin-bottom: 20px; }

    .path-cards { display: flex; flex-direction: column; gap: 14px; }

    .path-card {
      padding: 16px 20px;
      transition: border-color var(--t), box-shadow var(--t);
    }
    .path-card:hover { border-color: var(--border2); box-shadow: 0 0 40px rgba(37,99,255,.1); }

    .path-hd { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
    .path-ico {
      width: 34px; height: 34px;
      border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .path-hd b { font-size: 15px; font-weight: 700; }

    .steps { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .chip {
      padding: 5px 11px;
      border-radius: var(--r-pill);
      font-size: 11px;
      font-weight: 600;
      background: rgba(37,99,255,.08);
      border: 1px solid rgba(37,99,255,.18);
      color: var(--txt2);
      white-space: nowrap;
      transition: border-color var(--t);
    }
    .chip.start { background: rgba(37,99,255,.18); border-color: rgba(37,99,255,.38); color: var(--blue-lt); }
    .chip.end { background: linear-gradient(130deg,rgba(37,99,255,.22),rgba(109,40,255,.22)); border-color: rgba(109,40,255,.38); color: var(--txt); font-weight: 700; }
    .arr { font-size: 11px; color: var(--txt3); }

    /* ── WHY ────────────────────────────────────────────── */
    #why { position: relative; overflow: hidden; background: rgba(0,10,40,.05); }
    .why-hd { text-align: center; margin-bottom: 36px; }
    .why-hd p { font-size: 15px; color: rgba(255,255,255,.6); margin-top: 10px; }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 16px;
    }
    .why-card {
      padding: 24px 20px;
      text-align: center;
      transition: all var(--t);
    }
    .why-card:hover {
      transform: translateY(-6px);
      border-color: rgba(0,107,255,.3);
      box-shadow: 0 20px 48px rgba(0,107,255,.14),
                  0 0 0 1px rgba(0,107,255,.18);
    }
    .why-ico {
      width: 46px; height: 46px;
      background: linear-gradient(130deg,rgba(0,60,255,.18),rgba(0,198,255,.18));
      border: 1px solid rgba(0,107,255,.22);
      border-radius: 13px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 14px;
      color: var(--blue-lt);
    }
    .why-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
    .why-card p { font-size: 12px; color: var(--txt2); line-height: 1.6; }

    /* ── OUTCOMES ───────────────────────────────────────── */
    #outcomes {
      background: linear-gradient(180deg, rgba(0,30,100,.1) 0%, rgba(0,10,50,.06) 100%);
      border-top: 1px solid rgba(0,107,255,.1);
    }
    .out-hd { text-align: center; margin-bottom: 32px; }

    .out-grid {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 16px;
    }
    .out-card {
      padding: 36px 24px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: all var(--t);
    }
    .out-card::before {
      content: '';
      position: absolute;
      top: 0; left: 50%; transform: translateX(-50%);
      width: 38%; height: 2px;
      background: linear-gradient(90deg,transparent,var(--blue),transparent);
    }
    .out-card:hover { border-color: rgba(37,99,255,.25); box-shadow: 0 0 44px rgba(37,99,255,.1); }
    .out-num {
      font-size: 52px; font-weight: 900; line-height: 1;
      background: var(--grad);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      margin-bottom: 8px;
      filter: drop-shadow(0 0 12px rgba(0,150,255,.3));
    }
    .out-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
    .out-card p { font-size: 12px; color: var(--txt3); }

    /* ── TESTIMONIALS ───────────────────────────────────── */
    .test-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 16px;
    }
    .test-card {
      padding: 24px;
      display: flex;
      flex-direction: column;
      transition: all var(--t);
    }
    .test-card:hover {
      transform: translateY(-6px);
      border-color: rgba(0,107,255,.28);
      box-shadow: 0 22px 52px rgba(0,107,255,.14),
                  0 0 0 1px rgba(0,107,255,.16);
    }
    .q-ico {
      width: 34px; height: 34px;
      background: rgba(37,99,255,.1);
      border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      color: var(--blue-lt);
      margin-bottom: 14px;
    }
    .test-text { font-size: 13px; color: var(--txt2); line-height: 1.72; flex: 1; margin-bottom: 16px; }
    .stars { color: #F59E0B; font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; }
    .test-foot { display: flex; align-items: center; gap: 11px; }
    .avatar {
      width: 38px; height: 38px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 13px;
      flex-shrink: 0;
    }
    .test-foot b { display: block; font-size: 13px; font-weight: 700; }
    .test-foot small { font-size: 11px; color: var(--txt3); }

    /* ── FOUNDER ────────────────────────────────────────── */
    #founder { position: relative; overflow: hidden; }

    .founder-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 48px;
      align-items: flex-start;
    }
    .founder-img-wrap { position: relative; }
    .founder-placeholder {
      width: 100%; aspect-ratio: 5/4;
      border-radius: var(--r);
      background: linear-gradient(145deg, rgba(37,99,255,.12), rgba(109,40,255,.12));
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 72px;
      position: relative;
      overflow: hidden;
    }
    .founder-placeholder img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 25%;
      position: relative;
      z-index: 1;
    }
    .founder-placeholder::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(circle at 50% 40%, rgba(37,99,255,.1), transparent 60%);
      z-index: 2;
      pointer-events: none;
    }
    .founder-namecard {
      position: absolute;
      bottom: 18px; left: 18px; right: 18px;
      padding: 14px 16px;
      background: rgba(5,5,5,.9);
      backdrop-filter: blur(14px);
      border: 1px solid var(--border);
      border-radius: 14px;
      display: flex; align-items: center; gap: 11px;
    }
    .founder-av {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: linear-gradient(130deg,#003CFF,#00C6FF);
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 13px;
      flex-shrink: 0;
    }
    .founder-namecard b { display: block; font-size: 14px; font-weight: 700; }
    .founder-namecard small { font-size: 11px; color: var(--txt3); }

    .f-lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--blue-lt); margin-bottom: 12px; }
    .f-title { font-size: clamp(22px,2.8vw,34px); font-weight: 900; letter-spacing: -.02em; line-height: 1.18; margin-bottom: 18px; }
    .f-text { font-size: 14px; color: var(--txt2); line-height: 1.72; margin-bottom: 20px; }
    .f-points { display: flex; flex-direction: column; gap: 9px; }
    .f-pt { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600; }
    .f-pt-ico {
      width: 28px; height: 28px;
      background: rgba(37,99,255,.1);
      border: 1px solid rgba(37,99,255,.2);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      color: var(--blue-lt);
      flex-shrink: 0;
    }

    /* ── CTA BANNER ─────────────────────────────────────── */
    #cta { padding: 56px 0; }
    .cta-box {
      border-radius: 24px;
      padding: 64px 56px;
      text-align: center;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg,
        rgba(0,50,220,.18) 0%,
        rgba(0,100,255,.12) 50%,
        rgba(0,180,255,.1) 100%);
      border: 1px solid rgba(0,150,255,.22);
      box-shadow:
        0 0 0 1px rgba(0,107,255,.1),
        0 32px 80px rgba(0,50,200,.2),
        inset 0 1px 0 rgba(255,255,255,.08);
    }
    .cta-box::before {
      content: '';
      position: absolute;
      top: -50%; left: 50%; transform: translateX(-50%);
      width: 80%; height: 300px;
      background: radial-gradient(ellipse, rgba(0,107,255,.28), transparent 65%);
      pointer-events: none;
    }
    .cta-box::after {
      content: '';
      position: absolute;
      bottom: -30%; right: 10%;
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(0,198,255,.12), transparent 65%);
      pointer-events: none;
    }
    .cta-box h2 { font-size: clamp(28px,3.6vw,52px); font-weight: 900; letter-spacing: -.028em; margin-bottom: 12px; position: relative; }
    .cta-box p { font-size: 16px; color: rgba(255,255,255,.7); max-width: 520px; margin: 0 auto 32px; line-height: 1.65; position: relative; }
    .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
    .cta-btns .btn { padding: 13px 26px; font-size: 15px; }

    /* ── FOOTER ─────────────────────────────────────────── */
    footer {
      position: relative; z-index: 1;
      background: rgba(0,0,0,.25);
      border-top: 1px solid rgba(0,107,255,.12);
      padding: 48px 0 24px;
    }
    footer::before {
      content: '';
      position: absolute;
      top: 0; left: 15%; right: 15%; height: 1px;
      background: linear-gradient(90deg,transparent,rgba(0,150,255,.4),rgba(0,210,255,.25),transparent);
      pointer-events: none;
    }
    .ft-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 32px;
      margin-bottom: 28px;
    }
    .ft-brand p { font-size: 13px; color: var(--txt2); line-height: 1.65; margin-top: 12px; max-width: 230px; }
    .ft-social { display: flex; gap: 8px; margin-top: 16px; }
    .soc {
      width: 34px; height: 34px;
      background: rgba(255,255,255,.05);
      border: 1px solid var(--border);
      border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      color: var(--txt2);
      text-decoration: none;
      transition: all var(--t);
    }
    .soc:hover { background: rgba(37,99,255,.12); border-color: var(--border2); color: var(--blue-lt); }

    .ft-col h5 { font-size: 12px; font-weight: 700; letter-spacing: .07em; margin-bottom: 14px; }
    .ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .ft-col ul a { text-decoration: none; font-size: 13px; color: var(--txt2); transition: color var(--t); }
    .ft-col ul a:hover { color: var(--txt); }

    .ft-bot {
      border-top: 1px solid var(--border);
      padding-top: 22px;
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    }
    .ft-bot p { font-size: 12px; color: var(--txt3); }

    /* ── Hero ambient grid ── */
    .hero-grid-bg {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(0,107,255,.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,107,255,.038) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none; z-index: 0;
      animation: gridDrift 32s linear infinite;
    }
    @keyframes gridDrift {
      0%   { background-position: 0 0; }
      100% { background-position: 60px 60px; }
    }

    /* ══════════════════════════════════════════════════════════
       Card-scoped abstract backdrop (orb + mesh waves)
       Pure CSS/SVG, no images — ported from abstract-bg.html,
       rescaled to live entirely inside the hero card.
    ══════════════════════════════════════════════════════════ */
    .card-orb-wrap {
      position: absolute;
      bottom: -18%;
      right: -16%;
      width: 50%;
      height: 50%;
      opacity: .8;
      pointer-events: none;
    }
    .card-orb-halo {
      position: absolute;
      inset: -18%;
      border-radius: 50%;
      background: radial-gradient(circle,
        rgba(13, 126, 255, .22) 0%,
        rgba(124, 58, 237, .12) 45%,
        transparent 72%);
      filter: blur(26px);
      animation: orbHaloBreathe 6s ease-in-out infinite;
    }
    @keyframes orbHaloBreathe {
      0%, 100% { opacity: .8;  transform: scale(1); }
      50%      { opacity: 1;   transform: scale(1.07); }
    }
    .card-orb-rim {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(from 190deg at 50% 50%,
        transparent              0deg,
        rgba(20, 110, 200, .22)  30deg,
        rgba(50, 170, 255, .6)   70deg,
        rgba(80, 200, 255, .85)  120deg,
        rgba(165, 150, 255, .92) 155deg,
        rgba(205, 185, 255, 1)   170deg,
        rgba(120, 205, 255, .8)  188deg,
        rgba(35, 145, 225, .3)   215deg,
        transparent              250deg,
        transparent              360deg);
      mix-blend-mode: screen;
      filter: blur(3px);
      mask-image: radial-gradient(circle, transparent 58%, black 76%, black 100%);
      -webkit-mask-image: radial-gradient(circle, transparent 58%, black 76%, black 100%);
      animation: orbRimPulse 5s ease-in-out infinite;
    }
    @keyframes orbRimPulse {
      0%, 100% { opacity: .8; }
      50%      { opacity: 1; }
    }
    .card-orb-rim-soft {
      position: absolute;
      inset: -4%;
      border-radius: 50%;
      background: conic-gradient(from 190deg at 50% 50%,
        transparent 0deg,
        rgba(50, 170, 255, .35)  80deg,
        rgba(150, 160, 255, .5)  150deg,
        rgba(190, 175, 255, .65) 170deg,
        rgba(70, 180, 255, .35)  195deg,
        transparent 245deg,
        transparent 360deg);
      mix-blend-mode: screen;
      filter: blur(14px);
      mask-image: radial-gradient(circle, transparent 48%, black 72%, black 100%);
      -webkit-mask-image: radial-gradient(circle, transparent 48%, black 72%, black 100%);
      animation: orbRimPulse 5s ease-in-out infinite;
    }
    .card-orb-purple {
      position: absolute;
      top: -4%;
      left: 30%;
      width: 36%;
      height: 36%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(178, 110, 255, .6), transparent 72%);
      filter: blur(11px);
      mix-blend-mode: screen;
      animation: orbPurplePulse 5s ease-in-out infinite;
    }
    @keyframes orbPurplePulse {
      0%, 100% { opacity: .7; transform: scale(1); }
      50%      { opacity: 1;  transform: scale(1.1); }
    }
    .card-mesh-waves {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      mix-blend-mode: screen;
      pointer-events: none;
      opacity: .65;
      animation: cardMeshDrift 10s ease-in-out infinite;
    }
    @keyframes cardMeshDrift {
      0%, 100% { transform: translate(0, 0); opacity: .55; }
      50%      { transform: translate(5px, -4px); opacity: .75; }
    }
    .card-mesh-waves path {
      fill: none;
      stroke: #2a8fff;
      stroke-linecap: round;
    }

    /* ── Full-page data network canvas ── */
    #bgNetwork {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    /* ── RESPONSIVE ─────────────────────────────────────── */
    @media (max-width: 1024px) {
      .why-grid  { grid-template-columns: repeat(2,1fr); }
      .out-grid  { grid-template-columns: repeat(2,1fr); }
      .prog-grid { grid-template-columns: repeat(2,1fr); }
      .ft-grid   { grid-template-columns: 1fr 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .nav-right { display: none; }
      .burger { display: flex; }
      .hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
      .hero-feats { max-width: 340px; margin-left: auto; margin-right: auto; }
      .hero-btns { justify-content: center; }
      .hero-right { order: -1; }
      .prog-grid { grid-template-columns: 1fr; }
      .path-grid { grid-template-columns: 1fr; gap: 24px; }
      .test-grid { grid-template-columns: 1fr; }
      .founder-grid { grid-template-columns: 1fr; gap: 32px; }
      .why-grid { grid-template-columns: 1fr 1fr; }
      .out-grid { grid-template-columns: repeat(2,1fr); }
      .ft-grid { grid-template-columns: 1fr 1fr; }
      .sec-hd { flex-direction: column; align-items: flex-start; }
      .cta-box { padding: 36px 24px; }
      section { padding: 52px 0; }
      #hero { min-height: auto; padding: 100px 0 52px; }
    }
    @media (max-width: 480px) {
      .why-grid { grid-template-columns: 1fr; }
      .ft-grid  { grid-template-columns: 1fr; }
      .trust-row { gap: 18px; }
    }

    /* ── Respect reduced-motion preference ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }
      .rv { opacity: 1 !important; transform: none !important; }
    }

    /* ════════════════════════════════════════════════════
       INNER PAGE HELPERS  (added for subpages)
       ════════════════════════════════════════════════════ */
    .subhero {
      padding: 150px 0 64px;
      position: relative;
      z-index: 1;
      background: linear-gradient(180deg, rgba(0,50,150,.10) 0%, transparent 100%);
      border-bottom: 1px solid var(--border);
    }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 7px 16px; border-radius: var(--r-pill);
      background: rgba(0,107,255,.10);
      border: 1px solid rgba(0,107,255,.30);
      color: var(--blue-lt);
      font-size: 12px; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; margin-bottom: 22px;
    }
    .subhero h1 {
      font-size: clamp(34px, 5vw, 66px);
      font-weight: 900; letter-spacing: -.03em; line-height: 1.05;
      max-width: 16ch;
    }
    .lead {
      font-size: clamp(15px, 1.6vw, 19px);
      color: var(--txt2); line-height: 1.7;
      max-width: 60ch; margin-top: 22px;
    }
    .crumb { font-size: 12px; color: var(--txt3); margin-bottom: 26px; letter-spacing: .04em; }
    .crumb a { color: var(--txt3); text-decoration: none; }
    .crumb a:hover { color: var(--blue-lt); }

    .prose { max-width: 70ch; }
    .prose p { color: var(--txt2); font-size: 15px; line-height: 1.8; margin-bottom: 18px; }
    .prose h2 { font-size: clamp(22px,2.6vw,32px); font-weight: 800; letter-spacing: -.02em; margin: 8px 0 16px; }
    .prose h3 { font-size: 18px; font-weight: 700; margin: 26px 0 10px; }
    .prose strong { color: var(--txt); }

    .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
    .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
    @media (max-width: 980px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

    .info-card { padding: 28px 24px; transition: all var(--t); }
    .info-card:hover { transform: translateY(-5px); border-color: rgba(0,107,255,.3);
      box-shadow: 0 20px 48px rgba(0,107,255,.14), 0 0 0 1px rgba(0,107,255,.18); }
    .info-card .why-ico { margin: 0 0 14px; }
    .info-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
    .info-card p { font-size: 13px; color: var(--txt2); line-height: 1.65; }

    .stat-card { padding: 34px 24px; text-align: center; position: relative; overflow: hidden; transition: all var(--t); }
    .stat-card::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
      width:38%; height:2px; background:linear-gradient(90deg,transparent,var(--blue),transparent); }
    .stat-card:hover { border-color: rgba(37,99,255,.25); box-shadow: 0 0 44px rgba(37,99,255,.1); }
    .stat-num { font-size: clamp(38px,4vw,54px); font-weight: 900; line-height: 1;
      background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .stat-lbl { font-size: 13px; color: var(--txt2); margin-top: 10px; }

    /* timeline / milestones */
    .timeline { position: relative; padding-left: 30px; }
    .timeline::before { content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
      background: linear-gradient(180deg,var(--blue),rgba(0,198,255,.2)); }
    .tl-item { position: relative; padding-bottom: 30px; }
    .tl-item::before { content:''; position:absolute; left:-30px; top:4px; width:16px; height:16px; border-radius:50%;
      background: var(--bg); border: 2px solid var(--blue-lt); box-shadow: 0 0 12px var(--glow); }
    .tl-year { font-size: 13px; font-weight: 800; color: var(--blue-lt); letter-spacing:.08em; }
    .tl-item h3 { font-size: 16px; font-weight: 700; margin: 4px 0 6px; }
    .tl-item p { font-size: 13px; color: var(--txt2); line-height: 1.65; max-width: 60ch; }

    /* story card */
    .story-card { padding: 30px 28px; display:flex; flex-direction:column; gap:16px; transition: all var(--t); }
    .story-card:hover { transform: translateY(-5px); border-color: rgba(0,107,255,.3);
      box-shadow: 0 20px 48px rgba(0,107,255,.14); }
    .story-quote { font-size: 15px; line-height: 1.7; color: var(--txt); }
    .story-person { display:flex; align-items:center; gap:13px; margin-top:auto; }
    .story-av { width:46px; height:46px; border-radius:50%; flex-shrink:0;
      background: var(--grad); display:flex; align-items:center; justify-content:center;
      font-weight:800; font-size:16px; color:#fff; }
    .story-name { font-size:14px; font-weight:700; }
    .story-role { font-size:12px; color: var(--txt2); }
    .story-move { font-size:12px; color: var(--blue-lt); font-weight:600; margin-top:2px; }

    /* contact form */
    .form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
    @media (max-width: 760px){ .form-grid { grid-template-columns: 1fr; } }
    .field { display:flex; flex-direction:column; gap:7px; }
    .field.full { grid-column: 1 / -1; }
    .field label { font-size: 12px; font-weight: 600; color: var(--txt2); letter-spacing:.03em; }
    .field input, .field select, .field textarea {
      width:100%; padding: 13px 15px; border-radius: var(--r-sm);
      background: rgba(255,255,255,.04); border: 1px solid var(--border);
      color: var(--txt); font-family: inherit; font-size: 14px; transition: all var(--t);
    }
    .field textarea { resize: vertical; min-height: 120px; }
    .field input:focus, .field select:focus, .field textarea:focus {
      outline: none; border-color: var(--border2); background: rgba(0,107,255,.05);
      box-shadow: 0 0 0 3px rgba(0,107,255,.12);
    }
    .field select option { background: var(--bg2); }
    .contact-line { display:flex; align-items:center; gap:14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
    .contact-line:last-child { border-bottom: none; }
    .contact-ico { width:42px; height:42px; flex-shrink:0; border-radius:12px;
      background: linear-gradient(130deg,rgba(0,60,255,.18),rgba(0,198,255,.18));
      border:1px solid rgba(0,107,255,.22); display:flex; align-items:center; justify-content:center; color: var(--blue-lt); }
    .contact-line h4 { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
    .contact-line p { font-size: 13px; color: var(--txt2); }

    .section-pad { padding: 72px 0; position: relative; z-index: 1; }
    .center-hd { text-align: center; max-width: 56ch; margin: 0 auto 44px; }
    .center-hd .sec-title { margin: 0 auto; }
    .center-hd p { color: var(--txt2); margin-top: 16px; font-size: 15px; line-height: 1.7; }

    .cta-band { text-align:center; padding: 60px 40px; margin-top: 8px; }
    .cta-band h2 { font-size: clamp(24px,3vw,40px); font-weight: 900; letter-spacing:-.02em; }
    .cta-band p { color: var(--txt2); margin: 14px auto 26px; max-width: 52ch; }
    .cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

    .pill-list { display:flex; flex-wrap:wrap; gap:10px; margin-top: 20px; }
    .pill-list .chip { cursor: default; }

    .nav-links a.active { color: var(--txt); }
    .nav-links a.active::after { width: 100%; }

    .feature-split { display:grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: center; }
    @media (max-width: 860px){ .feature-split { grid-template-columns: 1fr; gap: 28px; } }