/* ========================================
           CSS VARIABLES
        ======================================== */
:root {
    /* DBCO Color Palette - Dark Navy + Cyan/Blue */
    --bg: #0a1628;
    --bg-elevated: #0f1d32;
    --glass: rgba(15, 29, 50, 0.6);
    --glass-border: rgba(0, 212, 255, 0.12);
    --glass-hover: rgba(15, 29, 50, 0.8);
    --text: #ffffff;
    --text-dim: #64748b;
    --text-mid: #94a3b8;
    --blue: #3b82f6;
    --cyan: #00d4ff;
    --cyan-dark: #0891b2;
    --mint: #34d399;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
           PAGE LOAD ENTRANCE ANIMATIONS
        ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Initial state - hidden */
.entrance {
    opacity: 0;
}

/* Animate when page is loaded */
body.loaded .entrance {
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

body.loaded .entrance-fade {
    animation: fadeIn 0.8s forwards;
}

body.loaded .entrance-up {
    animation: fadeInUp 0.8s forwards;
}

body.loaded .entrance-left {
    animation: slideInLeft 0.8s forwards;
}

body.loaded .entrance-right {
    animation: slideInRight 0.8s forwards;
}

body.loaded .entrance-scale {
    animation: scaleIn 0.8s forwards;
}

/* Staggered delays */
body.loaded .entrance-delay-1 {
    animation-delay: 0.1s;
}
body.loaded .entrance-delay-2 {
    animation-delay: 0.2s;
}
body.loaded .entrance-delay-3 {
    animation-delay: 0.3s;
}
body.loaded .entrance-delay-4 {
    animation-delay: 0.4s;
}
body.loaded .entrance-delay-5 {
    animation-delay: 0.5s;
}
body.loaded .entrance-delay-6 {
    animation-delay: 0.6s;
}
body.loaded .entrance-delay-7 {
    animation-delay: 0.7s;
}
body.loaded .entrance-delay-8 {
    animation-delay: 0.8s;
}

/* Background entrance animations */
.aurora,
#beamsCanvas,
#shootingStars,
.bg-orbs {
    opacity: 0;
    transition: opacity 1.5s ease;
}

body.loaded .aurora,
body.loaded #beamsCanvas,
body.loaded #shootingStars,
body.loaded .bg-orbs {
    opacity: 1;
}

/* Nav entrance */
nav {
    opacity: 0;
}

body.loaded nav {
    animation: fadeInUp 0.6s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ========================================
           RESET & BASE
        ======================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
    overflow-anchor: none;
}

body {
    font-family: "Montserrat", sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    width: 100%;
    font-weight: 400;
    letter-spacing: 0.01em;
    overflow-anchor: none;
}

html {
    width: 100%;
    overflow-x: clip;
}

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

/* ========================================
           NOISE OVERLAY
        ======================================== */
.noise {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ========================================
           SCROLL PROGRESS
        ======================================== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--cyan),
        var(--cyan-dark),
        var(--cyan)
    );
    z-index: 1000;
    width: 0%;
    transition: width 0.1s linear;
}

/* ========================================
           AURORA BACKGROUND (NEW - BATCH 1)
        ======================================== */
.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.aurora::before,
.aurora::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(0, 212, 255, 0.08) 60deg,
        transparent 120deg,
        rgba(8, 145, 178, 0.06) 180deg,
        transparent 240deg,
        rgba(34, 211, 238, 0.08) 300deg,
        transparent 360deg
    );
    animation: auroraRotate 30s linear infinite;
}

.aurora::after {
    animation: auroraRotate 25s linear infinite reverse;
    opacity: 0.5;
}

@keyframes auroraRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Beams Background */
#beamsCanvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-filter: blur(35px);
    filter: blur(35px);
}

@media (max-width: 768px) {
    #beamsCanvas {
        -webkit-filter: blur(50px);
        filter: blur(50px);
    }
}

/* Shooting Stars */
.shooting-stars-svg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ========================================
           BACKGROUND ORBS
        ======================================== */
.bg-orbs {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: var(--cyan);
    top: -200px;
    left: -200px;
    animation: orbFloat1 25s ease-in-out infinite;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: var(--cyan-dark);
    top: 50%;
    right: -150px;
    animation: orbFloat2 20s ease-in-out infinite;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: var(--cyan);
    bottom: -100px;
    left: 30%;
    animation: orbFloat3 22s ease-in-out infinite;
}

.orb-4 {
    width: 300px;
    height: 300px;
    background: var(--mint);
    top: 30%;
    left: 50%;
    animation: orbFloat4 28s ease-in-out infinite;
    opacity: 0.08;
}

@keyframes orbFloat1 {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(50px, 30px);
    }
}

@keyframes orbFloat2 {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-40px, -50px);
    }
}

@keyframes orbFloat3 {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(60px, -40px);
    }
}

@keyframes orbFloat4 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-30px, 40px) scale(1.1);
    }
}

/* ========================================
           NAVIGATION
        ======================================== */
nav {
    position: fixed;
    top: 24px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 12px 16px 12px 24px;
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    opacity: 0;
    animation: fadeInDown 0.8s 0.5s var(--ease) forwards;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Logo with animated moving border */
.nav-logo-container {
    position: relative;
    padding: 2px;
    border-radius: 12px;
    overflow: hidden;
}

.nav-logo-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: conic-gradient(
        from var(--border-angle, 0deg),
        transparent 0%,
        var(--cyan) 10%,
        transparent 20%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: rotateBorder 3s linear infinite;
}

@keyframes rotateBorder {
    from {
        --border-angle: 0deg;
    }
    to {
        --border-angle: 360deg;
    }
}

@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.nav-logo {
    display: flex;
    align-items: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: var(--text);
    background: rgba(10, 22, 40, 0.9);
    padding: 10px 20px;
    border-radius: 10px;
    position: relative;
}

.nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    transition:
        opacity 0.18s ease,
        width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    white-space: nowrap;
}

.nav-links a {
    color: var(--text-mid);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    position: relative;
    padding: 10px 20px;
    border-radius: 100px;
}

.nav-links a:hover {
    color: var(--text);
}

.nav-link-active {
    background: var(--glass-hover);
    color: var(--text) !important;
    border: 1px solid var(--glass-border);
}

.nav-cta {
    background: var(--cyan);
    color: #000;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s var(--spring);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.nav-cta::after {
    content: "↗";
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.nav-cta:hover {
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
}

.nav-cta:hover::after {
    transform: translate(2px, -2px);
}

/* ========================================
           LAYOUT
        ======================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    position: relative;
    z-index: 1;
    padding: 120px 0;
}

/* ========================================
           TYPOGRAPHY
        ======================================== */
h1,
h2,
h3 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.eyebrow {
    font-family: "Montserrat", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 16px;
}

.gradient-text {
    background: linear-gradient(135deg, var(--cyan), #00a8cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.italic-accent {
    font-family: "Montserrat", sans-serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Chrome shimmer effect */
.chrome-shimmer {
    background: linear-gradient(
        90deg,
        var(--text) 0%,
        var(--text) 40%,
        #fff 50%,
        var(--text) 60%,
        var(--text) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* ========================================
           TEXT REVEAL ANIMATION (NEW - BATCH 1)
        ======================================== */
.text-reveal {
    overflow: hidden;
    display: block;
    text-align: center;
}

.text-reveal-inner {
    display: block;
    transform: translateY(110%);
    transition: transform 0.8s var(--ease);
    text-align: center;
}

.text-reveal.visible .text-reveal-inner {
    transform: translateY(0);
}

/* Word by word reveal */
.words-reveal {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.3em;
}

.word-wrap {
    overflow: hidden;
    display: inline-block;
}

.word {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 0.6s var(--ease),
        opacity 0.6s ease;
}

.words-reveal.visible .word {
    transform: translateY(0);
    opacity: 1;
}

/* Stagger delays for words */
.word:nth-child(1) {
    transition-delay: 0s;
}
.word:nth-child(2) {
    transition-delay: 0.05s;
}
.word:nth-child(3) {
    transition-delay: 0.1s;
}
.word:nth-child(4) {
    transition-delay: 0.15s;
}
.word:nth-child(5) {
    transition-delay: 0.2s;
}
.word:nth-child(6) {
    transition-delay: 0.25s;
}

/* ========================================
           GLASS CARDS WITH 3D TILT (UPDATED - BATCH 1)
        ======================================== */
.glass-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 32px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition:
        transform 0.2s ease-out,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 212, 255, 0.15),
        transparent 40%
    );
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.glass-card:hover::before {
    opacity: 1;
}

.glass-card:hover {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(0, 212, 255, 0.1);
}

/* Gradient border on hover */
.glass-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    background: linear-gradient(
        135deg,
        var(--cyan),
        var(--cyan-dark),
        var(--cyan),
        var(--cyan)
    );
    background-size: 300% 300%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: borderRotate 4s linear infinite;
}

@keyframes borderRotate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.glass-card:hover::after {
    opacity: 0.5;
}

/* ========================================
           GRADIENT BUTTON EFFECT
        ======================================== */
@property --pos-x {
    syntax: "<percentage>";
    initial-value: 11.14%;
    inherits: false;
}
@property --pos-y {
    syntax: "<percentage>";
    initial-value: 140%;
    inherits: false;
}
@property --spread-x {
    syntax: "<percentage>";
    initial-value: 150%;
    inherits: false;
}
@property --spread-y {
    syntax: "<percentage>";
    initial-value: 180.06%;
    inherits: false;
}
@property --grad-color-1 {
    syntax: "<color>";
    initial-value: #000;
    inherits: false;
}
@property --grad-color-2 {
    syntax: "<color>";
    initial-value: #08012c;
    inherits: false;
}
@property --grad-color-3 {
    syntax: "<color>";
    initial-value: #4e1e40;
    inherits: false;
}
@property --grad-color-4 {
    syntax: "<color>";
    initial-value: #70464e;
    inherits: false;
}
@property --grad-color-5 {
    syntax: "<color>";
    initial-value: #88394c;
    inherits: false;
}
@property --border-angle {
    syntax: "<angle>";
    initial-value: 20deg;
    inherits: true;
}
@property --border-color-1 {
    syntax: "<color>";
    initial-value: hsla(340, 75%, 60%, 0.2);
    inherits: true;
}
@property --border-color-2 {
    syntax: "<color>";
    initial-value: hsla(340, 75%, 40%, 0.75);
    inherits: true;
}
@property --stop-1 {
    syntax: "<percentage>";
    initial-value: 37.35%;
    inherits: false;
}
@property --stop-2 {
    syntax: "<percentage>";
    initial-value: 61.36%;
    inherits: false;
}
@property --stop-3 {
    syntax: "<percentage>";
    initial-value: 78.42%;
    inherits: false;
}
@property --stop-4 {
    syntax: "<percentage>";
    initial-value: 89.52%;
    inherits: false;
}
@property --stop-5 {
    syntax: "<percentage>";
    initial-value: 100%;
    inherits: false;
}

/* ========================================
           BUTTONS
        ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 12px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--cyan);
    color: #000;
    border-radius: 100px;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    transition: box-shadow 0.4s ease;
}

.btn-primary:hover {
    box-shadow: 0 0 35px rgba(0, 212, 255, 0.5);
}

.btn-ghost {
    background: var(--glass);
    color: var(--text);
    border: 1px solid var(--glass-border);
    transition: all 0.3s ease;
}

.btn-ghost:hover {
    background: var(--glass-hover);
    border-color: var(--text-dim);
}

/* Ripple effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ========================================
           REVEAL ANIMATIONS
        ======================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s var(--ease),
        transform 0.8s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 {
    transition-delay: 0.1s;
}
.reveal-delay-2 {
    transition-delay: 0.2s;
}
.reveal-delay-3 {
    transition-delay: 0.3s;
}
.reveal-delay-4 {
    transition-delay: 0.4s;
}

/* ========================================
           CARD SPOTLIGHT EFFECT (BATCH 2)
        ======================================== */
.spotlight-group {
    position: relative;
}

/* ========================================
           HERO SECTION
        ======================================== */
#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 24px 60px 24px;
}

#hero .container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}

.hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 60px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-content .eyebrow,
.hero-content h1,
.hero-content p {
    text-align: center;
}

.hero-content h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 24px;
}

.hero-content p {
    font-size: 1.1rem;
    color: var(--text-mid);
    max-width: 600px;
    margin-bottom: 40px;
    text-align: center;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.hero-visual {
    position: relative;
    height: 400px;
    width: 100%;
    max-width: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-3d-container {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.08),
        rgba(8, 145, 178, 0.03)
    );
    border: 1px solid var(--glass-border);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 24px;
}

.video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background:
        linear-gradient(rgba(5, 15, 30, 0.4), rgba(5, 15, 30, 0.4)),
        url("https://img.youtube.com/vi/B52mXUa_WkU/hqdefault.jpg");
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.video-placeholder:hover {
    background:
        linear-gradient(rgba(5, 15, 30, 0.25), rgba(5, 15, 30, 0.25)),
        url("https://img.youtube.com/vi/B52mXUa_WkU/hqdefault.jpg");
    background-size: cover;
    background-position: center;
}

.play-button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan), var(--cyan-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
    transition:
        transform 0.3s var(--spring),
        box-shadow 0.3s ease;
    overflow: visible;
    position: relative;
}

.video-placeholder:hover .play-button {
    transform: scale(1.1);
    box-shadow: 0 0 60px rgba(0, 212, 255, 0.6);
}

.play-button::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 6px;
}

.video-label {
    font-size: 0.85rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    text-shadow:
        0 0 10px rgba(0, 212, 255, 0.6),
        0 0 30px rgba(0, 212, 255, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ========================================
           PROOF/STATS SECTION
        ======================================== */
#proof {
    padding: 60px 0;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 212, 255, 0.03),
        transparent
    );
}

.proof-grid {
    display: flex;
    justify-content: center;
    gap: 80px;
}

.proof-item {
    text-align: center;
}

.proof-number {
    font-family: "Montserrat", sans-serif;
    font-size: 3rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--text), var(--text-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.3));
}

.proof-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 8px;
}

/* ========================================
           ELITE STRATEGY SPLIT SECTION
        ======================================== */
#elite-strategy {
    padding: 120px 0;
}

.split-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 60px;
    align-items: center;
}

.split-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    margin-bottom: 20px;
}

.split-content {
    text-align: left;
}

.split-text {
    font-size: 1.2rem;
    color: var(--text-mid);
    max-width: 500px;
}

.split-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    perspective: 1000px;
}

/* Prism UI Style Stacked Cards */
.split-stats-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.split-stats-container * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.prism-cards {
    position: relative;
    width: 320px;
    height: 220px;
}

.prism-card {
    position: absolute;
    width: 280px;
    padding: 24px 28px;
    background: linear-gradient(
        135deg,
        rgba(15, 25, 45, 0.95),
        rgba(10, 20, 40, 0.98)
    );
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Back card (Creators) */
.prism-card-1 {
    z-index: 1;
    transform: rotate(-8deg) translateY(-30px);
}

.prism-card-1::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

/* Front card (Experts) */
.prism-card-2 {
    z-index: 2;
    transform: rotate(-8deg) translateX(40px) translateY(30px);
}

/* Hover effects */
.prism-card:hover {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 212, 255, 0.15);
}

.prism-card-1:hover {
    transform: rotate(-8deg) translateY(-45px);
    z-index: 3;
}

.prism-card-2:hover {
    transform: rotate(-8deg) translateX(40px) translateY(15px);
}

.prism-card-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.15),
        rgba(0, 212, 255, 0.05)
    );
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prism-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--cyan);
    stroke-width: 1.5;
    fill: none;
}

.prism-card-number {
    font-family: "Montserrat", sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--cyan);
    line-height: 1;
}

.prism-card-label {
    font-size: 0.85rem;
    color: var(--text-mid);
    margin-top: 4px;
}

.split-stat-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.15),
        rgba(0, 212, 255, 0.05)
    );
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s ease;
    animation: iconPulseGlow 3s ease-in-out infinite;
}

@keyframes iconPulseGlow {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(0, 212, 255, 0);
        border-color: rgba(0, 212, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
        border-color: rgba(0, 212, 255, 0.5);
    }
}

.split-stat:nth-child(2) .split-stat-icon {
    animation-delay: 1.5s;
}

.split-stat:hover .split-stat-icon {
    transform: scale(1.1) rotate(-5deg);
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.25),
        rgba(0, 212, 255, 0.1)
    );
}

.split-stat-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--cyan);
    stroke-width: 1.5;
    fill: none;
    transition: all 0.3s ease;
}

.split-stat:hover .split-stat-icon svg {
    filter: drop-shadow(0 0 8px var(--cyan));
}

.split-stat-content {
    flex: 1;
}

.split-stat-number {
    font-family: "Montserrat", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cyan);
    line-height: 1;
}

.split-stat-label {
    font-size: 0.9rem;
    color: var(--text-mid);
    margin-top: 6px;
}

@media (max-width: 900px) {
    .split-layout {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .split-text {
        margin: 0 auto;
    }

    .split-stats-container {
        order: 2;
    }

    .split-content {
        order: 1;
        text-align: center;
    }

    .prism-cards {
        width: 280px;
        height: 200px;
        margin: 0 auto;
    }

    .prism-card {
        width: 240px;
        padding: 20px;
    }

    .prism-card-1 {
        transform: rotate(-6deg) translateY(-20px);
    }

    .prism-card-2 {
        transform: rotate(-6deg) translateX(30px) translateY(20px);
    }
}

/* ========================================
           FULL-SERVICE SECTION
        ======================================== */
#full-service {
    padding: 120px 0;
}

.full-service-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
}

.full-service-content .eyebrow {
    margin-bottom: 16px;
}

.full-service-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    margin-bottom: 20px;
}

.full-service-subtitle {
    font-size: 1.1rem;
    color: var(--text-mid);
    margin-bottom: 32px;
    max-width: 500px;
}

.service-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 40px;
    margin-bottom: 32px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 212, 255, 0.03);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.checklist-item:hover {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.25);
    transform: translateX(5px);
}

.check-icon {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--cyan), var(--mint));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.check-icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--bg);
    stroke-width: 3;
    fill: none;
}

.checklist-item span {
    font-size: 0.95rem;
    color: var(--text);
}

.full-service-tagline {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cyan);
    font-style: italic;
}

/* Visual side with animated rings */
.full-service-visual {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-orb {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(
        circle,
        rgba(0, 212, 255, 0.2) 0%,
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(40px);
    animation: orbPulse 4s ease-in-out infinite;
}

@keyframes orbPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
}

.service-rings {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 50%;
}

.ring-1 {
    width: 180px;
    height: 180px;
    animation: ringSpin 20s linear infinite;
}
.ring-2 {
    width: 260px;
    height: 260px;
    animation: ringSpin 25s linear infinite reverse;
    border-style: dashed;
}
.ring-3 {
    width: 340px;
    height: 340px;
    animation: ringSpin 30s linear infinite;
}

@keyframes ringSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Floating service icons */
.floating-services {
    position: relative;
    width: 340px;
    height: 340px;
    animation: orbitContainer 30s linear infinite;
}

@keyframes orbitContainer {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.float-icon {
    position: absolute;
    width: 70px;
    height: 70px;
    background: linear-gradient(
        135deg,
        rgba(10, 22, 40, 0.95),
        rgba(15, 35, 60, 0.9)
    );
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 2;
    /* Counter-rotate to keep icons upright */
    animation:
        counterRotate 30s linear infinite,
        iconPulse 4s ease-in-out infinite;
}

@keyframes counterRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

/* Pulse animation with border glow */
@keyframes iconPulse {
    0%,
    100% {
        border-color: rgba(0, 212, 255, 0.25);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    50% {
        border-color: rgba(0, 212, 255, 0.8);
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(0, 212, 255, 0.4),
            inset 0 0 15px rgba(0, 212, 255, 0.1);
    }
}

/* Stagger the pulse for each icon */
.float-1 {
    animation-delay: 0s, 0s;
}
.float-2 {
    animation-delay: 0s, 1s;
}
.float-3 {
    animation-delay: 0s, 2s;
}
.float-4 {
    animation-delay: 0s, 3s;
}

.float-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--cyan);
    stroke-width: 1.5;
    fill: none;
    transition: all 0.3s ease;
}

.float-icon span {
    font-size: 0.65rem;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.float-icon:hover svg {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px var(--cyan));
}

.float-icon:hover span {
    color: var(--cyan);
}

/* Position floating icons in orbit - using top/left/right/bottom positioning */
.float-1 {
    top: -35px;
    left: 50%;
    margin-left: -35px;
}
.float-2 {
    top: 50%;
    right: -35px;
    margin-top: -35px;
}
.float-3 {
    bottom: -35px;
    left: 50%;
    margin-left: -35px;
}
.float-4 {
    top: 50%;
    left: -35px;
    margin-top: -35px;
}

/* Center logo - doesn't rotate */
.center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: linear-gradient(
        135deg,
        rgba(10, 22, 40, 0.95),
        rgba(15, 35, 60, 0.9)
    );
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 26px;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Counter-rotate to stay still */
    animation: centerCounterRotate 30s linear infinite;
}

.of-icon {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
}

@keyframes centerCounterRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@media (max-width: 900px) {
    .full-service-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .service-checklist {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    .checklist-item {
        text-align: left;
    }

    .full-service-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .full-service-visual {
        height: 300px;
    }

    .floating-services {
        width: 280px;
        height: 280px;
    }

    .float-icon {
        width: 55px;
        height: 55px;
    }

    .float-icon svg {
        width: 20px;
        height: 20px;
    }

    .float-icon span {
        font-size: 0.55rem;
    }

    .center-logo {
        width: 80px;
        height: 80px;
        border-radius: 20px;
    }

    .of-icon {
        width: 35px;
        height: 35px;
    }

    .ring-3 {
        width: 280px;
        height: 280px;
    }
}

/* ========================================
           YOUTUBE TESTIMONIALS SECTION
        ======================================== */
#testimonials {
    padding: 120px 0;
}

#testimonials .eyebrow,
#testimonials h2 {
    text-align: left;
}

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

.youtube-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(10, 22, 40, 0.6);
    border: 1px solid rgba(0, 212, 255, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    aspect-ratio: 16 / 9;
}

.youtube-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.05) 0%,
        transparent 50%
    );
    pointer-events: none;
    z-index: 1;
}

.youtube-card:hover {
    border-color: rgba(0, 212, 255, 0.4);
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(0, 212, 255, 0.15);
}

.youtube-embed {
    width: 100%;
    height: 100%;
    position: relative;
}

.youtube-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
}

.youtube-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        rgba(10, 22, 40, 0.9) 0%,
        rgba(15, 40, 71, 0.9) 100%
    );
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.youtube-placeholder:hover {
    background: linear-gradient(
        135deg,
        rgba(15, 30, 50, 0.9) 0%,
        rgba(20, 50, 85, 0.9) 100%
    );
}

.youtube-placeholder:hover .youtube-play-btn {
    transform: scale(1.15);
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.5);
}

.youtube-play-btn {
    width: 70px;
    height: 70px;
    background: var(--cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
    position: relative;
}

.youtube-play-btn::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 22px solid var(--bg);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    margin-left: 5px;
}

/* Animated glow ring */
.youtube-card::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--cyan), var(--mint), var(--cyan));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.youtube-card:hover::after {
    opacity: 0.5;
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%,
    100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

@media (max-width: 1024px) {
    .youtube-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .youtube-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ========================================
           SERVICES SECTION
        ======================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.service-card {
    text-align: left;
}

.service-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.15),
        rgba(8, 145, 178, 0.08)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.service-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--cyan);
    stroke-width: 1.5;
    fill: none;
}

.service-card:nth-child(2) .service-icon svg {
    stroke: var(--cyan-dark);
}
.service-card:nth-child(3) .service-icon svg {
    stroke: var(--cyan);
}
.service-card:nth-child(4) .service-icon svg {
    stroke: var(--mint);
}
.service-card:nth-child(5) .service-icon svg {
    stroke: var(--cyan-dark);
}
.service-card:nth-child(6) .service-icon svg {
    stroke: var(--cyan);
}

.service-card h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.service-card p {
    font-size: 0.9rem;
    color: var(--text-dim);
    transition: color 0.3s ease;
}

.service-card:hover h3 {
    color: #fff;
}

.service-card:hover p {
    color: rgba(255, 255, 255, 0.9);
}

/* ========================================
           PAIN POINTS SECTION - ANIMATED
        ======================================== */
#pain-points {
    padding: 120px 0;
}

#pain-points .eyebrow,
#pain-points h2 {
    text-align: center;
}

.section-subtitle {
    text-align: center;
    color: var(--text-mid);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 60px;
}

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

.pain-card {
    background: linear-gradient(
        135deg,
        rgba(255, 100, 100, 0.05) 0%,
        rgba(255, 100, 100, 0.02) 100%
    );
    border: 1px solid rgba(255, 100, 100, 0.2);
    border-radius: 24px;
    padding: 50px 30px 40px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: painFloat 6s ease-in-out infinite;
}

.pain-card:nth-child(1) {
    animation-delay: 0s;
}
.pain-card:nth-child(2) {
    animation-delay: 2s;
}
.pain-card:nth-child(3) {
    animation-delay: 4s;
}

@keyframes painFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Animated corner accents */
.pain-card::before,
.pain-card::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    transition: all 0.5s ease;
}

.pain-card::before {
    top: -1px;
    left: -1px;
    border-top-color: rgba(255, 100, 100, 0.4);
    border-left-color: rgba(255, 100, 100, 0.4);
    border-radius: 24px 0 0 0;
}

.pain-card::after {
    bottom: -1px;
    right: -1px;
    border-bottom-color: rgba(255, 100, 100, 0.4);
    border-right-color: rgba(255, 100, 100, 0.4);
    border-radius: 0 0 24px 0;
}

.pain-card:hover::before,
.pain-card:hover::after {
    width: 100px;
    height: 100px;
    border-color: rgba(255, 100, 100, 0.6);
}

/* Scanning line effect */
.pain-card .scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 100, 100, 0.8),
        transparent
    );
    opacity: 0;
    animation: scanLine 4s ease-in-out infinite;
}

.pain-card:nth-child(1) .scan-line {
    animation-delay: 0s;
}
.pain-card:nth-child(2) .scan-line {
    animation-delay: 1.3s;
}
.pain-card:nth-child(3) .scan-line {
    animation-delay: 2.6s;
}

@keyframes scanLine {
    0% {
        top: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Inner glow pulse */
.pain-card .inner-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(255, 100, 100, 0.15) 0%,
        transparent 60%
    );
    opacity: 0;
    animation: innerGlow 3s ease-in-out infinite;
    pointer-events: none;
}

.pain-card:nth-child(1) .inner-glow {
    animation-delay: 0s;
}
.pain-card:nth-child(2) .inner-glow {
    animation-delay: 1s;
}
.pain-card:nth-child(3) .inner-glow {
    animation-delay: 2s;
}

@keyframes innerGlow {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.pain-card:hover {
    border-color: rgba(255, 100, 100, 0.5);
    transform: translateY(-12px) scale(1.02);
    background: linear-gradient(
        135deg,
        rgba(255, 100, 100, 0.08) 0%,
        rgba(255, 100, 100, 0.03) 100%
    );
    box-shadow:
        0 25px 50px rgba(255, 100, 100, 0.15),
        0 0 100px rgba(255, 100, 100, 0.1),
        inset 0 0 60px rgba(255, 100, 100, 0.03);
    animation: none;
}

.pain-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 28px;
    background: linear-gradient(
        135deg,
        rgba(255, 100, 100, 0.15),
        rgba(255, 100, 100, 0.05)
    );
    border: 1px solid rgba(255, 100, 100, 0.25);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon glow ring */
.pain-icon::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 28px;
    background: linear-gradient(
        135deg,
        rgba(255, 100, 100, 0.3),
        transparent,
        rgba(255, 100, 100, 0.2)
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: iconRingPulse 3s ease-in-out infinite;
}

@keyframes iconRingPulse {
    0%,
    100% {
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
}

.pain-card:hover .pain-icon {
    transform: scale(1.15) rotate(-8deg);
    box-shadow: 0 15px 40px rgba(255, 100, 100, 0.3);
    background: linear-gradient(
        135deg,
        rgba(255, 100, 100, 0.25),
        rgba(255, 100, 100, 0.1)
    );
}

.pain-card:hover .pain-icon::before {
    opacity: 1;
    animation: none;
}

.pain-icon svg {
    width: 36px;
    height: 36px;
    stroke: #ff6b6b;
    stroke-width: 1.5;
    fill: none;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 4px rgba(255, 100, 100, 0.3));
}

.pain-card:hover .pain-icon svg {
    stroke: #ff8a8a;
    filter: drop-shadow(0 0 12px rgba(255, 100, 100, 0.6));
    transform: scale(1.1);
}

.pain-card h3 {
    font-size: 1.15rem;
    margin-bottom: 14px;
    color: var(--text);
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.pain-card:hover h3 {
    color: #fff;
}

.pain-card p {
    font-size: 0.95rem;
    color: var(--text-mid);
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* ========================================
           SOLUTION SECTION - 3D LIQUID GLASS CARDS
        ======================================== */
#solution {
    padding: 120px 0;
    perspective: 1000px;
}

#solution .eyebrow,
#solution h2 {
    text-align: center;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.solution-card {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(0, 212, 255, 0.05) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 40px 30px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    overflow: hidden;
}

/* Liquid glass shine effect */
.solution-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.7s ease;
    pointer-events: none;
}

.solution-card:hover::before {
    left: 100%;
}

/* Gradient border effect */
.solution-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.5),
        rgba(52, 211, 153, 0.3),
        rgba(0, 212, 255, 0.2)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

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

.solution-card:hover {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25),
        0 0 60px rgba(0, 212, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Floating orb inside card */
.solution-card .card-orb {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: radial-gradient(
        circle,
        rgba(0, 212, 255, 0.15) 0%,
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(20px);
    transition: all 0.5s ease;
    pointer-events: none;
}

.solution-card:hover .card-orb {
    transform: scale(1.5);
    opacity: 0.8;
}

.solution-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.solution-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.15),
        rgba(0, 212, 255, 0.05)
    );
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.solution-card:hover .solution-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.5);
}

.solution-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--cyan);
    stroke-width: 1.5;
    fill: none;
    transition: all 0.3s ease;
}

.solution-card:hover .solution-icon svg {
    filter: drop-shadow(0 0 6px var(--cyan));
}

.solution-number {
    font-family: "Montserrat", sans-serif;
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--cyan), var(--mint));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.2;
    line-height: 1;
    transition: all 0.4s ease;
}

.solution-card:hover .solution-number {
    opacity: 0.4;
    transform: scale(1.05);
}

.solution-card h3 {
    font-size: 1.2rem;
    margin-bottom: 16px;
    color: var(--text);
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.solution-card p {
    font-size: 0.95rem;
    color: var(--text-mid);
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* ========================================
           NOT JUST MANAGER SECTION - PREMIUM
        ======================================== */
#not-just-manager {
    padding: 120px 0;
}

.manager-block {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 80px 60px;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.08) 0%,
        rgba(52, 211, 153, 0.04) 50%,
        rgba(0, 212, 255, 0.06) 100%
    );
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 40px;
    position: relative;
    overflow: hidden;
}

/* Animated glow background */
.manager-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(0, 212, 255, 0.15) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(52, 211, 153, 0.1) 0%,
            transparent 50%
        );
    animation: managerGlow 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes managerGlow {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(10%, 10%) rotate(5deg);
    }
    50% {
        transform: translate(0, 20%) rotate(0deg);
    }
    75% {
        transform: translate(-10%, 10%) rotate(-5deg);
    }
}

/* Floating particles */
.manager-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.manager-particles span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--cyan);
    border-radius: 50%;
    opacity: 0.3;
    animation: particleFloat 6s ease-in-out infinite;
}

.manager-particles span:nth-child(1) {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
}
.manager-particles span:nth-child(2) {
    left: 20%;
    top: 80%;
    animation-delay: 1s;
}
.manager-particles span:nth-child(3) {
    left: 80%;
    top: 30%;
    animation-delay: 2s;
}
.manager-particles span:nth-child(4) {
    left: 90%;
    top: 70%;
    animation-delay: 3s;
}
.manager-particles span:nth-child(5) {
    left: 50%;
    top: 10%;
    animation-delay: 4s;
}

@keyframes particleFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) scale(1.5);
        opacity: 0.6;
    }
}

.manager-content {
    position: relative;
    z-index: 1;
}

.manager-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 24px;
}

.manager-block h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    margin-bottom: 24px;
    line-height: 1.2;
}

.manager-block p {
    font-size: 1.1rem;
    color: var(--text-mid);
    line-height: 1.8;
    margin-bottom: 32px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.manager-features {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 28px;
    margin-bottom: 40px;
    flex-wrap: nowrap;
}

.manager-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text);
}

.manager-feature svg {
    width: 20px;
    height: 20px;
    stroke: var(--cyan);
    stroke-width: 2.5;
    fill: none;
}

.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(
        circle,
        rgba(0, 212, 255, 0.4) 0%,
        transparent 60%
    );
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-glow:hover::before {
    opacity: 1;
    animation: btnPulse 1.5s ease-in-out infinite;
}

@keyframes btnPulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@media (max-width: 900px) {
    .pain-grid,
    .solution-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .manager-block {
        padding: 50px 24px;
        border-radius: 24px;
    }

    .manager-features {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
}

/* ========================================
           EARNINGS DASHBOARD SHOWCASE
        ======================================== */
#earnings-showcase {
    padding: 120px 0;
    overflow: hidden;
}

.earnings-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1100px;
    margin: 60px auto 0;
}

/* Dashboard Card */
.dashboard-card {
    background: linear-gradient(
        145deg,
        rgba(15, 29, 50, 0.9),
        rgba(10, 22, 40, 0.95)
    );
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.dashboard-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cyan), #34d399);
}

/* Ambient glow effect */
.dashboard-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse,
        rgba(0, 212, 255, 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

.dashboard-card.visible::after {
    opacity: 1;
}

/* Floating sparkles */
.chart-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--cyan);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    filter: blur(1px);
}

.dashboard-card.visible .chart-sparkle {
    animation: sparkleFloat 3s ease-in-out infinite;
}

.chart-sparkle:nth-child(1) {
    top: 30%;
    left: 20%;
    animation-delay: 0s;
}
.chart-sparkle:nth-child(2) {
    top: 50%;
    left: 40%;
    animation-delay: 0.5s;
}
.chart-sparkle:nth-child(3) {
    top: 25%;
    left: 60%;
    animation-delay: 1s;
}
.chart-sparkle:nth-child(4) {
    top: 45%;
    left: 75%;
    animation-delay: 1.5s;
}
.chart-sparkle:nth-child(5) {
    top: 35%;
    left: 85%;
    animation-delay: 2s;
}

@keyframes sparkleFloat {
    0%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }
    10% {
        opacity: 1;
        transform: translateY(-5px) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-15px) scale(0.8);
    }
    90% {
        opacity: 0;
        transform: translateY(-25px) scale(0.3);
    }
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.dashboard-title {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.dashboard-amount {
    font-family: "Montserrat", sans-serif;
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
    position: relative;
    display: inline-block;
}

/* Shimmer effect on amount */
.dashboard-amount::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 212, 255, 0.3),
        transparent
    );
    opacity: 0;
}

.dashboard-card.visible .dashboard-amount::after {
    animation: amountShimmer 1.5s ease 2.5s;
}

@keyframes amountShimmer {
    0% {
        left: -100%;
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

.dashboard-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dashboard-card.visible .dashboard-badge {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.5s;
}

.dashboard-badge svg {
    width: 16px;
    height: 16px;
    animation: arrowBounce 1s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Chart */
.dashboard-chart {
    height: 200px;
    position: relative;
    margin: 30px 0;
}

.dashboard-chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-grid-line {
    stroke: rgba(0, 212, 255, 0.08);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

/* Main chart line with glow */
.chart-main-line {
    fill: none;
    stroke: url(#dashGradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.dashboard-card.visible .chart-main-line {
    animation: drawChart 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes drawChart {
    to {
        stroke-dashoffset: 0;
    }
}

/* Glowing duplicate line for trail effect */
.chart-glow-line {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: blur(8px);
    opacity: 0;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.dashboard-card.visible .chart-glow-line {
    animation:
        drawChart 3s cubic-bezier(0.4, 0, 0.2, 1) forwards,
        glowPulse 2s ease-in-out infinite 3s;
}

@keyframes glowPulse {
    0%,
    100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
}

/* Area under chart */
.chart-main-area {
    fill: url(#dashAreaGradient);
    opacity: 0;
    transform-origin: bottom;
    transform: scaleY(0);
}

.dashboard-card.visible .chart-main-area {
    animation: areaReveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards 2s;
}

@keyframes areaReveal {
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* Data points with bounce */
.chart-point {
    fill: var(--bg);
    stroke: var(--cyan);
    stroke-width: 3;
    opacity: 0;
    transform-origin: center;
    transform: scale(0);
    filter: drop-shadow(0 0 6px var(--cyan));
}

.dashboard-card.visible .chart-point {
    animation: pointBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dashboard-card.visible .chart-point:nth-child(1) {
    animation-delay: 0.5s;
}
.dashboard-card.visible .chart-point:nth-child(2) {
    animation-delay: 1s;
}
.dashboard-card.visible .chart-point:nth-child(3) {
    animation-delay: 1.5s;
}
.dashboard-card.visible .chart-point:nth-child(4) {
    animation-delay: 2s;
}
.dashboard-card.visible .chart-point:nth-child(5) {
    animation-delay: 2.5s;
}
.dashboard-card.visible .chart-point:nth-child(6) {
    animation-delay: 2.8s;
}

@keyframes pointBounce {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulsing ring on final point */
.chart-point-glow {
    fill: transparent;
    stroke: var(--cyan);
    stroke-width: 2;
    opacity: 0;
}

.dashboard-card.visible .chart-point-glow {
    animation: ringPulse 2s ease-in-out infinite 3s;
}

@keyframes ringPulse {
    0% {
        opacity: 0.8;
        r: 8;
        stroke-width: 2;
    }
    100% {
        opacity: 0;
        r: 25;
        stroke-width: 0;
    }
}

/* Moving particle along the line */
.chart-particle {
    fill: #fff;
    opacity: 0;
    filter: drop-shadow(0 0 4px var(--cyan)) drop-shadow(0 0 10px var(--cyan));
}

.dashboard-card.visible .chart-particle {
    animation: particleMove 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes particleMove {
    0% {
        opacity: 1;
        offset-distance: 0%;
    }
    100% {
        opacity: 0;
        offset-distance: 100%;
    }
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.chart-labels span {
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* Stats Row */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 25px;
    border-top: 1px solid rgba(0, 212, 255, 0.1);
}

.dash-stat {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
}

.dashboard-card.visible .dash-stat {
    animation: statFadeIn 0.6s ease forwards;
}

.dashboard-card.visible .dash-stat:nth-child(1) {
    animation-delay: 2.5s;
}
.dashboard-card.visible .dash-stat:nth-child(2) {
    animation-delay: 2.7s;
}
.dashboard-card.visible .dash-stat:nth-child(3) {
    animation-delay: 2.9s;
}

@keyframes statFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dash-stat-value {
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cyan);
}

.dash-stat-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 4px;
}

/* Right side content */
.earnings-content {
    max-width: 450px;
}

.earnings-content h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.earnings-content p {
    color: var(--text-mid);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 30px;
}

.earnings-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.earnings-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-mid);
}

.earnings-feature svg {
    width: 24px;
    height: 24px;
    color: var(--cyan);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .earnings-container {
        grid-template-columns: 1fr;
        text-align: left;
        gap: 40px;
        margin-top: 40px;
        padding: 0;
    }

    .earnings-content {
        max-width: 100%;
        order: -1;
        text-align: center;
    }

    .earnings-features {
        align-items: center;
    }

    .dashboard-card {
        padding: 20px 16px !important;
    }

    .dashboard-header {
        margin-bottom: 8px;
        text-align: center;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .dashboard-title {
        font-size: 0.7rem;
        margin-bottom: 4px;
    }

    .dashboard-amount {
        font-size: 1.6rem;
    }

    .dashboard-badge {
        padding: 4px 10px;
        font-size: 0.7rem;
    }

    .dashboard-chart {
        height: auto;
        margin: 8px 0;
    }

    .dashboard-chart svg {
        height: auto;
        max-height: 100px;
    }

    .chart-labels {
        padding: 0 4px;
    }

    .chart-labels span {
        font-size: 0.6rem;
    }

    .dashboard-stats {
        gap: 8px;
        padding-top: 12px;
    }

    .dash-stat-value {
        font-size: 1.1rem;
    }

    .dash-stat-label {
        font-size: 0.65rem;
    }

    .chart-sparkle {
        display: none;
    }
}

/* ========================================
           PROCESS SECTION - STACKING CARDS
        ======================================== */
#process {
    padding: 120px 0 180px;
}

.process-stack {
    display: block;
    margin-top: 60px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

#process .eyebrow,
#process h2 {
    text-align: center;
}

.process-card {
    position: sticky;
    top: 100px;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 36px 44px;
    margin-bottom: 24px;
    transition: border-color 0.3s ease;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
    .process-card {
        flex-direction: column;
        gap: 20px;
        padding: 28px 24px;
    }
    .proc-right {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
    }
}

.process-card:nth-child(1) {
    z-index: 1;
    top: 100px;
}
.process-card:nth-child(2) {
    z-index: 2;
    top: 130px;
}
.process-card:nth-child(3) {
    z-index: 3;
    top: 160px;
}
.process-card:nth-child(4) {
    z-index: 4;
    top: 190px;
}

/* Gradient backgrounds for each card */
.process-card-1 {
    background: linear-gradient(135deg, #0a1628 0%, #0f2847 100%);
    border: 1px solid rgba(0, 212, 255, 0.2);
}
.process-card-1:hover {
    border-color: rgba(0, 212, 255, 0.4);
}

.process-card-2 {
    background: linear-gradient(135deg, #0a1628 0%, #1a2d4e 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
}
.process-card-2:hover {
    border-color: rgba(34, 211, 238, 0.4);
}

.process-card-3 {
    background: linear-gradient(135deg, #0a1a28 0%, #153448 100%);
    border: 1px solid rgba(8, 145, 178, 0.2);
}
.process-card-3:hover {
    border-color: rgba(8, 145, 178, 0.4);
}

.process-card-4 {
    background: linear-gradient(135deg, #0a1a1a 0%, #1b3d3d 100%);
    border: 1px solid rgba(52, 211, 153, 0.2);
}
.process-card-4:hover {
    border-color: rgba(52, 211, 153, 0.4);
}

.proc-left {
    flex: 1;
    min-width: 0;
}
.proc-top-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.proc-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.proc-icon-box svg {
    width: 19px;
    height: 19px;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.proc-num {
    font-size: 0.72rem;
    font-weight: 800;
    font-family: "Montserrat", sans-serif;
    color: rgba(255, 255, 255, 0.22);
    letter-spacing: 0.12em;
}
.process-card h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    font-style: normal;
    color: var(--text);
    margin-bottom: 10px;
}
.process-card p {
    font-size: 0.92rem;
    color: var(--text-mid);
    line-height: 1.65;
    max-width: 500px;
}
.proc-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 108px;
    padding: 22px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.proc-stat-val {
    font-size: 1.55rem;
    font-weight: 900;
    font-family: "Montserrat", sans-serif;
    line-height: 1;
    margin-bottom: 7px;
}
.proc-stat-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.28);
    line-height: 1.4;
}
.process-card-1 .proc-icon-box {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.2);
}
.process-card-1 .proc-icon-box svg {
    stroke: var(--cyan);
}
.process-card-1 .proc-stat-val {
    color: var(--cyan);
}
.process-card-2 .proc-icon-box {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.2);
}
.process-card-2 .proc-icon-box svg {
    stroke: var(--cyan);
}
.process-card-2 .proc-stat-val {
    color: var(--cyan);
}
.process-card-3 .proc-icon-box {
    background: rgba(8, 145, 178, 0.12);
    border: 1px solid rgba(8, 145, 178, 0.25);
}
.process-card-3 .proc-icon-box svg {
    stroke: #22d3ee;
}
.process-card-3 .proc-stat-val {
    color: #22d3ee;
}
.process-card-4 .proc-icon-box {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.22);
}
.process-card-4 .proc-icon-box svg {
    stroke: var(--mint);
}
.process-card-4 .proc-stat-val {
    color: var(--mint);
}

/* ========================================
           FAQ SECTION - ANIMATED ACCORDION
        ======================================== */
#faq {
    padding: 120px 0;
}

#faq .eyebrow,
#faq h2 {
    text-align: center;
}

.faq-list {
    max-width: 800px;
    margin: 60px auto 0;
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid var(--glass-border);
    overflow: hidden;
    background: rgba(5, 15, 30, 0.6);
    padding: 0 20px;
    margin-bottom: 4px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.faq-item:first-child {
    border-top: 1px solid var(--glass-border);
}

.faq-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
}

.faq-trigger-text {
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    padding-right: 24px;
    transition: color 0.3s ease;
}

.faq-trigger:hover .faq-trigger-text {
    color: var(--cyan);
}

.faq-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s var(--spring);
}

.faq-chevron svg {
    width: 100%;
    height: 100%;
    stroke: var(--cyan);
    stroke-width: 2;
    fill: none;
}

.faq-item[data-expanded] .faq-chevron {
    transform: rotate(180deg);
}

.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows 0.4s var(--ease),
        opacity 0.3s ease;
    opacity: 0;
}

.faq-item[data-expanded] .faq-content {
    grid-template-rows: 1fr;
    opacity: 1;
}

.faq-content-inner {
    overflow: hidden;
}

.faq-content p {
    padding: 16px 20px 24px 20px;
    margin-bottom: 8px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    background: rgba(5, 15, 30, 0.75);
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.process-grid::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--cyan),
        var(--cyan-dark),
        var(--cyan),
        var(--mint)
    );
    opacity: 0.3;
}

.process-step {
    text-align: center;
    position: relative;
}

.step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cyan);
    margin: 0 auto 24px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%,
    100% {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.8);
    }
}

.process-step:nth-child(2) .step-dot {
    background: var(--cyan-dark);
    box-shadow: 0 0 20px rgba(8, 145, 178, 0.5);
    animation-delay: 0.5s;
}
.process-step:nth-child(3) .step-dot {
    background: var(--cyan);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.5);
    animation-delay: 1s;
}
.process-step:nth-child(4) .step-dot {
    background: var(--mint);
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
    animation-delay: 1.5s;
}

.step-number {
    font-family: "Montserrat", sans-serif;
    font-size: 2rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}

.process-step h3 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.process-step p {
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* ========================================
           CTA SECTION
        ======================================== */
#cta {
    text-align: center;
    padding: 140px 0;
}

#cta h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 24px;
}

#cta p {
    font-size: 1.1rem;
    color: var(--text-mid);
    max-width: 500px;
    margin: 0 auto 40px;
}

/* Calendly Widget Styling */
.calendly-wrapper {
    max-width: 900px;
    margin: 40px auto 0;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
}

.calendly-inline-widget {
    border-radius: 20px;
}

/* ========================================
           FOOTER
        ======================================== */
footer {
    position: relative;
}
/* ── NEW GLASS FOOTER ── */
.footer-glass {
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 44px 0 32px;
    position: relative;
    z-index: 1;
}
.footer-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 212, 255, 0.03) 0%,
        transparent 100%
    );
    pointer-events: none;
}
.footer-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}
.footer-top-row {
    display: contents;
}
.footer-brand {
    display: flex;
    flex-direction: column;
}
.footer-logo {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 1.35rem;
    letter-spacing: 0.12em;
    background: linear-gradient(135deg, #00d4ff, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.footer-tagline {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.22);
    margin-top: 5px;
    letter-spacing: 0.04em;
    font-family: "Montserrat", sans-serif;
}
.footer-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}
.footer-nav-links a {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.2s;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.02em;
}
.footer-nav-links a:hover {
    color: rgba(255, 255, 255, 0.85);
}
.footer-tg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(41, 182, 246, 0.08);
    border: 1px solid rgba(41, 182, 246, 0.25);
    border-radius: 10px;
    color: #29b6f6;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    transition:
        background 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.footer-tg:hover {
    background: rgba(41, 182, 246, 0.15);
    border-color: rgba(41, 182, 246, 0.5);
    box-shadow: 0 0 22px rgba(41, 182, 246, 0.18);
}
.footer-tg svg {
    flex-shrink: 0;
}
.footer-tg-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    justify-content: flex-end;
}
.footer-info {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
    flex-shrink: 0;
    font-family: "Montserrat", sans-serif;
    transition:
        border-color 0.2s,
        color 0.2s;
    position: relative;
}
.footer-info:hover {
    border-color: rgba(0, 212, 255, 0.4);
    color: rgba(0, 212, 255, 0.8);
}
.footer-info-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 210px;
    background: rgba(8, 18, 36, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.18);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    font-family: "Montserrat", sans-serif;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.2s,
        transform 0.2s;
    white-space: normal;
    z-index: 100;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 212, 255, 0.06);
}
.footer-info-tip::after {
    content: "";
    position: absolute;
    bottom: -5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: rgba(8, 18, 36, 0.9);
    border-right: 1px solid rgba(0, 212, 255, 0.18);
    border-bottom: 1px solid rgba(0, 212, 255, 0.18);
    transform: rotate(45deg);
}
.footer-info:hover .footer-info-tip {
    opacity: 1;
    transform: translateY(0);
}
.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    grid-column: 1 / -1;
    margin: 8px 0 0;
}
.footer-bottom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
}
.footer-copy {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.18);
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.04em;
}
@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 20px;
    }
    .footer-nav-links {
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-tg-wrap {
        justify-content: center;
    }
}

/* Big hover text */
.footer-big-text {
    position: relative;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    padding-bottom: 40px;
}

.footer-big-text svg {
    width: 100%;
    max-width: 800px;
    height: 150px;
}

.footer-text-outline {
    fill: none;
    stroke: rgba(0, 212, 255, 0.12);
    stroke-width: 0.5;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

.footer-text-fill {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 0.5;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 0.8s ease;
}

.footer-big-text:hover .footer-text-fill {
    stroke-dashoffset: 0;
}

.footer-text-gradient {
    fill: url(#footerGradient);
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.footer-big-text:hover .footer-text-gradient {
    opacity: 1;
}

@media (max-width: 768px) {
    .footer-big-text {
        height: 120px;
        padding-bottom: 20px;
    }

    .footer-big-text svg {
        height: 80px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-nav {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }
}

.footer-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    align-items: start;
    margin-bottom: 40px;
}

.footer-center {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.footer-center .footer-nav-col {
    text-align: center;
}

.footer-center .footer-nav-col a {
    display: inline-block;
    margin: 0 15px 10px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-logo {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: var(--text);
}

.footer-tagline {
    font-size: 0.85rem;
    color: var(--text-dim);
    max-width: 200px;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.footer-nav-col h4 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 16px;
}

.footer-nav-col a {
    display: block;
    font-size: 0.85rem;
    color: var(--text-dim);
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.footer-nav-col a:hover {
    color: var(--text);
}

.footer-social {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s var(--spring);
}

.social-link svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-dim);
    stroke-width: 1.5;
    fill: none;
    transition:
        stroke 0.3s ease,
        fill 0.3s ease;
}

.social-link:nth-child(2) svg {
    fill: var(--text-dim);
    stroke: none;
}

.social-link:hover {
    background: var(--glass-hover);
    border-color: var(--cyan);
    transform: translateY(-3px);
}

.social-link:hover svg {
    stroke: var(--text);
}

.social-link:nth-child(2):hover svg {
    fill: var(--text);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
}

.footer-copy {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.footer-legal {
    display: flex;
    gap: 24px;
}

.footer-legal a {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--text);
}

/* ========================================
           CASE STUDIES SECTION (BATCH 3)
        ======================================== */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.case-card {
    position: relative;
    overflow: hidden;
}

.case-card .glass-panel-content {
    padding: 24px;
}

.case-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.2),
        rgba(8, 145, 178, 0.1)
    );
    border-radius: 12px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.case-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mint);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.case-name {
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.case-niche {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 20px;
}

.case-metrics {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.case-metric {
    text-align: center;
}

.case-metric-label {
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.case-metric-value {
    font-family: "Montserrat", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
}

.case-metric-value.before {
    color: var(--text-dim);
}

.case-metric-value.after {
    color: var(--mint);
}

.case-arrow {
    color: var(--text-dim);
    font-size: 1.2rem;
}

.case-growth {
    display: inline-block;
    background: linear-gradient(
        135deg,
        rgba(52, 211, 153, 0.2),
        rgba(52, 211, 153, 0.05)
    );
    border: 1px solid rgba(52, 211, 153, 0.3);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mint);
}

/* ========================================
           MINI GRAPH FOR CASE STUDIES (SIMPLIFIED)
        ======================================== */
.case-graph {
    position: relative;
    width: 100%;
    height: 60px;
    margin: 16px 0;
}

.case-graph svg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.graph-line {
    fill: none;
    stroke: var(--mint);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.graph-dot {
    fill: var(--mint);
    opacity: 1;
}

/* ========================================
           LOADER
        ======================================== */
.loader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-mobile-note {
    display: none;
}
@media (max-width: 768px) {
    .loader-mobile-note {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 18px 28px;
    }
    .loader-mn-text {
        font-size: 0.82rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        letter-spacing: 0.04em;
    }
    .loader-mn-count {
        font-size: 0.72rem;
        color: rgba(0, 212, 255, 0.6);
        font-weight: 600;
        letter-spacing: 0.06em;
    }
    .loader-dots span {
        animation: loaderDot 1.2s infinite;
        opacity: 0;
    }
    .loader-dots span:nth-child(2) {
        animation-delay: 0.2s;
    }
    .loader-dots span:nth-child(3) {
        animation-delay: 0.4s;
    }
    @keyframes loaderDot {
        0%,
        80%,
        100% {
            opacity: 0;
        }
        40% {
            opacity: 1;
        }
    }
}

.loader-text {
    font-family: "Montserrat", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--text);
}

.loader-bar {
    width: 150px;
    height: 2px;
    background: var(--glass-border);
    border-radius: 2px;
    overflow: hidden;
}

.loader-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cyan), var(--cyan-dark));
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ========================================
           RESPONSIVE
        ======================================== */
@media (max-width: 1024px) {
    .hero-visual {
        height: 300px;
        width: 100%;
    }

    .services-grid,
    .cases-grid {
        grid-template-columns: 1fr 1fr;
    }

    .nav-links {
        display: none;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-nav {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .services-grid,
    .cases-grid {
        grid-template-columns: 1fr;
    }

    .proof-grid {
        flex-direction: column;
        gap: 40px;
    }

    .footer-nav {
        flex-direction: column;
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* FIX: Nav smaller on mobile */
    nav {
        top: calc(12px + env(safe-area-inset-top, 0px));
        padding: 8px 10px 8px 12px !important;
        gap: 0.6rem !important;
    }

    .nav-logo {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
        letter-spacing: 0.08em;
    }

    .nav-logo-container {
        border-radius: 8px;
    }

    .nav-cta {
        display: none !important;
    }
    body {
        padding-bottom: 72px;
    }

    /* FIX: Hero section on mobile */
    #hero,
    #hero-ag {
        min-height: auto;
        padding: 120px 16px 40px 16px;
    }

    .hero-grid {
        gap: 30px;
    }

    .hero-content h1 {
        font-size: 1.8rem !important;
        margin-bottom: 16px;
    }

    .hero-content p {
        font-size: 0.95rem;
        margin-bottom: 24px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }

    .hero-visual {
        height: 220px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-3d-container {
        border-radius: 16px;
    }

    .play-button {
        width: 56px;
        height: 56px;
    }

    .play-button::after {
        border-width: 10px 0 10px 18px;
    }

    .video-label {
        font-size: 0.7rem !important;
    }

    .chart-point {
        stroke-width: 2;
    }

    /* FIX: Process card SVG icons on mobile */
    .process-card {
        padding: 24px 20px !important;
        min-height: 180px !important;
    }

    .process-icon {
        width: 40px !important;
        height: 40px !important;
        top: 20px !important;
        right: 20px !important;
    }

    .process-icon svg {
        overflow: hidden !important;
    }

    .process-card h3 {
        font-size: 1.3rem !important;
    }

    /* AGENCIES MOBILE */
    .ag-metrics-grid {
        gap: 32px 40px;
    }
    .ag-metric-val {
        font-size: 2.4rem;
    }
    .ag-feature-item {
        grid-template-columns: 36px 1fr;
        gap: 14px;
        padding: 22px 0;
    }
    .ag-feature-num {
        font-size: 0.52rem;
    }
    .ag-feature-body h3 {
        font-size: 0.95rem;
    }
    .ag-compare-col {
        padding: 28px 24px;
    }
}
/* ========================================
           LEAD MAGNET
        ======================================== */
#lead-magnet {
    padding: 80px 0;
}

.lead-magnet-card {
    position: relative;
    background: linear-gradient(
        145deg,
        rgba(15, 29, 50, 0.9),
        rgba(10, 22, 40, 0.95)
    );
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 24px;
    padding: 60px;
    overflow: hidden;
}

.lead-magnet-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(
        ellipse,
        rgba(0, 212, 255, 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
}

.lead-magnet-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.lead-magnet-text .eyebrow {
    margin-bottom: 16px;
}

.lead-magnet-text h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-bottom: 16px;
}

.lead-magnet-desc {
    font-size: 1rem;
    color: var(--text-mid);
    margin-bottom: 24px;
    line-height: 1.7;
}

.lead-magnet-bullets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lead-bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-mid);
}

.lead-bullet-icon {
    color: var(--cyan);
    font-weight: 700;
}

.lead-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lead-form input {
    width: 100%;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid rgba(0, 212, 255, 0.15);
    background: rgba(10, 22, 40, 0.8);
    color: var(--text);
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.lead-form input::placeholder {
    color: var(--text-dim);
}

.lead-form input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}

.lead-btn {
    width: 100%;
    padding: 16px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
}

.lead-privacy {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-align: center;
}

.lead-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.lead-checkbox input {
    display: none;
}

.lead-checkbox-mark {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 5px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    background: rgba(10, 22, 40, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 1px;
}

.lead-checkbox input:checked ~ .lead-checkbox-mark {
    background: var(--cyan);
    border-color: var(--cyan);
}

.lead-checkbox input:checked ~ .lead-checkbox-mark::after {
    content: "✓";
    color: var(--bg);
    font-size: 0.75rem;
    font-weight: 700;
}

.lead-checkbox-text {
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.lead-success {
    text-align: center;
    padding: 40px 0;
}

.lead-success-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--cyan);
    color: var(--bg);
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.lead-success p {
    color: var(--text);
    font-size: 1rem;
}

@media (max-width: 900px) {
    .lead-magnet-content {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .lead-magnet-card {
        padding: 32px 20px;
    }

    .lead-magnet-bullets {
        align-items: center;
    }
}

/* ========================================
           EXIT INTENT POPUP
        ======================================== */
.exit-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.3s ease;
}

.exit-overlay.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.exit-popup {
    background: linear-gradient(
        145deg,
        rgba(15, 29, 50, 0.98),
        rgba(10, 22, 40, 1)
    );
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 24px;
    padding: 48px 40px;
    max-width: 480px;
    width: 100%;
    position: relative;
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 60px rgba(0, 212, 255, 0.15);
}

.exit-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #556677;
    font-size: 1.8rem;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.exit-close:hover {
    color: #e8edf3;
}

.exit-content {
    text-align: center;
}

.exit-badge {
    display: inline-block;
    background: rgba(255, 107, 107, 0.15);
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: #ff6b6b;
    padding: 6px 18px;
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

.exit-content h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 700;
    color: #e8edf3;
}

.exit-content h2 span {
    color: #00d4ff;
    font-style: italic;
}

.exit-content > p {
    color: #8899aa;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.exit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exit-form input[type="text"],
.exit-form input[type="email"] {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(0, 212, 255, 0.15);
    background: rgba(10, 22, 40, 0.8);
    color: #e8edf3;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition:
        border-color 0.3s,
        box-shadow 0.3s;
}

.exit-form input:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}

.exit-form input::placeholder {
    color: #556677;
}

.exit-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.exit-checkbox input {
    display: none;
}

.exit-checkbox-mark {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    background: rgba(10, 22, 40, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-top: 1px;
}

.exit-checkbox input:checked ~ .exit-checkbox-mark {
    background: #00d4ff;
    border-color: #00d4ff;
}

.exit-checkbox input:checked ~ .exit-checkbox-mark::after {
    content: "✓";
    color: #0a1628;
    font-size: 0.65rem;
    font-weight: 700;
}

.exit-checkbox-text {
    font-size: 0.65rem;
    color: #556677;
    line-height: 1.5;
    text-align: left;
}

.exit-btn {
    width: 100%;
    padding: 16px;
    border-radius: 100px;
    background: #00d4ff;
    color: #0a1628;
    font-family: "Montserrat", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition:
        transform 0.3s,
        box-shadow 0.3s;
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.3);
}

.exit-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.5);
}

.exit-success {
    padding: 20px 0;
}

.exit-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #34d399;
    color: #0a1628;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.exit-success p {
    color: #e8edf3;
    font-size: 0.9rem;
}

.exit-dismiss {
    margin-top: 16px;
    font-size: 0.7rem;
    color: #556677;
    cursor: pointer;
    transition: color 0.2s;
}

.exit-dismiss:hover {
    color: #8899aa;
}

@media (max-width: 640px) {
    .exit-popup {
        padding: 32px 20px;
    }
    .exit-content h2 {
        font-size: 1.2rem;
    }
}
/* ===== AUDIENCE TOGGLE ===== */
.audience-toggle {
    display: flex;
    background: rgba(15, 29, 50, 0.7);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
}
.aud-btn {
    padding: 7px 20px;
    border-radius: 100px;
    border: none;
    outline: none;
    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--text-mid);
    background: transparent;
    transition: all 0.25s var(--ease);
    white-space: nowrap;
}
.aud-btn:focus {
    outline: none;
}
.aud-btn:focus-visible {
    outline: none;
}
.aud-btn.active {
    background: var(--cyan);
    color: #0a1628;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}
#view-creators,
#view-agencies {
    transition: none;
}
/* ===== AGENCIES DASHBOARD CARD ===== */
.ag-dashboard-card {
    background: rgba(15, 29, 50, 0.7);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 20px;
    padding: 1.8rem;
    width: 100%;
    max-width: 460px;
    box-shadow:
        0 0 60px rgba(0, 212, 255, 0.06),
        0 20px 60px rgba(0, 0, 0, 0.4);
    position: relative;
    animation: float 3s ease-in-out infinite alternate;
}
.ag-dashboard-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 212, 255, 0.4),
        transparent
    );
}
.ag-dash-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.08);
}
.ag-dash-hdr-l {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ag-dash-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--cyan);
    text-transform: uppercase;
}
.ag-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mint);
    animation: agPulse 2s ease-in-out infinite;
}
@keyframes agPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.6;
    }
}
.ag-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.85rem;
    color: var(--text-mid);
    font-weight: 500;
}
.ag-stat:last-child {
    border-bottom: none;
}
.ag-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.ag-val.up {
    color: var(--mint);
}
@media (max-width: 768px) {
    .audience-toggle {
        display: flex;
        transform: scale(0.85);
        transform-origin: center;
    }
}
.mobile-bottom-cta {
    display: none;
}
@media (max-width: 640px) {
    .mobile-bottom-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(
            to top,
            rgba(8, 12, 22, 1) 0%,
            rgba(8, 12, 22, 0.95) 70%,
            transparent 100%
        );
    }
    .mobile-bottom-cta a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 20px;
        border-radius: 100px;
        background: var(--cyan);
        color: #0a1628;
        font-family: "Montserrat", sans-serif;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        box-shadow: 0 0 24px rgba(0, 212, 255, 0.35);
    }
}

/* ===== AGENCIES — HERO ===== */
#hero-ag {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 24px 60px;
}
#hero-ag .container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}
#hero-ag .hero-visual {
    height: auto;
    min-height: 360px;
}
@media (max-width: 640px) {
    #hero-ag .hero-visual {
        margin-top: 20px;
        min-height: auto;
    }
}
#hero-ag .hero-3d-container {
    overflow: visible;
    height: auto;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes float {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-14px);
    }
}

/* ===== AGENCIES — SECTION HEADING ALIGNMENT ===== */
#compare-ag .eyebrow,
#compare-ag h2,
#metrics-ag .eyebrow,
#metrics-ag h2,
#odometer-ag .eyebrow,
#odometer-ag h2,
#bento-ag .eyebrow,
#bento-ag h2,
#chatters-ag .eyebrow,
#chatters-ag h2,
#terminal-ag .eyebrow,
#terminal-ag h2,
#fanjourney-ag .eyebrow,
#fanjourney-ag h2,
#weapon-ag .eyebrow,
#weapon-ag h2,
#features-ag .eyebrow,
#features-ag h2,
#process-ag .eyebrow,
#process-ag h2,
#pricing-ag .eyebrow,
#pricing-ag h2,
#cta-ag .eyebrow,
#cta-ag h2,
#cta-ag > .container > p {
    text-align: center;
}
#cta-ag > .container > p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.cta-ag-cols {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
    margin-top: 40px;
}
.cta-ag-calendly {
    border-radius: 20px;
    overflow: hidden;
    background: rgba(10, 20, 38, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.cta-ag-tg {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: 100px;
}
@keyframes ctaOrb1 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(30px, -20px) scale(1.15);
    }
}
@keyframes ctaOrb2 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-20px, 25px) scale(1.1);
    }
}
@keyframes ctaBorderSpin {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes ctaCardShimmer {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
.cta-ag-tg-card {
    position: relative;
    background: rgba(10, 20, 38, 0.75);
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(0, 212, 255, 0.07),
        0 0 120px rgba(52, 211, 153, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.cta-ag-tg-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    padding: 1px;
    background: linear-gradient(
        130deg,
        rgba(0, 212, 255, 0.4),
        rgba(52, 211, 153, 0.15),
        rgba(255, 255, 255, 0.04),
        rgba(38, 162, 222, 0.35)
    );
    background-size: 300% 300%;
    animation: ctaBorderSpin 5s ease infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.cta-ag-tg-card::after {
    content: "";
    position: absolute;
    top: -60px;
    left: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(
        ellipse,
        rgba(0, 212, 255, 0.08),
        transparent 70%
    );
    animation: ctaOrb1 7s ease-in-out infinite;
    pointer-events: none;
    border-radius: 50%;
}
.cta-ag-tg-orb2 {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(
        ellipse,
        rgba(52, 211, 153, 0.07),
        transparent 70%
    );
    animation: ctaOrb2 9s ease-in-out infinite;
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
}
.cta-ag-tg-card > *:not(.cta-ag-tg-orb2) {
    position: relative;
    z-index: 1;
}
.cta-ag-tg-orb2 {
    position: absolute !important;
}
.cta-ag-tg-card .tg-or {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 212, 255, 0.4);
    margin-bottom: 4px;
}
.cta-ag-tg-card .tg-head {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.cta-ag-tg-card .tg-body {
    font-size: 0.82rem;
    color: rgba(140, 165, 195, 0.65);
    line-height: 1.7;
}
.cta-ag-tg-card .tg-body strong {
    color: rgba(200, 220, 255, 0.85);
    font-weight: 600;
}
.cta-ag-tg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(38, 162, 222, 0.12);
    border: 1px solid rgba(38, 162, 222, 0.25);
    color: rgba(38, 162, 222, 0.95);
    border-radius: 100px;
    padding: 14px 24px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background 0.25s,
        border-color 0.25s,
        box-shadow 0.25s;
    margin-top: 4px;
}
.cta-ag-tg-btn:hover {
    background: rgba(38, 162, 222, 0.2);
    border-color: rgba(38, 162, 222, 0.45);
    box-shadow: 0 0 24px rgba(38, 162, 222, 0.18);
}
.cta-ag-tg-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
}
.cta-ag-tg-divider::before,
.cta-ag-tg-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}
.cta-ag-tg-divider span {
    font-size: 0.6rem;
    color: rgba(140, 165, 195, 0.3);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cta-ag-founder {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(0, 212, 255, 0.04);
    border: 1px solid rgba(0, 212, 255, 0.08);
    border-radius: 14px;
}
.cta-ag-founder-av {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.2),
        rgba(52, 211, 153, 0.15)
    );
    border: 1px solid rgba(0, 212, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--cyan);
    flex-shrink: 0;
}
.cta-ag-founder-info .f-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}
.cta-ag-founder-info .f-role {
    font-size: 0.62rem;
    color: rgba(0, 212, 255, 0.5);
    font-weight: 600;
    letter-spacing: 0.05em;
}
@media (max-width: 900px) {
    .cta-ag-cols {
        grid-template-columns: 1fr;
    }
    .cta-ag-tg {
        position: static;
    }
}
#ofchat-ag .eyebrow,
#ofchat-ag h2 {
    text-align: center;
}
.ofc-demo-note {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(180, 200, 225, 0.7);
    letter-spacing: 0.02em;
    margin: 12px auto 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 16px;
    display: table;
    max-width: 640px;
}

/* ===== AGENCIES — COMPARISON ===== */
#compare-ag {
    padding: 100px 0;
}
.ag-compare-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 860px;
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}
.ag-compare-col {
    padding: 44px 40px;
    position: relative;
}
.ag-compare-col.them {
    background: rgba(18, 8, 8, 0.7);
    border: 1px solid rgba(255, 60, 60, 0.1);
    border-right: none;
    border-radius: 28px 0 0 28px;
}
.ag-compare-col.us {
    background: rgba(6, 22, 42, 0.8);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 0 28px 28px 0;
    box-shadow: 0 0 80px rgba(0, 212, 255, 0.07) inset;
}
.ag-compare-col.us::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 212, 255, 0.5),
        transparent
    );
}
.ag-compare-head {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ag-compare-head.bad-head {
    color: rgba(255, 100, 100, 0.45);
}
.ag-compare-head.good-head {
    color: var(--cyan);
}
.ag-compare-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    line-height: 1.55;
}
.ag-compare-item:last-child {
    margin-bottom: 0;
}
.ag-cmp-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
}
.ag-cmp-icon.x {
    background: rgba(255, 60, 60, 0.1);
    color: rgba(255, 80, 80, 0.65);
}
.ag-cmp-icon.chk {
    background: rgba(52, 211, 153, 0.12);
    color: var(--mint);
}
.ag-compare-col.them .ag-compare-item {
    color: rgba(200, 170, 170, 0.38);
}
.ag-compare-col.us .ag-compare-item {
    color: rgba(180, 215, 235, 0.78);
}
@media (max-width: 640px) {
    .cta-ag-tg-card {
        padding: 24px 20px;
    }
}
@media (max-width: 640px) {
    .ag-compare-wrap {
        grid-template-columns: 1fr;
    }
    .ag-compare-col.them {
        border-right: 1px solid rgba(255, 60, 60, 0.1);
        border-bottom: none;
        border-radius: 28px 28px 0 0;
    }
    .ag-compare-col.us {
        border-radius: 0 0 28px 28px;
    }
}

/* ===== AGENCIES — METRICS ===== */
#metrics-ag {
    padding: 100px 0;
}
.ag-metrics-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 70px;
    margin-top: 12px;
}
.ag-metric {
    text-align: center;
    min-width: 140px;
}
.ag-metric-val {
    font-size: 3.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff 20%, var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(0, 212, 255, 0.35));
    letter-spacing: -0.04em;
    line-height: 1.05;
}
.ag-metric-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 10px;
}

/* ===== AGENCIES — FEATURE LIST ===== */
#features-ag {
    padding: 100px 0;
}
.ag-features-list {
    max-width: 800px;
    margin: 0 auto;
}
.ag-feature-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    align-items: start;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    transition: background 0.3s;
}
.ag-feature-item:last-child {
    border-bottom: none;
}
.ag-feature-item::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cyan), var(--mint));
    border-radius: 4px;
    opacity: 0;
    transition:
        opacity 0.3s var(--ease),
        left 0.3s var(--ease);
    z-index: 0;
}
.ag-feature-item:hover::before {
    opacity: 1;
    left: 0;
}
.ag-feature-item:hover {
    background: rgba(0, 212, 255, 0.025);
}
.ag-feature-num {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: rgba(0, 212, 255, 0.45);
    font-family: "Montserrat", sans-serif;
    position: relative;
    z-index: 2;
    line-height: 1.1;
}
.ag-feature-body h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.015em;
}
.ag-feature-body p {
    font-size: 0.875rem;
    color: var(--text-mid);
    line-height: 1.75;
}
.ag-feature-tag {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 13px;
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.18);
    border-radius: 100px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mint);
}

/* ===== AGENCIES — OF CHAT UI ===== */
#ofchat-ag {
    padding: 100px 0;
    overflow: hidden;
    position: relative;
}
#ofchat-ag::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse,
        rgba(0, 212, 255, 0.04),
        transparent 70%
    );
    pointer-events: none;
}
/* Shell: sidebar + chat + panel */
.ofc-shell {
    display: grid;
    grid-template-columns: 220px 1fr 200px;
    max-width: 980px;
    margin: 48px auto 0;
    background: rgba(8, 16, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 212, 255, 0.05);
    height: 580px;
}
/* SIDEBAR */
.ofc-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ofc-sb-hdr {
    padding: 18px 16px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.ofc-sb-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}
.ofc-sb-count {
    font-size: 0.52rem;
    font-weight: 700;
    background: rgba(0, 212, 255, 0.15);
    color: var(--cyan);
    border-radius: 100px;
    padding: 2px 7px;
    letter-spacing: 0.06em;
}
.ofc-sb-search {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 12px 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 0.68rem;
    color: rgba(120, 140, 165, 0.4);
    cursor: default;
    flex-shrink: 0;
}
.ofc-convo-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
}
.ofc-convo-list::-webkit-scrollbar {
    display: none;
}
.ofc-convo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition:
        background 0.15s,
        border-color 0.15s;
    position: relative;
}
.ofc-convo:hover,
.ofc-convo.active {
    background: rgba(0, 212, 255, 0.05);
}
.ofc-convo.active {
    border-left-color: var(--cyan);
}
/* Avatar */
.ofc-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(var(--c-r, 0), var(--c-g, 0), var(--c-b, 0), 0.2);
    border: 1.5px solid;
    border-color: var(--c, rgba(0, 212, 255, 0.4));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--c, var(--cyan));
    flex-shrink: 0;
    font-family: "Montserrat", sans-serif;
}
.ofc-av.lg {
    width: 42px;
    height: 42px;
    font-size: 0.85rem;
}
.ofc-av.xl {
    width: 52px;
    height: 52px;
    font-size: 1rem;
}
.ofc-convo-body {
    flex: 1;
    min-width: 0;
}
.ofc-convo-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3px;
}
.ofc-convo-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ofc-convo-time {
    font-size: 0.55rem;
    color: rgba(100, 120, 150, 0.5);
    flex-shrink: 0;
}
.ofc-convo-preview {
    font-size: 0.65rem;
    color: rgba(120, 140, 165, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ofc-convo.active .ofc-convo-preview {
    color: rgba(0, 212, 255, 0.5);
}
.ofc-convo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.7);
    flex-shrink: 0;
    animation: agPulse 2s ease-in-out infinite;
}
.ofc-unread-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 100px;
    background: var(--cyan);
    color: #0a1628;
    font-size: 0.48rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    animation: ofcBadgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ofcBadgePop {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
.ofc-convo.new-msg {
    animation: ofcConvoFlash 0.6s ease;
}
@keyframes ofcConvoFlash {
    0%,
    100% {
        background: transparent;
    }
    50% {
        background: rgba(0, 212, 255, 0.08);
    }
}
/* CHAT MAIN */
.ofc-chat {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}
.ofc-chat-hdr {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: rgba(10, 20, 36, 0.5);
}
.ofc-chat-hdr-l {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ofc-chat-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}
.ofc-chat-status {
    font-size: 0.58rem;
    color: rgba(52, 211, 153, 0.7);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.ofc-online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 8px var(--mint);
    animation: agPulse 2s ease-in-out infinite;
}
.ofc-chat-hdr-r {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ofc-fan-tag {
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 3px 9px;
    border-radius: 100px;
}
.ofc-fan-tag.whale-tag {
    background: rgba(0, 212, 255, 0.1);
    color: var(--cyan);
    border: 1px solid rgba(0, 212, 255, 0.2);
}
.ofc-fan-tag.spend-tag {
    background: rgba(52, 211, 153, 0.07);
    color: rgba(52, 211, 153, 0.7);
    border: 1px solid rgba(52, 211, 153, 0.14);
}
/* Notes bar */
.ofc-notes-bar {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 7px 18px;
    background: rgba(0, 100, 60, 0.08);
    border-bottom: 1px solid rgba(52, 211, 153, 0.08);
    font-size: 0.6rem;
    color: rgba(52, 211, 153, 0.5);
    line-height: 1.5;
    flex-shrink: 0;
}
.ofc-notes-bar svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: rgba(52, 211, 153, 0.45);
}
.ofc-notes-text em {
    font-style: normal;
    color: rgba(52, 211, 153, 0.7);
}
/* Messages scroll */
.ofc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.1) transparent;
}
.ofc-messages::-webkit-scrollbar {
    width: 3px;
}
.ofc-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.12);
    border-radius: 2px;
}
.ofc-day-div {
    text-align: center;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(100, 120, 150, 0.35);
    margin: 6px 0 14px;
    position: relative;
}
.ofc-day-div::before,
.ofc-day-div::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 30px);
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}
.ofc-day-div::before {
    left: 0;
}
.ofc-day-div::after {
    right: 0;
}
/* Message rows */
.ofc-msg {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}
.ofc-msg.fan {
    align-items: flex-start;
}
.ofc-msg.creator {
    align-items: flex-end;
}
.ofc-bubble {
    max-width: 72%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 0.78rem;
    line-height: 1.55;
    word-break: break-word;
    opacity: 0;
    transform: translateX(var(--bx, 0)) scale(0.92);
    transition:
        opacity 0.4s ease,
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ofc-msg.fan .ofc-bubble {
    --bx: -22px;
}
.ofc-msg.creator .ofc-bubble {
    --bx: 22px;
}
.ofc-bubble.show {
    opacity: 1;
    transform: none;
}
.ofc-bubble.fan {
    background: rgba(30, 45, 70, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(190, 210, 235, 0.9);
    border-bottom-left-radius: 4px;
}
.ofc-bubble.creator {
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.18),
        rgba(0, 212, 255, 0.1)
    );
    border: 1px solid rgba(0, 212, 255, 0.22);
    color: rgba(220, 240, 255, 0.95);
    border-bottom-right-radius: 4px;
}
.ofc-bubble.ppv-bubble {
    background: rgba(15, 28, 50, 0.95);
    border: 1px solid rgba(0, 212, 255, 0.3);
    padding: 0;
    overflow: hidden;
    max-width: 260px;
}
.ofc-ppv-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}
.ofc-ppv-lock {
    width: 36px;
    height: 36px;
    background: rgba(0, 212, 255, 0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    flex-shrink: 0;
}
.ofc-ppv-info {
    flex: 1;
    min-width: 0;
}
.ofc-ppv-label {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 212, 255, 0.45);
    margin-bottom: 3px;
}
.ofc-ppv-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.ofc-ppv-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cyan);
}
.ofc-ppv-btn {
    padding: 6px 14px;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.3),
        rgba(0, 212, 255, 0.15)
    );
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cyan);
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.2s,
        box-shadow 0.2s;
    flex-shrink: 0;
}
.ofc-ppv-btn:hover,
.ofc-ppv-btn.unlocked {
    background: linear-gradient(
        135deg,
        rgba(52, 211, 153, 0.3),
        rgba(52, 211, 153, 0.15)
    );
    border-color: rgba(52, 211, 153, 0.5);
    color: var(--mint);
}
.ofc-ppv-btn.unlocked::before {
    content: "✓ ";
}
.ofc-msg-time {
    font-size: 0.52rem;
    color: rgba(100, 120, 150, 0.35);
    margin-top: 3px;
    padding: 0 4px;
}
/* Typing */
.ofc-typing-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px 8px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.ofc-typing-bubble {
    background: rgba(30, 45, 70, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    padding: 8px 14px;
    display: flex;
    gap: 3px;
    align-items: center;
}
.ofc-typing-dots {
    display: flex;
    gap: 3px;
    align-items: center;
}
.ofc-typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.4);
    animation: ofcTypeDot 1.4s ease-in-out infinite;
}
.ofc-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.ofc-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes ofcTypeDot {
    0%,
    80%,
    100% {
        transform: scale(0.8);
        opacity: 0.3;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}
.ofc-typing-lbl {
    font-size: 0.6rem;
    color: rgba(100, 130, 165, 0.4);
    letter-spacing: 0.03em;
}
/* Input area */
.ofc-input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    background: rgba(8, 16, 30, 0.5);
}
.ofc-input-icons {
    display: flex;
    gap: 12px;
    color: rgba(100, 130, 165, 0.3);
}
.ofc-input-icons svg {
    cursor: pointer;
    transition: color 0.2s;
}
.ofc-input-icons svg:hover {
    color: rgba(0, 212, 255, 0.5);
}
.ofc-input-field {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 0.78rem;
    color: rgba(190, 210, 235, 0.8);
    min-height: 38px;
    display: flex;
    align-items: center;
}
.ofc-cursor-text {
    color: rgba(190, 210, 235, 0.85);
}
.ofc-cursor-blink {
    color: var(--cyan);
    animation: termBlink 1s step-end infinite;
    font-weight: 300;
}
.ofc-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.25),
        rgba(0, 212, 255, 0.12)
    );
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.2s,
        box-shadow 0.2s;
    flex-shrink: 0;
}
.ofc-send-btn:hover,
.ofc-send-btn.flash {
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.4),
        rgba(0, 212, 255, 0.25)
    );
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.35);
}
/* RIGHT PANEL */
.ofc-panel {
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    background: rgba(6, 12, 24, 0.6);
}
.ofc-panel::-webkit-scrollbar {
    display: none;
}
.ofc-panel-hdr {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 212, 255, 0.3);
    margin-bottom: 16px;
    text-align: center;
}
.ofc-panel-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin-bottom: 3px;
}
.ofc-panel-since {
    font-size: 0.58rem;
    color: rgba(100, 120, 150, 0.4);
    text-align: center;
    margin-bottom: 16px;
}
.ofc-panel-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.ofc-ps {
    background: rgba(0, 212, 255, 0.04);
    border: 1px solid rgba(0, 212, 255, 0.08);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
}
.ofc-ps-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
}
.ofc-ps-lbl {
    font-size: 0.46rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(80, 110, 145, 0.5);
}
.ofc-panel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 16px;
}
.ofc-ptag {
    font-size: 0.5rem;
    font-weight: 700;
    padding: 3px 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 100px;
    color: rgba(160, 180, 205, 0.5);
}
.ofc-ptag:first-child {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.18);
    color: var(--cyan);
}
.ofc-panel-label {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(80, 110, 145, 0.4);
    margin-bottom: 10px;
}
.ofc-activity-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}
.ofc-act-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.62rem;
}
.ofc-act-ico {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 800;
    flex-shrink: 0;
}
.ofc-act-ico.buy {
    background: rgba(0, 212, 255, 0.1);
    color: var(--cyan);
}
.ofc-act-ico.tip {
    background: rgba(244, 114, 182, 0.1);
    color: rgba(244, 114, 182, 0.8);
}
.ofc-act-ico.sub {
    background: rgba(52, 211, 153, 0.1);
    color: var(--mint);
}
.ofc-act-txt {
    flex: 1;
    color: rgba(150, 170, 195, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ofc-act-when {
    font-size: 0.5rem;
    color: rgba(100, 120, 150, 0.35);
    flex-shrink: 0;
}
.ofc-dbco-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: 10px;
    margin-top: auto;
    font-size: 0.58rem;
    color: rgba(0, 212, 255, 0.5);
    font-weight: 600;
}
.ofc-dbco-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 8px var(--mint);
    animation: agPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
/* Responsive */
@media (max-width: 860px) {
    .ofc-shell {
        grid-template-columns: 1fr;
        height: auto;
    }
    .ofc-sidebar,
    .ofc-panel {
        display: none;
    }
    .ofc-chat {
        height: auto;
        min-height: 300px;
        max-height: 500px;
    }
}
@media (max-width: 860px) {
    .ofc-mobile-tabs {
        display: flex !important;
    }
    .ofc-shell {
        margin-top: 0;
    }
}
.ofc-mobile-tabs {
    display: none;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4px;
}
.ofc-mobile-tabs::-webkit-scrollbar {
    display: none;
}
.ofc-mobile-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 8px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.ofc-mobile-tab.active {
    border-color: rgba(0, 212, 255, 0.4);
    background: rgba(0, 212, 255, 0.08);
}
.ofc-mobile-tab .ofc-av {
    width: 26px;
    height: 26px;
    font-size: 0.6rem;
    flex-shrink: 0;
    min-width: 26px;
}
.ofc-mobile-tab-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
}
.ofc-mobile-tab.active .ofc-mobile-tab-name {
    color: var(--cyan);
}
/* Bigger text across the DMs section */
.ofc-fan-tag {
    font-size: 0.65rem;
}
.ofc-notes-bar {
    font-size: 0.7rem;
}
.ofc-bubble {
    font-size: 0.86rem;
}
.ofc-convo-name {
    font-size: 0.82rem;
}
.ofc-convo-preview {
    font-size: 0.7rem;
}
.ofc-ps-val {
    font-size: 1.25rem;
}
.ofc-ps-lbl {
    font-size: 0.54rem;
}
.ofc-panel-name {
    font-size: 1rem;
}
.ofc-panel-since {
    font-size: 0.65rem;
}
.ofc-act-txt {
    font-size: 0.68rem;
}
.ofc-panel-label {
    font-size: 0.58rem;
}
.ofc-ptag {
    font-size: 0.58rem;
}
.ofc-panel-hdr {
    font-size: 0.62rem;
}
/* Tip event inline */
.ofc-tip-event {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}
.ofc-tip-pill {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(52, 211, 153, 0.85);
    background: rgba(52, 211, 153, 0.07);
    border: 1px solid rgba(52, 211, 153, 0.18);
    border-radius: 100px;
    padding: 4px 16px;
    letter-spacing: 0.03em;
}

/* ===== AGENCIES — PRICING CARD ===== */
#pricing-ag {
    padding: 100px 0;
}
.ag-pricing-card {
    max-width: 580px;
    margin: 0 auto;
    background: linear-gradient(
        145deg,
        rgba(15, 29, 50, 0.9),
        rgba(10, 22, 40, 0.97)
    );
    border: 1px solid rgba(0, 212, 255, 0.18);
    border-radius: 32px;
    padding: 56px 52px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.ag-pricing-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 212, 255, 0.55),
        transparent
    );
}
.ag-pricing-card::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 220px;
    background: radial-gradient(
        ellipse,
        rgba(0, 212, 255, 0.09) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}
.ag-pricing-inner {
    position: relative;
    z-index: 1;
}
.ag-pricing-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 100px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: 28px;
}
.ag-pricing-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint);
    animation: agPulse 2s ease-in-out infinite;
}
.ag-pricing-main {
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #fff 0%, var(--cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ag-pricing-sub {
    font-size: 0.85rem;
    color: var(--text-mid);
    margin-bottom: 36px;
    line-height: 1.6;
}
.ag-pricing-list {
    list-style: none;
    text-align: left;
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.ag-pricing-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 0.875rem;
    color: rgba(180, 210, 230, 0.72);
}
.ag-pricing-list li .chk-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mint);
    font-size: 0.62rem;
    font-weight: 800;
}
@media (max-width: 640px) {
    .ag-pricing-card {
        padding: 40px 28px;
    }
    .ag-pricing-main {
        font-size: 3.8rem;
    }
}

/* ===== AGENCIES — LIVE EVENTS in HERO CARD ===== */
.ag-events-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 212, 255, 0.12),
        transparent
    );
    margin: 12px 0;
}
.ag-events-lbl {
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 212, 255, 0.3);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ag-events-lbl::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 6px var(--mint);
    animation: agPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
.ag-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.72rem;
    opacity: 0;
    transform: translateY(5px);
    animation: evtIn 0.4s var(--ease) forwards;
}
.ag-event-row:last-child {
    border-bottom: none;
}
.ag-event-row:nth-child(1) {
    animation-delay: 1.2s;
}
.ag-event-row:nth-child(2) {
    animation-delay: 1.8s;
}
.ag-event-row:nth-child(3) {
    animation-delay: 2.4s;
}
@keyframes evtIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.ag-event-name {
    color: var(--text-mid);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.ag-event-amount {
    color: rgba(52, 211, 153, 0.85);
    font-weight: 700;
    flex-shrink: 0;
}
.ag-event-ago {
    font-size: 0.6rem;
    color: rgba(100, 120, 150, 0.4);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== AGENCIES — GLITCH on THEM column ===== */
.ag-glitch {
    position: relative;
    display: inline;
}
.ag-glitch::before,
.ag-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}
.ag-glitch::before {
    text-shadow: -2px 0 rgba(255, 50, 50, 0.7);
    clip-path: polygon(0 20%, 100% 20%, 100% 42%, 0 42%);
    animation: glitch1 7s infinite 3s;
}
.ag-glitch::after {
    text-shadow: 2px 0 rgba(255, 80, 80, 0.5);
    clip-path: polygon(0 58%, 100% 58%, 100% 76%, 0 76%);
    animation: glitch2 7s infinite 3.6s;
}
@keyframes glitch1 {
    0%,
    87%,
    100% {
        opacity: 0;
        transform: none;
    }
    88% {
        opacity: 1;
        transform: translateX(-4px) skewX(-3deg);
    }
    92% {
        opacity: 1;
        transform: translateX(3px);
    }
    96% {
        opacity: 0;
    }
}
@keyframes glitch2 {
    0%,
    85%,
    100% {
        opacity: 0;
        transform: none;
    }
    86% {
        opacity: 1;
        transform: translateX(3px) skewX(2deg);
    }
    90% {
        opacity: 1;
        transform: translateX(-2px);
    }
    95% {
        opacity: 0;
    }
}

/* ===== AGENCIES — BEAM SWEEP on DBCO column ===== */
.ag-col-beam {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.ag-col-beam::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 212, 255, 0.07),
        rgba(52, 211, 153, 0.04),
        transparent
    );
    animation: colBeam 5s ease-in-out infinite 2s;
    will-change: transform;
}
@keyframes colBeam {
    0% {
        left: -60%;
    }
    100% {
        left: 150%;
    }
}
.ag-compare-col.us .ag-compare-head,
.ag-compare-col.us .ag-compare-item {
    position: relative;
    z-index: 1;
}

/* ===== AGENCIES — BENTO GRID ===== */
#bento-ag {
    padding: 100px 0;
}
.ag-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 920px;
    margin: 0 auto;
}
.ag-bento-card {
    background: rgba(8, 18, 36, 0.75);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 20px;
    padding: 26px 24px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
}
.ag-bento-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 212, 255, 0.22),
        transparent
    );
}
.ag-bento-card.col2 {
    grid-column: span 2;
}
.ag-bento-lbl {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 212, 255, 0.3);
    margin-bottom: 14px;
}

/* Bento: sparkline chart */
.ag-sparkline-wrap {
    position: relative;
    height: 70px;
    margin: 6px 0 10px;
}
.ag-sparkline-wrap svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ag-spark-line {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 2s var(--ease) 0.2s;
}
.ag-spark-line.anim {
    stroke-dashoffset: 0;
}
.ag-spark-area {
    opacity: 0;
    transition: opacity 0.8s ease 0.8s;
}
.ag-spark-area.anim {
    opacity: 1;
}
.ag-spark-dot {
    fill: var(--cyan);
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.8));
    opacity: 0;
    transition: opacity 0.3s ease 2s;
}
.ag-spark-dot.anim {
    opacity: 1;
}
.ag-bento-big {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, #e8ecf1, var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ag-bento-sub {
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-top: 4px;
    letter-spacing: 0.04em;
}
.ag-bento-up {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--mint);
    background: rgba(52, 211, 153, 0.07);
    border: 1px solid rgba(52, 211, 153, 0.14);
    border-radius: 100px;
    padding: 3px 10px;
}
.ag-bento-up::before {
    content: "↑";
}

/* Bento: fan tier bars */
.ag-tier-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.ag-tier-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ag-tier-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ag-tier-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-mid);
}
.ag-tier-pct {
    font-size: 0.6rem;
    color: var(--text-dim);
}
.ag-tier-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 100px;
    overflow: hidden;
}
.ag-tier-fill {
    height: 100%;
    border-radius: 100px;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1.3s var(--ease);
}
.ag-tier-fill.anim {
    transform: scaleX(1);
}
.t-whale {
    background: linear-gradient(90deg, var(--cyan), var(--mint));
    width: 12%;
}
.t-top {
    background: linear-gradient(90deg, var(--mint), rgba(0, 212, 255, 0.6));
    width: 28%;
}
.t-buy {
    background: rgba(0, 212, 255, 0.45);
    width: 45%;
}
.t-wst {
    background: rgba(255, 255, 255, 0.1);
    width: 15%;
}

/* Bento: shift coverage bars */
.ag-shift-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 52px;
    margin-top: 8px;
}
.ag-sbar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-sbar.anim {
    transform: scaleY(1);
}
.ag-sbar.hi {
    background: linear-gradient(180deg, var(--cyan), rgba(0, 212, 255, 0.15));
}
.ag-sbar.mid {
    background: linear-gradient(180deg, var(--mint), rgba(52, 211, 153, 0.12));
}
.ag-sbar.lo {
    background: rgba(255, 255, 255, 0.06);
}
.ag-shift-lbls {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 0.62rem;
    color: rgba(120, 140, 165, 0.6);
}

/* Bento: response ring */
.ag-ring-outer {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 6px;
}
.ag-ring-wrap {
    position: relative;
    width: 74px;
    height: 74px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
}
.ag-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ag-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 7;
}
.ag-ring-arc {
    fill: none;
    stroke: var(--mint);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 204;
    stroke-dashoffset: 204;
    transition: stroke-dashoffset 1.8s var(--ease) 0.3s;
    filter: drop-shadow(0 0 5px rgba(52, 211, 153, 0.5));
}
.ag-ring-arc.anim {
    stroke-dashoffset: 51;
}
.ag-ring-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ag-ring-num {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.ag-ring-unit {
    font-size: 0.44rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
}
.ag-ring-info h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 5px;
}
.ag-ring-info p {
    font-size: 0.72rem;
    color: var(--text-mid);
    line-height: 1.5;
}

/* ===== AGENCIES — COUNTER ANIMATION ===== */
.ag-metric-val[data-count] {
    transition: none;
}

@media (max-width: 900px) {
    .ag-bento-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ag-bento-card.col2 {
        grid-column: span 2;
    }
}
@media (max-width: 540px) {
    .ag-bento-grid {
        grid-template-columns: 1fr;
    }
    .ag-bento-card.col2 {
        grid-column: span 1;
    }
}
/* ===== HERO CARD REDESIGN ===== */
.ag-dashboard-card {
    padding: 0;
    overflow: hidden;
    width: 100%;
    max-width: 480px;
}
.ag-card-hdr {
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.09),
        rgba(52, 211, 153, 0.04)
    );
    padding: 12px 18px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ag-card-hdr-l {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ag-card-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.22);
    border-radius: 100px;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mint);
}
.ag-card-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mint);
    animation: agPulse 2s infinite;
    flex-shrink: 0;
    align-self: center;
}
.ag-card-hdr-title {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(180, 200, 220, 0.5);
}
.ag-card-partner {
    font-size: 0.56rem;
    color: rgba(0, 212, 255, 0.35);
}
.ag-card-rev-block {
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ag-card-rev-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2px;
}
.ag-card-rev-num {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #e8f0ff, var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.ag-card-rev-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mint);
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.18);
    border-radius: 100px;
    padding: 4px 12px;
    white-space: nowrap;
    margin-top: 4px;
}
.ag-card-rev-lbl {
    font-size: 0.56rem;
    color: rgba(120, 140, 165, 0.45);
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}
.ag-card-chart {
    height: 46px;
    position: relative;
    overflow: visible;
}
.ag-card-chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ag-card-cline {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1.6s var(--ease) 0.6s;
}
.ag-card-cline.anim {
    stroke-dashoffset: 0;
}
.ag-card-carea {
    fill: url(#cardGrad);
    opacity: 0;
    transition: opacity 0.7s ease 1s;
}
.ag-card-carea.anim {
    opacity: 1;
}
.ag-card-cdot {
    fill: var(--cyan);
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.9));
    opacity: 0;
    transition: opacity 0.3s ease 2.2s;
}
.ag-card-cdot.anim {
    opacity: 1;
}
.ag-card-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ag-card-m {
    background: rgba(0, 212, 255, 0.035);
    border: 1px solid rgba(0, 212, 255, 0.08);
    border-radius: 9px;
    padding: 9px 8px 7px;
    text-align: center;
}
.ag-card-m-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: 3px;
}
.ag-card-m-val.up {
    color: var(--mint);
}
.ag-card-m-lbl {
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(80, 110, 145, 0.6);
}
.ag-card-m-ind {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--mint);
    margin-top: 4px;
    opacity: 1;
    letter-spacing: 0.04em;
}
.ag-card-feed-wrap {
    padding: 10px 18px 16px;
    text-align: left;
}
.ag-blur-name {
    filter: blur(3.5px);
    user-select: none;
}

/* ===== FIX COMPARISON SLIDE (remove translateX, just fade) ===== */
.ag-compare-col.them .ag-compare-item {
    opacity: 0;
    transform: none;
    transition: opacity 0.5s ease;
}
.ag-compare-col.us .ag-compare-item {
    opacity: 0;
    transform: none;
    transition: opacity 0.5s ease;
}
.ag-compare-wrap.visible .ag-compare-col .ag-compare-item {
    opacity: 1;
    transform: none;
}

/* ===== FAN JOURNEY BIGGER ===== */
.ag-fj-svg {
    margin: 30px auto 0;
}
.ag-fj-node-outer {
    fill: none;
    stroke-width: 1;
    opacity: 0.4;
    animation: fjRing 3s ease-in-out infinite;
}
@keyframes fjRing {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.18);
        opacity: 0.08;
    }
}
.ag-fj-text-top {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.ag-fj-text-bot {
    font-size: 9px;
    letter-spacing: 0.03em;
}
.ag-fj-stage {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.5s ease,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-fj-stages.anim .ag-fj-stage {
    opacity: 1;
    transform: none;
}
.ag-fj-stages.anim .ag-fj-stage:nth-child(1) {
    transition-delay: 0.6s;
}
.ag-fj-stages.anim .ag-fj-stage:nth-child(2) {
    transition-delay: 0.9s;
}
.ag-fj-stages.anim .ag-fj-stage:nth-child(3) {
    transition-delay: 1.2s;
}
.ag-fj-stages.anim .ag-fj-stage:nth-child(4) {
    transition-delay: 1.5s;
}
.ag-fj-stages.anim .ag-fj-stage:nth-child(5) {
    transition-delay: 1.8s;
}

/* ===== PROCESS TIMELINE — SPINE DRAW + ENHANCED ===== */
.ag-proc-list::before {
    transition: background-size 2s var(--ease);
    background-size: 100% 0%;
    background-repeat: no-repeat;
}
.ag-proc-list.spine-anim::before {
    background-size: 100% 100%;
}
.ag-proc-content-card {
    background: rgba(8, 18, 36, 0.5);
    border: 1px solid rgba(0, 212, 255, 0.07);
    border-left: 2px solid rgba(0, 212, 255, 0);
    border-radius: 12px;
    padding: 20px 22px;
    transition:
        border-left-color 0.5s ease 0.3s,
        box-shadow 0.5s ease 0.3s;
}
.ag-proc-item.visible .ag-proc-content-card {
    border-left-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.04) inset;
}
.ag-proc-tag {
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: 100px;
    padding: 3px 12px;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 212, 255, 0.5);
    display: inline-block;
    margin-bottom: 10px;
}
.ag-proc-content-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.ag-proc-content-card p {
    font-size: 0.85rem;
    color: var(--text-mid);
    line-height: 1.75;
}

/* ===== PRICING CARD — FULL REBUILD ===== */
.ag-pricing-card {
    overflow: visible;
}
.ag-pricing-rings {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.ag-pricing-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 212, 255, 0.12);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.ag-pricing-ring.anim {
    animation: pricingRing 3s ease-out forwards;
}
.ag-pricing-ring:nth-child(1) {
    width: 200px;
    height: 200px;
    animation-delay: 0.2s;
}
.ag-pricing-ring:nth-child(2) {
    width: 320px;
    height: 320px;
    animation-delay: 0.5s;
}
.ag-pricing-ring:nth-child(3) {
    width: 460px;
    height: 460px;
    animation-delay: 0.8s;
    border-color: rgba(0, 212, 255, 0.06);
}
.ag-pricing-ring:nth-child(4) {
    width: 620px;
    height: 620px;
    animation-delay: 1.1s;
    border-color: rgba(0, 212, 255, 0.04);
}
@keyframes pricingRing {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1);
    }
}
.ag-pricing-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}
.ag-pp {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    animation: ppFloat 6s ease-in-out infinite;
}
.ag-pp:nth-child(1) {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
    width: 4px;
    height: 4px;
    background: var(--mint);
    opacity: 0.4;
}
.ag-pp:nth-child(2) {
    left: 85%;
    top: 30%;
    animation-delay: 1.2s;
    opacity: 0.3;
}
.ag-pp:nth-child(3) {
    left: 20%;
    top: 75%;
    animation-delay: 2.4s;
    opacity: 0.35;
}
.ag-pp:nth-child(4) {
    left: 75%;
    top: 65%;
    animation-delay: 0.8s;
    width: 4px;
    height: 4px;
    background: var(--mint);
    opacity: 0.3;
}
.ag-pp:nth-child(5) {
    left: 50%;
    top: 10%;
    animation-delay: 1.8s;
    opacity: 0.25;
}
.ag-pp:nth-child(6) {
    left: 90%;
    top: 80%;
    animation-delay: 3s;
    opacity: 0.3;
    width: 2px;
    height: 2px;
}
.ag-pp:nth-child(7) {
    left: 30%;
    top: 90%;
    animation-delay: 0.5s;
    opacity: 0.2;
    width: 2px;
    height: 2px;
}
.ag-pp:nth-child(8) {
    left: 60%;
    top: 85%;
    animation-delay: 2s;
    opacity: 0.35;
    background: var(--mint);
}
@keyframes ppFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-22px) scale(1.4);
        opacity: 0.7;
    }
}
.ag-pricing-main {
    position: relative;
    z-index: 1;
}
.ag-pricing-main::before {
    content: "";
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(0, 212, 255, 0.12),
        transparent 70%
    );
    pointer-events: none;
    animation: priceGlow 2.5s ease-in-out infinite;
}
@keyframes priceGlow {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}
.ag-pricing-list li .chk-icon {
    animation: none;
}
.ag-pricing-list li .chk-icon.drawn {
    animation: checkDraw 0.4s var(--ease) forwards;
}
@keyframes checkDraw {
    from {
        transform: scale(0) rotate(-90deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* ===== AGENCIES — ODOMETER ===== */
#odometer-ag {
    padding: 100px 0;
    overflow: hidden;
    position: relative;
}
#odometer-ag .ag-orb-c {
    position: absolute;
    width: 700px;
    height: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse,
        rgba(0, 212, 255, 0.07),
        transparent 70%
    );
    pointer-events: none;
}
.ag-odo-wrap {
    text-align: center;
    position: relative;
    z-index: 1;
}
.ag-odo-lbl {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0, 212, 255, 0.35);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.ag-odo-lbl::before,
.ag-odo-lbl::after {
    content: "";
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2));
}
.ag-odo-lbl::after {
    background: linear-gradient(270deg, transparent, rgba(0, 212, 255, 0.2));
}
.ag-odo-num {
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    background: linear-gradient(
        135deg,
        #fff 0%,
        var(--cyan) 60%,
        var(--mint) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 40px rgba(0, 212, 255, 0.4));
    animation: odoGlow 3s ease-in-out infinite;
}
@keyframes odoGlow {
    0%,
    100% {
        filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.35));
    }
    50% {
        filter: drop-shadow(0 0 60px rgba(0, 212, 255, 0.6))
            drop-shadow(0 0 20px rgba(52, 211, 153, 0.3));
    }
}
.ag-odo-roll {
    display: inline-block;
    animation: odoRoll 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes odoRoll {
    from {
        opacity: 0.4;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.ag-odo-sublabel {
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-top: 14px;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ag-odo-sublabel::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 8px var(--mint);
    animation: agPulse 2s ease-in-out infinite;
}

/* ===== AGENCIES — FAN JOURNEY (PIPELINE) ===== */
#fanjourney-ag {
    padding: 100px 0;
    overflow: hidden;
    position: relative;
}
#fanjourney-ag .ag-orb-c {
    position: absolute;
    width: 800px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse,
        rgba(52, 211, 153, 0.05),
        transparent 70%
    );
    pointer-events: none;
}
.ag-pipe-wrap {
    max-width: 1060px;
    margin: 56px auto 0;
    position: relative;
    z-index: 1;
}
/* Rail */
.ag-pipe-rail {
    position: relative;
    height: 2px;
    margin: 0 60px 0;
    margin-bottom: 28px;
}
.ag-pipe-rail-track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
}
.ag-pipe-rail-beam {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(
        90deg,
        rgba(100, 140, 200, 0.3),
        rgba(0, 212, 255, 0.9),
        rgba(52, 211, 153, 1)
    );
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.6);
    transition: width 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.ag-pipe-rail-beam.anim {
    width: 100%;
}
.ag-pipe-rail-dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--cyan);
    border-radius: 50%;
    transform: translateY(-50%) translateX(-50%);
    box-shadow:
        0 0 16px rgba(0, 212, 255, 0.9),
        0 0 30px rgba(0, 212, 255, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
}
.ag-pipe-rail-dot.anim {
    opacity: 1;
    animation: pipeDotTravel 3s ease-in-out 2.6s infinite;
}
@keyframes pipeDotTravel {
    0% {
        left: 0%;
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}
/* Cards row */
.ag-pipe-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
/* Individual card */
.ag-pipe-card {
    background: rgba(10, 20, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 22px 18px 20px;
    position: relative;
    overflow: visible;
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.55s ease,
        transform 0.55s var(--ease),
        border-color 0.3s,
        box-shadow 0.3s;
}
.ag-pipe-card.visible {
    opacity: 1;
    transform: none;
}
.ag-pipe-card:nth-child(1) {
    transition-delay: 0s;
}
.ag-pipe-card:nth-child(2) {
    transition-delay: 0.1s;
}
.ag-pipe-card:nth-child(3) {
    transition-delay: 0.2s;
}
.ag-pipe-card:nth-child(4) {
    transition-delay: 0.3s;
}
.ag-pipe-card:nth-child(5) {
    transition-delay: 0.4s;
}
@keyframes pipeLineScan {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
.ag-pipe-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0;
    transition: opacity 0.6s ease 0.4s;
    background-size: 300% 100%;
}
.ag-pipe-card.visible::before {
    opacity: 1;
    animation: pipeLineScan 3s linear infinite;
}
.ag-pipe-card[data-pipe="0"]::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(120, 140, 175, 0.15),
        rgba(140, 165, 210, 0.9),
        rgba(120, 140, 175, 0.15),
        transparent
    );
    animation-delay: 0s;
}
.ag-pipe-card[data-pipe="1"]::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 180, 255, 0.15),
        rgba(0, 190, 255, 0.95),
        rgba(0, 180, 255, 0.15),
        transparent
    );
    animation-delay: 0.4s;
}
.ag-pipe-card[data-pipe="2"]::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 212, 255, 0.15),
        rgba(0, 212, 255, 1),
        rgba(0, 212, 255, 0.15),
        transparent
    );
    animation-delay: 0.8s;
}
.ag-pipe-card[data-pipe="3"]::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(52, 211, 153, 0.15),
        rgba(52, 211, 153, 0.95),
        rgba(52, 211, 153, 0.15),
        transparent
    );
    animation-delay: 1.2s;
}
.ag-pipe-card[data-pipe="4"]::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 212, 255, 0.2),
        var(--cyan),
        rgba(52, 211, 153, 0.8),
        rgba(0, 212, 255, 0.2),
        transparent
    );
    animation-delay: 1.6s;
}
.ag-pipe-card:hover {
    border-color: rgba(0, 212, 255, 0.2);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.06);
    transform: translateY(-3px);
}
.ag-pipe-card:hover .ag-pipe-icon {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.15);
}
.ag-pipe-card[data-pipe="4"]:hover .ag-pipe-icon {
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.2);
}
.whale-card {
    border-color: rgba(0, 212, 255, 0.15);
    background: rgba(0, 20, 40, 0.7);
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.07);
}
.whale-card:hover {
    box-shadow: 0 0 50px rgba(0, 212, 255, 0.13);
}
/* Card top row */
.ag-pipe-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.ag-pipe-num {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: rgba(80, 110, 150, 0.35);
    font-family: "Montserrat", sans-serif;
}
.whale-num {
    color: rgba(0, 212, 255, 0.4);
}
/* Stage badge */
.ag-pipe-badge {
    font-size: 0.47rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
}
.ag-pipe-badge.cold {
    background: rgba(120, 140, 170, 0.08);
    color: rgba(140, 160, 190, 0.5);
    border: 1px solid rgba(120, 140, 170, 0.12);
}
.ag-pipe-badge.warm {
    background: rgba(0, 180, 255, 0.07);
    color: rgba(0, 180, 255, 0.7);
    border: 1px solid rgba(0, 180, 255, 0.15);
}
.ag-pipe-badge.buy {
    background: rgba(0, 212, 255, 0.08);
    color: rgba(0, 212, 255, 0.8);
    border: 1px solid rgba(0, 212, 255, 0.18);
}
.ag-pipe-badge.repeat {
    background: rgba(52, 211, 153, 0.08);
    color: rgba(52, 211, 153, 0.8);
    border: 1px solid rgba(52, 211, 153, 0.18);
}
.ag-pipe-badge.whale {
    background: rgba(0, 212, 255, 0.12);
    color: var(--cyan);
    border: 1px solid rgba(0, 212, 255, 0.3);
}
/* Icon */
.ag-pipe-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition:
        transform 0.3s var(--ease),
        box-shadow 0.3s;
}
.ag-pipe-icon.cold {
    background: rgba(120, 140, 170, 0.08);
    color: rgba(140, 160, 190, 0.45);
}
.ag-pipe-icon.warm {
    background: rgba(0, 180, 255, 0.08);
    color: rgba(0, 180, 255, 0.65);
}
.ag-pipe-icon.buy {
    background: rgba(0, 212, 255, 0.09);
    color: rgba(0, 212, 255, 0.75);
}
.ag-pipe-icon.repeat {
    background: rgba(52, 211, 153, 0.09);
    color: rgba(52, 211, 153, 0.8);
}
.ag-pipe-icon.whale {
    background: rgba(0, 212, 255, 0.1);
    color: var(--cyan);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}
/* Text */
.ag-pipe-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 5px;
}
.ag-pipe-tag {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 212, 255, 0.35);
    margin-bottom: 14px;
}
.ag-pipe-desc {
    font-size: 0.78rem;
    color: rgba(140, 165, 195, 0.55);
    line-height: 1.65;
}
/* Arrow between cards — shown via absolute positioned element */
.ag-pipe-arrow {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: rgba(0, 212, 255, 0.25);
    z-index: 2;
    font-weight: 300;
}
/* Mobile */
@media (max-width: 860px) {
    .ag-pipe-cards {
        grid-template-columns: 1fr 1fr;
    }
    .ag-pipe-card:last-child {
        grid-column: span 2;
    }
    .ag-pipe-arrow {
        display: none;
    }
}
@media (max-width: 560px) {
    .ag-pipe-cards {
        grid-template-columns: 1fr;
    }
    .ag-pipe-card:last-child {
        grid-column: auto;
    }
    .ag-pipe-rail {
        display: none;
    }
}

/* ===== AGENCIES — PROCESS TIMELINE ===== */
#process-ag {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
#process-ag .ag-orb-c {
    position: absolute;
    width: 500px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse,
        rgba(0, 212, 255, 0.05),
        transparent 70%
    );
    pointer-events: none;
}
.ag-proc-list {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.ag-proc-list::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 40px;
    bottom: 40px;
    width: 1px;
    background: linear-gradient(
        180deg,
        rgba(0, 212, 255, 0.2),
        rgba(52, 211, 153, 0.15),
        rgba(0, 212, 255, 0.08)
    );
    z-index: 0;
}
.ag-proc-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 24px;
    align-items: start;
    padding: 28px 0;
    opacity: 0;
    transform: translateX(24px);
    transition:
        opacity 0.6s ease,
        transform 0.6s var(--ease);
}
.ag-proc-item.visible {
    opacity: 1;
    transform: none;
}
.ag-proc-item:nth-child(1) {
    transition-delay: 0s;
}
.ag-proc-item:nth-child(2) {
    transition-delay: 0.1s;
}
.ag-proc-item:nth-child(3) {
    transition-delay: 0.2s;
}
.ag-proc-item:nth-child(4) {
    transition-delay: 0.3s;
}
.ag-proc-item:nth-child(5) {
    transition-delay: 0.4s;
}
.ag-proc-num-col {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.ag-proc-bubble {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(6, 14, 28, 0.97);
    border: 1.5px solid rgba(0, 212, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition:
        border-color 0.5s,
        box-shadow 0.5s;
}
.ag-proc-item.visible .ag-proc-bubble {
    border-color: rgba(0, 212, 255, 0.65);
    box-shadow:
        0 0 20px rgba(0, 212, 255, 0.18),
        0 0 40px rgba(0, 212, 255, 0.07);
}
.ag-proc-bubble::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(0, 212, 255, 0.1);
    opacity: 0;
    transition: opacity 0.5s;
}
.ag-proc-item.visible .ag-proc-bubble::after {
    opacity: 1;
    animation: procPing 2.5s ease-in-out infinite 0.6s;
}
@keyframes procPing {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0;
    }
}
.ag-proc-n {
    font-size: 0.62rem;
    font-weight: 800;
    color: rgba(0, 212, 255, 0.4);
    font-family: "Montserrat", sans-serif;
    transition: color 0.5s;
    letter-spacing: 0.08em;
}
.ag-proc-item.visible .ag-proc-n {
    color: var(--cyan);
}
.ag-proc-content {
    padding-top: 6px;
}
.ag-proc-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 100px;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 212, 255, 0.4);
    margin-bottom: 10px;
}
.ag-proc-content h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.015em;
}
.ag-proc-content p {
    font-size: 0.875rem;
    color: var(--text-mid);
    line-height: 1.75;
}
@media (max-width: 640px) {
    .ag-proc-list::before {
        left: 20px;
    }
    .ag-proc-item {
        grid-template-columns: 44px 1fr;
        gap: 16px;
    }
    .ag-proc-bubble {
        width: 36px;
        height: 36px;
    }
}

/* ===== ENHANCED EXISTING ANIMATIONS ===== */
/* Comparison items slide in from sides */
.ag-compare-col.them .ag-compare-item {
    opacity: 0;
    transform: translateX(-18px);
    transition:
        opacity 0.45s ease,
        transform 0.45s var(--ease);
}
.ag-compare-col.us .ag-compare-item {
    opacity: 0;
    transform: translateX(18px);
    transition:
        opacity 0.45s ease,
        transform 0.45s var(--ease);
}
.ag-compare-wrap.visible .ag-compare-col .ag-compare-item {
    opacity: 1;
    transform: none;
}
.ag-compare-col.them .ag-compare-item:nth-child(2) {
    transition-delay: 0s;
}
.ag-compare-col.them .ag-compare-item:nth-child(3) {
    transition-delay: 0.07s;
}
.ag-compare-col.them .ag-compare-item:nth-child(4) {
    transition-delay: 0.14s;
}
.ag-compare-col.them .ag-compare-item:nth-child(5) {
    transition-delay: 0.21s;
}
.ag-compare-col.them .ag-compare-item:nth-child(6) {
    transition-delay: 0.28s;
}
.ag-compare-col.them .ag-compare-item:nth-child(7) {
    transition-delay: 0.35s;
}
.ag-compare-col.us .ag-compare-item:nth-child(3) {
    transition-delay: 0.04s;
}
.ag-compare-col.us .ag-compare-item:nth-child(4) {
    transition-delay: 0.11s;
}
.ag-compare-col.us .ag-compare-item:nth-child(5) {
    transition-delay: 0.18s;
}
.ag-compare-col.us .ag-compare-item:nth-child(6) {
    transition-delay: 0.25s;
}
.ag-compare-col.us .ag-compare-item:nth-child(7) {
    transition-delay: 0.32s;
}
.ag-compare-col.us .ag-compare-item:nth-child(8) {
    transition-delay: 0.39s;
}
/* Bento pulsing borders */
@keyframes bentoPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 0 rgba(0, 212, 255, 0),
            inset 0 0 0 0 rgba(0, 212, 255, 0);
    }
    50% {
        box-shadow:
            0 0 25px rgba(0, 212, 255, 0.06),
            inset 0 0 25px rgba(0, 212, 255, 0.03);
    }
}
.ag-bento-card {
    animation: bentoPulse 6s ease-in-out infinite;
}
.ag-bento-card:nth-child(2) {
    animation-delay: 1.2s;
}
.ag-bento-card:nth-child(3) {
    animation-delay: 2.4s;
}
.ag-bento-card:nth-child(4) {
    animation-delay: 3.6s;
}
.ag-bento-card:nth-child(5) {
    animation-delay: 4.8s;
}
/* Metric number glow burst on done */
.ag-metric-val.done {
    animation: metricBurst 0.6s var(--ease) forwards;
}
@keyframes metricBurst {
    0% {
        filter: drop-shadow(0 0 24px rgba(0, 212, 255, 0.35));
    }
    40% {
        filter: drop-shadow(0 0 70px rgba(0, 212, 255, 0.8))
            drop-shadow(0 0 35px rgba(52, 211, 153, 0.5));
    }
    100% {
        filter: drop-shadow(0 0 24px rgba(0, 212, 255, 0.35));
    }
}
/* Chatter ping */
@keyframes chatterPing {
    0% {
        box-shadow:
            0 0 0 0 rgba(52, 211, 153, 0.5),
            inset 0 0 0 rgba(52, 211, 153, 0);
    }
    40% {
        box-shadow:
            0 0 0 14px rgba(52, 211, 153, 0),
            inset 0 0 30px rgba(52, 211, 153, 0.06);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
    }
}
.ag-chatter-card.ping {
    animation: chatterPing 0.9s ease-out forwards;
}
/* Terminal CRT scanline */
.ag-terminal {
    position: relative;
}
.ag-terminal::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.04) 3px,
        rgba(0, 0, 0, 0.04) 4px
    );
    pointer-events: none;
    z-index: 10;
    border-radius: inherit;
}
/* Feature item border draws on reveal */
.ag-feature-item.visible::before {
    opacity: 1;
    left: 0;
}
/* Pricing card neon flicker */
@keyframes neonFlicker {
    0%,
    20%,
    22%,
    55%,
    57%,
    100% {
        box-shadow:
            0 0 40px rgba(0, 212, 255, 0.1),
            0 0 80px rgba(0, 212, 255, 0.05);
    }
    21%,
    56% {
        box-shadow: none;
    }
}
.ag-pricing-card {
    animation: neonFlicker 9s ease-in-out infinite 4s;
}
/* Marquee pause on hover */
.ag-marquee-row:hover .ag-marquee-track {
    animation-play-state: paused;
}

/* ===== AGENCIES — CHATTER BOARD ===== */
#chatters-ag {
    padding: 100px 0;
}
.ag-chatter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 820px;
    margin: 0 auto;
}
.ag-chatter-card {
    background: rgba(8, 18, 36, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 16px 14px;
    position: relative;
    overflow: hidden;
    transition:
        border-color 0.3s,
        transform 0.2s var(--ease);
}
.ag-chatter-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: transparent;
    transition: background 0.3s;
}
.ag-chatter-card.online {
    border-color: rgba(52, 211, 153, 0.18);
}
.ag-chatter-card.online::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(52, 211, 153, 0.3),
        transparent
    );
}
.ag-chatter-card.brk {
    border-color: rgba(255, 200, 60, 0.12);
}
.ag-chatter-card.brk::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 200, 60, 0.25),
        transparent
    );
}
.ag-chatter-card.off {
    opacity: 0.38;
}
.ag-chatter-card:hover {
    transform: translateY(-2px);
}
.ag-chatter-av {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 9px;
    font-family: "Montserrat", sans-serif;
}
.online .ag-chatter-av {
    background: rgba(52, 211, 153, 0.1);
    color: var(--mint);
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.12);
}
.brk .ag-chatter-av {
    background: rgba(255, 200, 60, 0.08);
    color: rgba(255, 200, 60, 0.7);
}
.off .ag-chatter-av {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(120, 135, 155, 0.4);
}
.ag-chatter-id {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    letter-spacing: 0.02em;
}
.ag-chatter-assign {
    font-size: 0.58rem;
    color: var(--text-dim);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ag-chatter-st {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ag-chatter-st-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.online .ag-chatter-st {
    color: var(--mint);
}
.online .ag-chatter-st-dot {
    background: var(--mint);
    animation: agPulse 2s ease-in-out infinite;
    box-shadow: 0 0 6px var(--mint);
}
.brk .ag-chatter-st {
    color: rgba(255, 200, 60, 0.7);
}
.brk .ag-chatter-st-dot {
    background: rgba(255, 200, 60, 0.7);
}
.off .ag-chatter-st {
    color: rgba(100, 115, 135, 0.4);
}
.off .ag-chatter-st-dot {
    background: rgba(100, 115, 135, 0.25);
}
.ag-chatter-card.reveal {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
}
.ag-chatter-card.reveal.visible {
    opacity: 1;
    transform: none;
}
.ag-chatter-card.off.visible {
    opacity: 0.38;
}
@media (max-width: 768px) {
    .ag-chatter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .ag-chatter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== AGENCIES — TERMINAL ===== */
#terminal-ag {
    padding: 100px 0;
}
.ag-terminal {
    max-width: 740px;
    margin: 0 auto;
    background: rgba(4, 10, 22, 0.97);
    border: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 0 80px rgba(0, 212, 255, 0.07),
        0 40px 100px rgba(0, 0, 0, 0.6);
}
.ag-term-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 18px;
    background: rgba(0, 212, 255, 0.035);
    border-bottom: 1px solid rgba(0, 212, 255, 0.07);
    user-select: none;
}
.ag-term-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.td-r {
    background: #ff5f57;
}
.td-y {
    background: #febc2e;
}
.td-g {
    background: #28c840;
}
.ag-term-title {
    margin-left: 10px;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(130, 150, 180, 0.4);
    text-transform: uppercase;
}
.ag-term-body {
    padding: 22px 28px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.78rem;
    line-height: 1.75;
    min-height: 340px;
}
.ag-term-line {
    display: block;
    color: rgba(130, 160, 200, 0.55);
    white-space: pre-wrap;
    transform: translateY(4px);
    opacity: 0;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}
.ag-term-line.show {
    opacity: 1;
    transform: none;
}
.ag-term-line.cmd {
    color: rgba(56, 191, 255, 0.9);
    font-weight: 600;
}
.ag-term-line.ok {
    color: rgba(52, 211, 153, 0.85);
}
.ag-term-line.warn {
    color: rgba(255, 195, 70, 0.8);
}
.ag-term-line.hi {
    color: rgba(220, 235, 255, 0.8);
    font-weight: 600;
}
.ag-term-line.dim {
    color: rgba(90, 115, 145, 0.5);
}
.ag-term-cursor {
    display: inline-block;
    width: 7px;
    height: 13px;
    background: var(--cyan);
    animation: termBlink 1s step-end infinite;
    vertical-align: text-bottom;
    margin-left: 1px;
    border-radius: 1px;
}
@keyframes termBlink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* ===== AGENCIES — EYEBROW SCRAMBLE ===== */
.ag-scramble {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ===== AGENCIES — AMBIENT GLOW ORBS ===== */
.ag-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}
#compare-ag {
    position: relative;
    overflow: hidden;
}
#compare-ag .ag-orb-1 {
    width: 500px;
    height: 500px;
    top: -100px;
    right: -150px;
    background: radial-gradient(
        ellipse,
        rgba(0, 212, 255, 0.06),
        transparent 70%
    );
}
#compare-ag .ag-orb-2 {
    width: 400px;
    height: 400px;
    bottom: -80px;
    left: -100px;
    background: radial-gradient(
        ellipse,
        rgba(255, 50, 50, 0.04),
        transparent 70%
    );
}
#metrics-ag {
    position: relative;
    overflow: hidden;
}
#metrics-ag .ag-orb-c {
    width: 600px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse,
        rgba(0, 212, 255, 0.07),
        transparent 70%
    );
}
#bento-ag {
    position: relative;
}
#chatters-ag {
    position: relative;
    overflow: hidden;
}
#chatters-ag .ag-orb-c {
    width: 700px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse,
        rgba(52, 211, 153, 0.05),
        transparent 70%
    );
}
#terminal-ag {
    position: relative;
    overflow: hidden;
}
#terminal-ag .ag-orb-c {
    width: 600px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse,
        rgba(0, 212, 255, 0.06),
        transparent 70%
    );
}

/* ============================================================
   COMPARE-AG v2 — Animated Individual Boxes
   ============================================================ */
.ag-cmp2-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
}
.ag-cmp2-row {
    display: grid;
    grid-template-columns: 140px 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}
.ag-cmp2-topic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}
.ag-cmp2-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
}
.ag-cmp2-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}
.ag-cmp2-bad,
.ag-cmp2-good {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s var(--ease);
}
.ag-cmp2-bad {
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.ag-cmp2-good {
    border: 1px solid rgba(52, 211, 153, 0.25);
}
.ag-cmp2-bad:hover,
.ag-cmp2-good:hover {
    transform: translateY(-3px);
}
.ag-cmp2-bad-inner,
.ag-cmp2-good-inner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}
.ag-cmp2-bad-inner {
    background: rgba(239, 68, 68, 0.04);
}
.ag-cmp2-good-inner {
    background: rgba(52, 211, 153, 0.04);
}
.ag-cmp2-x-icon {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ef4444;
    width: 28px;
    height: 28px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.ag-cmp2-chk-icon {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--mint);
    width: 28px;
    height: 28px;
    background: rgba(52, 211, 153, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.ag-cmp2-bad-inner p,
.ag-cmp2-good-inner p {
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    flex: 1;
}
.ag-cmp2-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    align-self: flex-start;
}
.ag-cmp2-tag.bad {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.ag-cmp2-tag.good {
    background: rgba(52, 211, 153, 0.15);
    color: var(--mint);
    border: 1px solid rgba(52, 211, 153, 0.25);
}
.ag-cmp2-bad-visual,
.ag-cmp2-good-visual {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 12px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* bad visuals */
.ag-cmp2-chat-cold {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}
.ag-cmp2-bubble {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}
.ag-cmp2-bubble.short {
    width: 60%;
}
.ag-cmp2-bubble.blank {
    animation: cmpBlink 2s infinite;
}
@keyframes cmpBlink {
    0%,
    100% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.5;
    }
}
.ag-cmp2-msg-convo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.ag-cmp2-q {
    font-size: 0.62rem;
    background: rgba(0, 212, 255, 0.15);
    padding: 5px 8px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    align-self: flex-end;
}
.ag-cmp2-a {
    font-size: 0.62rem;
    background: rgba(255, 255, 255, 0.06);
    padding: 5px 8px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.4);
}
.ag-cmp2-a.blurred {
    filter: blur(3px);
}
.ag-cmp2-a.short {
    width: 40%;
}
.ag-cmp2-clone-visual {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.ag-cmp2-clone-row {
    display: flex;
    gap: 6px;
}
.ag-cmp2-clone-av {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cc, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    color: #fff;
}
.ag-cmp2-clone-script {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 6px;
    text-align: center;
}
.ag-cmp2-clone-script.dim {
    opacity: 0.4;
}
.ag-cmp2-clock-dead {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.ag-cmp2-dead-bar {
    height: 10px;
    background: rgba(239, 68, 68, 0.4);
    border-radius: 4px;
    animation: deadPulse 2s infinite;
}
@keyframes deadPulse {
    0%,
    100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.9;
    }
}
.ag-cmp2-dead-lbl {
    font-size: 0.62rem;
    color: rgba(239, 68, 68, 0.8);
    font-weight: 600;
}
.ag-cmp2-ghost-visual {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center;
}
.ag-cmp2-sold-bubble {
    font-size: 0.62rem;
    background: rgba(52, 211, 153, 0.15);
    color: var(--mint);
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 600;
}
.ag-cmp2-ghost-line {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ag-cmp2-ghost-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
    margin: 0 2px;
    animation: cmpBlink 1.5s infinite;
}
.ag-cmp2-ghost-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.ag-cmp2-ghost-dots span:nth-child(3) {
    animation-delay: 0.4s;
}
.ag-cmp2-ghost-lbl {
    font-size: 0.62rem;
    color: rgba(239, 68, 68, 0.7);
    font-weight: 700;
}
.ag-cmp2-retainer-visual {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.ag-cmp2-invoice {
    font-size: 1.2rem;
    font-weight: 800;
    color: rgba(239, 68, 68, 0.8);
}
.ag-cmp2-invoice-sub {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}
/* good visuals */
.ag-cmp2-note-card {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 140px;
}
.ag-cmp2-note-line {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
}
.ag-cmp2-note-line.full {
    width: 100%;
}
.ag-cmp2-note-line.short {
    width: 65%;
}
.ag-cmp2-note-tag {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--cyan);
    background: rgba(0, 212, 255, 0.12);
    padding: 2px 7px;
    border-radius: 4px;
    align-self: flex-start;
    margin-top: 2px;
}
.ag-cmp2-metrics {
    display: flex;
    gap: 10px;
}
.ag-cmp2-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 8px 4px;
}
.ag-cmp2-mval {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.ag-cmp2-mval.cyan {
    color: var(--cyan);
}
.ag-cmp2-mval.mint {
    color: var(--mint);
}
.ag-cmp2-mval.gold {
    color: #fbbf24;
}
.ag-cmp2-mlbl {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    text-transform: uppercase;
}
.ag-cmp2-persona-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.ag-cmp2-persona-chip {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--pc);
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}
.ag-cmp2-coverage-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    position: relative;
}
.ag-cmp2-shift-bar {
    height: 12px;
    border-radius: 4px;
    width: var(--w);
    background: var(--sh);
    opacity: 0.7;
    transition: width 1s;
}
.ag-cmp2-24-badge {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--mint);
    background: rgba(52, 211, 153, 0.15);
    padding: 2px 8px;
    border-radius: 8px;
}
.ag-cmp2-ltv-visual {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ag-cmp2-buy-dot {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}
.ag-cmp2-buy-dot.active {
    background: rgba(0, 212, 255, 0.15);
    color: var(--cyan);
}
.ag-cmp2-buy-dot.whale {
    background: rgba(52, 211, 153, 0.15);
    color: var(--mint);
    font-size: 0.75rem;
}
.ag-cmp2-ltv-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}
.ag-cmp2-aligned-visual {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.ag-cmp2-align-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}
.ag-cmp2-align-you {
    color: var(--cyan);
}
.ag-cmp2-align-us {
    color: var(--mint);
}
.ag-cmp2-align-note {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 768px) {
    .ag-cmp2-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .ag-cmp2-topic {
        flex-direction: row;
        justify-content: flex-start;
        padding: 12px 16px;
    }
}

/* ============================================================
   CHATTERS-AG v2 — 24h Clock Design
   ============================================================ */
.ag-clock-wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: start;
    max-width: 900px;
    margin: 48px auto 0;
}
.ag-clock-ring-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.ag-clock-ring-outer {
    position: relative;
    width: 280px;
    height: 280px;
}
.ag-clock-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ag-clock-bg-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 20;
}
.ag-clock-shift-arc {
    fill: none;
    stroke-width: 20;
    stroke-linecap: butt;
    transform-origin: center;
    transform: rotate(-90deg);
}
.ag-clock-shift-arc.shift1 {
    stroke: rgba(0, 212, 255, 0.5);
    stroke-dasharray: 0 692;
    animation: arcGrow1 1.5s 0.5s var(--ease) forwards;
}
.ag-clock-shift-arc.shift2 {
    stroke: rgba(52, 211, 153, 0.5);
    stroke-dasharray: 0 692;
    animation: arcGrow2 1.5s 0.7s var(--ease) forwards;
}
.ag-clock-shift-arc.shift3 {
    stroke: rgba(167, 139, 250, 0.5);
    stroke-dasharray: 0 692;
    animation: arcGrow3 1.5s 0.9s var(--ease) forwards;
}
/* shift1: 6am-2pm = 8/24 of 692 = 230. offset at 6am = 6/24*692=173 */
@keyframes arcGrow1 {
    to {
        stroke-dasharray: 230 462;
        stroke-dashoffset: -173;
    }
}
/* shift2: 2pm-10pm = 8/24. offset at 2pm = 14/24*692=403 */
@keyframes arcGrow2 {
    to {
        stroke-dasharray: 230 462;
        stroke-dashoffset: -403;
    }
}
/* shift3: 10pm-6am = 8/24. offset at 10pm = 22/24*692=635 */
@keyframes arcGrow3 {
    to {
        stroke-dasharray: 230 462;
        stroke-dashoffset: -635;
    }
}
.ag-clock-hand {
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 2;
    stroke-linecap: round;
    transform-origin: 140px 140px;
    animation: handSpin 60s linear infinite;
}
@keyframes handSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.ag-clock-center {
    fill: rgba(255, 255, 255, 0.9);
}
.ag-clock-ticks line {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
}
.ag-clock-label {
    position: absolute;
    font-size: 0.58rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.38);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(10, 22, 40, 0.65);
    padding: 2px 5px;
    border-radius: 4px;
}
/* position labels around ring — using explicit classes */
.clk-top {
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
}
.clk-right {
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}
.clk-bottom {
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}
.clk-left {
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}
.ag-clock-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ag-clock-leg-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}
.ag-clock-leg-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.ag-clock-leg-dot.shift1-dot {
    background: rgba(0, 212, 255, 0.7);
}
.ag-clock-leg-dot.shift2-dot {
    background: rgba(52, 211, 153, 0.7);
}
.ag-clock-leg-dot.shift3-dot {
    background: rgba(167, 139, 250, 0.7);
}
/* Active panel */
.ag-clock-active-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ag-clock-now-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
}
.ag-clock-active-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 20px;
}
.ag-clock-av-ring {
    position: relative;
    flex-shrink: 0;
}
.ag-clock-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.2);
    border: 2px solid rgba(0, 212, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--cyan);
}
.ag-clock-av-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(0, 212, 255, 0.3);
    animation: avPulse 2s ease-in-out infinite;
}
@keyframes avPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}
.ag-clock-active-info {
    flex: 1;
}
.ag-clock-active-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.ag-clock-active-creator {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 2px 0;
}
.ag-clock-active-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
}
.ag-clock-online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint);
    animation: agPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
.ag-clock-resp-badge {
    text-align: right;
    flex-shrink: 0;
}
.ag-clock-resp-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--cyan);
    letter-spacing: -0.03em;
}
.ag-clock-resp-lbl {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.ag-clock-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.ag-clock-stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
}
.ag-clock-stat-val {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--cyan), var(--mint));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ag-clock-stat-lbl {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}
.ag-clock-queue-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.35);
}
.ag-clock-queue {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ag-cq-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 7px 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 30px;
    transition: all 0.3s;
}
.ag-cq-chip.active {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.25);
}
.ag-cq-av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--qc, #00d4ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 800;
    color: #0a1628;
}
.ag-cq-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}
.ag-cq-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mint);
    animation: agPulse 1.5s ease-in-out infinite;
}
@media (max-width: 768px) {
    .ag-clock-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ag-clock-ring-section {
        width: 100%;
    }
}
/* Shift cards replacing clock ring */
.ag-clock-wrap {
    grid-template-columns: 280px 1fr;
}
.ag-shifts-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ag-shift-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease);
}
.ag-shift-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(0, 212, 255, 0.06),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.ag-shift-card:hover {
    border-color: rgba(0, 212, 255, 0.2);
    transform: translateY(-2px);
}
.ag-shift-card:hover::before {
    opacity: 1;
}
.ag-shift-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
.ag-shift-card-name {
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ag-shift-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sc, #00d4ff);
    flex-shrink: 0;
    animation: agPulse 2s ease-in-out infinite;
}
.ag-shift-card-time {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

/* ============================================================
   PROCESS-AG Slider
   ============================================================ */
.ag-slider-wrap {
    margin-top: 48px;
}
.ag-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}
.ag-slider-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    min-width: 110px;
}
.ag-slider-pill:first-child {
    border-radius: 12px 0 0 12px;
}
.ag-slider-pill:last-child {
    border-radius: 0 12px 12px 0;
}
.ag-slider-pill.active {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.35);
    z-index: 1;
}
.ag-slider-pill:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
}
.ag-sp-day {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    font-family: "Montserrat", sans-serif;
}
.ag-slider-pill.active .ag-sp-day {
    color: var(--cyan);
}
.ag-sp-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    font-family: "Montserrat", sans-serif;
}
.ag-slider-pill.active .ag-sp-label {
    color: #fff;
}
.ag-slider-connector {
    width: 0;
    height: 0;
}
.ag-slider-progress-wrap {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    margin: 16px 0 32px;
    overflow: hidden;
}
.ag-slider-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--mint));
    border-radius: 2px;
    transition: width 0.5s var(--ease);
}
.ag-slider-panels {
    position: relative;
    min-height: 280px;
}
.ag-slider-panel {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.ag-slider-panel.active {
    display: grid;
    animation: panelSlideIn 0.4s var(--ease);
}
@keyframes panelSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.ag-slider-step-badge {
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.ag-slider-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    background: rgba(0, 212, 255, 0.12);
    color: var(--cyan);
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.25);
    margin-bottom: 16px;
}
.ag-slider-panel-left h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.3;
}
.ag-slider-panel-left p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 16px;
}
.ag-slider-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ag-slider-checklist li {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ag-slider-checklist li::before {
    content: "✓";
    color: var(--mint);
    font-weight: 800;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.ag-slider-panel-right {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Panel visuals */
.ag-slider-visual {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: svVisualIn 0.5s var(--ease) both;
}
@keyframes svVisualIn {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.ag-sv-brief {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.ag-sv-brief-line {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
}
.ag-sv-brief-line.full {
    width: 100%;
}
.ag-sv-brief-line.short {
    width: 70%;
}
.ag-sv-brief-label {
    font-size: 0.6rem;
    color: rgba(0, 212, 255, 0.7);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.ag-sv-assign-arrow {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.2);
    padding: 0 12px;
}
.ag-sv-chatter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ag-sv-chatter-av {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ca, #00d4ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.7rem;
    color: #0a1628;
    animation: avPulse 2s ease-in-out infinite;
}
.ag-sv-chatter-lbl {
    font-size: 0.6rem;
    color: rgba(52, 211, 153, 0.8);
    font-weight: 700;
}
.ag-sv-crm {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.ag-sv-crm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    animation: crmRowIn 0.4s var(--ease) backwards;
}
.ag-sv-crm-row:nth-child(1) {
    animation-delay: 0.05s;
}
.ag-sv-crm-row:nth-child(2) {
    animation-delay: 0.15s;
}
.ag-sv-crm-row:nth-child(3) {
    animation-delay: 0.25s;
}
@keyframes crmRowIn {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.ag-sv-tag {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}
.ag-sv-tag.whale {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}
.ag-sv-tag.buyer {
    background: rgba(52, 211, 153, 0.15);
    color: var(--mint);
}
.ag-sv-tag.cold {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}
.ag-sv-fan-name {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}
.ag-sv-shifts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.ag-sv-shift-bar {
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    animation: shiftBarIn 0.5s var(--ease) backwards;
}
.ag-sv-shifts .ag-sv-shift-bar:nth-child(1) {
    animation-delay: 0s;
}
.ag-sv-shifts .ag-sv-shift-bar:nth-child(2) {
    animation-delay: 0.1s;
}
.ag-sv-shifts .ag-sv-shift-bar:nth-child(3) {
    animation-delay: 0.2s;
}
@keyframes shiftBarIn {
    from {
        opacity: 0;
        width: 0%;
    }
    to {
        opacity: 1;
        width: 100%;
    }
}
.ag-sv-24badge {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--mint);
    text-align: center;
    margin-top: 8px;
    letter-spacing: -0.04em;
    text-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
}
.ag-sv-report {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.ag-sv-report-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}
.ag-sv-val {
    font-weight: 800;
    font-size: 0.9rem;
}
.ag-sv-val.cyan {
    color: var(--cyan);
}
.ag-sv-val.mint {
    color: var(--mint);
}
.ag-sv-val.gold {
    color: #fbbf24;
}
.ag-sv-graph {
    width: 100%;
}
.ag-sv-graph-line {
    fill: none;
    stroke: var(--mint);
    stroke-width: 2;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: svGraphDraw 1.5s var(--ease) forwards;
}
@keyframes svGraphDraw {
    to {
        stroke-dashoffset: 0;
    }
}
.ag-sv-graph-label {
    font-size: 0.62rem;
    color: rgba(52, 211, 153, 0.7);
    font-weight: 700;
    text-align: center;
    margin-top: 8px;
}
/* Slider buttons */
.ag-slider-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
}
.ag-slider-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
}
.ag-slider-btn:hover:not(:disabled) {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    color: var(--cyan);
}
.ag-slider-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.ag-slider-btn.next {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.35);
    color: var(--cyan);
}
.ag-slider-dots {
    display: flex;
    gap: 8px;
}
.ag-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.3s;
}
.ag-slider-dot.active {
    background: var(--cyan);
    width: 24px;
    border-radius: 4px;
}
@media (max-width: 768px) {
    .ag-slider-panel.active {
        grid-template-columns: 1fr;
    }
    .ag-slider-panel-right {
        display: none;
    }
    .ag-slider-nav {
        justify-content: flex-start;
    }
}

/* ============================================================
   BENTO new cards
   ============================================================ */
.ag-buy-rate-bar-wrap {
    margin: 8px 0 4px;
}
.ag-buy-rate-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}
.ag-buy-rate-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mint), var(--cyan));
    border-radius: 3px;
    transition: width 1.5s var(--ease);
}
.ag-buy-rate-range {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 600;
}
.ag-chat-style-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.ag-cs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s;
    opacity: 0.5;
}
.ag-cs-item.active {
    background: rgba(0, 212, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.2);
    opacity: 1;
}
.ag-cs-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}
.ag-cs-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}
.ag-cs-sub {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}

/* Ring glow fix */
.ag-ring-wrap {
    overflow: hidden;
    border-radius: 50%;
}
.ag-ring-svg {
    overflow: visible;
}
.ag-ring-outer .ag-ring-wrap {
    overflow: visible;
}
.ag-bento-card:has(.ag-ring-outer) {
    overflow: hidden;
}

/* ============================================================
   LEAD MAGNET v2
   ============================================================ */
#lead-magnet {
    position: relative;
    overflow: hidden;
}
.lm-bg-orb {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 212, 255, 0.08),
        transparent 70%
    );
    top: -100px;
    left: -100px;
    pointer-events: none;
}
.lm-bg-orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(52, 211, 153, 0.06),
        transparent 70%
    );
    top: auto;
    left: auto;
    right: -80px;
    bottom: -80px;
}
.lm-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 56px 60px;
    position: relative;
    overflow: hidden;
}
.lm-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.lmp {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    animation: lmpFloat 8s ease-in-out infinite;
    opacity: 0;
}
.lmp:nth-child(1) {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
    animation-duration: 7s;
}
.lmp:nth-child(2) {
    left: 80%;
    top: 15%;
    animation-delay: 1s;
    background: var(--mint);
}
.lmp:nth-child(3) {
    left: 60%;
    top: 70%;
    animation-delay: 2s;
    animation-duration: 9s;
}
.lmp:nth-child(4) {
    left: 25%;
    top: 80%;
    animation-delay: 3s;
    background: var(--mint);
    animation-duration: 6s;
}
.lmp:nth-child(5) {
    left: 90%;
    top: 50%;
    animation-delay: 4s;
}
.lmp:nth-child(6) {
    left: 40%;
    top: 10%;
    animation-delay: 0.5s;
    animation-duration: 11s;
    background: #a78bfa;
}
.lmp:nth-child(7) {
    left: 70%;
    top: 85%;
    animation-delay: 2.5s;
}
.lmp:nth-child(8) {
    left: 5%;
    top: 55%;
    animation-delay: 1.5s;
    background: var(--mint);
}
@keyframes lmpFloat {
    0% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
    20% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
        transform: translateY(-30px) scale(1.5);
    }
    80% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.5);
    }
}
.lm-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
}
.lm-doc-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lm-ring {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(0, 212, 255, 0.15);
    animation: lmRingSpin 12s linear infinite;
}
.lm-ring-2 {
    width: 220px;
    height: 220px;
    border-color: rgba(52, 211, 153, 0.1);
    animation-direction: reverse;
    animation-duration: 18s;
}
.lm-doc {
    background: rgba(10, 22, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px 22px;
    width: 220px;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.lm-doc-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.lm-doc-logo {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--cyan);
}
.lm-doc-badge {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0, 212, 255, 0.12);
    color: var(--cyan);
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid rgba(0, 212, 255, 0.2);
}
.lm-doc-title-line {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    margin-bottom: 6px;
}
.lm-doc-title-line.full {
    width: 100%;
}
.lm-doc-title-line.short {
    width: 70%;
}
.lm-doc-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 14px 0;
}
.lm-doc-metric {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
}
.lm-doc-mval {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--cyan);
    letter-spacing: -0.02em;
}
.lm-doc-mval.accent {
    color: var(--mint);
}
.lm-doc-mval.gold {
    color: #fbbf24;
}
.lm-doc-mlbl {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    margin-top: 2px;
}
.lm-chart-area {
    fill: url(#lmGrad);
}
.lm-chart-line {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 1.5;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: lmLineDraw 1.8s 0.5s var(--ease) forwards;
}
.lm-chart-dot {
    fill: var(--cyan);
    opacity: 0;
    animation: lmDotPop 0.3s 2.1s forwards;
}
@keyframes lmLineDraw {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes lmDotPop {
    to {
        opacity: 1;
    }
}
@keyframes lmRingSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.lm-doc-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 10px 0;
}
.lm-doc-check-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lm-doc-chk {
    font-size: 0.6rem;
    color: var(--mint);
    font-weight: 800;
    flex-shrink: 0;
}
.lm-doc-line {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}
.lm-doc-line.med {
    width: 60%;
}
.lm-doc-line.long {
    width: 85%;
}
.lm-doc-line.short2 {
    width: 45%;
}
.lm-doc-unlock {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lm-lock-icon {
    font-size: 1rem;
    transition: all 0.5s;
}
.lm-unlock-text {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.4);
}
.lm-eyebrow-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.lm-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    animation: agPulse 1.5s ease-in-out infinite;
}
.lm-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin: 12px 0 20px;
    line-height: 1.6;
}
.lm-bullets {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}
.lm-bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}
.lm-bullet-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mint);
}
.lm-form-new {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lm-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.lm-input-icon {
    position: absolute;
    left: 14px;
    color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    flex-shrink: 0;
}
.lm-input-wrap input {
    width: 100%;
    padding: 13px 14px 13px 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 0.88rem;
    transition: all 0.3s;
    outline: none;
    font-family: inherit;
}
.lm-input-wrap input:focus {
    border-color: rgba(0, 212, 255, 0.4);
    background: rgba(0, 212, 255, 0.05);
}
.lm-submit-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    font-size: 0.95rem;
    margin-top: 4px;
    width: 100%;
}
.lm-btn-icon {
    display: flex;
    align-items: center;
    transition: transform 0.3s;
}
.lm-submit-btn:hover .lm-btn-icon {
    transform: translateY(-2px);
}
.lm-btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    animation: lmShine 3s ease-in-out infinite;
    animation-delay: 1s;
}
@keyframes lmShine {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}
.lm-social-proof {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.lm-sp-avs {
    display: flex;
}
.lm-sp-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sc, #00d4ff);
    border: 2px solid rgba(10, 22, 40, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    color: #0a1628;
    margin-left: -8px;
}
.lm-sp-av:first-child {
    margin-left: 0;
}
.lm-sp-text {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 768px) {
    .lm-wrap {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 32px 24px;
    }
    .lm-preview {
        display: none;
    }
}

/* ============================================================
   SERVICES v2
   ============================================================ */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}
.svc-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease);
    user-select: none;
    -webkit-user-select: none;
}
.svc-card * {
    user-select: none !important;
    -webkit-user-select: none !important;
}
.svc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(0, 212, 255, 0.06),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.svc-card:hover {
    border-color: rgba(0, 212, 255, 0.25);
    transform: translateY(-4px);
}
.svc-card:hover::before {
    opacity: 1;
}
.svc-anim-wrap {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}
.svc-anim-wrap *,
.svc-anim * {
    user-select: none;
    -webkit-user-select: none;
}
.svc-anim-wrap svg,
.svc-anim svg,
.cp-orbit,
.og-bar,
.ch-bubble,
.tr-dot,
.bd-ring,
.da-row,
.da-lbl,
.da-val,
.da-up {
    pointer-events: none;
}
.svc-anim {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.svc-num {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(0, 212, 255, 0.4);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.svc-card h3 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.3;
}
.svc-card p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
}
/* Content Planning — orbiting camera */
.content-plan {
    position: relative;
}
.cp-center-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cyan);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.6);
}
.cp-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.cp-orbit-1 {
    width: 50px;
    height: 50px;
    animation: orbitSpin 4s linear infinite;
}
.cp-orbit-2 {
    width: 72px;
    height: 72px;
    animation: orbitSpin 7s linear infinite reverse;
}
.cp-orbit-3 {
    width: 100px;
    height: 100px;
    animation: orbitSpin 10s linear infinite;
}
.cp-camera,
.cp-cal {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    line-height: 1;
}
.cp-node {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
}
@keyframes orbitSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* Organic Growth bars */
.og-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 60px;
}
.og-bar {
    width: 14px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top, var(--cyan), var(--mint));
    height: 0;
    animation: ogGrow 1s var(--ease) infinite alternate;
    animation-delay: var(--d);
}
@keyframes ogGrow {
    from {
        height: 20%;
    }
    to {
        height: var(--h);
    }
}
.og-arrow {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--mint);
    margin-left: 8px;
    animation: ogArrowBounce 1.5s ease-in-out infinite;
}
@keyframes ogArrowBounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
/* Chat bubbles */
.chatting-anim {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px;
    width: 100%;
}
.ch-bubble {
    font-size: 0.65rem;
    padding: 5px 10px;
    border-radius: 12px;
    max-width: 80%;
    animation: chBubblePop 3s ease-in-out infinite;
    animation-delay: var(--cy);
}
.ch-bubble .ch-txt {
    filter: blur(3px);
    user-select: none;
}
.ch-bubble.fan {
    background: rgba(255, 255, 255, 0.08);
    align-self: flex-start;
    border-radius: 4px 12px 12px 12px;
}
.ch-bubble.creator {
    background: rgba(0, 212, 255, 0.15);
    color: var(--cyan);
    align-self: flex-end;
    border-radius: 12px 4px 12px 12px;
}
@keyframes chBubblePop {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(4px);
    }
    15%,
    85% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
    }
}
/* Traffic funnel */
.tr-funnel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.tr-top-label,
.tr-bottom-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}
.tr-bottom-label {
    color: var(--mint);
}
.tr-funnel-body {
    width: 100%;
    height: 30px;
    position: relative;
    background: linear-gradient(
        to bottom,
        rgba(0, 212, 255, 0.08),
        rgba(52, 211, 153, 0.12)
    );
    clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%);
    overflow: hidden;
}
.tr-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan);
    top: 0;
    left: var(--tx);
    animation: trDotFall 2s ease-in infinite;
    animation-delay: var(--td);
}
@keyframes trDotFall {
    0% {
        top: 0;
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0.3;
    }
}
/* Brand design */
.brand-anim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.bd-ring-outer {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bd-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(0, 212, 255, 0.3);
    animation: bdRingSpin 6s linear infinite;
}
.bd-center-logo {
    font-size: 1.2rem;
    color: var(--cyan);
    position: relative;
    z-index: 1;
    animation: bdLogoPulse 3s ease-in-out infinite;
}
@keyframes bdRingSpin {
    from {
        transform: rotate(0deg);
        border-color: rgba(0, 212, 255, 0.3);
    }
    to {
        transform: rotate(360deg);
        border-color: rgba(167, 139, 250, 0.3);
    }
}
@keyframes bdLogoPulse {
    0%,
    100% {
        text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
    }
    50% {
        text-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
    }
}
.bd-palette {
    display: flex;
    gap: 5px;
}
.bd-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bc);
}
/* Data anim */
.data-anim {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 0 8px;
}
.da-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 5px 8px;
}
.da-lbl {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
    text-transform: uppercase;
    flex: 1;
}
.da-val {
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
}
.da-up {
    font-size: 0.7rem;
    font-weight: 800;
}
.da-up.mint {
    color: var(--mint);
}
@media (max-width: 768px) {
    .svc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .svc-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PAIN POINTS v2
   ============================================================ */
.pp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.pp-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease);
}
.pp-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(239, 68, 68, 0.5),
        transparent
    );
    opacity: 0;
    transition: opacity 0.4s;
}
.pp-card:hover {
    border-color: rgba(239, 68, 68, 0.2);
    transform: translateY(-4px);
}
.pp-card:hover::before {
    opacity: 1;
}
.pp-card-num {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(239, 68, 68, 0.06);
    letter-spacing: -0.04em;
    line-height: 1;
}
.pp-icon-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
}
.pp-icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(239, 68, 68, 0.2);
    animation: ppRingPulse 3s ease-in-out infinite;
}
@keyframes ppRingPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}
.pp-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(239, 68, 68, 0.7);
}
.pp-card h3 {
    font-size: 0.98rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.3;
}
.pp-card p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
    margin-bottom: 16px;
}
.pp-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.pp-stat-val {
    font-size: 1.4rem;
    font-weight: 900;
    color: rgba(239, 68, 68, 0.7);
    letter-spacing: -0.03em;
}
.pp-stat-lbl {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 768px) {
    .pp-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SOLUTION — Creator Dashboard (redesigned)
   ============================================================ */
.sol-visual-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0 56px;
    padding: 20px 0;
}
.sol-dash {
    position: relative;
    width: 620px;
    max-width: 100%;
    background: rgba(8, 18, 36, 0.98);
    border: 1.5px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 212, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    z-index: 2;
}
.sol-dash::after {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 212, 255, 0.5),
        transparent
    );
    pointer-events: none;
}
/* browser bar */
.sol-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sol-bar-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.sol-bar-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}
.sol-bar-url {
    flex: 1;
    text-align: center;
    font-family: monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.28);
    letter-spacing: 0.03em;
}
.sol-live-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--mint);
    letter-spacing: 0.1em;
    flex-shrink: 0;
}
.sol-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint);
    display: inline-block;
    animation: sdLivePulse 1.6s ease-in-out infinite;
}
@keyframes sdLivePulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    }
    60% {
        opacity: 0.7;
        box-shadow: 0 0 0 5px rgba(52, 211, 153, 0);
    }
}
/* KPI row */
.sol-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sol-kpi {
    background: rgba(8, 18, 36, 0.98);
    padding: 16px 18px 14px;
    position: relative;
}
.sol-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sol-kpi-lbl {
    font-size: 0.52rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.sol-kpi-badge {
    display: none;
}
.sol-kpi-val {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--kc, var(--cyan));
    letter-spacing: -0.04em;
    line-height: 1;
    filter: blur(6px);
    user-select: none;
    -webkit-user-select: none;
}
.sol-kpi-sub {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.18);
    margin-top: 5px;
}
/* chart */
.sol-chart-area {
    padding: 14px 16px 10px;
    position: relative;
}
.sol-chart-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.sol-chart-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.sol-chart-range {
    display: flex;
    gap: 4px;
}
.sol-chart-range span {
    font-size: 0.55rem;
    padding: 2px 9px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.25);
    cursor: default;
    transition: all 0.2s;
}
.sol-chart-range span.active {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    color: var(--cyan);
    cursor: default;
}
.sol-graph-svg {
    width: 100%;
    height: 110px;
    display: block;
    overflow: visible;
}
.sol-graph-area {
    opacity: 0;
    animation: sdAreaFade 1s 2s forwards;
}
@keyframes sdAreaFade {
    to {
        opacity: 1;
    }
}
.sol-graph-line {
    fill: none;
    stroke: url(#sdLineGrad);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 610;
    stroke-dashoffset: 610;
    animation: sdLineDraw 2s 0.3s var(--ease) forwards;
}
@keyframes sdLineDraw {
    to {
        stroke-dashoffset: 0;
    }
}
.sol-graph-dot {
    fill: var(--mint);
    filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.9));
    opacity: 0;
    animation: sdDotPop 0.5s 2.1s var(--ease) forwards;
}
@keyframes sdDotPop {
    to {
        opacity: 1;
    }
}
/* y-axis grid */
.sol-graph-grid {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}
.sol-chart-labels {
    display: flex;
    justify-content: space-between;
    padding: 6px 2px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 2px;
}
.sol-chart-labels span {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.18);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* activity feed */
.sol-feed {
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sol-feed-hdr {
    font-size: 0.58rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.22);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}
.sol-feed-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.55);
    padding: 6px 4px;
    border-radius: 6px;
    transition: background 0.2s;
}
.sol-feed-item + .sol-feed-item {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.sol-feed-item.flash {
    animation: sdFlash 0.6s ease forwards;
}
@keyframes sdFlash {
    0% {
        background: rgba(0, 212, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
    }
    100% {
        background: transparent;
        color: rgba(255, 255, 255, 0.55);
    }
}
.sol-feed-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fd, var(--cyan));
    flex-shrink: 0;
    box-shadow: 0 0 7px var(--fd, var(--cyan));
}
.sol-feed-amt {
    font-weight: 700;
    color: #fff;
    margin-left: 1px;
}
.sol-feed-time {
    color: rgba(255, 255, 255, 0.2);
    margin-left: auto;
    font-size: 0.56rem;
    flex-shrink: 0;
}
/* range buttons — non-interactive */
.sol-chart-range span:not(.active):hover {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.3);
}
/* chart scan line */
.sol-scan {
    position: absolute;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(0, 212, 255, 0.5),
        transparent
    );
    pointer-events: none;
    z-index: 3;
    animation: sdScan 5s ease-in-out infinite 2.5s;
    opacity: 0;
}
@keyframes sdScan {
    0% {
        left: 0%;
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    92% {
        opacity: 0.7;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}
/* KPI value breath glow */
@keyframes kpiBreath {
    0%,
    100% {
        text-shadow: 0 0 8px var(--kc, var(--cyan));
    }
    50% {
        text-shadow:
            0 0 20px var(--kc, var(--cyan)),
            0 0 40px var(--kc, var(--cyan));
    }
}
.sol-kpi-val {
    animation: kpiBreath 3s ease-in-out infinite;
}
/* activity feed cycle */
@keyframes sdFeedCycle {
    0%,
    85% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateX(8px);
    }
}
/* new feed item pop */
@keyframes sdFeedNew {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* solution card stat chip */
.sol-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--mint);
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 20px;
    padding: 4px 10px;
    margin-bottom: 12px;
}
.sol-stat-chip-arrow {
    font-size: 0.75rem;
}
@media (max-width: 768px) {
    .sol-visual-wrap {
        display: none;
    }
}
/* Heading consistency across sections */
section .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 12px;
    display: block;
}

/* ============================================================
   NOT JUST MANAGER v2 — Orbital
   ============================================================ */
.njm-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 60px;
}
.njm-visual {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
}
.njm-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
}
.njm-center-logo {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--cyan);
}
.njm-center-sub {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.njm-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.njm-orbit-1 {
    width: 90px;
    height: 90px;
    animation: orbitSpin 6s linear infinite;
}
.njm-orbit-2 {
    width: 140px;
    height: 140px;
    animation: orbitSpin 10s linear infinite reverse;
}
.njm-orbit-3 {
    width: 200px;
    height: 200px;
    animation: orbitSpin 14s linear infinite;
}
.njm-orbit-4 {
    width: 260px;
    height: 260px;
    animation: orbitSpin 18s linear infinite reverse;
}
.njm-chip {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 22, 40, 0.9);
    border: 1px solid var(--nc, #00d4ff);
    border-radius: 20px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--nc, #00d4ff);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.njm-chip-icon {
    font-size: 0.75rem;
}
.njm-stat-float {
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px 12px;
    text-align: center;
    z-index: 6;
}
.njm-sf-1 {
    bottom: 10px;
    left: -10px;
}
.njm-sf-2 {
    top: 20px;
    right: -10px;
}
.njm-sf-val {
    font-size: 0.95rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--cyan), var(--mint));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.njm-sf-lbl {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    margin-top: 2px;
}
.njm-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    user-select: none;
    -webkit-user-select: none;
}
.njm-content * {
    user-select: none !important;
    -webkit-user-select: none !important;
}
@media (max-width: 768px) {
    .njm-wrap {
        grid-template-columns: 1fr;
        padding: 32px 24px;
    }
}
/* NJM role grid */
.njm-wrap {
    align-items: center;
}
.njm-roles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    align-self: center;
}
.njm-role-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 18px 16px 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.njm-role-card * {
    user-select: none !important;
    -webkit-user-select: none !important;
}
.njm-role-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
}
.njm-role-name {
    font-size: 0.88rem;
    font-weight: 800;
    margin-bottom: 5px;
    color: var(--rc, #fff);
}
.njm-role-desc {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
}
/* animated anim container */
.njm-card-anim {
    height: 168px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 14px;
}

/* ═══ CHATTING ═══ */
.njm-ch-scene {
    height: 100%;
    position: relative;
}
.njm-ch-row {
    display: flex;
    opacity: 0;
    position: absolute;
    left: 10px;
    right: 10px;
}
.njm-ch-row.r {
    justify-content: flex-end;
}
.njm-ch-b {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 12px;
    font-size: 8.5px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    max-width: 84%;
    line-height: 1.35;
    position: relative;
    overflow: hidden;
}
.njm-ch-b::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    animation: njmChShimmer 3s ease-in-out infinite;
}
.njm-ch-b.fan {
    background: rgba(255, 255, 255, 0.09);
    color: transparent;
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
    border-radius: 12px 12px 12px 3px;
}
.njm-ch-b.creator {
    background: linear-gradient(135deg, #00aff0, #0096cc);
    color: transparent;
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.9);
    border-radius: 12px 12px 3px 12px;
    box-shadow: 0 0 14px rgba(0, 175, 240, 0.35);
}
.njm-ch-typing {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    opacity: 0;
    position: absolute;
}
.njm-ch-typing-r {
    right: 10px;
    top: 36px;
    animation: njmCTyp 9s 1.1s ease-in-out infinite;
}
.njm-ch-typing-l {
    left: 10px;
    top: 82px;
    animation: njmCTyp 9s 3.2s ease-in-out infinite;
}
.njm-ch-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.6);
    display: inline-block;
}
.njm-ch-dot:nth-child(1) {
    animation: njmDotB 0.9s 0s infinite;
}
.njm-ch-dot:nth-child(2) {
    animation: njmDotB 0.9s 0.18s infinite;
}
.njm-ch-dot:nth-child(3) {
    animation: njmDotB 0.9s 0.36s infinite;
}
.njm-ch-ppv {
    opacity: 0;
    position: absolute;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 8px;
    font-weight: 800;
    color: #34d399;
    font-family: "Montserrat", sans-serif;
}
.njm-ch-seen {
    font-size: 7.5px;
    color: rgba(0, 175, 240, 0.8);
    font-weight: 700;
    text-align: right;
    opacity: 0;
    position: absolute;
    right: 10px;
}
.njm-ch-row:nth-child(1) {
    top: 8px;
    animation: njmC1 9s 0.2s ease-in-out infinite;
}
.njm-ch-row.r:nth-child(2) {
    top: 36px;
    animation: njmC2 9s 2s ease-in-out infinite;
}
.njm-ch-row.f2 {
    top: 82px;
    animation: njmC3 9s 4.1s ease-in-out infinite;
}
.njm-ch-ppv {
    top: 112px;
    animation: njmCPpv 9s 5.2s ease-in-out infinite;
}
.njm-ch-seen {
    bottom: 8px;
    animation: njmCSeen 9s 6.4s ease-in-out infinite;
}
@keyframes njmDotB {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.45;
    }
    50% {
        transform: translateY(-5px);
        opacity: 1;
    }
}
@keyframes njmChShimmer {
    0%,
    100% {
        left: -60%;
        opacity: 0;
    }
    50% {
        left: 120%;
        opacity: 1;
    }
}
@keyframes njmC1 {
    0%,
    100% {
        opacity: 0;
        transform: translateX(-10px) scale(0.9);
    }
    7%,
    88% {
        opacity: 1;
        transform: none;
    }
    95% {
        opacity: 0;
    }
}
@keyframes njmC2 {
    0%,
    100% {
        opacity: 0;
        transform: translateX(10px) scale(0.9);
    }
    7%,
    82% {
        opacity: 1;
        transform: none;
    }
    92% {
        opacity: 0;
    }
}
@keyframes njmC3 {
    0%,
    100% {
        opacity: 0;
        transform: translateX(-8px);
    }
    6%,
    72% {
        opacity: 1;
        transform: none;
    }
    82% {
        opacity: 0;
    }
}
@keyframes njmCTyp {
    0%,
    4% {
        opacity: 0;
    }
    8%,
    20% {
        opacity: 1;
    }
    24%,
    100% {
        opacity: 0;
    }
}
@keyframes njmCPpv {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.5) translateY(6px);
    }
    8% {
        transform: scale(1.1) translateY(-2px);
    }
    12%,
    72% {
        opacity: 1;
        transform: none;
    }
    82%,
    100% {
        opacity: 0;
    }
}
@keyframes njmCSeen {
    0%,
    100% {
        opacity: 0;
        transform: translateY(3px);
    }
    8%,
    78% {
        opacity: 1;
        transform: none;
    }
    90% {
        opacity: 0;
    }
}

/* ═══ GROWTH ═══ */
.njm-gr-scene {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 20px 12px 20px;
    position: relative;
}
.njm-gr-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(
        to top,
        rgba(52, 211, 153, 0.25),
        rgba(52, 211, 153, 0.5)
    );
    transform-origin: bottom;
    transform: scaleY(0);
    position: relative;
}
.njm-gr-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: translateX(-100%);
    border-radius: 4px 4px 0 0;
}
.njm-gr-bar:nth-child(1) {
    animation: njmBUp 4.5s 0s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    height: 26px;
}
.njm-gr-bar:nth-child(2) {
    animation: njmBUp 4.5s 0.12s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    height: 42px;
}
.njm-gr-bar:nth-child(3) {
    animation: njmBUp 4.5s 0.24s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    height: 32px;
}
.njm-gr-bar:nth-child(4) {
    animation: njmBUp 4.5s 0.36s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    height: 52px;
}
.njm-gr-bar:nth-child(5) {
    animation: njmBUp 4.5s 0.48s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    height: 40px;
}
.njm-gr-bar.hi {
    background: linear-gradient(to top, rgba(52, 211, 153, 0.55), #34d399);
    box-shadow:
        0 0 18px rgba(52, 211, 153, 0.5),
        0 -4px 16px rgba(52, 211, 153, 0.3);
    animation: njmBUp 4.5s 0.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    height: 66px;
}
.njm-gr-bar.hi::after {
    animation: njmBarShimmer 4.5s 1.5s ease-in-out infinite;
}
.njm-gr-lbl {
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-weight: 800;
    color: rgba(52, 211, 153, 0.8);
    font-family: "Montserrat", sans-serif;
    white-space: nowrap;
    opacity: 0;
    animation: njmLblPop 4.5s ease-in-out infinite;
}
.njm-gr-bar:nth-child(1) .njm-gr-lbl {
    animation-delay: 0.5s;
}
.njm-gr-bar:nth-child(2) .njm-gr-lbl {
    animation-delay: 0.62s;
}
.njm-gr-bar:nth-child(3) .njm-gr-lbl {
    animation-delay: 0.74s;
}
.njm-gr-bar:nth-child(4) .njm-gr-lbl {
    animation-delay: 0.86s;
}
.njm-gr-bar:nth-child(5) .njm-gr-lbl {
    animation-delay: 0.98s;
}
.njm-gr-bar.hi .njm-gr-lbl {
    animation-delay: 1.1s;
    color: #34d399;
}
.njm-gr-svg {
    position: absolute;
    bottom: 20px;
    left: 12px;
    right: 12px;
    height: 70px;
    pointer-events: none;
    overflow: visible;
}
.njm-gr-trend {
    fill: none;
    stroke: rgba(52, 211, 153, 0.5);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: njmLineDraw 4.5s 1s ease-in-out infinite;
}
.njm-gr-trend-dot {
    fill: #34d399;
    filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.9));
    opacity: 0;
    animation: njmTDot 4.5s 2.2s ease-in-out infinite;
}
.njm-gr-badge {
    position: absolute;
    top: 7px;
    right: 8px;
    font-size: 8.5px;
    font-weight: 800;
    color: #34d399;
    background: rgba(10, 22, 40, 0.9);
    border: 1.5px solid rgba(52, 211, 153, 0.7);
    border-radius: 6px;
    padding: 2px 7px;
    font-family: "Montserrat", sans-serif;
    opacity: 0;
    animation: njmBadgePop 4.5s ease-in-out infinite;
    box-shadow:
        0 0 10px rgba(52, 211, 153, 0.25),
        inset 0 0 8px rgba(52, 211, 153, 0.06);
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
}
.njm-gr-title {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 7.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.25);
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.njm-gr-base {
    position: absolute;
    bottom: 20px;
    left: 12px;
    right: 12px;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}
.njm-gr-scan {
    position: absolute;
    top: 18px;
    bottom: 20px;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(52, 211, 153, 0.4),
        transparent
    );
    left: 0;
    animation: njmScan 4.5s 0.8s ease-in-out infinite;
    opacity: 0;
}
@keyframes njmBUp {
    0%,
    100% {
        transform: scaleY(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    35%,
    72% {
        transform: scaleY(1);
        opacity: 1;
    }
    88% {
        transform: scaleY(1);
        opacity: 0.5;
    }
}
@keyframes njmBarShimmer {
    0% {
        transform: translateX(-100%);
    }
    60% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(200%);
    }
}
@keyframes njmLblPop {
    0%,
    30% {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    42%,
    72% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    84%,
    100% {
        opacity: 0;
    }
}
@keyframes njmLineDraw {
    0%,
    18% {
        stroke-dashoffset: 200;
        opacity: 0;
    }
    22% {
        opacity: 1;
    }
    50%,
    75% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    88%,
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}
@keyframes njmTDot {
    0%,
    100% {
        opacity: 0;
        r: 3;
    }
    8%,
    65% {
        opacity: 1;
        r: 4;
    }
    80% {
        opacity: 0;
    }
}
@keyframes njmBadgePop {
    0%,
    68% {
        opacity: 0;
        transform: scale(0.4) translateY(4px);
    }
    76% {
        transform: scale(1.08) translateY(-1px);
    }
    80%,
    93% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
    }
}
@keyframes njmScan {
    0%,
    15% {
        left: 0%;
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
    85% {
        left: 100%;
        opacity: 0.6;
    }
    90%,
    100% {
        opacity: 0;
    }
}

/* ═══ BRAND ═══ */
.njm-br-scene {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
}
.njm-br-profile {
    display: flex;
    align-items: center;
    gap: 7px;
    opacity: 0;
    animation: njmBrProf 8s 0s ease-in-out infinite;
}
.njm-br-av {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    font-family: "Montserrat", sans-serif;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.4);
    animation: njmAvGlow 2s ease-in-out infinite;
}
.njm-br-name {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(167, 139, 250, 0.9);
    font-family: "Montserrat", sans-serif;
}
.njm-br-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 7.5px;
    font-weight: 700;
    color: #34d399;
    font-family: "Montserrat", sans-serif;
}
.njm-br-sdot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 5px #34d399;
    animation: njmBrDot 1.4s ease-in-out infinite;
}
.njm-br-tags-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.njm-br-row {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
}
.njm-br-tag {
    font-size: 8px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid currentColor;
    color: var(--bc, #a78bfa);
    font-family: "Montserrat", sans-serif;
    opacity: 0;
    position: relative;
    overflow: hidden;
}
.njm-br-tag::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0.07;
    border-radius: inherit;
}
.njm-br-tag.a1 {
    animation: njmTagIn 8s 0.5s ease-in-out infinite;
}
.njm-br-tag.a2 {
    animation: njmTagIn 8s 0.9s ease-in-out infinite;
}
.njm-br-tag.a3 {
    animation: njmTagIn 8s 1.3s ease-in-out infinite;
}
.njm-br-tag.a4 {
    animation: njmTagIn 8s 1.7s ease-in-out infinite;
}
.njm-br-brief {
    font-size: 7.5px;
    font-weight: 700;
    color: rgba(167, 139, 250, 0.5);
    font-family: "Montserrat", sans-serif;
    opacity: 0;
    animation: njmBrAct 8s 3.5s ease-in-out infinite;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 1px;
    border-top: 1px solid rgba(167, 139, 250, 0.1);
}
.njm-br-check {
    color: #34d399;
    font-size: 9px;
}
@keyframes njmBrProf {
    0%,
    100% {
        opacity: 0;
        transform: translateY(-5px);
    }
    8%,
    88% {
        opacity: 1;
        transform: none;
    }
    96% {
        opacity: 0;
    }
}
@keyframes njmAvGlow {
    0%,
    100% {
        box-shadow: 0 0 8px rgba(167, 139, 250, 0.35);
    }
    50% {
        box-shadow: 0 0 18px rgba(167, 139, 250, 0.7);
    }
}
@keyframes njmTagIn {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.7) translateX(-4px);
    }
    10%,
    80% {
        opacity: 1;
        transform: none;
    }
    92% {
        opacity: 0;
    }
}
@keyframes njmBrAct {
    0%,
    100% {
        opacity: 0;
        transform: translateY(4px);
    }
    8%,
    85% {
        opacity: 1;
        transform: none;
    }
    95% {
        opacity: 0;
    }
}
@keyframes njmBrDot {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}

/* ═══ ANALYTICS ═══ */
.njm-an-scene {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 12px;
}
.njm-an-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    opacity: 0;
    animation: njmAnHdr 5s 0s ease-in-out infinite;
}
.njm-an-live {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 7.5px;
    font-weight: 800;
    color: #f472b6;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.njm-an-ldot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f472b6;
    box-shadow: 0 0 6px #f472b6;
    animation: njmBrDot 1.2s ease-in-out infinite;
}
.njm-an-spark {
    width: 52px;
    height: 16px;
    display: block;
    overflow: visible;
}
.njm-an-sparkline {
    fill: none;
    stroke: rgba(244, 114, 182, 0.5);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: njmSparkDraw 5s 0.3s ease-in-out infinite;
}
.njm-an-sparkdot {
    fill: #f472b6;
    filter: drop-shadow(0 0 3px #f472b6);
    opacity: 0;
    animation: njmTDot 5s 1s ease-in-out infinite;
}
.njm-an-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.njm-an-row {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
}
.njm-an-row:nth-child(1) {
    animation: njmAnRow 5s 0.3s ease-in-out infinite;
}
.njm-an-row:nth-child(2) {
    animation: njmAnRow 5s 0.6s ease-in-out infinite;
}
.njm-an-row:nth-child(3) {
    animation: njmAnRow 5s 0.9s ease-in-out infinite;
}
.njm-an-row:nth-child(4) {
    animation: njmAnRow 5s 1.2s ease-in-out infinite;
}
.njm-an-lbl {
    font-size: 9px;
    font-weight: 800;
    color: rgba(244, 114, 182, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    width: 28px;
    flex-shrink: 0;
    font-family: "Montserrat", sans-serif;
}
.njm-an-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.njm-an-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(to right, rgba(244, 114, 182, 0.35), #f472b6);
    width: var(--w, 70%);
    transform: scaleX(0);
    transform-origin: left;
    position: relative;
}
.njm-an-fill::after {
    content: "";
    position: absolute;
    right: 0;
    top: -1px;
    width: 5px;
    height: 6px;
    border-radius: 50%;
    background: #f472b6;
    box-shadow: 0 0 5px #f472b6;
    opacity: 0;
}
.njm-an-row:nth-child(1) .njm-an-fill {
    animation: njmAnFill 5s 0.5s ease-in-out infinite;
}
.njm-an-row:nth-child(2) .njm-an-fill {
    animation: njmAnFill 5s 0.8s ease-in-out infinite;
}
.njm-an-row:nth-child(3) .njm-an-fill {
    animation: njmAnFill 5s 1.1s ease-in-out infinite;
}
.njm-an-row:nth-child(4) .njm-an-fill {
    animation: njmAnFill 5s 1.4s ease-in-out infinite;
}
.njm-an-row:nth-child(1) .njm-an-fill::after,
.njm-an-row:nth-child(2) .njm-an-fill::after,
.njm-an-row:nth-child(3) .njm-an-fill::after,
.njm-an-row:nth-child(4) .njm-an-fill::after {
    animation: njmFillDot 5s ease-in-out infinite;
}
.njm-an-row:nth-child(2) .njm-an-fill::after {
    animation-delay: 0.3s;
}
.njm-an-row:nth-child(3) .njm-an-fill::after {
    animation-delay: 0.6s;
}
.njm-an-row:nth-child(4) .njm-an-fill::after {
    animation-delay: 0.9s;
}
.njm-an-val {
    font-size: 10px;
    font-weight: 800;
    color: rgba(244, 114, 182, 0.85);
    font-family: "Montserrat", sans-serif;
    width: 32px;
    text-align: right;
}
.njm-an-up {
    font-size: 11px;
    font-weight: 800;
    color: #34d399;
    flex-shrink: 0;
    line-height: 1;
}
@keyframes njmAnHdr {
    0%,
    3% {
        opacity: 0;
        transform: translateY(-3px);
    }
    12%,
    88% {
        opacity: 1;
        transform: none;
    }
    96%,
    100% {
        opacity: 0;
    }
}
@keyframes njmSparkDraw {
    0%,
    6% {
        stroke-dashoffset: 120;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    35%,
    80% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    92%,
    100% {
        opacity: 0;
    }
}
@keyframes njmAnRow {
    0%,
    4% {
        opacity: 0;
        transform: translateX(-7px);
    }
    14%,
    82% {
        opacity: 1;
        transform: none;
    }
    94%,
    100% {
        opacity: 0;
    }
}
@keyframes njmAnFill {
    0%,
    12% {
        transform: scaleX(0);
    }
    30%,
    72% {
        transform: scaleX(1);
    }
    88%,
    100% {
        transform: scaleX(1);
        opacity: 0.4;
    }
}
@keyframes njmFillDot {
    0%,
    28% {
        opacity: 0;
    }
    35%,
    65% {
        opacity: 1;
    }
    75%,
    100% {
        opacity: 0;
    }
}
@media (max-width: 768px) {
    .njm-roles-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   WEAPON-AG — Animated
   ============================================================ */
.weapon-block {
    position: relative;
    overflow: hidden;
}
#process-ag,
.ag-slider-wrap,
.ag-proc-step,
.ag-sv-wrap {
    font-family: "Montserrat", sans-serif;
}
.weapon-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.wp {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--cyan);
    animation: lmpFloat 10s ease-in-out infinite;
    opacity: 0;
}
.wp:nth-child(1) {
    left: 5%;
    top: 30%;
    animation-delay: 0s;
}
.wp:nth-child(2) {
    left: 15%;
    top: 70%;
    animation-delay: 1.5s;
    background: var(--mint);
}
.wp:nth-child(3) {
    left: 85%;
    top: 20%;
    animation-delay: 3s;
}
.wp:nth-child(4) {
    left: 90%;
    top: 60%;
    animation-delay: 4.5s;
    background: var(--mint);
}
.wp:nth-child(5) {
    left: 50%;
    top: 10%;
    animation-delay: 6s;
}
.wp:nth-child(6) {
    left: 60%;
    top: 85%;
    animation-delay: 2s;
    background: #a78bfa;
}
.wp:nth-child(7) {
    left: 30%;
    top: 15%;
    animation-delay: 3.5s;
}
.wp:nth-child(8) {
    left: 75%;
    top: 40%;
    animation-delay: 5s;
    background: var(--mint);
}
.weapon-ring-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}
.weapon-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 212, 255, 0.06);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.wr1 {
    width: 400px;
    height: 400px;
    animation: weaponRing 8s linear infinite;
}
.wr2 {
    width: 600px;
    height: 600px;
    border-color: rgba(52, 211, 153, 0.04);
    animation: weaponRing 12s linear infinite reverse;
}
.wr3 {
    width: 800px;
    height: 800px;
    border-color: rgba(167, 139, 250, 0.03);
    animation: weaponRing 16s linear infinite;
}
@keyframes weaponRing {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.weapon-stats {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 36px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}
.weapon-stat {
    text-align: center;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
}
.ws-val {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--cyan), var(--mint));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ws-val.mint {
    background: linear-gradient(135deg, var(--mint), #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ws-lbl {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}
.weapon-block .manager-content {
    position: relative;
    z-index: 2;
}
.weapon-block .manager-content h2 {
    animation: weaponShimmer 4s ease-in-out infinite;
}
@keyframes weaponShimmer {
    0%,
    100% {
        text-shadow: 0 0 0 transparent;
    }
    50% {
        text-shadow:
            0 0 40px rgba(0, 212, 255, 0.3),
            0 0 80px rgba(52, 211, 153, 0.1);
    }
}

/* ============================================================
   DASHBOARD TABS
   ============================================================ */
.ag-card-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ag-card-tab {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.04em;
    font-family: inherit;
}
.ag-card-tab.active {
    background: rgba(0, 212, 255, 0.12);
    color: var(--cyan);
}
.ag-card-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   ENHANCED BUTTON ANIMATIONS
   ============================================================ */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--ease);
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0)
    );
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    border-radius: inherit;
}
.btn:hover::after {
    opacity: 1;
}
.btn-primary:hover {
    box-shadow:
        0 8px 32px rgba(0, 212, 255, 0.35),
        0 0 0 1px rgba(0, 212, 255, 0.3);
}
.btn-primary:active {
    transform: translateY(0) scale(0.99);
}
.btn-ghost:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 212, 255, 0.5);
    color: var(--cyan);
}
.btn-glow {
    animation: btnGlowPulse 3s ease-in-out infinite;
}
@keyframes btnGlowPulse {
    0%,
    100% {
        box-shadow: 0 0 16px rgba(0, 212, 255, 0.2);
    }
    50% {
        box-shadow:
            0 0 32px rgba(0, 212, 255, 0.5),
            0 0 60px rgba(0, 212, 255, 0.15);
    }
}

/* ============================================================
   GLOBAL SECTION CONSISTENCY
   ============================================================ */
section {
    --section-py: 100px;
}
.section-subtitle {
    max-width: 640px;
    margin: 0 auto 48px;
    text-align: center;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
}
/* Services/Pain section subtitles can be left-aligned */

/* Enhance service card height for breathing room */
.svc-card {
    min-height: 220px;
}
.svc-anim-wrap {
    height: 90px;
}
/* Chat response badge */
.ch-resp-badge {
    position: absolute;
    bottom: -6px;
    right: 0;
    font-size: 0.55rem;
    font-weight: 700;
    color: rgba(52, 211, 153, 0.8);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.ch-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mint);
    animation: onlinePing 1.5s infinite;
}
/* Content planning extra node + glow */
.cp-node-2 {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.6);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg) translateY(-36px);
}
.cp-glow-ring {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(0, 212, 255, 0.08);
    animation: orbitSpin 20s linear infinite reverse;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* DA sparkline wrapper */
.da-sparkline {
    display: flex;
    justify-content: center;
    margin-bottom: 2px;
}

/* Fix ag-cmp2-persona-chip rgba bug */
.ag-cmp2-persona-chip {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--pc, #00d4ff);
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* ============================================================
   BLUR HELPERS
   ============================================================ */
.lm-blurred {
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
}
.ag-blurred-num {
    filter: blur(9px);
    user-select: none;
    pointer-events: none;
}

/* ============================================================
   COMPARE-AG — Topic buttons & panels
   ============================================================ */
.cmp-topic-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.cmp-topic-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    font-family: inherit;
    letter-spacing: 0.02em;
}
.cmp-topic-btn svg {
    transition: color 0.25s;
}
.cmp-topic-btn:hover {
    background: rgba(0, 212, 255, 0.07);
    border-color: rgba(0, 212, 255, 0.25);
    color: rgba(0, 212, 255, 0.8);
}
.cmp-topic-btn.active {
    background: rgba(0, 212, 255, 0.12);
    border-color: rgba(0, 212, 255, 0.4);
    color: var(--cyan);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.15) inset;
}
.cmp-panel-wrap {
    position: relative;
}
.cmp-panel {
    display: none;
    grid-template-columns: 1fr 40px 1fr;
    gap: 16px;
    align-items: start;
    animation: cmpFadeIn 0.35s var(--ease);
}
.cmp-panel.active {
    display: grid;
}
@keyframes cmpFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.cmp-side {
    background: rgba(255, 255, 255, 0.025);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.cmp-side.bad {
    border: 1px solid rgba(239, 68, 68, 0.18);
}
.cmp-side.good {
    border: 1px solid rgba(52, 211, 153, 0.18);
}
.cmp-side-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}
.cmp-x {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(239, 68, 68, 0.85);
    font-size: 0.7rem;
    font-weight: 900;
    flex-shrink: 0;
}
.cmp-chk {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mint);
    font-size: 0.7rem;
    font-weight: 900;
    flex-shrink: 0;
}
.cmp-anim-zone {
    min-height: 108px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cmp-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 60px;
}
.cmp-divider span {
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 0.05em;
}
.cmp-divider-line {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.07);
}
.cmp-outcome {
    display: inline-block;
    margin-top: auto;
    padding-top: 14px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.cmp-outcome.bad {
    color: rgba(239, 68, 68, 0.7);
}
.cmp-outcome.good {
    color: var(--mint);
}
.cmp-side p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.65;
    margin: 0;
}

/* compare animations — bad side: cold convo */
.cmp-cold-convo {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}
.cmp-cold-msg {
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 0.68rem;
}
.cmp-cold-msg.fan {
    background: rgba(255, 255, 255, 0.07);
    align-self: flex-start;
    color: rgba(255, 255, 255, 0.65);
}
.cmp-cold-msg.creator-cold {
    background: rgba(239, 68, 68, 0.09);
    align-self: flex-end;
    color: rgba(239, 68, 68, 0.75);
}
.cmp-cold-badge {
    font-size: 0.58rem;
    color: rgba(239, 68, 68, 0.55);
    text-align: center;
    font-weight: 700;
    margin-top: 3px;
    animation: coldPulse 2.5s ease-in-out infinite;
}
@keyframes coldPulse {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* compare animations — good side: crm card */
.cmp-crm-card {
    background: rgba(0, 212, 255, 0.04);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    width: 100%;
}
.cmp-crm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.cmp-crm-tag {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.cmp-crm-tag.whale {
    background: rgba(0, 212, 255, 0.1);
    color: var(--cyan);
}
.cmp-crm-name {
    font-size: 0.72rem;
    font-weight: 700;
}
.cmp-crm-note {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 8px;
    line-height: 1.5;
}
.cmp-crm-typing {
    display: flex;
    align-items: center;
    gap: 5px;
}
.cmp-crm-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--cyan);
    animation: crmDot 1.2s ease-in-out infinite;
}
.cmp-crm-dot:nth-child(2) {
    animation-delay: 0.2s;
}
.cmp-crm-dot:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes crmDot {
    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}
.cmp-crm-compose {
    font-size: 0.58rem;
    color: rgba(0, 212, 255, 0.55);
    font-style: italic;
}

/* ghost report */
.cmp-ghost-report {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}
.cmp-ghost-q {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
}
.cmp-ghost-a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
}
.cmp-ghost-dots {
    display: flex;
    gap: 4px;
}
.cmp-ghost-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.5);
    animation: ghostDot 2s ease-in-out infinite;
}
.cmp-ghost-dots span:nth-child(2) {
    animation-delay: 0.3s;
}
.cmp-ghost-dots span:nth-child(3) {
    animation-delay: 0.6s;
}
@keyframes ghostDot {
    0%,
    100% {
        opacity: 0.25;
    }
    50% {
        opacity: 1;
    }
}
.cmp-ghost-seen {
    font-size: 0.6rem;
    color: rgba(239, 68, 68, 0.65);
    font-weight: 700;
}

/* report card */
.cmp-report-card {
    background: rgba(52, 211, 153, 0.03);
    border: 1px solid rgba(52, 211, 153, 0.1);
    border-radius: 10px;
    padding: 12px;
    width: 100%;
}
.cmp-report-hdr {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cmp-report-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
}
.cmp-report-row:last-child {
    border-bottom: none;
}
.cmp-rval {
    font-weight: 800;
}
.cmp-rval.mint {
    color: var(--mint);
}
.cmp-rval.cyan {
    color: var(--cyan);
}

/* clone wrap */
.cmp-clone-wrap {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
    width: 100%;
}
.cmp-clone-msg {
    background: rgba(239, 68, 68, 0.07);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
}
.cmp-clone-copies {
    display: flex;
    gap: 6px;
}
.cmp-clone-copy {
    font-size: 0.58rem;
    padding: 4px 9px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 6px;
    color: rgba(239, 68, 68, 0.55);
    animation: clonePop 0.4s var(--ease) backwards;
}
.cmp-clone-copy:nth-child(2) {
    animation-delay: 0.1s;
}
.cmp-clone-copy:nth-child(3) {
    animation-delay: 0.2s;
}
@keyframes clonePop {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.cmp-clone-badge {
    font-size: 0.58rem;
    color: rgba(239, 68, 68, 0.5);
    font-weight: 700;
}

/* persona list */
.cmp-persona-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.cmp-persona-item {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.18);
    border-left: 2px solid var(--pc, #00d4ff);
    border-radius: 0 8px 8px 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--pc, #00d4ff);
    animation: personaIn 0.4s var(--ease) backwards;
}
.cmp-persona-item:nth-child(2) {
    animation-delay: 0.1s;
}
.cmp-persona-item:nth-child(3) {
    animation-delay: 0.2s;
}
@keyframes personaIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* dead hours */
.cmp-dead-hours {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.cmp-hour-bar {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
}
.cmp-hour-bar.active {
    background: rgba(52, 211, 153, 0.08);
    color: var(--mint);
}
.cmp-hour-bar.dead {
    background: rgba(239, 68, 68, 0.06);
    color: rgba(239, 68, 68, 0.45);
    text-decoration: line-through;
}
.cmp-dead-label {
    font-size: 0.6rem;
    color: rgba(239, 68, 68, 0.55);
    font-weight: 700;
    text-align: center;
    animation: deadBlink 2s ease-in-out infinite;
}
@keyframes deadBlink {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* coverage clock */
.cmp-coverage-clock {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.cmp-shift {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}
.cmp-s1 {
    background: rgba(0, 212, 255, 0.07);
    color: var(--cyan);
}
.cmp-s2 {
    background: rgba(52, 211, 153, 0.07);
    color: var(--mint);
}
.cmp-s3 {
    background: rgba(167, 139, 250, 0.07);
    color: #a78bfa;
}
.cmp-coverage-badge {
    font-size: 1.3rem;
    font-weight: 900;
    text-align: center;
    background: linear-gradient(135deg, var(--cyan), var(--mint));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

/* ghost sale */
.cmp-ghost-sale {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
    width: 100%;
}
.cmp-sale-bubble {
    background: rgba(52, 211, 153, 0.07);
    border: 1px solid rgba(52, 211, 153, 0.18);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mint);
}
.cmp-ghost-after {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.cmp-ltv-drop {
    font-size: 0.62rem;
    color: rgba(239, 68, 68, 0.6);
    font-weight: 700;
    background: rgba(239, 68, 68, 0.06);
    padding: 4px 10px;
    border-radius: 6px;
}

/* ltv chain */
.cmp-ltv-chain {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.cmp-ltv-node {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
}
.cmp-ltv-node.first {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.45);
}
.cmp-ltv-node.mid {
    background: rgba(0, 212, 255, 0.07);
    color: var(--cyan);
}
.cmp-ltv-node.last {
    background: rgba(52, 211, 153, 0.12);
    color: var(--mint);
    border: 1px solid rgba(52, 211, 153, 0.25);
}
.cmp-ltv-arrow-anim {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1rem;
    animation: ltvArrow 1.5s ease-in-out infinite;
}
@keyframes ltvArrow {
    0%,
    100% {
        opacity: 0.3;
        transform: translateX(0);
    }
    50% {
        opacity: 0.9;
        transform: translateX(3px);
    }
}

/* invoice wrap */
.cmp-invoice-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}
.cmp-invoice-card {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 12px;
    padding: 16px 28px;
    text-align: center;
    animation: invoicePulse 3s ease-in-out infinite;
}
.cmp-invoice-amount {
    font-size: 1.5rem;
    font-weight: 900;
    color: rgba(239, 68, 68, 0.65);
    letter-spacing: -0.04em;
}
.cmp-invoice-sub {
    font-size: 0.58rem;
    color: rgba(239, 68, 68, 0.4);
    margin-top: 4px;
}
@keyframes invoicePulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* aligned wrap */
.cmp-aligned-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 100%;
}
.cmp-aligned-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cmp-you,
.cmp-us {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 8px;
}
.cmp-you {
    background: rgba(52, 211, 153, 0.08);
    color: var(--mint);
}
.cmp-us {
    background: rgba(0, 212, 255, 0.08);
    color: var(--cyan);
}
.cmp-aligned-eq {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
    font-size: 0.9rem;
}
.cmp-aligned-note {
    font-size: 0.62rem;
    color: rgba(52, 211, 153, 0.55);
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .cmp-panel.active {
        grid-template-columns: 1fr;
    }
    .cmp-divider {
        display: none;
    }
}

/* ============================================================
   DASHBOARD TABS — tab content show/hide + sub-elements
   ============================================================ */
.ag-tab-content {
    display: none;
    min-height: 140px;
}
.ag-tab-content.active {
    display: block;
    min-height: 140px;
}
.ag-tab-chatters-list,
.ag-tab-fans-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0 4px;
}
.ag-tab-chatter-row,
.ag-tab-fan-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}
.ag-tc-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    border: 1.5px solid var(--tca, #00d4ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--tca, #00d4ff);
    flex-shrink: 0;
}
.ag-tf-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    border: 1.5px solid var(--tfa, #00d4ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--tfa, #00d4ff);
    flex-shrink: 0;
}
.ag-tc-info,
.ag-tf-info {
    flex: 1;
    min-width: 0;
}
.ag-tc-name,
.ag-tf-name {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
}
.ag-tc-creator,
.ag-tf-tag {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.32);
}
.ag-tc-status {
    font-size: 0.58rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.ag-tc-status.online {
    color: var(--mint);
}
.ag-tc-status.online span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mint);
    animation: onlinePing 2s ease-in-out infinite;
}
@keyframes onlinePing {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}
.ag-tf-spend {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--mint);
    flex-shrink: 0;
}

/* ============================================================
   DASHBOARD CARD — doubled size
   ============================================================ */
.ag-dashboard-card {
    min-width: 380px;
    max-width: 520px;
}
@media (max-width: 400px) {
    .ag-dashboard-card {
        min-width: 0;
        width: 100%;
    }
}
.ag-card-rev-num {
    font-size: 2.2rem;
}
.ag-card-tabs {
    padding: 8px 14px 10px;
}
.ag-card-tab {
    font-size: 0.75rem;
    padding: 6px 14px;
}
.ag-card-m-val {
    font-size: 1.35rem;
}
.ag-card-m-lbl {
    font-size: 0.68rem;
}
.ag-event-row {
    padding: 6px 0;
}
.ag-event-name {
    font-size: 0.75rem;
}

/* ============================================================
   NO-SELECT / NO-POINTER on decorative & animation elements
   ============================================================ */
.svc-num,
.cp-camera,
.og-arrow,
.ch-bubble span,
.tr-top-label,
.tr-bottom-label,
.bd-center-logo,
.bd-swatch,
.da-sparkline,
.process-card-right,
.process-card-right *,
.njm-roles-grid .njm-role-icon,
.ag-pipe-arrow,
.cmp-anim-zone *,
.sol-laptop,
.sol-laptop *,
.weapon-ring-wrap,
.weapon-particles,
.wp {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}
svg text,
svg rect,
svg circle,
svg path,
svg line,
svg polyline,
svg polygon {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}
.svc-anim *,
.og-bars,
.ch-bubble,
.tr-dot,
.tr-funnel,
.cp-orbit,
.bd-ring,
.bd-ring-outer,
.da-row {
    pointer-events: none;
}
img {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.ofc-ppv-caption {
    filter: blur(5px);
    user-select: none;
    -webkit-user-select: none;
}

/* Above-fold performance: nav + hero-ag content visible immediately */
nav,
#hero-ag .hero-content > * {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

/* Mobile CSS-only fallback: don't wait for JS/body.loaded on mobile */
@media (max-width: 768px) {
    .entrance {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    nav {
        opacity: 1 !important;
        animation: none !important;
    }
    .aurora,
    #beamsCanvas,
    #shootingStars,
    .bg-orbs {
        opacity: 1 !important;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .ag-compare-col .ag-compare-item {
        opacity: 1 !important;
        transform: none !important;
    }
    .ag-pipe-card {
        opacity: 1 !important;
        transform: none !important;
    }
    .ag-proc-item {
        opacity: 1 !important;
        transform: none !important;
    }
    .ag-term-line {
        opacity: 1 !important;
        transform: none !important;
    }
    .ofc-bubble {
        opacity: 1 !important;
        transform: none !important;
    }
    .ag-spark-area,
    .ag-spark-dot,
    .ag-pipe-rail-dot {
        opacity: 1 !important;
    }
    .ag-chatter-card.reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    .ag-sbar {
        transform: scaleY(1) !important;
    }
    .ag-tier-fill {
        transform: scaleX(1) !important;
    }
    .ag-ring-arc {
        stroke-dashoffset: 51 !important;
    }
    .ag-spark-line {
        stroke-dashoffset: 0 !important;
    }
}