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

    /* ─── Brand tokens ─── */
    :root {
      --dark:        #0A0F2E;
      --navy:        #101540;
      --blue:        #2B4FFF;
      --blue-hover:  #1F3EE0;
      --blue-mid:    #6680FF;
      --blue-pale:   #EEF1FF;
      --blue-border: #C8D1FB;
      --white:       #FFFFFF;
      --off-white:   #F7F8FF;
      --text:        #0A0F2E;
      --muted:       #5C647A;
      --border:      #E2E5F0;
      --radius:      12px;
      --shadow:      0 4px 28px rgba(10,15,46,0.10);
      --shadow-sm:   0 2px 12px rgba(10,15,46,0.06);
    }

    @media (prefers-reduced-motion: no-preference) {
      html { scroll-behavior: smooth; }
    }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--blue); outline-offset: 2px;
    }
    .section--dark :focus-visible, .section--navy :focus-visible, .section--blue :focus-visible,
    .site-footer :focus-visible, .home-v3 :focus-visible {
      outline-color: #8FA3FF;
    }
    body {
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--text);
      background: var(--white);
      line-height: 1.65;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
    }
    h1,h2,h3,h4,h5 { color: var(--dark); font-weight: 700; line-height: 1.2; }
    h1 { font-weight: 800; }
    h2 { font-weight: 700; }
    p { margin-bottom: 1rem; }
    p:last-child { margin-bottom: 0; }
    a { color: var(--blue); text-decoration: none; }
    a:hover { color: var(--blue-hover); }

    /* ─── Layout ─── */
    .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
    .section { padding: 88px 0; }
    .section--pale { background: var(--off-white); }
    .section--dark { background: var(--dark); }
    .section--navy { background: var(--navy); }
    .section--blue { background: var(--blue); }

    /* ─── Header ─── */
    .site-header {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0; z-index: 100;
    }
    .header-inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 68px;
    }
    /* Logo */
    .logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
    .logo-icon { width: 32px; height: 32px; flex-shrink: 0; }
    .logo-text {
      font-size: 1.2rem; font-weight: 700; color: var(--dark); letter-spacing: -0.3px;
    }
    /* Nav */
    .nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
    .nav-links a {
      font-size: 0.88rem; font-weight: 500; color: var(--muted);
      padding: 6px 12px; border-radius: 8px; transition: all 0.15s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--dark); background: var(--off-white); }
    /* Mobile menu toggle (hamburger) — hidden on desktop, shown ≤768px */
    .nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; padding: 9px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
    .nav-toggle-bar { display: block; width: 24px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
    .site-header.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
    .site-header.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-cta {
      background: var(--blue) !important; color: var(--white) !important;
      padding: 8px 20px !important; border-radius: 8px !important; font-weight: 600 !important;
    }
    .nav-cta:hover { background: var(--blue-hover) !important; }

    /* ─── Buttons ─── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 26px; border-radius: 8px; font-weight: 600;
      font-family: 'Outfit', sans-serif; font-size: 0.95rem;
      cursor: pointer; transition: all 0.18s; border: none; text-decoration: none;
    }
    .btn-blue { background: var(--blue); color: white; }
    .btn-blue:hover { background: var(--blue-hover); color: white; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(43,79,255,0.3); }
    .btn-white { background: white; color: var(--dark); }
    .btn-white:hover { background: var(--off-white); }
    .btn-outline-white { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.4); }
    .btn-outline-white:hover { border-color: white; background: rgba(255,255,255,0.1); }
    .btn-outline-blue { background: transparent; color: var(--blue); border: 1.5px solid var(--blue-border); }
    .btn-outline-blue:hover { background: var(--blue-pale); }

    /* ─── Pages ─── */
    .page { display: none; }
    .page.active { display: block; }

    /* ─── Hero ─── */
    .hero {
      background: var(--dark);
      padding: 110px 0 100px; position: relative; overflow: hidden;
    }
    .hero-bg {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(43,79,255,0.18) 0%, transparent 70%),
                  radial-gradient(ellipse 40% 40% at 90% 80%, rgba(102,128,255,0.12) 0%, transparent 60%);
    }
    .hero-inner { position: relative; z-index: 1; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(43,79,255,0.15); border: 1px solid rgba(43,79,255,0.3);
      color: #8FA8FF; padding: 6px 14px; border-radius: 100px;
      font-size: 0.82rem; font-weight: 500; margin-bottom: 32px;
    }
    .hero-badge::before {
      content: ''; width: 6px; height: 6px; background: var(--blue);
      border-radius: 50%; display: inline-block;
    }
    .hero h1 {
      font-size: 3.8rem; color: white; line-height: 1.08;
      max-width: 720px; margin-bottom: 24px; font-weight: 800; letter-spacing: -1.5px;
    }
    .hero h1 em { color: var(--blue-mid); font-style: normal; }
    .hero .lead {
      font-size: 1.1rem; color: rgba(255,255,255,0.65); max-width: 520px;
      margin-bottom: 40px; line-height: 1.7; font-weight: 400;
    }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

    /* ─── Stat strip ─── */
    .stat-strip { background: var(--blue-pale); border-bottom: 1px solid var(--blue-border); padding: 36px 0; }
    .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
    .stat-item {
      text-align: center; padding: 8px 20px;
      border-right: 1px solid var(--blue-border);
    }
    .stat-item:last-child { border-right: none; }
    .stat-value { font-size: 2.4rem; font-weight: 800; color: var(--blue); line-height: 1; letter-spacing: -1px; }
    .stat-label { font-size: 0.82rem; color: var(--muted); margin-top: 6px; font-weight: 400; }

    /* ─── Section header ─── */
    .sec-head { margin-bottom: 56px; }
    .sec-head--center { text-align: center; }
    .sec-head--center p { margin: 0 auto; }
    .eyebrow {
      font-size: 0.75rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--blue); margin-bottom: 14px;
    }
    .sec-head h2 { font-size: 2.4rem; margin-bottom: 16px; letter-spacing: -0.5px; }
    .sec-head p { font-size: 1.05rem; color: var(--muted); max-width: 540px; line-height: 1.7; }

    /* ─── Cards ─── */
    .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
    .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
    .card {
      background: var(--white); border-radius: var(--radius);
      border: 1px solid var(--border); padding: 36px 32px;
      box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, transform 0.2s;
    }
    .card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
    .card-icon {
      width: 48px; height: 48px; background: var(--blue-pale); border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; margin-bottom: 20px;
    }
    .card h3 { font-size: 1.1rem; margin-bottom: 10px; }
    .card p { font-size: 0.93rem; color: var(--muted); line-height: 1.65; }

    /* ─── Feature list ─── */
    .feat-list { list-style: none; }
    .feat-list li {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem;
    }
    .feat-list li:last-child { border-bottom: none; }
    .feat-list .chk { color: var(--blue); font-size: 1rem; margin-top: 2px; flex-shrink: 0; font-weight: 700; }

    /* ─── Two-col ─── */
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    .two-col--wide { grid-template-columns: 1.15fr 0.85fr; }
    .two-col h2 { font-size: 2rem; margin-bottom: 18px; letter-spacing: -0.3px; }
    .two-col p { color: var(--muted); font-size: 0.97rem; }

    /* ─── Process steps ─── */
    .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; position: relative; }
    .steps::before {
      content: ''; position: absolute; top: 34px; left: 16%; right: 16%;
      height: 1px; background: var(--blue-border); z-index: 0;
    }
    .step { text-align: center; padding: 0 28px; position: relative; z-index: 1; }
    .step-num {
      width: 68px; height: 68px; background: var(--blue); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; font-weight: 800; color: white; margin: 0 auto 24px;
      box-shadow: 0 0 0 6px var(--blue-pale);
    }
    .step h3 { font-size: 1.15rem; margin-bottom: 12px; }
    .step p { font-size: 0.93rem; color: var(--muted); }

    /* ─── Inset box ─── */
    .inset {
      background: var(--blue-pale); border: 1px solid var(--blue-border);
      border-radius: var(--radius); padding: 32px 36px;
    }
    .inset-dark {
      background: var(--dark); border-radius: var(--radius); padding: 36px;
    }
    .inset-dark h3 { color: white; }
    .inset-dark p { color: rgba(255,255,255,0.65); font-size: 0.95rem; }

    /* ─── Blue callout ─── */
    .callout {
      background: var(--blue); border-radius: var(--radius); padding: 32px 36px;
    }
    .callout h3 { color: white; font-size: 1.05rem; margin-bottom: 8px; }
    .callout p { color: rgba(255,255,255,0.8); font-size: 0.92rem; margin: 0; }

    /* ─── Highlight strip ─── */
    .hl-strip {
      background: var(--blue-pale); border: 1px solid var(--blue-border);
      border-radius: var(--radius);
      padding: 24px 28px; margin: 28px 0;
    }
    .hl-strip p { font-size: 1rem; color: var(--dark); }
    .hl-strip strong { color: var(--blue-hover); }

    /* ─── Then / Now ─── */
    .then-now { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .then-card { background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; }
    .now-card { background: var(--dark); border-radius: var(--radius); padding: 36px; }
    .then-card .label { font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
    .now-card .label { font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue-mid); margin-bottom: 12px; }
    .then-card h2, .now-card h2 { font-size: 1.4rem; margin-bottom: 14px; }
    .now-card h2 { color: white; }
    .then-card p { color: var(--muted); font-size: 0.95rem; }
    .now-card p { color: rgba(255,255,255,0.65); font-size: 0.95rem; }

    /* ─── Sector cards ─── */
    .sector-card {
      background: white; border-radius: var(--radius);
      border: 1px solid var(--border); overflow: hidden;
      box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s;
    }
    .sector-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .sector-hd { background: var(--dark); padding: 28px; display: flex; align-items: center; gap: 16px; }
    .sector-hd .ico { font-size: 1.8rem; }
    .sector-hd h3 { color: white; font-size: 1.1rem; }
    .sector-hd .sub { color: rgba(255,255,255,0.45); font-size: 0.8rem; margin-top: 2px; }
    .sector-bd { padding: 24px 28px; }
    .sector-bd p { font-size: 0.93rem; color: var(--muted); margin-bottom: 16px; }
    .tags { display: flex; flex-wrap: wrap; gap: 7px; }
    .tag {
      background: var(--blue-pale); color: var(--blue-hover);
      padding: 4px 12px; border-radius: 100px; font-size: 0.78rem; font-weight: 500;
    }

    /* ─── Pricing ─── */
    .pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: start; }
    .price-card {
      background: white; border-radius: var(--radius); padding: 36px 32px;
      border: 1.5px solid var(--border); box-shadow: var(--shadow-sm);
    }
    .price-card.featured {
      border-color: var(--blue); background: var(--dark);
    }
    .price-card.featured h3,
    .price-card.featured .price-num,
    .price-card.featured .price-per,
    .price-card.featured .price-note { color: white; }
    .price-card.featured li { color: rgba(255,255,255,0.7) !important; border-color: rgba(255,255,255,0.1) !important; }
    .price-card.featured li::before { color: var(--blue-mid) !important; }
    .price-card.featured .pill { background: rgba(43,79,255,0.3) !important; color: #8FA8FF !important; }
    .pill {
      display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; background: var(--blue-pale); color: var(--blue);
      padding: 4px 12px; border-radius: 100px; margin-bottom: 16px;
    }
    .price-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
    .price-from { font-size: 0.82rem; color: var(--muted); }
    .price-num { font-size: 2.6rem; font-weight: 800; color: var(--dark); line-height: 1; letter-spacing: -1px; }
    .price-per { font-size: 1rem; font-weight: 400; color: var(--muted); }
    .price-note { font-size: 0.82rem; color: var(--muted); margin: 8px 0 24px; }
    .price-list { list-style: none; }
    .price-list li {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 0.9rem; color: var(--muted); padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }
    .price-list li:last-child { border-bottom: none; }
    .price-list li::before { content: '✓'; color: var(--blue); font-weight: 700; flex-shrink: 0; }
    .roi-band {
      background: var(--blue); border-radius: var(--radius); padding: 40px 48px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 32px; flex-wrap: wrap; margin-top: 48px;
    }
    .roi-band h3 { color: white; font-size: 1.35rem; margin-bottom: 8px; }
    .roi-band p { color: rgba(255,255,255,0.8); font-size: 0.95rem; max-width: 480px; margin: 0; }
    .roi-stats { display: flex; gap: 40px; flex-shrink: 0; }
    .roi-stat { text-align: center; }
    .roi-num { font-size: 3rem; font-weight: 800; color: white; line-height: 1; letter-spacing: -1px; }
    .roi-lbl { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 4px; }

    /* ─── FAQ ─── */
    .faq-wrap { max-width: 760px; margin: 0 auto; }
    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-btn {
      width: 100%; text-align: left; background: none; border: none; cursor: pointer;
      padding: 22px 0; display: flex; align-items: flex-start;
      justify-content: space-between; gap: 20px;
      font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 600;
      color: var(--dark); transition: color 0.15s;
    }
    .faq-btn:hover { color: var(--blue); }
    .faq-arr { font-size: 1rem; color: var(--blue); flex-shrink: 0; transition: transform 0.2s; margin-top: 2px; }
    .faq-item.open .faq-arr { transform: rotate(180deg); }
    .faq-body {
      display: none; padding: 0 0 22px;
      font-size: 0.95rem; color: var(--muted); line-height: 1.8;
    }
    .faq-item.open .faq-body { display: block; }

    /* ─── Glossary ─── */
    .gloss-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
    .g-tab {
      padding: 9px 22px; border-radius: 8px; font-weight: 600; font-size: 0.9rem;
      cursor: pointer; border: 1.5px solid var(--border); background: white; color: var(--muted);
      font-family: 'Outfit', sans-serif; transition: all 0.15s;
    }
    .g-tab:hover { border-color: var(--blue); color: var(--blue); }
    .g-tab.active { background: var(--blue); border-color: var(--blue); color: white; }
    .g-panel { display: none; }
    .g-panel.active { display: block; }
    .g-intro {
      background: var(--blue-pale); border: 1px solid var(--blue-border);
      border-radius: var(--radius); padding: 28px 32px; margin-bottom: 32px;
    }
    .g-intro h3 { color: var(--dark); font-size: 1.05rem; margin-bottom: 8px; }
    .g-intro p { color: var(--text); font-size: 0.95rem; margin: 0; }
    .g-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
    .g-term {
      background: white; border-radius: var(--radius); border: 1px solid var(--border);
      padding: 22px 26px; box-shadow: var(--shadow-sm);
    }
    .g-badge {
      display: inline-block; font-size: 0.68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1px;
      background: var(--blue-pale); color: var(--blue);
      padding: 2px 10px; border-radius: 100px; margin-bottom: 10px;
    }
    .g-term h4 { font-size: 0.97rem; color: var(--dark); margin-bottom: 7px; }
    .g-term p { font-size: 0.88rem; color: var(--muted); margin: 0; line-height: 1.65; }

    /* ─── About ─── */
    .founder-block {
      background: var(--dark); border-radius: var(--radius); padding: 48px;
      display: grid; grid-template-columns: 160px 1fr; gap: 48px; align-items: center;
    }
    .founder-avatar {
      width: 160px; height: 160px; border-radius: 50%;
      background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 3.5rem; font-weight: 800; color: white; flex-shrink: 0;
      border: 3px solid rgba(102,128,255,0.4);
    }
    .founder-block h3 { color: white; font-size: 1.5rem; margin-bottom: 4px; }
    .founder-block .role { color: var(--blue-mid); font-size: 0.85rem; font-weight: 600; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 1px; }
    .founder-block p { color: rgba(255,255,255,0.65); font-size: 0.95rem; }
    .quote-block {
      background: var(--blue-pale); border: 1px solid var(--blue-border);
      border-radius: var(--radius); padding: 32px 36px; margin: 40px 0;
    }
    .quote-block blockquote { font-size: 1.1rem; color: var(--dark); line-height: 1.75; margin-bottom: 12px; font-style: italic; font-weight: 400; }
    .quote-block cite { font-size: 0.88rem; color: var(--blue); font-weight: 600; font-style: normal; }
    .values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
    .val-card {
      text-align: center; padding: 32px 18px; background: white;
      border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    }
    .val-card .v-ico { font-size: 2.2rem; margin-bottom: 14px; }
    .val-card h4 { font-size: 0.97rem; margin-bottom: 8px; }
    .val-card p { font-size: 0.86rem; color: var(--muted); }

    /* ─── Compare table ─── */
    .cmp-table { width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; }
    .cmp-table th, .cmp-table td {
      padding: 14px 20px; text-align: left; font-size: 0.9rem;
      border-bottom: 1px solid var(--border);
    }
    .cmp-table th { background: var(--dark); color: white; font-weight: 600; }
    .cmp-table tr:last-child td { border-bottom: none; }
    .cmp-table tr:nth-child(even) td { background: var(--off-white); }
    .cmp-table .pos { color: var(--blue); font-weight: 600; }

    /* ─── Timeline ─── */
    .timeline { position: relative; padding-left: 44px; }
    .timeline::before {
      content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px;
      width: 2px; background: var(--blue-border); border-radius: 2px;
    }
    .tl-item { position: relative; padding-bottom: 44px; }
    .tl-item:last-child { padding-bottom: 0; }
    .tl-dot {
      position: absolute; left: -37px; top: 4px;
      width: 24px; height: 24px; border-radius: 50%;
      background: var(--blue); border: 3px solid white;
      box-shadow: 0 0 0 2px var(--blue); z-index: 1;
    }
    .tl-item h3 { font-size: 1.15rem; margin-bottom: 10px; }
    .tl-item p { color: var(--muted); font-size: 0.95rem; }

    /* ─── CTA strip ─── */
    .cta-strip { background: var(--dark); padding: 88px 0; text-align: center; position: relative; overflow: hidden; }
    .cta-strip::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(43,79,255,0.15) 0%, transparent 70%);
    }
    .cta-strip > .container { position: relative; z-index: 1; }
    .cta-strip h2 { color: white; font-size: 2.2rem; margin-bottom: 16px; letter-spacing: -0.5px; }
    .cta-strip p { color: rgba(255,255,255,0.6); font-size: 1rem; margin-bottom: 36px; max-width: 460px; margin-left: auto; margin-right: auto; }

    /* ─── Footer ─── */
    .site-footer { background: #070A1E; padding: 60px 0 32px; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 16px; line-height: 1.6; }
    .footer-col h5 { color: white; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; font-weight: 600; }
    .footer-col ul { list-style: none; }
    .footer-col ul li { margin-bottom: 10px; }
    .footer-col ul li a { color: rgba(255,255,255,0.6); font-size: 0.88rem; }
    .footer-col ul li a:hover { color: rgba(255,255,255,0.8); }
    .footer-bot { padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
    .footer-bot p { color: rgba(255,255,255,0.6); font-size: 0.82rem; }

    /* ─── News / Blog ─── */
    .news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
    .news-card {
      background: white; border-radius: var(--radius); border: 1px solid var(--border);
      overflow: hidden; box-shadow: var(--shadow-sm);
      transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column;
    }
    .news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .news-card-img {
      height: 180px; background: var(--dark); display: flex; align-items: center;
      justify-content: center; font-size: 2.5rem; position: relative; overflow: hidden;
    }
    .news-card-img .img-label {
      position: absolute; bottom: 12px; left: 16px;
      background: var(--blue); color: white; font-size: 0.72rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 100px;
    }
    .news-card-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; }
    .news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .news-cat {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
      color: var(--blue);
    }
    .news-date { font-size: 0.78rem; color: var(--muted); }
    .news-sep { color: var(--border); }
    .news-card h3 { font-size: 1.05rem; margin-bottom: 10px; line-height: 1.35; }
    .news-card p { font-size: 0.9rem; color: var(--muted); flex: 1; line-height: 1.65; }
    .news-read {
      display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
      font-size: 0.88rem; font-weight: 600; color: var(--blue);
    }
    .news-read:hover { color: var(--blue-hover); }
    /* Full article view */
    .article-wrap { max-width: 720px; margin: 0 auto; }
    .article-back {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.88rem; font-weight: 600; color: var(--muted);
      margin-bottom: 32px; cursor: pointer; background: none; border: none;
      font-family: 'Outfit', sans-serif;
    }
    .article-back:hover { color: var(--blue); }
    .article-wrap h1 { font-size: 2.2rem; letter-spacing: -0.5px; margin-bottom: 16px; }
    .article-meta { display: flex; gap: 16px; align-items: center; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .article-body h2 { font-size: 1.4rem; margin: 32px 0 14px; }
    .article-body h3 { font-size: 1.15rem; margin: 24px 0 10px; }
    .article-body p { color: var(--muted); font-size: 1rem; line-height: 1.8; }
    .article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 1rem; }
    .article-body li { color: var(--muted); font-size: 1rem; line-height: 1.8; margin-bottom: 6px; }
    .article-callout {
      background: var(--blue-pale); border: 1px solid var(--blue-border);
      border-radius: var(--radius); padding: 24px 28px; margin: 28px 0;
    }
    .article-callout p { color: var(--dark); font-size: 1rem; margin: 0; font-weight: 500; }

    /* ─── Use Cases ─── */
    .uc-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; }
    .uc-card {
      background: white; border-radius: var(--radius); border: 1px solid var(--border);
      overflow: hidden; box-shadow: var(--shadow-sm);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .uc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .uc-card-header {
      background: var(--dark); padding: 28px 32px;
      display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    }
    .uc-card-header h3 { color: white; font-size: 1.15rem; margin-bottom: 6px; }
    .uc-sector-tag {
      background: rgba(43,79,255,0.25); color: #8FA8FF;
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
      padding: 4px 12px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; margin-top: 2px;
    }
    .uc-card-body { padding: 28px 32px; }
    .uc-challenge { margin-bottom: 20px; }
    .uc-challenge .uc-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 8px; }
    .uc-challenge p { font-size: 0.93rem; color: var(--muted); }
    .uc-results { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 20px 0; }
    .uc-stat { background: var(--blue-pale); border-radius: 8px; padding: 14px 12px; text-align: center; }
    .uc-stat-val { font-size: 1.5rem; font-weight: 800; color: var(--blue); line-height: 1; letter-spacing: -0.5px; }
    .uc-stat-lbl { font-size: 0.75rem; color: var(--muted); margin-top: 4px; line-height: 1.3; }
    .uc-approach { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
    .uc-approach .uc-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 8px; }
    .uc-approach p { font-size: 0.93rem; color: var(--muted); }
    /* Placeholder state for use cases */
    .uc-placeholder {
      border: 2px dashed var(--blue-border); background: var(--blue-pale);
      border-radius: var(--radius); padding: 48px 32px; text-align: center;
    }
    .uc-placeholder .uc-ph-icon { font-size: 2.5rem; margin-bottom: 16px; }
    .uc-placeholder h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--dark); }
    .uc-placeholder p { font-size: 0.9rem; color: var(--muted); max-width: 360px; margin: 0 auto; }

    /* ─── Responsive ─── */
    @media (max-width: 1020px) {
      .grid-3 { grid-template-columns: repeat(2,1fr); }
      .pricing-grid { grid-template-columns: 1fr; }
      .values-grid { grid-template-columns: repeat(2,1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .g-grid { grid-template-columns: 1fr; }
      .news-grid { grid-template-columns: repeat(2,1fr); }
      .uc-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .hero h1 { font-size: 2.4rem; letter-spacing: -0.5px; }
      .two-col, .two-col--wide, .then-now { grid-template-columns: 1fr; gap: 36px; }
      .steps { grid-template-columns: 1fr; gap: 40px; }
      .steps::before { display: none; }
      .stat-grid { grid-template-columns: repeat(2,1fr); }
      .grid-3, .grid-2 { grid-template-columns: 1fr; }
      .founder-block { grid-template-columns: 1fr; text-align: center; }
      .nav-toggle { display: inline-flex; }
      .header-inner { position: relative; }
      .site-header nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 10px 26px rgba(10,15,46,.12); display: none; z-index: 95; max-height: calc(100vh - 64px); overflow-y: auto; }
      .site-header.nav-open nav { display: block; }
      .nav-links { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0; }
      .nav-links > li { width: 100%; }
      .nav-links > li > a, .site-header .nav-dropdown li a { display: block; padding: 13px 22px; border-radius: 0; font-size: 0.98rem; }
      .nav-cta { margin: 10px 18px 12px; text-align: center; }
      .site-header .nav-dropdown-trigger { display: none; }
      .site-header .nav-dropdown { display: block; position: static; border: 0; box-shadow: none; padding: 0; min-width: 0; background: transparent; border-radius: 0; }
      .container { padding: 0 20px; }
      .section { padding: 60px 0; }
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
      .roi-band { flex-direction: column; }
    }

    /* ─── Resources dropdown ─── */
    .nav-dropdown-wrap { position: relative; }
    .nav-dropdown-trigger {
      display: flex; align-items: center; gap: 4px; cursor: pointer;
      font-size: 0.88rem; font-weight: 500; color: var(--muted);
      padding: 6px 12px; border-radius: 8px; transition: all 0.15s; user-select: none;
      background: none; border: 0; font-family: inherit; line-height: inherit;
    }
    .nav-dropdown-trigger:hover,
    .nav-dropdown-trigger.active { color: var(--dark); background: var(--off-white); }
    .nav-dropdown-trigger .caret { font-size: 0.7rem; transition: transform 0.2s; display: inline-block; }
    .nav-dropdown-wrap.open .caret { transform: rotate(180deg); }
    .nav-dropdown {
      display: none; position: absolute; top: calc(100% + 6px); left: 0;
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--shadow);
      min-width: 160px; list-style: none; padding: 6px; z-index: 200;
    }
    .nav-dropdown-wrap.open .nav-dropdown { display: block; }
    .nav-dropdown li a {
      display: block; padding: 8px 12px; border-radius: 8px;
      font-size: 0.88rem; font-weight: 500; color: var(--muted);
      transition: all 0.15s; white-space: nowrap;
    }
    .nav-dropdown li a:hover,
    .nav-dropdown li a.active { color: var(--dark); background: var(--off-white); }
  
/* === article styles === */
.article{max-width:780px;margin:0 auto}
.article p,.article li{font-size:1.05rem;color:var(--text)}
.article h2{font-size:1.6rem;margin:40px 0 12px;color:var(--dark)}
.article h3{font-size:1.2rem;margin:26px 0 8px;color:var(--dark)}
.article ul,.article ol{margin:0 0 1.1rem 1.3rem}
.article li{margin-bottom:.5rem}
.article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.article th,.article td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.article th{background:var(--off-white);font-weight:600}
.article .callout{background:var(--blue-pale);border:1px solid var(--blue-border);border-radius:12px;padding:18px 20px;margin:24px 0;font-size:1rem}
.article .crumbs{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.article .crumbs a{color:var(--muted)}
.article .postmeta{color:var(--muted);font-size:.92rem;margin-bottom:18px}
.article .lead{font-size:1.22rem;color:var(--text);line-height:1.5;margin:14px 0 10px}
.article .cta-box{background:linear-gradient(160deg,var(--dark),var(--navy));color:#fff;border-radius:12px;padding:30px;margin:36px 0;text-align:center}
.article .cta-box h3{color:#fff;margin-top:0}
.article .cta-box p{color:#c3c9e8}
.article .author{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--border);margin-top:38px;padding-top:22px}
.article .author img{width:54px;height:54px;border-radius:50%;flex:none}
.article .author .nm{font-weight:700;color:var(--dark)}
.article .author .ti{color:var(--muted);font-size:.9rem}

/* === contact + cards === */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start;margin-top:24px}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
.contact-form label{display:block;font-size:.9rem;font-weight:600;margin:14px 0 6px;color:var(--dark)}
.contact-form input,.contact-form textarea{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:1rem;color:var(--text);background:#fff}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-pale)}
.contact-side{background:var(--off-white);border:1px solid var(--border);border-radius:12px;padding:22px;font-size:.95rem}
.contact-side h2{font-size:1rem;margin-bottom:6px}
.post-card{display:block;border:1px solid var(--border);border-radius:12px;padding:22px 24px;margin:8px 0 14px;text-decoration:none;color:inherit;transition:.15s;box-shadow:var(--shadow-sm)}
.post-card:hover{border-color:var(--blue-mid);transform:translateY(-2px)}
.post-card .tag{font-size:.72rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--blue)}
.post-card h2{font-size:1.3rem;margin:6px 0 6px;color:var(--dark)}
.post-card p{color:var(--muted);margin:0}

/* === case studies === */
.cs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 6px}
@media(max-width:760px){.cs-stats{grid-template-columns:repeat(2,1fr)}}
.cs-stat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 14px;text-align:center}
.cs-stat .n{font-size:1.55rem;font-weight:800;color:var(--blue);line-height:1.15}
.cs-stat .l{font-size:.8rem;color:var(--muted);margin-top:6px;line-height:1.3}
.cs-note{font-size:.82rem;color:var(--muted);margin-top:16px}
.cs-sec h3{margin-top:22px}

/* === case studies v2 === */
.cs-sec h3{margin-top:26px}
.cs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 6px}
@media(max-width:760px){.cs-stats{grid-template-columns:repeat(2,1fr)}}
.cs-stat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 14px;text-align:center}
.cs-stat .n{font-size:1.55rem;font-weight:800;color:var(--blue);line-height:1.15}
.cs-stat .l{font-size:.8rem;color:var(--muted);margin-top:6px;line-height:1.3}
.cs-note{font-size:.82rem;color:var(--muted);margin-top:16px}
.post-card{display:block;border:1px solid var(--border);border-radius:12px;padding:22px 24px;margin:8px 0 14px;text-decoration:none;color:inherit;transition:.15s;box-shadow:var(--shadow-sm)}
.post-card:hover{border-color:var(--blue-mid);transform:translateY(-2px)}
.post-card .tag{font-size:.72rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--blue)}
.post-card h2{font-size:1.3rem;margin:6px 0 6px;color:var(--dark)}
.post-card p{color:var(--muted);margin:0}
.pflow{margin:20px 0;background:var(--off-white);border:1px solid var(--border);border-radius:12px;padding:20px 18px}
.pflow--ai{background:#f1fbf9;border-color:#cdeae5}
.pflow-cap{font-size:.84rem;color:var(--muted);margin-bottom:16px}
.pflow-tag{display:inline-block;background:var(--dark);color:#fff;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:8px;margin-right:8px;vertical-align:middle}
.pflow--ai .pflow-tag{background:#0F9D58}
.pflow-track{display:flex;align-items:stretch;gap:4px}
.pnode{flex:1 1 0;min-width:0;background:#fff;border:1.5px solid var(--blue-border);border-radius:12px;padding:16px 10px 13px;text-align:center;box-shadow:0 2px 10px rgba(10,15,46,.06);position:relative}
.pnode-ico{font-size:1.55rem;line-height:1;margin-bottom:9px}
.pnode-t{font-size:.85rem;font-weight:700;color:var(--dark);line-height:1.2}
.pnode-d{font-size:.74rem;color:var(--muted);margin-top:5px;line-height:1.3}
.pnode.pain{border-color:#E9C7C2;background:#FCF6F5}
.pnode.ai{border-color:#CDEAE5;background:#F1FBF9}
.pnode .ai-badge{position:absolute;top:7px;right:7px;background:#0F9D58;color:#fff;font-size:.58rem;font-weight:700;padding:1px 6px;border-radius:100px}
.pconn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--blue-mid);font-size:1.4rem;font-weight:800}
.ptriage{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ptri{font-size:.76rem;padding:6px 12px;border-radius:8px;background:#fff;border:1px solid var(--border)}
.ptri-red b{color:#C0392B}.ptri-amber b{color:#C77700}.ptri-green b{color:#0F9D58}
@media(max-width:760px){.pflow-track{flex-direction:column;align-items:stretch}.pconn{transform:rotate(90deg);padding:3px 0}}

/* === news additions (Jul 2026) === */
.article figure{margin:26px 0}
.article figure img{width:100%;height:auto;border-radius:12px;display:block}
.article figcaption{font-size:.85rem;color:var(--muted);margin-top:10px}
.post-card .pdate{font-size:.78rem;color:var(--muted);margin-left:12px;letter-spacing:.02em}

/* === video embed === */
.video-frame{position:relative;max-width:860px;margin:0 auto;padding-bottom:min(56.25%,483px);height:0;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Desktop nav alignment: plain links are inline boxes while the dropdown
   triggers are <button> flex boxes, which made About/Resources sit ~1px high
   with a taller hover pill. Give every top-level item the same box model.
   Scoped to desktop so it cannot clash with the max-width:768px nav rules. */
@media (min-width: 769px){
  .nav-links > li > a,
  .nav-links > li > .nav-dropdown-trigger{ display:flex; align-items:center; line-height:1.3; }
}