/* ─────────────────────────────────────────
   Love Is Agency — Main Stylesheet
   Fonts: Syne (headings) + Manrope (body)
───────────────────────────────────────── */

/* ── CSS Variables ── */
:root {
    --blue:        #1AABE0;
    --blue-hover:  #1590C2;
    --blue-dark:   #0F7BA8;
    --blue-light:  #EBF7FD;
    --blue-card:   #1AABE0;
    --dark:        #0D1117;
    --text:        #1F2937;
    --muted:       #6B7280;
    --white:       #FFFFFF;
    --border:      #E5E7EB;
    --border-light:#F3F4F6;
    --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:   0 4px 16px rgba(0,0,0,.08);
    --shadow-lg:   0 12px 40px rgba(0,0,0,.12);
    --shadow-blue: 0 8px 32px rgba(26,171,224,.30);
    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   22px;
    --radius-xl:   30px;
    --nav-h:       72px;
    --font-head:   'Bricolage Grotesque', sans-serif;
    --font-body:   'Plus Jakarta Sans', sans-serif;
    --ease:        cubic-bezier(.25,.46,.45,.94);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }
input, select, textarea { font-family: inherit; }

/* ── Progress Bar ── */
.progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--blue), #60D0F8);
    z-index: 9999;
    transition: width .1s linear;
}

/* ── Cookie Bar ── */
.cookie-bar {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(120px);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 8000;
    max-width: 520px;
    width: calc(100% - 48px);
    transition: transform .5s var(--ease);
}
.cookie-bar.visible { transform: translateX(-50%) translateY(0); }
.cookie-content { display: flex; align-items: center; gap: 12px; flex: 1; }
.cookie-emoji { font-size: 22px; flex-shrink: 0; }
.cookie-text strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.cookie-text p { font-size: 12px; color: var(--muted); line-height: 1.4; }
.cookie-text a { color: var(--blue); text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-cookie-reject {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    transition: background .15s;
}
.btn-cookie-reject:hover { background: var(--border-light); }
.btn-cookie-accept {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    background: var(--dark);
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    transition: opacity .15s;
}
.btn-cookie-accept:hover { opacity: .85; }

/* Flag icons (replace flag emoji — Windows renders those as plain "GB"/"US" text) */
.flag-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
    vertical-align: middle;
}

/* ── Join Notification ── */
.join-notification {
    position: fixed;
    bottom: 32px; left: 24px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 7000;
    max-width: 300px;
    transform: translateX(-140%);
    transition: transform .5s var(--ease);
}
.join-notification.visible { transform: translateX(0); }
.notif-inner { display: flex; align-items: center; gap: 12px; flex: 1; }
.notif-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), #60D0F8);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 15px;
    flex-shrink: 0;
    overflow: hidden;
}
.notif-avatar .flag-icon {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}
.notif-text strong { font-size: 13px; font-weight: 600; display: block; line-height: 1.4; }
.notif-text p { font-size: 11px; color: var(--muted); margin-top: 1px; }
.notif-close {
    font-size: 18px; color: var(--muted); line-height: 1;
    padding: 2px 6px; border-radius: 4px;
    transition: background .15s;
    flex-shrink: 0;
}
.notif-close:hover { background: var(--border-light); color: var(--text); }

/* Floating widgets sit above the mobile menu panel (z-index-wise) — hide them
   while it's open so they don't poke through the full-screen overlay. */
body.mobile-nav-open .whatsapp-float,
body.mobile-nav-open .join-notification,
body.mobile-nav-open .cookie-bar { display: none; }

/* ── WhatsApp Float ── */
.whatsapp-float {
    position: fixed;
    bottom: 32px; right: 24px;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: #25D366;
    color: white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,.4);
    z-index: 7000;
    transition: transform .2s var(--ease), box-shadow .2s;
}
.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(37,211,102,.55);
}
.wa-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ff4444;
    border: 2px solid var(--white);
    animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ─────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────── */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 6000;
    height: var(--nav-h);
    transition: background .3s, box-shadow .3s, backdrop-filter .3s;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
}
.navbar.scrolled {
    background: rgba(255,255,255,.96);
    box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
}
.navbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
    opacity: 1;
    transition: opacity .3s;
}
.navbar.scrolled::after { opacity: 0; }
.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
}

/* Logo */
.logo {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 400;
    color: rgba(255,255,255,.92);
    letter-spacing: -.3px;
    white-space: nowrap;
    transition: opacity .15s;
}
.logo:hover { opacity: .82; }
.logo span {
    font-weight: 800;
    color: var(--blue);
}

/* Nav Links */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.nav-links li { position: relative; }
/* Mobile-only nav decorations: icons + language/Apply footer — hidden on desktop */
.nav-mobile-icon,
.nav-mobile-foot { display: none; }
.nav-links a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text);
    border-radius: 100px;
    transition: color .15s, background .15s, transform .15s;
}
.nav-links a:hover { color: var(--blue); background: var(--blue-light); transform: translateY(-1px); }
.nav-links a svg { transition: transform .2s; }
/* Hover-only: on touch, tapping a link fires a synthetic :hover that would otherwise
   leak these desktop dropdown-positioning styles into the mobile slide-down panel. */
@media (hover: hover) {
    .nav-links li:hover > a > svg { transform: rotate(180deg); }
}

/* Dropdown */
.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
    pointer-events: none;
}
/* Invisible bridge over the gap so the cursor never loses :hover between link and menu */
.dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}
@media (hover: hover) {
    .nav-links li:hover .dropdown,
    .nav-links li.force-open .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: all;
    }
}
.dropdown a {
    display: block;
    padding: 9px 14px;
    font-size: 13.5px;
    color: var(--text);
    border-radius: var(--radius-sm);
    background: none;
    transition: background .12s, color .12s;
}
.dropdown a:hover { background: var(--blue-light); color: var(--blue); }

/* Nav Right */
.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    padding-left: 14px;
    border-left: 1px solid var(--border);
}

/* Language Switcher */
.lang-switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 100px;
    cursor: pointer;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    background: var(--white);
}
.lang-switcher:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 14px rgba(26,171,224,.14);
    transform: translateY(-1px);
}
.lang-flag { font-size: 18px; line-height: 1; }
.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 150px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
/* Invisible bridge over the gap so the cursor never loses :hover between trigger and menu */
.lang-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}
.lang-switcher:hover .lang-dropdown,
.lang-switcher.force-open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    transition: background .12s;
}
.lang-dropdown a:hover { background: var(--blue-light); }

/* Apply Button */
.btn-nav-apply {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px 9px 22px;
    background: var(--blue);
    color: var(--white);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body);
    transition: background .2s, box-shadow .2s, transform .15s;
    white-space: nowrap;
}
.btn-nav-apply {
    animation: navApplyPulse 2.4s ease-out infinite;
}
.btn-nav-apply:hover {
    background: var(--blue-hover);
    box-shadow: var(--shadow-blue);
    transform: translateY(-1px);
    animation-play-state: paused;
}
@keyframes navApplyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26,171,224,.45); }
    50% { box-shadow: 0 0 0 8px rgba(26,171,224,0); }
}
.nav-arrow-wrap {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background .15s;
}
.mobile-toggle:hover { background: var(--blue-light); }
.mobile-toggle span {
    display: block;
    width: 22px; height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
.mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─────────────────────────────────────────
   HERO SECTION
───────────────────────────────────────── */
.hero {
    padding-top: calc(var(--nav-h) + 48px);
    padding-bottom: 64px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

/* Left Content */
.hero-content { display: flex; flex-direction: column; gap: 28px; }

/* Proof Pill */
.proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    width: fit-content;
    animation: fadeInUp .6s var(--ease) both;
}
.pill-flag { font-size: 18px; }
.pill-sep { width: 1px; height: 16px; background: var(--border); }
.ig-icon { border-radius: 5px; }

/* Hero Heading */
.hero-heading {
    font-family: var(--font-head);
    font-size: clamp(38px, 4.5vw, 60px);
    font-weight: 800;
    line-height: 1.08;
    color: var(--dark);
    letter-spacing: -1.5px;
    animation: fadeInUp .6s var(--ease) .1s both;
}
.hero-em {
    font-style: normal;
    color: var(--blue);
}

/* Hero Sub */
.hero-sub {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 480px;
    animation: fadeInUp .6s var(--ease) .2s both;
}

/* CTAs */
.hero-ctas {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    animation: fadeInUp .6s var(--ease) .3s both;
}
.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 28px;
    background: var(--blue);
    color: var(--white);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    transition: background .2s, box-shadow .2s, transform .15s;
}
.btn-hero-primary:hover {
    background: var(--blue-hover);
    box-shadow: var(--shadow-blue);
    transform: translateY(-2px);
}
.hero-arrow-wrap {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.btn-hero-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 22px;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    transition: border-color .15s, background .15s;
}
.btn-hero-ghost:hover {
    border-color: var(--blue);
    background: var(--blue-light);
    color: var(--blue);
}

.apply-note {
    font-size: 12.5px;
    color: var(--muted);
    animation: fadeInUp .6s var(--ease) .35s both;
}

/* Trust Row */
.trust-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    animation: fadeInUp .6s var(--ease) .4s both;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.trust-item svg { color: var(--blue); flex-shrink: 0; }

/* ── Hero Media Grid ── */
.hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInRight .7s var(--ease) .2s both;
}
.media-frame {
    background: var(--blue);
    border-radius: var(--radius-xl);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow-blue), 0 2px 0 rgba(255,255,255,.2) inset;
}

/* Video Card */
.media-video-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 260px;
    background: #1A2A3A;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.media-video-card:hover,
.media-video-card:focus-visible {
    transform: scale(1.015);
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.media-video-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.video-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1E3A50 0%, #152840 40%, #0A1825 100%);
}
.video-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    z-index: 0;
}
.video-noimg .video-photo { display: none; }
.video-person {
    position: absolute;
    bottom: 0; right: 15%;
    width: 55%;
    height: 90%;
    background: linear-gradient(180deg, transparent 0%, #2A4A6A 30%, #1A3A5A 100%);
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    opacity: .7;
}
.media-video-card:not(.video-noimg) .video-person { display: none; }
.video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,171,224,.08) 0%, transparent 60%);
}
.media-video-card:not(.video-noimg) .video-overlay {
    background: linear-gradient(0deg, rgba(6,14,24,.65) 0%, rgba(6,14,24,.05) 45%, rgba(26,171,224,.1) 100%);
}
.play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,.3);
    display: flex; align-items: center; justify-content: center;
    color: white;
    padding-left: 3px;
    transition: background .2s, transform .2s;
    z-index: 2;
}
.play-btn:hover {
    background: rgba(255,255,255,.28);
    transform: translate(-50%, -50%) scale(1.08);
}
.plus-btn {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,.3);
    color: white;
    font-size: 20px;
    font-weight: 300;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    z-index: 2;
    transition: background .2s;
}
.plus-btn:hover { background: rgba(255,255,255,.3); }

/* Bottom Row */
.media-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 170px;
}

/* Chart Card */
.media-chart-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 16px 14px 14px;
    display: flex;
    gap: 10px;
    overflow: hidden;
}
.chart-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    padding-bottom: 4px;
}
.chart-wrap {
    flex: 1;
    position: relative;
    min-height: 120px;
}
.earnings-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
.chart-line-path {
    animation: drawLine 1.4s var(--ease) .8s both;
}
@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}
.chart-dot-anim {
    opacity: 0;
    animation: fadeIn .3s ease 2.2s both;
}
.chart-tip {
    position: absolute;
    top: 30%; left: 52%;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    display: flex;
    gap: 5px;
    align-items: center;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    animation: fadeIn .4s ease 2.4s both;
    white-space: nowrap;
}
.tip-amount { font-size: 11px; font-weight: 700; color: var(--dark); }
.tip-pct { font-size: 10px; font-weight: 700; color: #16a34a; }

/* Community Card */
.media-community-card {
    background: linear-gradient(160deg, #1A2A3A 0%, #0A1A2A 100%);
    border-radius: var(--radius-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.media-community-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(26,171,224,.08) 0%, transparent 60%);
}
.lgbt-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 100px;
    padding: 4px 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--white);
    width: fit-content;
    position: relative;
    z-index: 1;
}
.community-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    flex: 1;
    position: relative;
    z-index: 1;
}
.cp {
    border-radius: 8px;
    min-height: 40px;
}
.cp1 { background: linear-gradient(135deg, #C4896A, #8B5E3C); }
.cp2 { background: linear-gradient(135deg, #7CA8B8, #4A8099); }
.cp3 { background: linear-gradient(135deg, #B8A89A, #8A7060); }
.cp4 { background: linear-gradient(135deg, #9AC5D5, #5A95AA); }
.community-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────
   SECTION COMMON
───────────────────────────────────────── */
.section-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
.section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 64px;
}
.section-head h2 {
    font-family: var(--font-head);
    font-size: clamp(30px, 3.5vw, 48px);
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -1px;
    margin-bottom: 16px;
}
.section-head p { font-size: 16px; color: var(--muted); line-height: 1.7; }

/* ─────────────────────────────────────────
   WHO WE ARE / STORY SECTION
───────────────────────────────────────── */
.story-section {
    padding: 96px 0;
}
.story-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.story-left h2 {
    font-family: var(--font-head);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 800;
    color: rgba(255,255,255,.95);
    letter-spacing: -1px;
    line-height: 1.15;
    margin: 14px 0 18px;
}
.story-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.story-badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
}
.story-left p {
    font-size: 15.5px;
    line-height: 1.75;
    color: rgba(255,255,255,.6);
    margin-bottom: 16px;
}
.story-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 22px 0 28px;
}
.story-list li {
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255,255,255,.85);
}

/* Photo collage */
.story-media {
    position: relative;
    min-height: 420px;
}
.story-photo {
    position: absolute;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(165deg, rgba(20,32,51,.5) 0%, #0D1B2A 100%), #0F1B2E;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.story-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.story-photo-empty img { display: none; }
.story-photo-fallback {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255,255,255,.3);
}
.story-photo-empty .story-photo-fallback { display: flex; }
.story-photo-fallback span { font-size: 12.5px; font-weight: 600; }
.story-photo-1 {
    top: 0; left: 0;
    width: 72%;
    height: 82%;
}
.story-photo-2 {
    bottom: 0; right: 0;
    width: 56%;
    height: 52%;
    z-index: 2;
    border: 4px solid #060E18;
}
.story-stat-chip {
    position: absolute;
    top: 24px;
    right: 6%;
    z-index: 3;
    background: rgba(10,18,30,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.story-stat-chip strong {
    display: block;
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 800;
    color: white;
}
.story-stat-chip span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.55);
}

/* ─────────────────────────────────────────
   ABOUT PAGE — banner, values, closing CTA
───────────────────────────────────────── */
.about-banner {
    position: relative;
    padding: calc(var(--nav-h) + 72px) 0 56px;
    text-align: center;
    overflow: hidden;
}
.about-banner::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236,72,153,.22) 0%, rgba(236,72,153,.1) 40%, transparent 72%);
    filter: blur(46px);
    pointer-events: none;
    z-index: 0;
}
.about-banner .section-wrap {
    position: relative;
    z-index: 1;
    max-width: 700px;
}
.about-banner .sec-badge { margin-left: auto; margin-right: auto; }
.about-banner h1 {
    font-family: var(--font-head);
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 800;
    color: rgba(255,255,255,.96);
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 16px;
}
.about-banner p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,.6);
}

/* Values grid */
.values-section { padding: 40px 0 96px; }
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.value-card {
    background: #0F1B2E;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
}
.value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: var(--radius-md);
    background: rgba(26,171,224,.12);
    font-size: 22px;
    margin-bottom: 16px;
}
.value-card h3 {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    color: rgba(255,255,255,.94);
    margin-bottom: 10px;
    letter-spacing: -.2px;
}
.value-card p {
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255,255,255,.55);
}

/* Closing CTA */
.about-cta {
    padding: 80px 0 100px;
    text-align: center;
}
.about-cta h2 {
    font-family: var(--font-head);
    font-size: clamp(26px, 3.5vw, 38px);
    font-weight: 800;
    color: rgba(255,255,255,.95);
    letter-spacing: -.8px;
    margin-bottom: 12px;
}
.about-cta p {
    font-size: 15px;
    color: rgba(255,255,255,.55);
    margin-bottom: 26px;
}
.about-cta .btn-hero-primary { display: inline-flex; }

/* ─────────────────────────────────────────
   FEATURES SECTION
───────────────────────────────────────── */
.features-section {
    padding: 96px 0;
    background: var(--white);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Feature Card */
.feat-card {
    background: var(--blue-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s var(--ease), box-shadow .25s;
    cursor: default;
}
.feat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-blue);
}

/* Mock UI area */
.feat-mockui {
    padding: 24px 24px 16px;
    flex: 1;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Social Notifications */
.social-notifs { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sn-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 10px 14px;
}
.sn-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sni-insta { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); }
.sni-tiktok { background: #000; }
.sni-reddit { background: #FF4500; }
.sn-body strong { display: block; font-size: 12px; font-weight: 700; }
.sn-body p { font-size: 11px; color: var(--muted); }

/* Chat Mockup */
.chat-mock { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.chat-msg { display: flex; align-items: flex-end; gap: 8px; }
.cm-in { flex-direction: row; }
.cm-out { flex-direction: row-reverse; }
.cm-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cm-sub { background: linear-gradient(135deg, #CBD5E1, #94A3B8); }
.cm-chat { background: linear-gradient(135deg, #A5D6A7, #66BB6A); }
.cm-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    display: block;
    margin-bottom: 4px;
}
.cm-label.right { text-align: right; }
.cm-bubble {
    background: var(--white);
    border-radius: 14px 14px 14px 4px;
    padding: 9px 13px;
    font-size: 12.5px;
    color: var(--text);
    font-weight: 500;
    max-width: 160px;
}
.cm-bubble.out {
    border-radius: 14px 14px 4px 14px;
    background: rgba(255,255,255,.2);
    color: var(--white);
}

/* Calendar Mockup */
.cal-mock {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 14px;
    width: 100%;
    font-size: 11px;
}
.cal-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}
.cal-head span {
    text-align: center;
    font-weight: 700;
    color: var(--muted);
    padding: 4px 0;
}
.cal-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cd {
    text-align: center;
    padding: 4px 2px;
    font-weight: 500;
    color: var(--text);
    border-radius: 4px;
    font-size: 10px;
}
.cd-empty { visibility: hidden; }
.cd-sched {
    grid-column: span 2;
    background: var(--blue);
    color: white;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cd-today {
    background: var(--blue);
    color: white;
    border-radius: 50%;
    font-weight: 700;
}
.cd-today2 {
    background: var(--blue-light);
    color: var(--blue);
    border-radius: 50%;
    font-weight: 700;
}

/* Growth Mockup */
.growth-mock {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.growth-badge-ui {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.15);
    border-radius: var(--radius-md);
    padding: 10px 14px;
}
.gb-icon { font-size: 24px; }
.growth-badge-ui strong { display: block; font-size: 12px; font-weight: 700; color: white; }
.growth-badge-ui span { font-size: 11px; color: rgba(255,255,255,.75); }
.growth-mini-chart { width: 100%; height: 60px; }

/* Protect Mockup */
.protect-mock {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-bottom: 8px;
}
.protect-globe {
    position: relative;
    width: 120px; height: 80px;
    display: flex; align-items: center; justify-content: center;
}
.globe-ring {
    position: absolute;
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 50%;
}
.r1 { width: 80px; height: 80px; }
.r2 { width: 120px; height: 80px; }
.globe-dot {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff6b6b;
}
.gd1 { top: 15px; left: 20px; }
.gd2 { top: 45px; left: 70px; }
.gd3 { top: 20px; right: 15px; }
.banned-badge-ui {
    background: rgba(255,255,255,.15);
    border-radius: 100px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Revenue Mockup */
.rev-mock {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rev-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,.15);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}
.rev-block { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.rev-val { font-size: 15px; font-weight: 800; color: white; }
.rev-val.green { color: #6EE7B7; }
.rev-lbl { font-size: 10px; color: rgba(255,255,255,.65); font-weight: 500; }
.rev-sep { width: 1px; height: 32px; background: rgba(255,255,255,.2); }
.rev-bar-wrap { display: flex; flex-direction: column; gap: 7px; }
.rev-bar-track {
    height: 6px;
    background: rgba(255,255,255,.15);
    border-radius: 3px;
    overflow: hidden;
}
.rev-bar-fill {
    height: 100%;
    width: 88%;
    background: rgba(255,255,255,.7);
    border-radius: 3px;
    animation: barGrow 1.2s var(--ease) 1s both;
    transform-origin: left;
}
@keyframes barGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Feature Card Body */
.feat-body {
    padding: 20px 24px 24px;
    background: var(--blue);
    border-top: 1px solid rgba(255,255,255,.1);
}
.feat-body h3 {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
    line-height: 1.3;
}
.feat-body p { font-size: 13.5px; color: rgba(255,255,255,.78); line-height: 1.65; margin-bottom: 16px; }
.feat-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 20px;
    background: var(--white);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    transition: background .15s, transform .15s;
}
.feat-link:hover { background: var(--blue-light); transform: translateX(3px); }

/* ─────────────────────────────────────────
   STATS SECTION
───────────────────────────────────────── */
.stats-section {
    padding: 80px 0;
    background: var(--blue-light);
}
.stats-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
}
.stat-item { text-align: center; }
.stat-val {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}
.stat-pre {
    font-family: var(--font-head);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    color: var(--blue);
}
.count {
    font-family: var(--font-head);
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
}
.stat-suf {
    font-family: var(--font-head);
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 700;
    color: var(--blue);
}
.stat-item p { font-size: 14px; color: var(--muted); margin-top: 6px; font-weight: 500; }
.stat-div {
    width: 1px;
    height: 60px;
    background: var(--border);
}

/* ─────────────────────────────────────────
   PROCESS SECTION
───────────────────────────────────────── */
.process-section {
    padding: 96px 0;
}
.process-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
}
.ps-step {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    transition: background .2s;
}
.ps-step:hover { background: var(--blue-light); }
.ps-num {
    font-family: var(--font-head);
    font-size: 40px;
    font-weight: 800;
    color: var(--blue);
    line-height: 1;
    opacity: .35;
}
.ps-content h3 {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
}
.ps-content p { font-size: 14px; color: var(--muted); line-height: 1.65; }
.ps-connector {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, var(--blue), transparent);
    margin: 40px 0;
    opacity: .35;
    align-self: flex-start;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────── */
.testimonials-section {
    padding: 96px 0;
    background: var(--blue-light);
}
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}
.testi-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 28px;
    border: 1px solid var(--border);
    transition: transform .25s, box-shadow .25s;
    position: relative;
}
.testi-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.testi-card.featured {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(26,171,224,.15);
    transform: translateY(-8px);
}
.testi-card.featured:hover { transform: translateY(-12px); }
.feat-badge {
    display: inline-block;
    background: var(--blue);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    margin-bottom: 14px;
}
.stars {
    font-size: 18px;
    color: #FBBF24;
    margin-bottom: 14px;
    letter-spacing: 1px;
}
.testi-card p {
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 20px;
    font-style: italic;
}
.testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ta-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
    color: white;
    flex-shrink: 0;
}
.av1 { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
.av2 { background: linear-gradient(135deg, #EC4899, #F97316); }
.av3 { background: linear-gradient(135deg, #10B981, #06B6D4); }
.testi-author strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.testi-author span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }

/* ─────────────────────────────────────────
   APPLY SECTION
───────────────────────────────────────── */
.apply-section {
    padding: 96px 0;
    background: var(--white);
}
.apply-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.apply-left h2 {
    font-family: var(--font-head);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -1px;
    margin-bottom: 18px;
}
.apply-left p { font-size: 16px; color: var(--muted); line-height: 1.7; margin-bottom: 28px; }
.apply-trust-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.apply-trust-list span {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Form (click anywhere to open the Apply modal) */
.apply-form-wrap {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.apply-form-wrap:hover,
.apply-form-wrap:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(10,20,35,.14);
    border-color: var(--blue);
}
.apply-form-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.apply-form-wrap .apply-form,
.apply-form-wrap input,
.apply-form-wrap select,
.apply-form-wrap .btn-submit {
    pointer-events: none;
}
.apply-form-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--blue-light);
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.apply-form-wrap:hover .apply-form-badge,
.apply-form-wrap:focus-visible .apply-form-badge {
    opacity: 1;
    transform: translateX(0);
}
.apply-form h3 {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 24px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text); }
.form-group input,
.form-group select {
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text);
    background: var(--white);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.form-group input:focus,
.form-group select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(26,171,224,.12);
}
.form-group input::placeholder { color: #9CA3AF; }
.btn-submit {
    width: 100%;
    padding: 15px 28px;
    background: var(--blue);
    color: white;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
    transition: background .2s, box-shadow .2s, transform .15s;
    font-family: var(--font-body);
}
.btn-submit:hover {
    background: var(--blue-hover);
    box-shadow: var(--shadow-blue);
    transform: translateY(-2px);
}
.form-note { font-size: 12px; color: var(--muted); text-align: center; }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.footer {
    background: var(--dark);
    color: rgba(255,255,255,.7);
    padding: 64px 0 0;
}
.footer-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
.footer-top {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand p {
    font-size: 14px;
    line-height: 1.7;
    margin: 14px 0 20px;
}
.logo-footer { color: rgba(255,255,255,.9); }
.logo-footer span { color: var(--blue); }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.6);
    transition: background .15s, color .15s;
}
.footer-socials a:hover { background: var(--blue); color: white; }
.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.footer-col h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.9);
    margin-bottom: 16px;
}
.footer-col a {
    display: block;
    font-size: 13.5px;
    color: rgba(255,255,255,.55);
    margin-bottom: 10px;
    transition: color .15s;
}
.footer-col a:hover { color: var(--blue); }
.footer-bottom {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}
.footer-eu { opacity: .5; }

/* ─────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─────────────────────────────────────────
   KEYFRAMES
───────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1100px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .process-steps { flex-direction: column; }
    .ps-connector { width: 40px; height: 2px; margin: 0 24px; align-self: auto; background: linear-gradient(to right, var(--blue), transparent); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .hero-container { grid-template-columns: 1fr; gap: 48px; }
    .hero-media { order: -1; }
    .media-frame { max-width: 480px; margin: 0 auto; }
    .story-inner { grid-template-columns: 1fr; gap: 40px; }
    .story-media { order: -1; min-height: 320px; max-width: 420px; margin: 0 auto; width: 100%; }
    .testi-grid { grid-template-columns: 1fr; }
    .testi-card.featured { transform: none; }
    .apply-inner { grid-template-columns: 1fr; gap: 48px; }
    .footer-top { grid-template-columns: 1fr; gap: 40px; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .values-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    :root { --nav-h: 64px; }

    .nav-links { display: none; }
    .nav-links.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: var(--nav-h); left: 0; right: 0;
        height: calc(100vh - var(--nav-h));
        background:
            radial-gradient(circle at 15% 8%, rgba(168,85,247,.16) 0%, transparent 42%),
            radial-gradient(circle at 90% 18%, rgba(236,72,153,.14) 0%, transparent 40%),
            radial-gradient(circle at 20% 92%, rgba(26,171,224,.14) 0%, transparent 45%),
            #060E18;
        padding: 14px 14px 18px;
        gap: 3px;
        z-index: 5999;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .nav-links.open li { width: 100%; opacity: 0; transform: translateY(10px); animation: navItemIn .4s var(--ease) forwards; }
    .nav-links.open li:nth-child(1) { animation-delay: .03s; }
    .nav-links.open li:nth-child(2) { animation-delay: .07s; }
    .nav-links.open li:nth-child(3) { animation-delay: .11s; }
    .nav-links.open li:nth-child(4) { animation-delay: .15s; }
    .nav-links.open li:nth-child(5) { animation-delay: .19s; }
    .nav-links.open li:nth-child(6) { animation-delay: .23s; }
    @keyframes navItemIn {
        to { opacity: 1; transform: translateY(0); }
    }
    .nav-links.open > li:not(.nav-mobile-foot) > a {
        width: 100%;
        justify-content: space-between;
        padding: 15px 14px;
        border-radius: var(--radius-md);
        font-size: 16.5px;
        font-weight: 600;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav-links.open > li:nth-last-child(2) > a { border-bottom: none; }
    .nav-links.open > li:not(.nav-mobile-foot) > a:active { background: rgba(255,255,255,.06); }
    .nav-mobile-label { display: none; align-items: center; gap: 10px; }
    .nav-links.open .nav-mobile-label { display: inline-flex; }
    .nav-mobile-icon { font-size: 18px; }
    .nav-links.open .nav-mobile-icon { display: inline-block; }
    .nav-links.open .dropdown {
        position: static !important;
        transform: none !important;
        box-shadow: none;
        border: none;
        border-left: 2px solid rgba(26,171,224,.4);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        background: rgba(255,255,255,.03);
        margin: 0 0 4px 22px;
        padding: 0 6px 0 10px;
        max-height: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        overflow: hidden;
        transition: max-height .3s var(--ease), padding .3s var(--ease);
    }
    .nav-links.open li.mobile-open .dropdown {
        max-height: 240px;
        padding: 6px 6px 6px 10px;
    }
    .nav-links.open li.mobile-open > a svg { transform: rotate(180deg); }
    .nav-links.open .dropdown a { color: rgba(255,255,255,.6); font-size: 14.5px; }
    .nav-links.open .dropdown a:hover { background: rgba(26,171,224,.12); color: var(--blue); }
    .nav-links.open .dropdown::before { display: none; }

    /* Footer: language chips + Apply CTA, pinned to the bottom of the panel */
    .nav-links.open .nav-mobile-foot {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid rgba(255,255,255,.08);
    }
    .nav-mobile-langs {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    .nav-links.open .nav-mobile-langs a {
        display: flex;
        padding: 4px;
        border-radius: 5px;
        border: 1px solid rgba(255,255,255,.1);
        transition: border-color .15s, transform .15s;
    }
    .nav-mobile-langs a:active { transform: scale(.92); border-color: var(--blue); }
    .nav-links.open .nav-mobile-apply {
        width: 100%;
        justify-content: center;
        background: var(--grad);
        font-size: 15.5px;
        font-weight: 700;
        padding: 15px 20px;
    }

    .mobile-toggle {
        display: flex;
        position: relative;
        z-index: 6001;
    }
    .btn-nav-apply span { display: none; }

    .nav-container {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 0 20px;
    }
    .lang-switcher { display: none; }
    .nav-right {
        border-left: none;
        padding-left: 0;
        gap: 10px;
    }
    .section-wrap { padding: 0 20px; }
    .hero { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 48px; }
    .hero-container { padding: 0 20px; }
    .features-section { padding: 64px 0; }
    .features-grid { grid-template-columns: 1fr; }
    .stats-section { padding: 60px 0; }
    .stats-inner { gap: 32px; }
    .stat-div { display: none; }
    .process-section { padding: 64px 0; }
    .ps-connector { display: none; }
    .process-steps { gap: 8px; }
    .testimonials-section { padding: 64px 0; }
    .apply-section { padding: 64px 0; }
    .apply-form-wrap { padding: 24px 20px; }
    .form-row { grid-template-columns: 1fr; }
    .footer { padding: 48px 0 0; }
    .footer-wrap { padding: 0 20px; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

    .cookie-bar {
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
        top: 50%;
        bottom: auto;
        left: 50%;
        transform: translate(-50%, -50%) scale(.94);
        opacity: 0;
        transition: transform .35s var(--ease), opacity .35s var(--ease);
    }
    .cookie-bar.visible { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    .cookie-actions { justify-content: flex-end; }

    .join-notification { max-width: 260px; }

    .media-video-card { height: 200px; }
}

@media (max-width: 480px) {
    .hero-heading { font-size: 32px; }
    .hero-ctas { flex-direction: column; align-items: flex-start; }
    .trust-row { gap: 12px; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────────────
   VIDEO INFO OVERLAY
───────────────────────────────────────── */
.video-info-overlay {
    position: absolute;
    bottom: 14px; left: 14px; right: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 3;
}
.vi-tag, .vi-count {
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 100px;
    padding: 5px 11px;
    font-size: 10.5px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
}

/* ─────────────────────────────────────────
   INTERACTIVE HERO CHART (overrides old)
───────────────────────────────────────── */
.media-chart-card {
    background: linear-gradient(165deg, #14203380 0%, #0D1B2A 100%), #0F1B2E;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius-lg);
    padding: 14px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    overflow: visible;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.media-chart-card .hc-val { color: rgba(255,255,255,.95); }
.media-chart-card .hc-val-suffix { color: rgba(255,255,255,.4); }
.media-chart-card .hc-growth {
    color: #4ADE80;
    background: rgba(74,222,128,.15);
}
.media-chart-card .hc-periods { background: rgba(255,255,255,.06); }
.media-chart-card .hcp { color: rgba(255,255,255,.45); }
.media-chart-card .hcp:hover:not(.active) { color: rgba(255,255,255,.75); }
.media-chart-card .hcp.active {
    background: rgba(255,255,255,.12);
    color: #6ED4F5;
    box-shadow: none;
}
.media-chart-card .hc-xlabels { color: rgba(255,255,255,.32); }

.hc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.hc-stats {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.hc-val {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.5px;
    line-height: 1;
}

.hc-val-suffix {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-left: -4px;
}

.hc-growth {
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    background: #dcfce7;
    padding: 3px 8px;
    border-radius: 100px;
    letter-spacing: .01em;
}

.hc-periods {
    display: flex;
    gap: 1px;
    background: var(--border-light);
    border-radius: 100px;
    padding: 2px;
}

.hcp {
    padding: 4px 9px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    font-family: var(--font-body);
    line-height: 1.4;
}

.hcp.active {
    background: var(--white);
    color: var(--blue);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.hcp:hover:not(.active) { color: var(--text); }

.hc-chart-area {
    position: relative;
    height: 96px;
    flex-shrink: 0;
}

.hc-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.hc-hover-zone {
    position: absolute;
    inset: 0;
    cursor: crosshair;
}

.hc-tooltip {
    position: absolute;
    top: -6px;
    background: var(--dark);
    color: white;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 11px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
    white-space: nowrap;
    transform: translateX(-50%) translateY(-100%);
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.hc-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom: none;
    border-top-color: var(--dark);
}

.hc-tooltip span {
    display: block;
    color: rgba(255,255,255,.6);
    font-size: 10px;
    margin-bottom: 2px;
    font-weight: 500;
}

.hc-tooltip strong {
    font-size: 13px;
    font-weight: 700;
}

.hc-xlabels {
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    color: var(--muted);
    font-weight: 500;
    padding: 0 2px;
    margin-top: -2px;
    min-height: 14px;
}

/* ─────────────────────────────────────────
   SECTION BADGE (shared)
───────────────────────────────────────── */
.sec-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--blue-light);
    border: 1.5px solid rgba(26,171,224,.22);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 16px;
}

/* ─────────────────────────────────────────
   PLATFORMS MARQUEE
───────────────────────────────────────── */
.plat-strip {
    padding: 36px 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.plat-inner { max-width: 100%; }
.plat-label {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 20px;
}
.plat-mask {
    position: relative;
}
.plat-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.plat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    cursor: default;
    transition: border-color .15s, background .15s, transform .25s var(--ease), box-shadow .25s var(--ease);
    user-select: none;
}
.plat-pill:hover {
    border-color: var(--blue);
    background: var(--blue-light);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(26,171,224,.18);
}

/* ─────────────────────────────────────────
   PROOF / RESULTS SECTION
───────────────────────────────────────── */
.prf-section {
    padding: 96px 0;
    background: var(--white);
}
.prf-head {
    text-align: center;
    max-width: 580px;
    margin: 0 auto 56px;
}
.prf-head h2 {
    font-family: var(--font-head);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -1.2px;
    line-height: 1.08;
    margin-bottom: 14px;
}
.prf-head p { font-size: 16px; color: var(--muted); line-height: 1.7; }

.prf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

/* Journey Card */
.jny-card {
    grid-column: span 2;
    background: var(--blue);
    border-radius: var(--radius-xl);
    padding: 28px;
    color: white;
    display: flex;
    flex-direction: column;
}
.jny-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.jny-label { font-size: 13px; font-weight: 600; opacity: .75; }
.jny-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.18);
    border-radius: 100px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
}
.jny-timeline {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex: 1;
    min-height: 160px;
    margin-bottom: 20px;
}
.jny-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
}
.jny-col-peak { position: relative; }
.jny-peak-tag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 3px;
    background: white;
    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 100px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,.22);
    z-index: 2;
}
.jny-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}
.jny-bar {
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.16) 100%);
    border-radius: 6px 6px 0 0;
    transition: height 1s var(--ease);
}
.jny-bar.peak {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.85) 100%);
    box-shadow: 0 -6px 18px rgba(255,255,255,.35);
}
.jny-timeline.animate .jny-bar {
    height: var(--target-h, 0%);
}
.jny-month {
    font-size: 9.5px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    text-align: center;
    line-height: 1.2;
}
.jny-val {
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    text-align: center;
    white-space: nowrap;
}
.peak-val { color: white; font-size: 11px; }
.jny-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.15);
}
.jny-growth {
    background: rgba(255,255,255,.2);
    border-radius: 100px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 700;
}
.jny-note { font-size: 12.5px; opacity: .65; }

/* Proof Screenshot Cards */
.prf-shots {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.prf-shot {
    background: #0D1117;
    border-radius: var(--radius-lg);
    padding: 18px;
    color: white;
    border: 1px solid rgba(255,255,255,.06);
}
.alt-shot { background: #111827; }
.psh-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.psh-platform {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.psh-period { font-size: 11px; color: rgba(255,255,255,.35); }
.psh-amount {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 800;
    color: #6EE7B7;
    letter-spacing: -1px;
    margin-bottom: 2px;
}
.psh-sublabel { font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 14px; }
.psh-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.psh-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,.45);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.psh-blur { letter-spacing: 2px; color: rgba(255,255,255,.25); }
.psh-verified {
    font-size: 11px;
    color: #6EE7B7;
    font-weight: 600;
}

/* Proof Highlights — full-width row */
.prf-highlights {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.prh-item {
    background: var(--blue-light);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    transition: transform .2s, box-shadow .2s;
}
.prh-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.prh-num {
    display: block;
    font-family: var(--font-head);
    font-size: 32px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -1px;
    margin-bottom: 8px;
}
.prh-item p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ─────────────────────────────────────────
   PRICING SECTION
───────────────────────────────────────── */
.prx-section {
    padding: 96px 0;
    background: var(--blue-light);
}
.prx-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 32px;
    align-items: start;
    margin-top: 8px;
}

.prx-card {
    background: var(--dark);
    border-radius: var(--radius-xl);
    padding: 36px;
    color: white;
    position: relative;
    overflow: hidden;
}
.prx-card::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26,171,224,.15) 0%, transparent 70%);
}
.prx-badge {
    display: inline-block;
    background: var(--blue);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 20px;
}
.prx-model {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.prx-rate {
    font-family: var(--font-head);
    font-size: 72px;
    font-weight: 800;
    color: white;
    letter-spacing: -3px;
    line-height: 1;
    margin-bottom: 6px;
}
.prx-rate span {
    font-size: 40px;
    font-weight: 700;
    color: var(--blue);
}
.prx-desc {
    font-size: 14px;
    color: rgba(255,255,255,.55);
    line-height: 1.6;
    margin-bottom: 28px;
}
.prx-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 32px;
}
.prx-list li {
    font-size: 14px;
    color: rgba(255,255,255,.8);
    padding-left: 22px;
    position: relative;
    line-height: 1.4;
}
.prx-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--blue);
    font-weight: 700;
}
.prx-cta {
    display: block;
    padding: 15px 24px;
    background: var(--blue);
    color: white;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    transition: background .2s, box-shadow .2s, transform .15s;
    margin-bottom: 12px;
}
.prx-cta:hover {
    background: var(--blue-hover);
    box-shadow: var(--shadow-blue);
    transform: translateY(-2px);
}
.prx-note { font-size: 12px; color: rgba(255,255,255,.35); text-align: center; }

/* Comparison */
.prx-compare {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}
.prc-title {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 20px;
}
.prc-labels {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--border);
}
.prcl-solo {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
}
.prcl-agency {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    text-align: center;
}
.prc-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}
.prc-row:last-of-type { border-bottom: none; }
.prc-metric { font-size: 13.5px; color: var(--text); font-weight: 500; }
.prc-solo {
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
}
.prc-agency {
    font-size: 12.5px;
    color: var(--blue);
    font-weight: 700;
    text-align: center;
}

/* Net earnings calculator */
.prc-calc {
    margin-top: 20px;
    background: var(--blue-light);
    border-radius: var(--radius-md);
    padding: 18px;
    border: 1px solid rgba(26,171,224,.15);
}
.prc-calc-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
}
.prc-calc-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 6px 0;
    color: var(--text);
    border-bottom: 1px solid rgba(26,171,224,.1);
}
.prc-calc-row.fee { color: var(--muted); }
.prc-calc-row.total {
    font-weight: 800;
    font-size: 16px;
    color: var(--blue);
    border-bottom: none;
    padding-top: 10px;
}
.prc-calc-vs {
    font-size: 12px;
    color: var(--muted);
    text-align: right;
    margin-top: 4px;
}

/* ─────────────────────────────────────────
   REFER SECTION
───────────────────────────────────────── */
.refsec-section {
    padding: 96px 0;
    background: var(--white);
}
.refsec-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.refsec-left h2 {
    font-family: var(--font-head);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 16px;
}
.ref-em {
    font-style: normal;
    color: var(--blue);
}
.refsec-left p {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 28px;
}
.refsec-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}
.rfs-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.rfs-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--blue);
    color: white;
    font-size: 13px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.rfs-step p { font-size: 14.5px; color: var(--text); line-height: 1.55; }

/* Refer Card */
.refsec-card {
    background: var(--dark);
    border-radius: var(--radius-xl);
    padding: 28px;
    color: white;
}
.rfc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.rfc-label { font-size: 13px; color: rgba(255,255,255,.5); }
.rfc-amount {
    font-family: var(--font-head);
    font-size: 32px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -1px;
}
.rfc-progress { margin-bottom: 22px; }
.rfcp-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 8px;
    color: rgba(255,255,255,.65);
}
.rfcp-pct { color: var(--blue); font-weight: 700; }
.rfcp-track {
    height: 8px;
    background: rgba(255,255,255,.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.rfcp-fill {
    height: 100%;
    width: 64%;
    background: linear-gradient(90deg, var(--blue), #60D0F8);
    border-radius: 4px;
    animation: barGrow 1.4s var(--ease) .5s both;
}
.rfcp-sub { font-size: 11.5px; color: rgba(255,255,255,.35); }
.rfc-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,.05);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 18px;
}
.rfcs-item { flex: 1; text-align: center; }
.rfcs-item strong { display: block; font-size: 18px; font-weight: 800; color: white; margin-bottom: 3px; }
.rfcs-item span { font-size: 11px; color: rgba(255,255,255,.45); }
.rfcs-div { width: 1px; height: 36px; background: rgba(255,255,255,.1); }
.rfc-share-btn {
    width: 100%;
    padding: 13px;
    background: var(--blue);
    color: white;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    font-family: var(--font-body);
    transition: background .2s, transform .15s;
}
.rfc-share-btn:hover { background: var(--blue-hover); transform: translateY(-1px); }

/* ─────────────────────────────────────────
   FAQ SECTION
───────────────────────────────────────── */
.faq-section {
    padding: 96px 0;
    background: var(--white);
    border-top: 1px solid var(--border);
}
.faq-inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 80px;
    align-items: start;
}

/* FAQ Left */
.faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 20px;
}
.faq-heading {
    font-family: var(--font-head);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -1px;
    line-height: 1.12;
    margin-bottom: 14px;
}
.faq-blue { color: var(--blue); }
.faq-sub {
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 24px;
}
.faq-contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.faq-avatars { display: flex; }
.fa-av {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 2.5px solid var(--white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: white;
    margin-left: -10px;
    flex-shrink: 0;
}
.fa-av:first-child { margin-left: 0; }
.faa1 { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
.faa2 { background: linear-gradient(135deg, #EC4899, #F97316); }
.faa3 { background: linear-gradient(135deg, #10B981, #06B6D4); }
.faq-btns { display: flex; gap: 10px; }
.faq-btn-wa {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: #25D366;
    color: white;
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 600;
    transition: opacity .15s, transform .15s;
}
.faq-btn-wa:hover { opacity: .9; transform: translateY(-1px); }
.faq-btn-email {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
    transition: border-color .15s, background .15s;
    flex-shrink: 0;
}
.faq-btn-email:hover { border-color: var(--blue); background: var(--blue-light); color: var(--blue); }

.faq-support-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.fsb {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--blue-light);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    border: 1px solid rgba(26,171,224,.1);
}
.fsb-icon { font-size: 20px; flex-shrink: 0; }
.fsb strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--dark); }
.fsb span { font-size: 12px; color: var(--muted); }
.faq-mail-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s;
}
.faq-mail-link:hover { color: var(--blue); }

/* FAQ Accordion */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.faq-item {
    background: var(--blue-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(26,171,224,.12);
    transition: box-shadow .2s, border-color .2s;
}
.faq-item.open {
    box-shadow: 0 4px 20px rgba(26,171,224,.14);
    border-color: rgba(26,171,224,.3);
}
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-body);
    transition: color .15s;
}
.faq-q:hover { color: var(--blue); }
.faq-icon {
    font-size: 22px;
    font-weight: 300;
    color: var(--blue);
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .35s var(--ease);
    line-height: 1;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--ease);
}
.faq-item.open .faq-a { max-height: 300px; }
.faq-a p {
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.7;
    padding: 0 20px 18px 60px;
}

/* ─────────────────────────────────────────
   NEW SECTIONS RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1100px) {
    .prf-grid { grid-template-columns: 1fr 1fr; }
    .jny-card { grid-column: 1 / -1; }
    .prf-highlights { grid-template-columns: repeat(3, 1fr); }
    .prx-inner { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .prf-grid { grid-template-columns: 1fr; }
    .jny-card { grid-column: auto; }
    .prf-highlights { grid-column: auto; grid-template-columns: 1fr; }
    .prf-shots { grid-column: auto; }
    .refsec-inner { grid-template-columns: 1fr; gap: 48px; }
    .faq-inner { grid-template-columns: 1fr; gap: 40px; }
    .faq-left { order: 0; }
    .faq-right { order: 1; }
}

@media (max-width: 600px) {
    .prf-highlights { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .prf-section, .prx-section, .refsec-section, .faq-section { padding: 64px 0; }
    .jny-timeline { min-height: 120px; }
    .prx-card { padding: 24px; }
    .prx-compare { padding: 22px; }
    .refsec-card { padding: 22px; }
}

/* ═══════════════════════════════════════════════════
   MODERNIZATION LAYER — design differentiation
═══════════════════════════════════════════════════ */

/* ── New gradient tokens ── */
:root {
    --teal:       #0ECEC0;
    --grad:       linear-gradient(135deg, #1AABE0 0%, #0ECEC0 55%, #EC4899 100%);
    --grad-90:    linear-gradient(90deg,  #1AABE0 0%, #0ECEC0 55%, #EC4899 100%);
    --grad-rev:   linear-gradient(135deg, #0ECEC0 0%, #1AABE0 100%);
    --glow:       0 8px 36px rgba(26,171,224,.38);
    --glow-teal:  0 8px 28px rgba(14,206,192,.30);
}

/* ── Logo: gradient MODELS text ── */
.logo span {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Hero background: dot grid + orbs ── */
.hero {
    position: relative;
    background-image: radial-gradient(circle, rgba(26,171,224,.11) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -140px; right: -100px;
    width: 620px; height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26,171,224,.09) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -40px; left: 18%;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14,206,192,.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.hero-container { position: relative; z-index: 1; }

/* ── Hero amount: gradient text ── */
.hero-em {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
    color: transparent;
}

/* ── Progress bar: gradient ── */
.progress-bar {
    background: var(--grad-90);
}

/* ── All primary buttons: gradient ── */
.btn-nav-apply,
.btn-hero-primary,
.btn-submit,
.prx-cta {
    background: var(--grad);
}
.btn-nav-apply:hover,
.btn-hero-primary:hover {
    background: var(--grad-rev);
    box-shadow: var(--glow);
}
.btn-submit:hover,
.prx-cta:hover {
    background: var(--grad-rev);
    box-shadow: var(--glow);
    transform: translateY(-2px);
}

/* ── Media frame: teal-to-blue gradient border ── */
.media-frame {
    background: var(--grad);
}

/* ── Feature cards: subtle gradient instead of flat blue ── */
.feat-card {
    background: linear-gradient(150deg, #1DB8E8 0%, #0F9EC8 100%);
}
.feat-body { background: linear-gradient(150deg, #1DB8E8 0%, #0F9EC8 100%); }

/* ── Feat "See more" link: gradient on hover ── */
.feat-link:hover {
    background: var(--grad);
    color: white;
    transform: none;
}

/* ── Stats section: dark with gradient accents ── */
.stats-section {
    background: var(--dark);
    position: relative;
    overflow: hidden;
}
.stats-section::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(26,171,224,.08) 0%, transparent 70%);
    pointer-events: none;
}
.stats-section .count {
    color: var(--white);
}
.stats-section .stat-pre { color: var(--blue); }
.stats-section .stat-suf { color: rgba(255,255,255,.55); }
.stats-section .stat-item p { color: rgba(255,255,255,.45); }
.stats-section .stat-div  { background: rgba(255,255,255,.08); }

/* Animated gradient for count numbers */
.stats-section .count {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Section headings: gradient underline bar ── */
.section-head h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--grad);
    border-radius: 2px;
    margin: 14px auto 0;
}

/* ── Proof section heading ── */
.prf-head h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--grad);
    border-radius: 2px;
    margin: 14px auto 0;
}

/* ── Journey card: gradient ── */
.jny-card {
    background: var(--grad);
}

/* ── FAQ blue accent word: gradient ── */
.faq-blue {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── FAQ open item: gradient left border ── */
.faq-item.open {
    border-left: 3px solid transparent;
    border-image: var(--grad) 1;
    border-image-slice: 1;
}

/* ── Refer section: gradient badge em ── */
.ref-em {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
}

/* ── Referral progress bar: gradient ── */
.rfcp-fill {
    background: var(--grad-90);
}

/* ── Pricing rate % color ── */
.prx-rate span { color: var(--teal); }

/* ── Apply section: subtle gradient bg ── */
.apply-section {
    background: linear-gradient(170deg, #F0FBFF 0%, var(--white) 60%);
}

/* ── Refer section: gradient bg ── */
.refsec-section {
    background: linear-gradient(180deg, var(--white) 0%, var(--blue-light) 100%);
}

/* ── WA float: gradient ring pulse ── */
.whatsapp-float::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--grad);
    opacity: 0;
    animation: floatRing 2.8s ease-in-out 1.5s infinite;
    z-index: -1;
}
@keyframes floatRing {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: .18; transform: scale(1.2); }
}

/* ── Trust items: teal checkmarks ── */
.trust-item svg { color: var(--teal); }

/* ── Apply form focus: gradient glow ── */
.form-group input:focus,
.form-group select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(14,206,192,.14);
}

/* ── Sec badge: gradient text ── */
.sec-badge {
    color: var(--blue);
    border-color: rgba(14,206,192,.3);
    background: linear-gradient(135deg, rgba(26,171,224,.08), rgba(14,206,192,.08));
}

/* ── Proof shot verified text: gradient ── */
.psh-verified {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* ── Featured testimonial: gradient border ── */
.testi-card.featured {
    border-color: transparent;
    background: linear-gradient(var(--white), var(--white)) padding-box,
                var(--grad) border-box;
    border-width: 2px;
}

/* ═══════════════════════════════════════════════════
   HERO + FEATURES REFINEMENT
═══════════════════════════════════════════════════ */

/* ── Hero: more subtle dot grid ── */
.hero {
    background-image: radial-gradient(circle, rgba(26,171,224,.042) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* ── Hero heading: 2-line, bigger, tighter ── */
.hero-heading {
    font-size: clamp(42px, 5.2vw, 66px);
    letter-spacing: -2.5px;
    line-height: 1.06;
}

/* ── Amount: own visual weight ── */
.hero-em {
    letter-spacing: -3px;
}

/* ── Proof pill: gradient tint ── */
.proof-pill {
    background: linear-gradient(135deg, rgba(26,171,224,.06), rgba(14,206,192,.06));
    border-color: rgba(14,206,192,.25);
}

/* ── Hero live badge ── */
.hero-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(26,171,224,.18);
    border-radius: 100px;
    padding: 6px 14px 6px 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    width: fit-content;
    margin-bottom: -8px;
}
.hlive-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.2);
    animation: livePulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
    50% { box-shadow: 0 0 0 6px rgba(34,197,94,.08); }
}

/* ══ DARK FEATURE CARDS ══════════════════════════ */
.feat-card {
    background: #0D1B2A;
    position: relative;
    overflow: visible; /* allow ::before to show */
}
.feat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    z-index: 2;
}
.feat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 56px rgba(26,171,224,.22);
}

/* ── Social notification items: white on dark ── */
.sn-item {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(4px);
}
.sn-body strong { color: rgba(255,255,255,.9); }
.sn-body p { color: rgba(255,255,255,.45); }

/* ── Chat bubbles on dark ── */
.cm-bubble {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.08);
}
.cm-bubble.out {
    background: rgba(26,171,224,.25);
    color: white;
    border-color: rgba(26,171,224,.3);
}

/* ── Calendar on dark: keep white card ── */
.cal-mock {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
}
.cd { color: rgba(255,255,255,.6); }
.cal-head span { color: rgba(255,255,255,.4); }

/* ── Feat body: transparent on dark card ── */
.feat-body {
    background: transparent;
    border-top: 1px solid rgba(255,255,255,.07);
}
.feat-body h3 { color: #F0F9FF; }
.feat-body p  { color: rgba(255,255,255,.58); }

/* ── See more button: glass on dark ── */
.feat-link {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.12);
}
.feat-link:hover {
    background: var(--grad);
    color: white;
    border-color: transparent;
    transform: none;
}

/* ── Features section: keep white bg ── */
.features-section {
    background: var(--white);
}

/* ── "We care about you" heading: gradient underline ── */
.features-section .section-head h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--grad);
    border-radius: 2px;
    margin: 14px auto 0;
}

/* ── Section bg decoration: faint orb behind features ── */
.features-section {
    position: relative;
    overflow: hidden;
}
.features-section::after {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14,206,192,.05) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.features-grid { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════
   NEURAL NETWORK CANVAS + FULL DARK THEME
═══════════════════════════════════════════════════════ */

/* ── Canvas base ── */
.bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* ── Body dark ── */
body {
    background: #060E18;
    color: rgba(255,255,255,.82);
}

/* ── Remove top stripe ── */
.feat-card::before { display: none !important; }

/* ── Nav dark ── */
.navbar {
    background: rgba(4, 10, 18, 0.82) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.navbar.scrolled {
    background: rgba(4, 10, 18, 0.96) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) !important;
}
.nav-links a { color: rgba(255,255,255,.7); }
.nav-links a:hover { color: var(--blue); background: rgba(26,171,224,.08); }
.mobile-toggle:hover { background: rgba(255,255,255,.08); }
.mobile-toggle span { background: rgba(255,255,255,.85); }
.dropdown {
    background: rgba(8, 18, 30, 0.97);
    border-color: rgba(255,255,255,.07);
}
.dropdown a { color: rgba(255,255,255,.65); }
.dropdown a:hover { background: rgba(26,171,224,.1); color: var(--blue); }
.navbar::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 20%, rgba(255,255,255,.08) 80%, transparent); }
.nav-right { border-left-color: rgba(255,255,255,.1); }
.lang-switcher {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.1);
    color: rgba(255,255,255,.65);
}
.lang-switcher:hover { box-shadow: 0 4px 14px rgba(26,171,224,.22); }
.lang-dropdown { background: rgba(8,18,30,.97); border-color: rgba(255,255,255,.07); }
.lang-dropdown a { color: rgba(255,255,255,.65); }

/* ── Hero dark ── */
.hero {
    background-image: none !important;
    background-color: transparent !important;
}
.proof-pill {
    background: rgba(255,255,255,.04);
    border-color: rgba(26,171,224,.2);
    color: rgba(255,255,255,.75);
}
.hero-heading { color: rgba(255,255,255,.95); }
.hero-sub { color: rgba(255,255,255,.55); }
.hero-live {
    background: rgba(255,255,255,.05);
    border-color: rgba(26,171,224,.2);
    color: rgba(255,255,255,.65);
}
.btn-hero-ghost {
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.03);
}
.btn-hero-ghost:hover {
    background: rgba(26,171,224,.1);
    border-color: var(--blue);
    color: var(--blue);
}
.apply-note { color: rgba(255,255,255,.38); }
.trust-item { color: rgba(255,255,255,.7); }

/* ── Platforms strip dark ── */
.plat-strip {
    background: rgba(4,12,22,.7);
    border-top-color: rgba(255,255,255,.05);
    border-bottom-color: rgba(255,255,255,.05);
}
.plat-label { color: rgba(255,255,255,.3); }
.plat-pill { border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }
.plat-pill:hover { border-color: rgba(26,171,224,.35); background: rgba(26,171,224,.07); color: rgba(255,255,255,.8); box-shadow: 0 8px 20px rgba(26,171,224,.25); }

/* ── Features section dark ── */
.features-section { background: transparent !important; overflow: hidden; }
.features-section::after { display: none; }
.section-head h2 { color: rgba(255,255,255,.93); }
.section-head p  { color: rgba(255,255,255,.48); }
.section-head h2::after { background: var(--grad); }

/* ── Stats already dark ── */

/* ── Process dark ── */
.process-section { background: transparent; }
.ps-content h3 { color: rgba(255,255,255,.9); }
.ps-content p  { color: rgba(255,255,255,.48); }
.ps-step:hover { background: rgba(26,171,224,.06); }
.ps-num { color: var(--blue); }

/* ── Testimonials dark ── */
.testimonials-section { background: rgba(4,12,22,.6); }
.testimonials-section .section-head h2 { color: rgba(255,255,255,.93); }
.testimonials-section .section-head p  { color: rgba(255,255,255,.48); }
.testi-card {
    background: rgba(10,22,36,.85);
    border-color: rgba(255,255,255,.06);
    backdrop-filter: blur(8px);
}
.testi-card p { color: rgba(255,255,255,.65); }
.testi-author strong { color: rgba(255,255,255,.9); }
.testi-author span   { color: rgba(255,255,255,.38); }
.testi-card.featured {
    border-color: transparent !important;
    background: linear-gradient(rgba(10,22,36,.9), rgba(10,22,36,.9)) padding-box,
                var(--grad) border-box !important;
}

/* ── Proof section dark ── */
.prf-section { background: transparent; }
.prf-head h2 { color: rgba(255,255,255,.93); }
.prf-head p  { color: rgba(255,255,255,.48); }
.prh-item {
    background: rgba(10,22,36,.8);
    backdrop-filter: blur(6px);
}
.prh-item p { color: rgba(255,255,255,.5); }

/* ── Pricing dark ── */
.prx-section { background: rgba(4,12,22,.65); }
.prx-section .section-head h2 { color: rgba(255,255,255,.93); }
.prx-section .section-head p  { color: rgba(255,255,255,.48); }
.prx-compare {
    background: rgba(10,22,36,.9);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: none;
}
.prc-title    { color: rgba(255,255,255,.82); }
.prc-metric   { color: rgba(255,255,255,.6); }
.prc-solo     { color: rgba(255,255,255,.38); }
.prc-labels   { border-bottom-color: rgba(255,255,255,.07); }
.prc-row      { border-bottom-color: rgba(255,255,255,.05); }
.prc-calc     { background: rgba(26,171,224,.07); border-color: rgba(26,171,224,.14); }
.prc-calc-title { color: rgba(255,255,255,.38); }
.prc-calc-row   { color: rgba(255,255,255,.7);  border-bottom-color: rgba(255,255,255,.05); }
.prc-calc-row.fee   { color: rgba(255,255,255,.4); }
.prc-calc-row.total { color: var(--teal); }
.prc-calc-vs  { color: rgba(255,255,255,.28); }

/* ── Refer dark ── */
.refsec-section { background: transparent; }
.refsec-left h2 { color: rgba(255,255,255,.93); }
.refsec-left p  { color: rgba(255,255,255,.52); }
.rfs-step p     { color: rgba(255,255,255,.6); }

/* ── FAQ dark ── */
.faq-section {
    background: rgba(4,12,22,.7);
    border-top-color: rgba(255,255,255,.05);
}
.faq-badge    { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.65); }
.faq-heading  { color: rgba(255,255,255,.93); }
.faq-sub      { color: rgba(255,255,255,.5); }
.faq-btn-email { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.55); }
.faq-btn-email:hover { background: rgba(26,171,224,.1); border-color: var(--blue); }
.fsb { background: rgba(26,171,224,.07); border-color: rgba(26,171,224,.12); }
.fsb strong { color: rgba(255,255,255,.85); }
.fsb span   { color: rgba(255,255,255,.42); }
.faq-mail-link { color: rgba(255,255,255,.38); }
.faq-mail-link:hover { color: var(--blue); }
.faq-item {
    background: rgba(26,171,224,.055);
    border-color: rgba(26,171,224,.1);
}
.faq-item.open {
    background: rgba(26,171,224,.09);
    border-color: rgba(26,171,224,.22);
    box-shadow: 0 4px 20px rgba(26,171,224,.1);
}
.faq-q   { color: rgba(255,255,255,.85); }
.faq-a p { color: rgba(255,255,255,.5); }

/* ── Apply section dark ── */
.apply-section { background: rgba(4,12,22,.65) !important; }
.apply-left h2 { color: rgba(255,255,255,.93); }
.apply-left p  { color: rgba(255,255,255,.52); }
.apply-trust-list span { color: rgba(255,255,255,.65); }
.apply-form-wrap {
    background: rgba(10,22,36,.9);
    border-color: rgba(255,255,255,.07);
    box-shadow: 0 4px 32px rgba(0,0,0,.3);
}
.apply-form h3 { color: rgba(255,255,255,.9); }
.form-group label { color: rgba(255,255,255,.62); }
.form-group input,
.form-group select {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.1);
    color: rgba(255,255,255,.85);
}
.form-group input::placeholder { color: rgba(255,255,255,.28); }
.form-group select option { background: #0D1B2A; color: white; }
.form-note { color: rgba(255,255,255,.32); }

/* ── Footer (already dark, tweak) ── */
.footer { background: #030810; }
.footer-wrap .logo-footer  { color: rgba(255,255,255,.88); }
.footer-brand p { color: rgba(255,255,255,.42); }
.footer-col h4  { color: rgba(255,255,255,.85); }
.footer-col a   { color: rgba(255,255,255,.42); }
.footer-bottom  { color: rgba(255,255,255,.3); }

/* ── Cookie & notification dark ── */
.cookie-bar {
    background: rgba(8,18,30,.96);
    border-color: rgba(255,255,255,.08);
}
.cookie-text strong { color: rgba(255,255,255,.9); }
.cookie-text p { color: rgba(255,255,255,.48); }
.btn-cookie-reject { background: rgba(255,255,255,.05); color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.1); }
.btn-cookie-accept { background: rgba(255,255,255,.88); color: #060E18; }

.join-notification { background: rgba(8,18,30,.95); border-color: rgba(255,255,255,.08); }
.notif-text strong { color: rgba(255,255,255,.9) !important; }
.notif-text p { color: rgba(255,255,255,.38) !important; }
.notif-close { color: rgba(255,255,255,.4); }

/* ════════════════════════════════════════
   BEAUTIFUL CHAT MOCKUP
════════════════════════════════════════ */
.chat-mock {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    overflow: hidden;
}

/* Header bar */
.chat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.ctb-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ctb-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.2);
    animation: livePulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
.ctb-title {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ctb-count {
    font-size: 10.5px;
    color: rgba(255,255,255,.3);
    font-weight: 500;
}

/* Messages area */
.chat-msgs {
    padding: 14px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.cm-in  { flex-direction: row; }
.cm-out { flex-direction: row-reverse; }

/* Avatar */
.cm-av-wrap { position: relative; flex-shrink: 0; }
.cm-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.cm-sub  { background: linear-gradient(135deg, #475569, #334155); }
.cm-chat { background: linear-gradient(135deg, #22c55e, #15803d); }
.cm-online {
    position: absolute;
    bottom: 0; right: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    border: 1.5px solid #0D1B2A;
}

/* Message body */
.cm-body   { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.cm-body-r { align-items: flex-end; }
.cm-name   { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.38); }
.cm-name-r { text-align: right; }
.cm-bubble {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px 14px 14px 14px;
    padding: 8px 12px;
    font-size: 13px;
    color: rgba(255,255,255,.9);
    font-weight: 500;
    max-width: 190px;
    line-height: 1.4;
    backdrop-filter: blur(4px);
}
.cm-bubble-out {
    background: rgba(26,171,224,.22);
    border-color: rgba(26,171,224,.28);
    border-radius: 14px 4px 14px 14px;
    color: white;
}
.cm-ts   { font-size: 9.5px; color: rgba(255,255,255,.28); padding: 0 2px; }
.cm-ts-r { text-align: right; }

/* Typing indicator */
.chat-typing-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    font-size: 10.5px;
    color: rgba(255,255,255,.38);
    font-weight: 500;
}
.ctr-dots {
    display: flex;
    gap: 3px;
    background: rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 5px 9px;
}
.ctr-dots span {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(26,171,224,.8);
    animation: typingBounce .9s ease-in-out infinite;
}
.ctr-dots span:nth-child(2) { animation-delay: .15s; }
.ctr-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ═══════════════════════════════════════════════════
   PINK / PURPLE ACCENTS — agency accent layer
═══════════════════════════════════════════════════ */
:root {
    --pink:     #EC4899;
    --purple:   #A855F7;
    --grad-pv:  linear-gradient(135deg, var(--blue) 0%, var(--purple) 55%, var(--pink) 100%);
    --glow-pv:  0 10px 36px rgba(168,85,247,.38);
}

/* Featured testimonial badge: pink/purple pop */
.feat-badge {
    background: var(--grad-pv);
}

/* Referral reward amount: pink/purple gradient text */
.rfc-amount {
    background: var(--grad-pv);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Pricing "Most Popular" badge */
.prx-badge {
    background: var(--grad-pv);
}

/* ═══════════════════════════════════════════════════
   APPLY MODAL
═══════════════════════════════════════════════════ */
.am-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2,6,14,.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.am-overlay.open {
    opacity: 1;
    visibility: visible;
}
.am-modal {
    position: relative;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    background: rgba(10,18,30,.98);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 90px rgba(0,0,0,.55), var(--glow-pv);
    overflow: hidden;
    transform: scale(.94) translateY(10px);
    transition: transform .35s var(--ease);
}
.am-overlay.open .am-modal {
    transform: scale(1) translateY(0);
}
.am-close {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 5;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.75);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, transform .15s;
}
.am-close:hover {
    background: rgba(255,255,255,.16);
    color: white;
    transform: rotate(90deg);
}

/* ── Visual (left) panel ── */
.am-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    overflow: hidden;
    background: radial-gradient(circle at 30% 20%, rgba(168,85,247,.22) 0%, transparent 55%),
                radial-gradient(circle at 80% 85%, rgba(236,72,153,.18) 0%, transparent 55%),
                linear-gradient(165deg, #0D1B2A 0%, #060E18 100%);
}
.am-visual-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    z-index: 0;
    transform: scale(1.02);
}
.am-visual-noimg .am-visual-photo { display: none; }
.am-visual-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background: linear-gradient(180deg, rgba(6,14,24,.15) 0%, rgba(6,14,24,.1) 38%, rgba(6,14,24,.55) 68%, rgba(6,14,24,.94) 100%);
    transition: opacity .25s;
}
.am-visual:not(.am-visual-noimg) .am-visual-overlay { opacity: 1; }
.am-visual-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .5;
}
.am-visual-noimg .am-visual-grid { opacity: .5; }
.am-visual:not(.am-visual-noimg) .am-visual-grid { opacity: .12; }
.am-visual-blob {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(50px);
    opacity: .55;
    mix-blend-mode: normal;
}
.am-visual:not(.am-visual-noimg) .am-visual-blob { opacity: .38; mix-blend-mode: screen; }
.b1 { width: 220px; height: 220px; top: -60px; left: -60px; background: var(--purple); }
.b2 { width: 200px; height: 200px; bottom: -70px; right: -50px; background: var(--pink); }
.b3 { width: 160px; height: 160px; bottom: 30%; left: 20%; background: var(--blue); opacity: .35; }

.am-visual-badges {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.am-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
}
.am-badge-time {
    background: rgba(26,171,224,.18);
    border: 1px solid rgba(26,171,224,.35);
    color: #8FE1FF;
}
.am-badge-spots {
    background: rgba(236,72,153,.16);
    border: 1px solid rgba(236,72,153,.35);
    color: #FF9FCB;
}
.am-badge-spots strong { color: #FFC9E3; }
.am-badge-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #FF4D6D;
    box-shadow: 0 0 0 3px rgba(255,77,109,.22);
    animation: livePulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.am-visual-content {
    position: relative;
    z-index: 2;
}
.am-visual-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    margin-bottom: 10px;
}
.am-visual-content h4 {
    font-family: var(--font-head);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: rgba(255,255,255,.95);
    letter-spacing: -.3px;
}
.am-visual-content h4 em {
    font-style: normal;
    background: var(--grad-pv);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Form (right) panel ── */
.am-panel {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 32px 26px;
}
.am-panel-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.am-progress-wrap { flex: 1; }
.am-step-text {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--purple);
    letter-spacing: .02em;
    margin-bottom: 8px;
}
.am-progress-track {
    height: 5px;
    background: rgba(255,255,255,.08);
    border-radius: 100px;
    overflow: hidden;
}
.am-progress-fill {
    height: 100%;
    width: 50%;
    background: var(--grad-pv);
    border-radius: 100px;
    transition: width .4s var(--ease);
}
.am-flag {
    line-height: 1;
    opacity: .85;
}
.am-flag .flag-icon { width: 24px; height: 16px; border-radius: 3px; }

.am-heading {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 800;
    color: rgba(255,255,255,.96);
    letter-spacing: -.5px;
    margin-bottom: 20px;
}

.am-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.am-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.am-field label {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.68);
}
.am-req { color: var(--pink); margin-left: 1px; }
.am-modal, .am-visual, .am-panel, .am-step-panel, #amForm,
.am-grid-2, .am-field, .am-phone, .am-upload {
    min-width: 0;
}
.am-field input,
.am-field textarea {
    width: 100%;
    max-width: 100%;
    padding: 11px 14px;
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.92);
    font-size: 13.5px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-family: var(--font-body);
    resize: vertical;
}
.am-field input::placeholder,
.am-field textarea::placeholder { color: rgba(255,255,255,.28); }
.am-field input:focus,
.am-field textarea:focus {
    border-color: var(--purple);
    background: rgba(255,255,255,.06);
    box-shadow: 0 0 0 3px rgba(168,85,247,.16);
}
.am-hint { font-size: 10.5px; color: rgba(255,255,255,.32); }
.am-msg-count { text-align: right; }
.am-msg-count.am-msg-count-limit { color: #F87171; }

/* iOS Safari auto-zooms the whole page when a focused input's font-size is
   under 16px — bump it to exactly 16px on mobile to stop that, without
   changing the tighter desktop density. */
@media (max-width: 768px) {
    .am-field input,
    .am-field textarea,
    .am-phone input { font-size: 16px; }
}

.am-phone {
    display: flex;
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.04);
    transition: border-color .15s, box-shadow .15s;
}
.am-phone:focus-within {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(168,85,247,.16);
}
.am-phone-select { position: relative; flex-shrink: 0; }
.am-phone-code {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px 0 12px;
    height: 100%;
    font-size: 13px;
    font-family: var(--font-body);
    color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.04);
    border: none;
    border-right: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s;
}
.am-phone-code:hover { background: rgba(255,255,255,.08); }
.am-phone-chevron { flex-shrink: 0; opacity: .55; transition: transform .2s; }
.am-phone-select.open .am-phone-chevron { transform: rotate(180deg); }
.am-phone-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 230px;
    max-width: 80vw;
    background: #0B1622;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    z-index: 20;
}
.am-phone-select.open .am-phone-dropdown { display: block; }
.am-phone-search {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.9);
    font-size: 12.5px;
    font-family: var(--font-body);
    outline: none;
    box-sizing: border-box;
}
.am-phone-search:focus { border-color: var(--purple); }
.am-phone-list { max-height: 220px; overflow-y: auto; }
.am-phone-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
    color: rgba(255,255,255,.8);
    font-size: 12.5px;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
}
.am-phone-item:hover { background: rgba(255,255,255,.07); }
.am-phone-item span:first-of-type { flex: 1; }
.am-phone-item-dial { color: rgba(255,255,255,.4); }
.am-phone-item-empty { padding: 10px 8px; font-size: 12px; color: rgba(255,255,255,.35); text-align: center; }
.am-phone input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    flex: 1;
    width: auto;
    min-width: 0;
}

.am-upload {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1.5px dashed rgba(255,255,255,.16);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.03);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.am-upload:hover {
    border-color: var(--purple);
    background: rgba(168,85,247,.06);
}
.am-upload-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--grad-pv);
    color: white;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.am-upload-text {
    font-size: 12.5px;
    color: rgba(255,255,255,.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.am-agree {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    color: rgba(255,255,255,.6);
    line-height: 1.5;
    margin: 16px 0 14px;
    cursor: pointer;
}
.am-agree input {
    margin-top: 2px;
    width: 15px; height: 15px;
    flex-shrink: 0;
    accent-color: var(--purple);
    cursor: pointer;
}
.am-agree a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.am-agree a:hover { color: var(--purple); }

.am-verify {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(34,197,94,.08);
    border: 1px solid rgba(34,197,94,.25);
    border-radius: var(--radius-md);
    font-size: 12.5px;
    color: rgba(255,255,255,.7);
    margin-bottom: 18px;
}
.am-verify-check {
    width: 19px; height: 19px;
    border-radius: 50%;
    background: #16a34a;
    color: white;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.am-verify-brand {
    margin-left: auto;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    color: rgba(255,255,255,.25);
}

.am-submit {
    width: 100%;
    padding: 14px 24px;
    background: var(--grad-pv);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: transform .15s, box-shadow .2s, filter .2s;
}
.am-submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-pv);
    filter: brightness(1.06);
}
.am-submit:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
    filter: none;
}
.am-privacy {
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255,255,255,.32);
    margin-bottom: 10px;
}
.am-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.4);
}

/* Step panels */
.am-step-panel { display: none; }
.am-step-panel.active { display: block; animation: fadeIn .35s ease both; }

/* Success step */
.am-success { text-align: center; padding: 12px 0 4px; }
.am-success-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--grad-pv);
    color: white;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    box-shadow: var(--glow-pv);
}
.am-success .am-heading { text-align: center; }

/* ═══════════════════════════════════════════════════
   PINK ACCENT WARMTH — modeling-agency brand touch
═══════════════════════════════════════════════════ */
.hero-container { position: relative; }
.hero-container::before {
    content: '';
    position: absolute;
    top: -26%;
    right: -170px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236,72,153,.26) 0%, rgba(236,72,153,.13) 35%, rgba(236,72,153,.05) 58%, transparent 78%);
    filter: blur(46px);
    pointer-events: none;
    z-index: 0;
}
.hero-container::after {
    content: '';
    position: absolute;
    bottom: -14%;
    right: 6%;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236,72,153,.18) 0%, rgba(236,72,153,.07) 45%, transparent 75%);
    filter: blur(36px);
    pointer-events: none;
    z-index: 0;
}
/* Keep the media cards painting above the pink glow instead of it bleeding over them */
.media-chart-card { position: relative; z-index: 1; }
.sec-badge {
    background: linear-gradient(135deg, rgba(26,171,224,.08), rgba(236,72,153,.10));
    border-color: rgba(236,72,153,.24);
}
.am-success-sub {
    font-size: 14px;
    color: rgba(255,255,255,.55);
    line-height: 1.65;
    max-width: 400px;
    margin: 0 auto 22px;
}
.am-success-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: center;
    margin-bottom: 26px;
}
.am-success-list span { font-size: 13px; color: rgba(255,255,255,.72); font-weight: 500; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .am-modal { grid-template-columns: 1fr; max-height: 92vh; }
    .am-visual { min-height: 150px; padding: 20px 24px; }
    .am-visual-content h4 { font-size: 17px; }
    .am-panel { max-height: none; padding: 24px 22px 22px; }
}
@media (max-width: 560px) {
    .am-grid-2 { grid-template-columns: 1fr; gap: 0; }
    .am-overlay { padding: 0; }
    .am-modal { border-radius: 0; max-height: 100vh; height: 100%; }
    .am-visual { min-height: 130px; }
}

/* ─────────────────────────────────────────
   BLOG — index grid
───────────────────────────────────────── */
.blog-section { padding: 40px 0 100px; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.blog-card {
    display: flex;
    flex-direction: column;
    background: #0F1B2E;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
a.blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(26,171,224,.3);
    box-shadow: 0 20px 44px rgba(0,0,0,.35);
}
.blog-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(165deg, rgba(20,32,51,.6) 0%, #0D1B2A 100%);
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.blog-thumb-empty img { display: none; }
.blog-thumb-fallback {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.22);
}
.blog-thumb-empty .blog-thumb-fallback { display: flex; }
.blog-thumb-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    background: rgba(6,14,24,.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--blue);
}
.blog-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.blog-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.4);
    margin-bottom: 10px;
}
.blog-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); }
.blog-card-body h3 {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,.95);
    letter-spacing: -.3px;
    line-height: 1.3;
    margin-bottom: 8px;
}
.blog-card-body p {
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255,255,255,.55);
    margin-bottom: 16px;
    flex: 1;
}
.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue);
}
.blog-card-empty { opacity: .5; cursor: default; }
.blog-card-empty .blog-card-body h3 { color: rgba(255,255,255,.6); }

/* ─────────────────────────────────────────
   BLOG — article page
───────────────────────────────────────── */
.article-banner { padding-bottom: 0; }
.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    margin-bottom: 18px;
    transition: color .15s;
}
.blog-back-link:hover { color: var(--blue); }
.article-banner .blog-meta { justify-content: center; margin-bottom: 14px; }
.article-banner h1 { max-width: 780px; margin-left: auto; margin-right: auto; }

.article-cover {
    position: relative;
    max-width: 920px;
    margin: 36px auto 0;
    aspect-ratio: 20 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(165deg, rgba(20,32,51,.6) 0%, #0D1B2A 100%);
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.article-cover-empty img { display: none; }
.article-cover-fallback {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.2);
}
.article-cover-empty .article-cover-fallback { display: flex; }

.article-section { padding: 56px 0 90px; }
.article-wrap { max-width: 720px; margin: 0 auto; }
.article-lead {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255,255,255,.78);
    margin-bottom: 32px;
}
.article-body h2 {
    font-family: var(--font-head);
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 800;
    color: rgba(255,255,255,.95);
    letter-spacing: -.5px;
    line-height: 1.25;
    margin: 44px 0 16px;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    margin: 28px 0 12px;
}
.article-body p {
    font-size: 15.5px;
    line-height: 1.8;
    color: rgba(255,255,255,.62);
    margin-bottom: 18px;
}
.article-body ul, .article-body ol {
    margin: 0 0 22px;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.article-body ul li {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,.68);
}
.article-body ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--blue);
}
.article-body ol { counter-reset: art-ol; }
.article-body ol li {
    position: relative;
    padding-left: 30px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,.68);
    counter-increment: art-ol;
}
.article-body ol li::before {
    content: counter(art-ol);
    position: absolute;
    left: 0; top: 0;
    width: 20px; height: 20px;
    border-radius: 6px;
    background: rgba(26,171,224,.15);
    color: var(--blue);
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.article-body strong { color: rgba(255,255,255,.88); font-weight: 700; }
.article-body blockquote {
    margin: 26px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--blue);
    background: rgba(26,171,224,.06);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 15px;
    font-style: italic;
    color: rgba(255,255,255,.72);
}

.article-cta-box {
    margin: 40px 0;
    padding: 26px 28px;
    background: linear-gradient(135deg, rgba(26,171,224,.1), rgba(236,72,153,.08));
    border: 1px solid rgba(26,171,224,.22);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.article-cta-box-text strong {
    display: block;
    font-family: var(--font-head);
    font-size: 17px;
    color: rgba(255,255,255,.95);
    margin-bottom: 4px;
}
.article-cta-box-text span { font-size: 13.5px; color: rgba(255,255,255,.6); }
.article-cta-box .btn-hero-primary { flex-shrink: 0; }

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.article-tags span {
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255,255,255,.55);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
    .article-cta-box { flex-direction: column; align-items: flex-start; }
    .article-cta-box .btn-hero-primary { width: 100%; justify-content: center; }
}