:root {
     --blue: #0052e0;
     --blue-dk: #003db3;
     --blue-lt: #e8f0fe;
     --cyan: #2843dc;
     --violet: #a78bfa;
     --green: #10b981;
     --amber: #f59e0b;
     --red: #ef4444;
     --orange: #f97316;

     --bg: #ffffff;
     --bg2: #f8fafc;
     --bg3: #f1f5f9;
     --border: #e2e8f0;
     --border2: #cbd5e1;

     --text: #0f172a;
     --text2: #334155;
     --text3: #64748b;
     --text4: #94a3b8;

     --hero-bg: #050c1f;

     --radius-sm: 6px;
     --radius: 12px;
     --radius-lg: 20px;
     --radius-xl: 28px;

     --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
     --shadow: 0 4px 16px rgba(0, 0, 0, .08);
     --shadow-lg: 0 20px 48px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .06);

     --font: 'Plus Jakarta Sans', sans-serif;
 }

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

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font);
     color: var(--text);
     background: var(--bg);
     -webkit-font-smoothing: antialiased;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 svg {
     display: block;
     fill: none;
     stroke: currentColor;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .container {
     width: 100%;
     max-width: 1180px;
     margin: 0 auto;
     padding: 0 24px;
 }

 .sec {
     padding: 60px 0;
 }

 /* ─── SECTION TAG ─── */
 .section-tag {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: var(--blue-lt);
     color: var(--blue);
     font-size: .78rem;
     font-weight: 700;
     letter-spacing: .05em;
     text-transform: uppercase;
     padding: 6px 14px;
     border-radius: 999px;
     margin-bottom: 18px;
 }

 .section-tag svg {
     width: 13px;
     height: 13px;
     stroke-width: 2.5;
 }

 .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
     background-size: 60px 60px;
     mask-image: radial-gradient(ellipse 90% 80% at 55% 30%, #000 30%, transparent 100%);
     pointer-events: none;
 }

 /* ─── BUTTONS ─── */
 .btn-p {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     background: var(--blue);
     color: #fff;
     font-family: var(--font);
     font-size: .95rem;
     font-weight: 700;
     padding: 14px 26px;
     border-radius: var(--radius);
     border: none;
     cursor: pointer;
     transition: background .18s, transform .15s, box-shadow .18s;
     box-shadow: 0 4px 18px rgba(0, 82, 224, .28);
 }

 .btn-p:hover {
     background: var(--blue-dk);
     transform: translateY(-2px);
     box-shadow: 0 8px 28px rgba(0, 82, 224, .38);
 }

 .btn-p svg {
     width: 17px;
     height: 17px;
 }

 .btn-s {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     background: transparent;
     color: rgba(255, 255, 255, .8);
     font-family: var(--font);
     font-size: .95rem;
     font-weight: 600;
     padding: 13px 24px;
     border-radius: var(--radius);
     border: 1.5px solid rgba(255, 255, 255, .2);
     cursor: pointer;
     transition: border-color .18s, color .18s, transform .15s;
 }

 .btn-s:hover {
     border-color: rgba(255, 255, 255, .5);
     color: #fff;
     transform: translateY(-2px);
 }

 .btn-s svg {
     width: 17px;
     height: 17px;
 }

 .link-more {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: var(--blue);
     font-weight: 700;
     font-size: .9rem;
     transition: gap .18s;
 }

 .link-more:hover {
     gap: 10px;
 }

 .link-more svg {
     width: 16px;
     height: 16px;
 }

 /* ─── LAYOUT HELPERS ─── */
 .row-head {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 24px;
     margin-bottom: 17px;
     flex-wrap: wrap;
 }

 .sec-title {
     font-size: clamp(1.75rem, 2.8vw, 2.5rem);
     font-weight: 800;
     line-height: 1.2;
     letter-spacing: -.02em;
     color: var(--text);
     margin-bottom: 12px;
 }

 .sec-sub {
     font-size: 1rem;
     line-height: 1.7;
     color: var(--text3);
     max-width: 560px;
 }

 /* ─── REVEAL ─── */
 .rv {
     opacity: 0;
     transform: translateY(22px);
     transition: opacity .6s ease, transform .6s ease;
 }

 .rv.visible {
     opacity: 1;
     transform: none;
 }

 /* ══════════════════════════════════════════
       1. HERO
    ══════════════════════════════════════════ */
 .hero-wrap {
     background: var(--hero-bg);
     position: relative;
     overflow: hidden;
 }

 .hglow {
     position: absolute;
     border-radius: 50%;
     filter: blur(90px);
     pointer-events: none;
 }

 .hg1 {
     width: 640px;
     height: 640px;
     background: rgba(0, 82, 224, .2);
     top: -160px;
     left: -120px;
 }

 .hg2 {
     width: 480px;
     height: 480px;
     background: rgba(16, 185, 129, .1);
     top: 40px;
     right: -80px;
 }

 .hg3 {
     width: 360px;
     height: 360px;
     background: rgba(34, 211, 238, .08);
     bottom: -80px;
     left: 45%;
 }

 .hero {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 64px;
     align-items: center;
     padding: 100px 24px 80px;
     max-width: 1180px;
     margin: 0 auto;
 }

 /* Badge */
 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, .07);
     border: 1px solid rgba(255, 255, 255, .12);
     color: rgba(255, 255, 255, .85);
     font-size: .78rem;
     font-weight: 600;
     padding: 6px 14px;
     border-radius: 999px;
     margin-bottom: 24px;
 }

 .badge-icon {
     width: 18px;
     height: 18px;
     border-radius: 5px;
     background: var(--green);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .badge-icon svg {
     width: 11px;
     height: 11px;
     stroke: #fff;
     stroke-width: 3;
 }

 .hero-left h1 {
     font-size: clamp(2.4rem, 4.5vw, 3.6rem);
     font-weight: 800;
     line-height: 1.1;
     color: #fff;
     margin-bottom: 22px;
     letter-spacing: -.025em;
 }

 .hero-left h1 .hl {
     background: linear-gradient(135deg, #4ade80 0%, var(--cyan) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .hero-sub {
     font-size: 1.05rem;
     line-height: 1.72;
     color: rgba(255, 255, 255, .58);
     margin-bottom: 36px;
     max-width: 500px;
 }

 .hero-btns {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
     margin-bottom: 15px;
 }

 /* Social proof strip */
 .hero-proof {
     display: flex;
     align-items: center;
     gap: 7px;
     flex-wrap: wrap;
     padding-top: 11px;
 }

 .hp-item {
     display: flex;
     flex-direction: column;
 }

 .hp-num {
     font-size: 1.3rem;
     font-weight: 800;
     color: #fff;
 }

 .hp-lbl {
     font-size: .72rem;
     color: rgba(255, 255, 255, .4);
     font-weight: 500;
     margin-top: 1px;
 }

 .hp-div {
     width: 1px;
     height: 45px;
     background: rgba(255, 255, 255, .1);
 }

 /* Right: organic growth card */
 .hero-right {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .og-card {
     background: rgba(255, 255, 255, .04);
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: var(--radius-lg);
     padding: 26px;
     backdrop-filter: blur(14px);
 }

 .og-card-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
 }

 .og-card-title {
     font-size: .88rem;
     font-weight: 700;
     color: #fff;
 }

 .og-live {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: .72rem;
     color: var(--green);
     font-weight: 600;
 }

 .og-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--green);
     box-shadow: 0 0 8px var(--green);
     animation: blink 2s infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: .35
     }
 }

 /* Keyword rank list */
 .og-kw-list {
     display: flex;
     flex-direction: column;
     gap: 9px;
     margin-bottom: 20px;
 }

 .og-kw-row {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(255, 255, 255, .04);
     border-radius: var(--radius);
     padding: 10px 14px;
 }

 .og-kw-pos {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     background: linear-gradient(135deg, var(--blue), #3b82f6);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .75rem;
     font-weight: 800;
     color: #fff;
     flex-shrink: 0;
 }

 .og-kw-pos.p1 {
     background: linear-gradient(135deg, #f59e0b, #fbbf24);
     color: #000;
 }

 .og-kw-pos.p2 {
     background: linear-gradient(135deg, #94a3b8, #cbd5e1);
     color: #000;
 }

 .og-kw-pos.p3 {
     background: linear-gradient(135deg, #cd7f32, #d97706);
     color: #fff;
 }

 .og-kw-name {
     flex: 1;
     font-size: .82rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .85);
 }

 .og-kw-up {
     display: flex;
     align-items: center;
     gap: 3px;
     font-size: .72rem;
     font-weight: 700;
     color: var(--green);
 }

 .og-kw-up svg {
     width: 12px;
     height: 12px;
     stroke: var(--green);
 }

 /* Traffic chart bars */
 .og-chart {}

 .og-chart-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 12px;
 }

 .og-chart-title {
     font-size: .78rem;
     color: rgba(255, 255, 255, .4);
     font-weight: 600;
 }

 .og-chart-val {
     font-size: .9rem;
     font-weight: 800;
     color: #fff;
 }

 .og-chart-sub {
     font-size: .68rem;
     color: var(--green);
     font-weight: 600;
 }

 .og-bars {
     display: flex;
     align-items: flex-end;
     gap: 5px;
     height: 56px;
 }

 .og-bar-col {
     flex: 1;
     border-radius: 4px 4px 0 0;
 }

 /* Mini stats row */
 .og-mini-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
 }

 .og-mini {
     background: rgba(255, 255, 255, .04);
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: var(--radius);
     padding: 14px;
     text-align: center;
 }

 .og-mini-n {
     font-size: 1.4rem;
     font-weight: 800;
     color: #fff;
 }

 .og-mini-l {
     font-size: .7rem;
     color: rgba(255, 255, 255, .38);
     margin-top: 3px;
     font-weight: 500;
 }

 /* Wave */
 .hero-wave svg {
     display: block;
     width: 100%;
 }

 /* ══════════════════════════════════════════
       2. PROBLEM (Why Organic?)
    ══════════════════════════════════════════ */
 .problem-sec {
     background: var(--bg);
 }

 .problem-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 72px;
     align-items: center;
 }

 .problem-left h2 {
     font-size: clamp(1.9rem, 3vw, 2.8rem);
     font-weight: 800;
     line-height: 1.15;
     letter-spacing: -.02em;
     margin-bottom: 18px;
 }

 .problem-left p {
     font-size: 1rem;
     line-height: 1.75;
     color: var(--text3);
     margin-bottom: 14px;
 }

 .problem-cards {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-top: 30px;
 }

 .prob-card {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     border: 1.5px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 18px 20px;
     transition: border-color .2s, box-shadow .2s;
 }

 .prob-card:hover {
     border-color: var(--blue);
     box-shadow: 0 4px 20px rgba(0, 82, 224, .08);
 }

 .prob-card-ico {
     width: 40px;
     height: 40px;
     border-radius: var(--radius);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .prob-card-ico svg {
     width: 18px;
     height: 18px;
 }

 .prob-card-title {
     font-size: .9rem;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 5px;
 }

 .prob-card-desc {
     font-size: .82rem;
     line-height: 1.6;
     color: var(--text3);
 }

 /* Right: vs box */
 .vs-box {
     background: linear-gradient(145deg, #0d1c3f, #050c1f);
     border-radius: var(--radius-xl);
     padding: 36px;
     border: 1px solid rgba(255, 255, 255, .08);
     box-shadow: var(--shadow-lg);
 }

 .vs-title {
     font-size: .78rem;
     font-weight: 700;
     color: rgba(255, 255, 255, .4);
     text-transform: uppercase;
     letter-spacing: .06em;
     margin-bottom: 24px;
     text-align: center;
 }

 .vs-cols {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     gap: 0;
     align-items: stretch;
 }

 .vs-col {}

 .vs-col-head {
     font-size: .75rem;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: .06em;
     text-align: center;
     padding: 8px 0 16px;
 }

 .vs-col-head.paid {
     color: #f87171;
 }

 .vs-col-head.organic {
     color: var(--green);
 }

 .vs-divider {
     width: 1px;
     background: rgba(255, 255, 255, .08);
     margin: 0 18px;
 }

 .vs-row {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .vs-item {
     border-radius: var(--radius);
     padding: 11px 14px;
     font-size: .8rem;
     font-weight: 500;
     line-height: 1.4;
 }

 .vs-item.bad {
     background: rgba(239, 68, 68, .08);
     color: #fca5a5;
 }

 .vs-item.good {
     background: rgba(16, 185, 129, .08);
     color: #6ee7b7;
 }

 .vs-item.neutral {
     background: rgba(255, 255, 255, .04);
     color: rgba(255, 255, 255, .5);
 }

 .vs-or {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 24px 0 0;
 }

 .vs-or-pill {
     background: rgba(0, 82, 224, .2);
     color: #60a5fa;
     font-size: .8rem;
     font-weight: 800;
     padding: 6px 16px;
     border-radius: 999px;
 }

 /* ══════════════════════════════════════════
       3. WHAT WE DO (Services)
    ══════════════════════════════════════════ */
 .services-sec {
     background: var(--bg2);
 }

 .svc-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 .svc-card {
     background: var(--bg);
     border: 1.5px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 28px;
     transition: border-color .2s, box-shadow .2s, transform .2s;
     position: relative;
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }

 .svc-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--blue), var(--green));
     opacity: 0;
     transition: opacity .2s;
 }

 .svc-card:hover {
     border-color: var(--blue);
     box-shadow: 0 8px 32px rgba(0, 82, 224, .1);
     transform: translateY(-3px);
 }

 .svc-card:hover::after {
     opacity: 1;
 }

 .svc-icon {
     width: 46px;
     height: 46px;
     border-radius: var(--radius);
     background: var(--blue-lt);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 18px;
 }

 .svc-icon svg {
     width: 22px;
     height: 22px;
     stroke: var(--blue);
 }

 .svc-name {
     font-size: 1.05rem;
     font-weight: 800;
     color: var(--text);
     margin-bottom: 10px;
 }

 .svc-desc {
     font-size: .86rem;
     line-height: 1.65;
     color: var(--text3);
     margin-bottom: 18px;
     flex: 1;
 }

 .svc-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 }

 .svc-tag {
     font-size: .7rem;
     font-weight: 600;
     padding: 3px 9px;
     border-radius: 999px;
     background: var(--bg3);
     color: var(--text3);
 }

 /* ══════════════════════════════════════════
       4. HOW IT WORKS
    ══════════════════════════════════════════ */
 .how-sec {
     background: var(--bg);
 }

 .how-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
     position: relative;
 }

 .how-grid::before {
     content: '';
     position: absolute;
     top: 28px;
     left: 8%;
     right: 8%;
     height: 2px;
     background: linear-gradient(90deg, var(--blue), var(--green));
 }

 .how-step {
     text-align: center;
     position: relative;
     z-index: 1;
 }

 .how-circle {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--blue), #2563eb);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 18px;
     box-shadow: 0 4px 18px rgba(0, 82, 224, .3);
 }

 .how-circle svg {
     width: 22px;
     height: 22px;
     stroke: #fff;
 }

 .how-num {
     position: absolute;
     top: -5px;
     right: calc(50% - 36px);
     width: 19px;
     height: 19px;
     border-radius: 50%;
     background: var(--green);
     color: #fff;
     font-size: .62rem;
     font-weight: 800;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .how-title {
     font-size: .95rem;
     font-weight: 800;
     color: var(--text);
     margin-bottom: 8px;
 }

 .how-desc {
     font-size: .82rem;
     line-height: 1.6;
     color: var(--text3);
 }

 .how-tag {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: .72rem;
     font-weight: 700;
     color: var(--blue);
     background: var(--blue-lt);
     padding: 4px 10px;
     border-radius: 999px;
     margin-top: 12px;
 }

 .how-tag svg {
     width: 11px;
     height: 11px;
     stroke: var(--blue);
     stroke-width: 2.5;
 }

 /* ══════════════════════════════════════════
       5. WHY ORGANIC WINS — Stats banner
    ══════════════════════════════════════════ */
 .stats-banner {
     background: linear-gradient(145deg, #050c1f, #0d1c3f);
     position: relative;
     overflow: hidden;
 }

 .stats-banner-glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(80px);
     pointer-events: none;
 }

 .sbg1 {
     width: 500px;
     height: 500px;
     background: rgba(0, 82, 224, .15);
     top: -180px;
     left: -80px;
 }

 .sbg2 {
     width: 400px;
     height: 400px;
     background: rgba(16, 185, 129, .1);
     bottom: -120px;
     right: -60px;
 }

 .stats-banner .sec {
     position: relative;
     z-index: 1;
 }

 .stats-banner-head {
     text-align: center;
     margin-bottom: 52px;
 }

 .stats-banner-head .sec-title {
     color: #fff;
 }

 .stats-banner-head .sec-sub {
     color: rgba(255, 255, 255, .5);
     margin: 0 auto;
 }

 .stats-banner-head .section-tag {
     background: rgba(255, 255, 255, .08);
     color: rgba(255, 255, 255, .8);
 }

 .stat-cards {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
 }

 .stat-card {
     background: rgba(255, 255, 255, .04);
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: var(--radius-lg);
     padding: 28px 20px;
     text-align: center;
     transition: border-color .2s, background .2s;
 }

 .stat-card:hover {
     background: rgba(255, 255, 255, .07);
     border-color: rgba(255, 255, 255, .15);
 }

 .stat-card-ico {
     width: 42px;
     height: 42px;
     border-radius: var(--radius);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 16px;
 }

 .stat-card-ico svg {
     width: 20px;
     height: 20px;
 }

 .stat-num {
     font-size: 2.2rem;
     font-weight: 800;
     color: #fff;
     letter-spacing: -.02em;
 }

 .stat-sfx {
     font-size: 1.1rem;
     font-weight: 700;
 }

 .stat-lbl {
     font-size: .84rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .6);
     margin-top: 6px;
 }

 .stat-note {
     font-size: .72rem;
     color: rgba(255, 255, 255, .3);
     margin-top: 4px;
 }

 /* Insight band */
 .insight-band {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin-top: 24px;
 }

 .insight-card {
     background: rgba(255, 255, 255, .03);
     border: 1px solid rgba(255, 255, 255, .07);
     border-radius: var(--radius-lg);
     padding: 22px 24px;
     display: flex;
     align-items: flex-start;
     gap: 14px;
 }

 .insight-ico {
     width: 36px;
     height: 36px;
     border-radius: var(--radius);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .insight-ico svg {
     width: 17px;
     height: 17px;
 }

 .insight-title {
     font-size: .88rem;
     font-weight: 700;
     color: rgba(255, 255, 255, .85);
     margin-bottom: 5px;
 }

 .insight-desc {
     font-size: .78rem;
     line-height: 1.6;
     color: rgba(255, 255, 255, .4);
 }

 /* ══════════════════════════════════════════
       6. RESULTS
    ══════════════════════════════════════════ */
 .results-sec {
     background: var(--bg2);
 }

 .res-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
 }

 .res-card {
     background: var(--bg);
     border: 1.5px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 28px;
     transition: box-shadow .2s, transform .2s;
 }

 .res-card:hover {
     box-shadow: var(--shadow-lg);
     transform: translateY(-3px);
 }

 .res-tag {
     font-size: .72rem;
     font-weight: 700;
     color: var(--blue);
     text-transform: uppercase;
     letter-spacing: .06em;
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .res-tag svg {
     width: 13px;
     height: 13px;
 }

 .res-num {
     font-size: 2.6rem;
     font-weight: 800;
     color: var(--text);
     letter-spacing: -.025em;
 }

 .res-t {
     font-size: .88rem;
     font-weight: 700;
     color: var(--text2);
     margin: 6px 0 12px;
 }

 .res-d {
     font-size: .83rem;
     line-height: 1.62;
     color: var(--text3);
     margin-bottom: 20px;
 }

 .res-by {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .res-av {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .72rem;
     font-weight: 800;
     color: #fff;
     flex-shrink: 0;
 }

 .ra1 {
     background: linear-gradient(135deg, #0052e0, #22d3ee);
 }

 .ra2 {
     background: linear-gradient(135deg, #10b981, #0052e0);
 }

 .ra3 {
     background: linear-gradient(135deg, #a78bfa, #0052e0);
 }

 .res-name {
     font-size: .85rem;
     font-weight: 700;
     color: var(--text);
 }

 .res-role {
     font-size: .75rem;
     color: var(--text4);
 }

 /* ══════════════════════════════════════════
       7. WHO IT'S FOR
    ══════════════════════════════════════════ */
 .who-sec {
     background: var(--bg);
 }

 .who-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 .who-card {
     border: 1.5px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 26px 24px;
     transition: border-color .2s, transform .2s;
 }

 .who-card:hover {
     border-color: var(--blue);
     transform: translateY(-3px);
 }

 .who-ico {
     width: 44px;
     height: 44px;
     border-radius: var(--radius);
     background: var(--blue-lt);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
 }

 .who-ico svg {
     width: 20px;
     height: 20px;
     stroke: var(--blue);
 }

 .who-name {
     font-size: 1rem;
     font-weight: 800;
     color: var(--text);
     margin-bottom: 8px;
 }

 .who-desc {
     font-size: .84rem;
     line-height: 1.62;
     color: var(--text3);
     margin-bottom: 14px;
 }

 .who-results {
     font-size: .78rem;
     font-weight: 700;
     color: var(--green);
 }

 /* ══════════════════════════════════════════
       8. FAQ
    ══════════════════════════════════════════ */
 .faq-sec {
     background: var(--bg2);
 }

 .faq-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
     max-width: 860px;
     margin: 0 auto;
 }

 .faq-item {
     border: 1.5px solid var(--border);
     border-radius: var(--radius-lg);
     overflow: hidden;
     transition: border-color .2s;
 }

 .faq-item.open {
     border-color: var(--blue);
 }

 .faq-q {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 24px;
     cursor: pointer;
     gap: 16px;
     background: var(--bg);
 }

 .faq-q-text {
     font-size: .95rem;
     font-weight: 700;
     color: var(--text);
 }

 .faq-q-ico {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     background: var(--bg3);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: background .2s, transform .3s;
 }

 .faq-q-ico svg {
     width: 14px;
     height: 14px;
     stroke: var(--text3);
     transition: stroke .2s;
 }

 .faq-item.open .faq-q-ico {
     background: var(--blue-lt);
     transform: rotate(45deg);
 }

 .faq-item.open .faq-q-ico svg {
     stroke: var(--blue);
 }

 .faq-a {
     max-height: 0;
     overflow: hidden;
     transition: max-height .35s ease, padding .25s ease;
     background: var(--bg);
 }

 .faq-item.open .faq-a {
     max-height: 300px;
 }

 .faq-a-inner {
     padding: 0 24px 20px;
     font-size: .88rem;
     line-height: 1.7;
     color: var(--text3);
 }

 /* ══════════════════════════════════════════
       9. CTA
    ══════════════════════════════════════════ */
 .cta-sec {
     background: linear-gradient(145deg, #050c1f, #0d1c3f);
     position: relative;
     overflow: hidden;
 }

 .cta-g1 {
     position: absolute;
     width: 520px;
     height: 520px;
     border-radius: 50%;
     background: rgba(0, 82, 224, .18);
     filter: blur(90px);
     top: -160px;
     left: -100px;
     pointer-events: none;
 }

 .cta-g2 {
     position: absolute;
     width: 420px;
     height: 420px;
     border-radius: 50%;
     background: rgba(16, 185, 129, .1);
     filter: blur(90px);
     bottom: -100px;
     right: -60px;
     pointer-events: none;
 }

 .cta-wrap {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 64px;
     align-items: center;
     padding: 96px 24px;
     max-width: 1180px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
 }

 .cta-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-size: .78rem;
     font-weight: 700;
     color: var(--green);
     text-transform: uppercase;
     letter-spacing: .08em;
     margin-bottom: 20px;
 }

 .cta-eyebrow svg {
     width: 14px;
     height: 14px;
     stroke: var(--green);
 }

 .cta-t {
     font-size: clamp(2rem, 3.5vw, 3rem);
     font-weight: 800;
     line-height: 1.14;
     color: #fff;
     margin-bottom: 20px;
     letter-spacing: -.02em;
 }

 .cta-t span {
     background: linear-gradient(135deg, #4ade80, var(--cyan));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .cta-d {
     font-size: 1rem;
     line-height: 1.7;
     color: rgba(255, 255, 255, .5);
     margin-bottom: 32px;
 }

 .cta-checks {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .cta-chk {
     display: flex;
     align-items: center;
     gap: 9px;
     font-size: .88rem;
     color: rgba(255, 255, 255, .7);
     font-weight: 500;
 }

 .cta-chk svg {
     width: 15px;
     height: 15px;
     stroke: var(--green);
     stroke-width: 2.5;
     flex-shrink: 0;
 }

 .cta-box {
     background: rgba(255, 255, 255, .05);
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: var(--radius-xl);
     padding: 38px;
     display: flex;
     flex-direction: column;
     gap: 18px;
     backdrop-filter: blur(12px);
 }

 .cta-box-title {
     font-size: 1.2rem;
     font-weight: 800;
     color: #fff;
 }

 .cta-box-sub {
     font-size: .86rem;
     color: rgba(255, 255, 255, .45);
     line-height: 1.65;
 }

 .cta-btn-p {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     background: var(--blue);
     color: #fff;
     font-family: var(--font);
     font-size: 1rem;
     font-weight: 700;
     padding: 16px;
     border-radius: var(--radius);
     border: none;
     cursor: pointer;
     transition: background .18s, transform .15s, box-shadow .18s;
     box-shadow: 0 4px 24px rgba(0, 82, 224, .35);
 }

 .cta-btn-p:hover {
     background: var(--blue-dk);
     transform: translateY(-1px);
     box-shadow: 0 8px 32px rgba(0, 82, 224, .45);
 }

 .cta-btn-p svg {
     width: 18px;
     height: 18px;
 }

 .cta-or {
     text-align: center;
     color: rgba(255, 255, 255, .2);
     font-size: .8rem;
 }

 .cta-btn-s {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     background: transparent;
     color: rgba(255, 255, 255, .7);
     font-family: var(--font);
     font-size: .88rem;
     font-weight: 600;
     padding: 13px;
     border-radius: var(--radius);
     border: 1px solid rgba(255, 255, 255, .14);
     cursor: pointer;
     transition: border-color .18s, color .18s;
 }

 .cta-btn-s:hover {
     border-color: rgba(255, 255, 255, .35);
     color: #fff;
 }

 .cta-btn-s svg {
     width: 16px;
     height: 16px;
 }

 .cta-trust {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .cta-ti {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: .72rem;
     color: rgba(255, 255, 255, .35);
     font-weight: 500;
 }

 .cta-ti svg {
     width: 12px;
     height: 12px;
     stroke: var(--green);
     stroke-width: 2.5;
 }

 .sec {
     padding: 15px;
 }

 /* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
 @media (max-width: 1024px) {
     .svc-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .sec {
         padding: 15px;
     }

     .how-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .how-grid::before {
         display: none;
     }

     .stat-cards {
         grid-template-columns: repeat(2, 1fr);
     }

     .insight-band {
         grid-template-columns: 1fr;
     }

     .who-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 768px) {
     .hero {
         grid-template-columns: 1fr;
         gap: 40px;
         padding: 28px 24px 28px;
     }

     .sec {
         padding: 20px;
     }

     .hero-right {
         display: none;
     }

     .problem-grid {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .svc-grid {
         grid-template-columns: 1fr;
     }

     .how-grid {
         grid-template-columns: 1fr;
     }

     .stat-cards {
         grid-template-columns: 1fr 1fr;
     }

     .res-grid {
         grid-template-columns: 1fr;
     }

     .who-grid {
         grid-template-columns: 1fr;
     }

     .cta-wrap {
         grid-template-columns: 1fr;
         gap: 40px;
         padding: 72px 24px;
     }
 }