/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
    :root {
        --c-bg: #070B14;
        --c-surface: #0D1525;
        --c-surface2: #111D33;
        --c-border: rgba(255, 255, 255, 0.07);
        --c-border2: rgba(255, 255, 255, 0.12);
        --c-primary: #3B82F6;
        --c-primary-glow: rgba(59, 130, 246, 0.25);
        --c-accent: #06E5A3;
        --c-accent-glow: rgba(6, 229, 163, 0.2);
        --c-cta: #F97316;
        --c-cta-glow: rgba(249, 115, 22, 0.35);
        --c-text: #E2E8F0;
        --c-muted: #64748B;
        --c-muted2: #94A3B8;
        --font-display: 'Syne', sans-serif;
        --font-body: 'DM Sans', sans-serif;
        --radius-sm: 8px;
        --radius: 14px;
        --radius-lg: 20px;
        --radius-xl: 28px;
        --ease: cubic-bezier(0.23, 1, 0.32, 1);
        --t-fast: 0.25s var(--ease);
        --t-mid: 0.4s var(--ease);
        --t-slow: 0.7s var(--ease);
    }

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

    html {
        scroll-behavior: smooth;
        font-size: 16px;
    }

    body {
        background-color: var(--c-bg);
        color: var(--c-text);
        font-family: var(--font-body);
        font-weight: 400;
        line-height: 1.7;
        overflow-x: hidden;
    }

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

    /* ============================================================
   TYPOGRAPHY
   ============================================================ */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-display);
        font-weight: 700;
        line-height: 1.12;
        color: #fff;
    }

    h1 {
        font-size: clamp(2.8rem, 6vw, 5.2rem);
        letter-spacing: -0.035em;
    }

    h2 {
        font-size: clamp(2rem, 4vw, 3.4rem);
        letter-spacing: -0.025em;
    }

    h3 {
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    p {
        color: var(--c-muted2);
    }

    .gradient-text {
        background: linear-gradient(130deg, #ffffff 0%, #06E5A3 55%, #3B82F6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .label-tag {
        display: inline-block;
        font-family: var(--font-display);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--c-accent);
    }

    .section-label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .section-label::before,
    .section-label::after {
        content: '';
        display: block;
        width: 30px;
        height: 1px;
        background: var(--c-accent);
        opacity: 0.5;
    }

    /* ============================================================
   BUTTONS
   ============================================================ */
    .btn-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--c-cta);
        color: #fff;
        border: none;
        padding: 0.85rem 2.1rem;
        border-radius: 50px;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.92rem;
        letter-spacing: 0.01em;
        cursor: pointer;
        text-decoration: none;
        transition: transform var(--t-fast), box-shadow var(--t-fast);
        position: relative;
        overflow: hidden;
        white-space: nowrap;
    }

    .btn-cta::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .btn-cta:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px var(--c-cta-glow);
        color: #fff;
    }

    .btn-cta:hover::before {
        opacity: 1;
    }

    .btn-outline {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: transparent;
        color: var(--c-text);
        border: 1px solid var(--c-border2);
        padding: 0.82rem 1.9rem;
        border-radius: 50px;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 0.92rem;
        cursor: pointer;
        text-decoration: none;
        transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
        white-space: nowrap;
    }

    .btn-outline:hover {
        border-color: var(--c-primary);
        background: rgba(59, 130, 246, 0.08);
        color: #fff;
    }

    .btn-sm {
        padding: 0.55rem 1.3rem !important;
        font-size: 0.82rem !important;
    }

    /* ============================================================
   NAVBAR
   ============================================================ */
    #navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: 0;
        background: rgba(7, 11, 20, 0.6);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-bottom: 1px solid var(--c-border);
        transition: background var(--t-mid), padding var(--t-mid);
    }

    #navbar.scrolled {
        background: rgba(7, 11, 20, 0.96);
        border-bottom-color: var(--c-border2);
    }

    .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
        padding: 0 1rem;
    }

    .nav-brand {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.45rem;
        letter-spacing: -0.03em;
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
    }

    .nav-brand .brand-dot {
        color: var(--c-accent);
    }

    .nav-menu {
        display: flex;
        align-items: center;
        list-style: none;
        gap: 0.2rem;
        margin: 0;
        padding: 0;
    }

    .nav-menu>li {
        position: relative;
    }

    .nav-link-item {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        color: var(--c-muted2);
        font-size: 0.88rem;
        font-weight: 500;
        padding: 0.45rem 0.9rem;
        border-radius: var(--radius-sm);
        text-decoration: none;
        cursor: pointer;
        transition: color var(--t-fast), background var(--t-fast);
        white-space: nowrap;
        background: transparent;
        border: none;
        font-family: var(--font-body);
    }

    .nav-link-item svg {
        width: 13px;
        height: 13px;
        transition: transform 0.25s;
    }

    .nav-link-item:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
    }

    .nav-menu>li.active>.nav-link-item {
        color: #fff;
        background: rgba(255, 255, 255, 0.06);
    }

    /* Active indicator dot under the link */
    .nav-menu>li.active>.nav-link-item::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--c-accent);
        border-radius: 50%;
    }

    .nav-link-item {
        position: relative;
    }

    .nav-menu>li:hover>.nav-link-item svg {
        transform: rotate(180deg);
    }

    .dropdown-panel {
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius-lg);
        padding: 1.2rem;
        min-width: 520px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
    }

    .dropdown-panel::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        width: 12px;
        height: 12px;
        background: var(--c-surface);
        border-left: 1px solid var(--c-border2);
        border-top: 1px solid var(--c-border2);
        transform: translateX(-50%) rotate(45deg);
    }

    .nav-menu>li:hover>.dropdown-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transform: translateX(-50%) translateY(0);
    }

    .dropdown-panel.sm {
        min-width: 220px;
    }

    .dropdown-panel.sm .drop-grid {
        grid-template-columns: 1fr;
    }

    .drop-section-title {
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--c-muted);
        margin-bottom: 0.7rem;
        padding-left: 0.2rem;
    }

    .drop-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .drop-item {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 0.9rem;
        border-radius: var(--radius);
        text-decoration: none;
        transition: background var(--t-fast);
        border: 1px solid transparent;
    }

    .drop-item:hover {
        background: rgba(59, 130, 246, 0.07);
        border-color: rgba(59, 130, 246, 0.15);
    }

    .drop-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .drop-text-title {
        font-family: var(--font-display);
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--c-text);
        line-height: 1.3;
    }

    .drop-text-sub {
        font-size: 0.74rem;
        color: var(--c-muted);
        margin-top: 0.15rem;
        line-height: 1.4;
    }

    .drop-item:hover .drop-text-title {
        color: #fff;
    }

    .nav-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
    }

    .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
    }

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--c-text);
        border-radius: 2px;
        transition: var(--t-fast);
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* ============================================================
   MOBILE MENU — FIXED: scroll support + full visibility
   ============================================================ */
    .mobile-menu {
        display: none;
        flex-direction: column;
        background: var(--c-surface);
        border-top: 1px solid var(--c-border);
        padding: 1rem 1.5rem 1.5rem;
        gap: 0.25rem;

        /* FIX 1: scrollable when content overflows viewport */
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        /* FIX 2: smooth momentum scroll on iOS */
        -webkit-overflow-scrolling: touch;

        /* FIX 3: nice custom scrollbar */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    }

    .mobile-menu::-webkit-scrollbar {
        width: 4px;
    }

    .mobile-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    .mobile-menu::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }

    .mobile-menu.open {
        display: flex;
    }

    .mob-link {
        color: var(--c-muted2);
        text-decoration: none;
        padding: 0.7rem 0.5rem;
        font-size: 0.95rem;
        font-weight: 500;
        border-bottom: 1px solid var(--c-border);
        transition: color var(--t-fast);
    }

    .mob-link:hover {
        color: #fff;
    }

    .mob-link.label {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--c-accent);
        padding-top: 1rem;
        border-bottom: none;
    }

    .mob-actions {
        display: flex;
        gap: 0.75rem;
        margin-top: 1rem;
        /* FIX 4: ensure buttons visible at bottom */
        padding-bottom: 1rem;
        flex-wrap: wrap;
    }

    @media (max-width: 991px) {

        .nav-menu,
        .nav-actions {
            display: none;
        }

        .hamburger {
            display: flex;
        }
    }

    /* ============================================================
   HERO
   ============================================================ */
    #hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        padding-top: 72px;
    }

    #hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
        background-size: 42px 42px;
        pointer-events: none;
    }

    #hero::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 220px;
        background: linear-gradient(to top, var(--c-bg), transparent);
        pointer-events: none;
        z-index: 1;
    }

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

    .orb-blue {
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.16), transparent 68%);
        top: -180px;
        left: -200px;
    }

    .orb-mint {
        width: 550px;
        height: 550px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.11), transparent 68%);
        bottom: -120px;
        right: -80px;
    }

    .orb-orange {
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(249, 115, 22, 0.07), transparent 68%);
        top: 30%;
        right: 15%;
    }

    .hero-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 5rem 0 6rem;
    }

    .hero-announcement {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        background: rgba(6, 229, 163, 0.08);
        border: 1px solid rgba(6, 229, 163, 0.22);
        border-radius: 50px;
        padding: 0.38rem 1rem 0.38rem 0.5rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--c-muted2);
        margin-bottom: 2rem;
        cursor: pointer;
        transition: border-color var(--t-fast), background var(--t-fast);
    }

    .hero-announcement:hover {
        border-color: var(--c-accent);
        background: rgba(6, 229, 163, 0.12);
    }

    .badge-pill {
        background: var(--c-accent);
        color: #070B14;
        border-radius: 50px;
        padding: 0.18rem 0.65rem;
        font-family: var(--font-display);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.05em;
    }

    .pulse-dot {
        width: 7px;
        height: 7px;
        background: var(--c-accent);
        border-radius: 50%;
        flex-shrink: 0;
        animation: pulseAnim 2s ease infinite;
    }

    @keyframes pulseAnim {

        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(6, 229, 163, 0.6);
        }

        50% {
            box-shadow: 0 0 0 6px rgba(6, 229, 163, 0);
        }
    }

    .hero-headline {
        max-width: 700px;
        margin-bottom: 1.5rem;
    }

    .hero-sub {
        font-size: 1.1rem;
        font-weight: 300;
        color: var(--c-muted2);
        max-width: 500px;
        margin-bottom: 2.4rem;
        line-height: 1.75;
    }

    .hero-ctas {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
        margin-bottom: 2.5rem;
    }

    .hero-trust {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: var(--c-muted);
        flex-wrap: wrap;
    }

    .trust-sep {
        color: var(--c-border2);
    }

    .avatar-stack {
        display: flex;
        align-items: center;
    }

    .avatar-stack .av {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid var(--c-bg);
        margin-left: -8px;
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .avatar-stack .av:first-child {
        margin-left: 0;
    }

    .hero-dashboard {
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius-xl);
        padding: 1.6rem;
        position: relative;
        overflow: hidden;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
    }

    .hero-dashboard::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1.5px;
        background: linear-gradient(90deg, transparent 0%, var(--c-primary) 30%, var(--c-accent) 70%, transparent 100%);
    }

    .dash-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.2rem;
    }

    .dash-title {
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--c-muted2);
        letter-spacing: 0.05em;
    }

    .dash-live {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--c-accent);
        font-family: var(--font-display);
    }

    .dash-live .pulse-dot {
        width: 6px;
        height: 6px;
    }

    .dash-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        margin-bottom: 1.2rem;
    }

    .dash-metric {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        padding: 0.9rem 0.8rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        transition: border-color var(--t-fast);
    }

    .dash-metric:hover {
        border-color: rgba(59, 130, 246, 0.25);
    }

    .dash-metric-value {
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.3rem;
    }

    .dash-metric-value.accent {
        color: var(--c-accent);
    }

    .dash-metric-value.orange {
        color: var(--c-cta);
    }

    .dash-metric-label {
        font-size: 0.68rem;
        color: var(--c-muted);
        font-weight: 500;
    }

    .dash-metric-change {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        font-size: 0.6rem;
        color: var(--c-accent);
        font-weight: 700;
        font-family: var(--font-display);
    }

    .dash-chart-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.4rem;
    }

    .dash-chart-label span {
        font-size: 0.7rem;
        color: var(--c-muted);
    }

    .bar-chart-wrap {
        display: flex;
        align-items: flex-end;
        gap: 5px;
        height: 70px;
        padding: 0 0.2rem;
    }

    .bc-bar {
        flex: 1;
        border-radius: 4px 4px 0 0;
        transition: opacity var(--t-fast);
    }

    .bc-bar:hover {
        opacity: 0.85;
    }

    .bc-bar.blue {
        background: linear-gradient(180deg, var(--c-primary), rgba(59, 130, 246, 0.2));
    }

    .bc-bar.mint {
        background: linear-gradient(180deg, var(--c-accent), rgba(6, 229, 163, 0.2));
    }

    .bc-bar.orange {
        background: linear-gradient(180deg, var(--c-cta), rgba(249, 115, 22, 0.2));
    }

    .dash-feed {
        margin-top: 1.1rem;
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
    }

    .feed-item {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.5rem 0.7rem;
        background: rgba(255, 255, 255, 0.025);
        border-radius: var(--radius-sm);
        border: 1px solid transparent;
        transition: border-color var(--t-fast);
    }

    .feed-item:hover {
        border-color: var(--c-border2);
    }

    .feed-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .feed-text {
        font-size: 0.75rem;
        color: var(--c-muted2);
        flex: 1;
    }

    .feed-text strong {
        color: var(--c-text);
        font-weight: 600;
    }

    .feed-time {
        font-size: 0.68rem;
        color: var(--c-muted);
        font-family: var(--font-display);
    }

    .hero-notif {
        position: absolute;
        bottom: -1.5rem;
        left: -2.5rem;
        background: var(--c-surface2);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius);
        padding: 0.7rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
        animation: floatNotif 4s ease-in-out infinite;
        min-width: 210px;
    }

    @keyframes floatNotif {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-8px);
        }
    }

    .notif-icon {
        width: 34px;
        height: 34px;
        border-radius: var(--radius-sm);
        background: rgba(6, 229, 163, 0.15);
        border: 1px solid rgba(6, 229, 163, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .notif-title {
        font-size: 0.78rem;
        font-weight: 700;
        color: #fff;
        font-family: var(--font-display);
    }

    .notif-sub {
        font-size: 0.68rem;
        color: var(--c-muted);
    }

    .hero-badge-float {
        position: absolute;
        top: -1rem;
        right: -1.5rem;
        background: var(--c-surface2);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius);
        padding: 0.65rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
        animation: floatNotif 3.5s ease-in-out infinite reverse;
    }

    .badge-float-num {
        font-family: var(--font-display);
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--c-cta);
    }

    .badge-float-label {
        font-size: 0.7rem;
        color: var(--c-muted2);
    }

    @media (max-width: 991px) {

        .hero-notif,
        .hero-badge-float {
            display: none;
        }

        .hero-dashboard {
            margin-top: 3rem;
        }
    }

    @media (max-width: 575px) {
        .dash-metrics {
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
        }

        .dash-metric-value {
            font-size: 1.2rem;
        }
    }

    /* ============================================================
   LOGO MARQUEE
   ============================================================ */
    .marquee-section {
        padding: 1.5rem 0;
        border-top: 1px solid var(--c-border);
        border-bottom: 1px solid var(--c-border);
        background: rgba(255, 255, 255, 0.015);
        overflow: hidden;
    }

    .marquee-track {
        display: flex;
        width: max-content;
        animation: marqueeScroll 22s linear infinite;
        gap: 0;
    }

    .marquee-item {
        display: flex;
        align-items: center;
        gap: 2.2rem;
        padding: 0 2.2rem;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.82rem;
        letter-spacing: 0.06em;
        color: var(--c-muted);
        white-space: nowrap;
        border-right: 1px solid var(--c-border);
    }

    .marquee-item:hover {
        color: var(--c-text);
    }

    @keyframes marqueeScroll {
        to {
            transform: translateX(-50%);
        }
    }

    /* ============================================================
   FEATURES SECTION
   ============================================================ */
    #features {
        padding: 7rem 0;
        position: relative;
        overflow: hidden;
    }

    #features::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 900px;
        height: 900px;
        background: radial-gradient(ellipse, rgba(59, 130, 246, 0.045) 0%, transparent 65%);
        pointer-events: none;
    }

    .section-heading {
        max-width: 560px;
        margin-bottom: 1rem;
    }

    .section-sub {
        font-size: 1rem;
        color: var(--c-muted2);
        max-width: 480px;
        margin-bottom: 3.5rem;
        line-height: 1.75;
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

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

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

    .feat-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 1.8rem;
        position: relative;
        overflow: hidden;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
        cursor: default;
    }

    .feat-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), transparent);
        opacity: 0;
        transition: opacity var(--t-mid);
    }

    .feat-card:hover {
        border-color: rgba(59, 130, 246, 0.3);
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.1);
    }

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

    .feat-card.featured {
        grid-column: span 2;
        background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface2) 100%);
        border-color: rgba(59, 130, 246, 0.2);
    }

    @media (max-width: 991px) {
        .feat-card.featured {
            grid-column: span 1;
        }
    }

    .feat-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 1.2rem;
    }

    .feat-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    .feat-icon.blue {
        background: rgba(59, 130, 246, 0.12);
        border: 1px solid rgba(59, 130, 246, 0.25);
    }

    .feat-icon.mint {
        background: rgba(6, 229, 163, 0.12);
        border: 1px solid rgba(6, 229, 163, 0.25);
    }

    .feat-icon.orange {
        background: rgba(249, 115, 22, 0.12);
        border: 1px solid rgba(249, 115, 22, 0.25);
    }

    .feat-icon.purple {
        background: rgba(139, 92, 246, 0.12);
        border: 1px solid rgba(139, 92, 246, 0.25);
    }

    .feat-icon.amber {
        background: rgba(245, 158, 11, 0.12);
        border: 1px solid rgba(245, 158, 11, 0.25);
    }

    .feat-badge {
        font-family: var(--font-display);
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.22rem 0.6rem;
        border-radius: 50px;
    }

    .feat-badge.new {
        background: rgba(6, 229, 163, 0.15);
        color: var(--c-accent);
        border: 1px solid rgba(6, 229, 163, 0.25);
    }

    .feat-badge.hot {
        background: rgba(249, 115, 22, 0.15);
        color: var(--c-cta);
        border: 1px solid rgba(249, 115, 22, 0.25);
    }

    .feat-title {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.5rem;
        line-height: 1.3;
    }

    .feat-desc {
        font-size: 0.85rem;
        color: var(--c-muted2);
        line-height: 1.65;
        margin-bottom: 1.2rem;
    }

    .feat-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }

    .feat-list li {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.8rem;
        color: var(--c-muted2);
    }

    .feat-list li::before {
        content: '✓';
        width: 18px;
        height: 18px;
        background: rgba(6, 229, 163, 0.12);
        border: 1px solid rgba(6, 229, 163, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        color: var(--c-accent);
        flex-shrink: 0;
        font-weight: 800;
    }

    .feat-mini-ui {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        padding: 1rem;
        margin-top: 1.3rem;
    }

    .mini-ui-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--c-border);
    }

    .mini-ui-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .mini-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-family: var(--font-display);
        font-size: 0.6rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mini-info {
        flex: 1;
        min-width: 0;
    }

    .mini-name {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--c-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mini-email {
        font-size: 0.68rem;
        color: var(--c-muted);
    }

    .mini-status {
        font-size: 0.65rem;
        font-weight: 700;
        font-family: var(--font-display);
        padding: 0.18rem 0.55rem;
        border-radius: 50px;
        flex-shrink: 0;
    }

    .mini-status.sent {
        background: rgba(59, 130, 246, 0.12);
        color: var(--c-primary);
    }

    .mini-status.opened {
        background: rgba(6, 229, 163, 0.12);
        color: var(--c-accent);
    }

    .mini-status.replied {
        background: rgba(249, 115, 22, 0.12);
        color: var(--c-cta);
    }

    .steps-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        margin-top: 5rem;
        position: relative;
    }

    .steps-row::before {
        content: '';
        position: absolute;
        top: 29px;
        left: 12%;
        width: 76%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-border2), var(--c-border2), transparent);
        z-index: 0;
    }

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

        .steps-row::before {
            display: none;
        }
    }

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

    .step-num {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        border: 1px solid var(--c-border2);
        background: var(--c-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.2rem;
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--c-primary);
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.05);
        transition: box-shadow var(--t-fast), border-color var(--t-fast);
    }

    .step-item:hover .step-num {
        border-color: var(--c-primary);
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.08), 0 0 20px rgba(59, 130, 246, 0.2);
    }

    .step-title {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.4rem;
    }

    .step-desc {
        font-size: 0.78rem;
        color: var(--c-muted);
        line-height: 1.6;
    }

    /* ============================================================
   TESTIMONIALS
   ============================================================ */
    /* ============================================================
   LIVE DEMO SECTION
   ============================================================ */
    #live-demo {
        padding: 7rem 0;
        background: var(--c-surface);
        position: relative;
        overflow: hidden;
    }

    #live-demo::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-border2), transparent);
    }

    #live-demo::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-border2), transparent);
    }

    /* vs badge */
    .vs-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        background: rgba(249, 115, 22, 0.1);
        border: 1px solid rgba(249, 115, 22, 0.25);
        border-radius: 50px;
        padding: 0.28rem 0.9rem;
        font-family: var(--font-display);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        color: var(--c-cta);
        text-transform: uppercase;
        margin-bottom: 1rem;
    }

    /* Tab switcher */
    .demo-tabs {
        display: inline-flex;
        background: var(--c-bg);
        border: 1px solid var(--c-border2);
        border-radius: 50px;
        padding: 0.3rem;
        gap: 0.2rem;
        margin-bottom: 2.5rem;
    }

    .demo-tab {
        font-family: var(--font-display);
        font-size: 0.82rem;
        font-weight: 700;
        padding: 0.5rem 1.4rem;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        transition: background var(--t-fast), color var(--t-fast);
        background: transparent;
        color: var(--c-muted);
        white-space: nowrap;
    }

    .demo-tab.active {
        background: var(--c-primary);
        color: #fff;
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
    }

    /* Main demo shell */
    .demo-shell {
        background: var(--c-bg);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
        position: relative;
    }

    .demo-shell::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--c-primary), var(--c-accent), var(--c-cta));
    }

    /* Browser chrome bar */
    .demo-browser-bar {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.75rem 1.2rem;
        background: rgba(255, 255, 255, 0.03);
        border-bottom: 1px solid var(--c-border);
    }

    .browser-dots {
        display: flex;
        gap: 5px;
        flex-shrink: 0;
    }

    .browser-dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .browser-dots span:nth-child(1) {
        background: #FF5F57;
    }

    .browser-dots span:nth-child(2) {
        background: #FEBC2E;
    }

    .browser-dots span:nth-child(3) {
        background: #28C840;
    }

    .browser-url {
        flex: 1;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-sm);
        padding: 0.3rem 0.9rem;
        font-size: 0.72rem;
        color: var(--c-muted);
        font-family: 'Courier New', monospace;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .browser-url .url-lock {
        color: var(--c-accent);
        font-size: 0.7rem;
    }

    /* Demo content panels */
    .demo-panel {
        display: none;
    }

    .demo-panel.active {
        display: block;
    }

    /* ---- Panel 1: Campaign Builder ---- */
    .demo-body {
        display: grid;
        grid-template-columns: 220px 1fr;
        min-height: 420px;
    }

    @media (max-width: 767px) {
        .demo-body {
            grid-template-columns: 1fr;
        }
    }

    .demo-sidebar {
        border-right: 1px solid var(--c-border);
        padding: 1rem 0;
        background: rgba(255, 255, 255, 0.015);
    }

    .demo-sidebar-title {
        font-family: var(--font-display);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--c-muted);
        padding: 0 1rem 0.5rem;
    }

    .demo-sidebar-item {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--c-muted2);
        cursor: pointer;
        transition: background var(--t-fast), color var(--t-fast);
        border-left: 2px solid transparent;
    }

    .demo-sidebar-item:hover {
        background: rgba(255, 255, 255, 0.03);
        color: #fff;
    }

    .demo-sidebar-item.active {
        background: rgba(59, 130, 246, 0.08);
        color: #fff;
        border-left-color: var(--c-primary);
    }

    .demo-sidebar-item .sbi-icon {
        font-size: 0.95rem;
    }

    .demo-sidebar-item .sbi-count {
        margin-left: auto;
        font-family: var(--font-display);
        font-size: 0.62rem;
        font-weight: 700;
        background: rgba(6, 229, 163, 0.15);
        color: var(--c-accent);
        padding: 0.1rem 0.45rem;
        border-radius: 50px;
    }

    .demo-main {
        padding: 1.5rem;
        overflow: hidden;
    }

    .demo-main-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.2rem;
    }

    .demo-main-title {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
    }

    .demo-run-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: var(--c-accent);
        color: #070B14;
        border: none;
        padding: 0.45rem 1.1rem;
        border-radius: 50px;
        font-family: var(--font-display);
        font-size: 0.72rem;
        font-weight: 800;
        cursor: pointer;
        animation: pulseBtn 2.5s ease infinite;
    }

    @keyframes pulseBtn {

        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(6, 229, 163, 0.5);
        }

        50% {
            box-shadow: 0 0 0 8px rgba(6, 229, 163, 0);
        }
    }

    /* Email sequence steps */
    .seq-steps {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .seq-step {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 0.8rem 1rem;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        transition: border-color var(--t-fast);
        position: relative;
    }

    .seq-step:hover {
        border-color: var(--c-border2);
    }

    .seq-step.sending {
        border-color: rgba(6, 229, 163, 0.3);
        background: rgba(6, 229, 163, 0.04);
    }

    .seq-step.replied {
        border-color: rgba(249, 115, 22, 0.3);
        background: rgba(249, 115, 22, 0.04);
    }

    .seq-step-num {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1.5px solid var(--c-border2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 800;
        color: var(--c-muted2);
        flex-shrink: 0;
    }

    .seq-step.sending .seq-step-num {
        border-color: var(--c-accent);
        color: var(--c-accent);
        background: rgba(6, 229, 163, 0.1);
    }

    .seq-step.replied .seq-step-num {
        border-color: var(--c-cta);
        color: var(--c-cta);
        background: rgba(249, 115, 22, 0.1);
    }

    .seq-step-content {
        flex: 1;
        min-width: 0;
    }

    .seq-step-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--c-text);
        margin-bottom: 0.15rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .seq-step-sub {
        font-size: 0.68rem;
        color: var(--c-muted);
    }

    .seq-tag {
        font-family: var(--font-display);
        font-size: 0.58rem;
        font-weight: 800;
        padding: 0.1rem 0.45rem;
        border-radius: 50px;
        letter-spacing: 0.05em;
    }

    .seq-tag.ai {
        background: rgba(139, 92, 246, 0.15);
        color: #A78BFA;
        border: 1px solid rgba(139, 92, 246, 0.25);
    }

    .seq-tag.live {
        background: rgba(6, 229, 163, 0.15);
        color: var(--c-accent);
        border: 1px solid rgba(6, 229, 163, 0.25);
    }

    .seq-tag.done {
        background: rgba(249, 115, 22, 0.15);
        color: var(--c-cta);
        border: 1px solid rgba(249, 115, 22, 0.25);
    }

    .seq-step-stat {
        font-family: var(--font-display);
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--c-muted2);
        white-space: nowrap;
    }

    .seq-connector {
        width: 1px;
        height: 12px;
        background: var(--c-border2);
        margin: 0 auto;
        margin-left: 23px;
    }

    /* ---- Panel 2: AI Writer live ---- */
    .ai-writer-panel {
        padding: 1.5rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
        min-height: 420px;
    }

    @media (max-width: 767px) {
        .ai-writer-panel {
            grid-template-columns: 1fr;
        }
    }

    .aw-box {
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        padding: 1rem;
    }

    .aw-box-label {
        font-family: var(--font-display);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--c-muted);
        margin-bottom: 0.8rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .aw-box-label .aw-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--c-accent);
        animation: pulseAnim 2s ease infinite;
    }

    .aw-prospect-row {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.6rem 0.7rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-sm);
        margin-bottom: 0.5rem;
        cursor: pointer;
        transition: border-color var(--t-fast);
    }

    .aw-prospect-row:hover {
        border-color: var(--c-primary);
    }

    .aw-prospect-row.selected {
        border-color: var(--c-accent);
        background: rgba(6, 229, 163, 0.05);
    }

    .aw-av {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-family: var(--font-display);
        font-size: 0.6rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .aw-name {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--c-text);
    }

    .aw-company {
        font-size: 0.65rem;
        color: var(--c-muted);
    }

    .aw-score {
        margin-left: auto;
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 800;
        color: var(--c-accent);
    }

    .aw-email-preview {
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-sm);
        padding: 0.8rem;
        font-size: 0.75rem;
        color: var(--c-muted2);
        line-height: 1.7;
        position: relative;
        overflow: hidden;
    }

    .aw-email-preview .aw-subject {
        font-weight: 700;
        color: var(--c-text);
        margin-bottom: 0.4rem;
        font-size: 0.78rem;
    }

    .aw-cursor {
        display: inline-block;
        width: 2px;
        height: 13px;
        background: var(--c-accent);
        margin-left: 1px;
        vertical-align: middle;
        animation: blink 1s step-end infinite;
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

    .aw-highlight {
        color: var(--c-accent);
        font-weight: 600;
    }

    .aw-stats-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        margin-top: 0.8rem;
    }

    .aw-stat {
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-sm);
        padding: 0.6rem 0.5rem;
        text-align: center;
    }

    .aw-stat-val {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
        color: #fff;
    }

    .aw-stat-val.green {
        color: var(--c-accent);
    }

    .aw-stat-val.orange {
        color: var(--c-cta);
    }

    .aw-stat-label {
        font-size: 0.6rem;
        color: var(--c-muted);
        margin-top: 0.1rem;
    }

    /* ---- Panel 3: vs Snov.io comparison ---- */
    .vs-panel {
        padding: 1.5rem;
    }

    .vs-table {
        width: 100%;
        border-collapse: collapse;
    }

    .vs-table th {
        padding: 0.7rem 1rem;
        font-family: var(--font-display);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-align: center;
        border-bottom: 1px solid var(--c-border2);
    }

    .vs-table th:first-child {
        text-align: left;
        color: var(--c-muted);
    }

    .vs-table th.us {
        color: var(--c-accent);
        background: rgba(6, 229, 163, 0.06);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        position: relative;
    }

    .vs-table th.us::before {
        content: '🏆 WINNER';
        position: absolute;
        top: -22px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.55rem;
        letter-spacing: 0.12em;
        color: var(--c-accent);
        white-space: nowrap;
    }

    .vs-table th.them {
        color: var(--c-muted);
    }

    .vs-table td {
        padding: 0.7rem 1rem;
        font-size: 0.8rem;
        color: var(--c-muted2);
        border-bottom: 1px solid var(--c-border);
        text-align: center;
        vertical-align: middle;
    }

    .vs-table td:first-child {
        text-align: left;
        font-weight: 600;
        color: var(--c-text);
        font-size: 0.78rem;
    }

    .vs-table td.us-col {
        background: rgba(6, 229, 163, 0.04);
        font-weight: 700;
    }

    .vs-table tr:last-child td {
        border-bottom: none;
    }

    .vs-table tr:hover td {
        background: rgba(255, 255, 255, 0.02);
    }

    .vs-table tr:hover td.us-col {
        background: rgba(6, 229, 163, 0.07);
    }

    .vc {
        color: var(--c-accent);
        font-size: 1rem;
    }

    .vx {
        color: #EF4444;
        font-size: 0.85rem;
    }

    .vwarn {
        color: #F59E0B;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .vs-verdict {
        margin-top: 1.2rem;
        background: linear-gradient(135deg, rgba(6, 229, 163, 0.08), rgba(59, 130, 246, 0.06));
        border: 1px solid rgba(6, 229, 163, 0.2);
        border-radius: var(--radius);
        padding: 0.9rem 1.2rem;
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }

    .vs-verdict-icon {
        font-size: 1.4rem;
        flex-shrink: 0;
    }

    .vs-verdict-text {
        font-size: 0.82rem;
        color: var(--c-muted2);
        line-height: 1.55;
    }

    .vs-verdict-text strong {
        color: #fff;
    }

    /* Demo side stats */
    .demo-side-stats {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
    }

    .dss-card {
        background: var(--c-bg);
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        padding: 1rem 1.1rem;
        transition: border-color var(--t-fast), transform var(--t-fast);
    }

    .dss-card:hover {
        border-color: var(--c-border2);
        transform: translateX(4px);
    }

    .dss-card.hot {
        border-color: rgba(249, 115, 22, 0.25);
    }

    .dss-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }

    .dss-label {
        font-size: 0.72rem;
        color: var(--c-muted);
        font-weight: 500;
    }

    .dss-tag {
        font-family: var(--font-display);
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        padding: 0.1rem 0.5rem;
        border-radius: 50px;
    }

    .dss-tag.win {
        background: rgba(6, 229, 163, 0.12);
        color: var(--c-accent);
        border: 1px solid rgba(6, 229, 163, 0.2);
    }

    .dss-tag.hot {
        background: rgba(249, 115, 22, 0.12);
        color: var(--c-cta);
        border: 1px solid rgba(249, 115, 22, 0.2);
    }

    .dss-value {
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.25rem;
    }

    .dss-value.green {
        color: var(--c-accent);
    }

    .dss-value.orange {
        color: var(--c-cta);
    }

    .dss-sub {
        font-size: 0.68rem;
        color: var(--c-muted);
    }

    .dss-bar-wrap {
        margin-top: 0.5rem;
        height: 4px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 4px;
        overflow: hidden;
    }

    .dss-bar {
        height: 100%;
        border-radius: 4px;
        transition: width 1.5s var(--ease);
    }

    /* ============================================================
   INTEGRATIONS
   ============================================================ */
    #integrations {
        padding: 7rem 0;
        position: relative;
        overflow: hidden;
    }

    .integrations-ring {
        position: relative;
        width: 500px;
        height: 500px;
        margin: 0 auto;
    }

    @media (max-width: 767px) {
        .integrations-ring {
            width: 300px;
            height: 300px;
        }
    }

    .ring-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120px;
        height: 120px;
        background: var(--c-surface2);
        border: 2px solid var(--c-border2);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 0.85rem;
        color: #fff;
        z-index: 2;
        box-shadow: 0 0 0 15px rgba(59, 130, 246, 0.04), 0 0 0 30px rgba(59, 130, 246, 0.02);
    }

    @media (max-width: 767px) {
        .ring-center {
            width: 80px;
            height: 80px;
            font-size: 0.6rem;
        }
    }

    .ring-center-sub {
        font-size: 0.62rem;
        color: var(--c-accent);
        margin-top: 0.2rem;
        font-weight: 600;
    }

    .ring-orbit {
        position: absolute;
        top: 50%;
        left: 50%;
        border: 1px dashed rgba(255, 255, 255, 0.07);
        border-radius: 50%;
        animation: orbitSpin 22s linear infinite;
    }

    .ring-orbit.r1 {
        width: 260px;
        height: 260px;
        margin: -130px 0 0 -130px;
    }

    .ring-orbit.r2 {
        width: 420px;
        height: 420px;
        margin: -210px 0 0 -210px;
        animation-direction: reverse;
        animation-duration: 35s;
    }

    @media (max-width: 767px) {
        .ring-orbit.r1 {
            width: 160px;
            height: 160px;
            margin: -80px 0 0 -80px;
        }

        .ring-orbit.r2 {
            width: 260px;
            height: 260px;
            margin: -130px 0 0 -130px;
        }
    }

    @keyframes orbitSpin {
        to {
            transform: rotate(360deg);
        }
    }

    .orbit-dot {
        position: absolute;
        width: 40px;
        height: 40px;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        animation: counterSpin 22s linear infinite;
        transition: border-color var(--t-fast);
        cursor: default;
    }

    .orbit-dot:hover {
        border-color: var(--c-primary);
        z-index: 3;
    }

    .ring-orbit.r2 .orbit-dot {
        animation-duration: 35s;
        animation-direction: reverse;
    }

    @keyframes counterSpin {
        to {
            transform: rotate(-360deg);
        }
    }

    @media (max-width: 767px) {
        .orbit-dot {
            width: 28px;
            height: 28px;
            font-size: 0.8rem;
        }
    }

    .int-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .int-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--c-text);
        font-family: var(--font-display);
        transition: border-color var(--t-fast), background var(--t-fast);
        cursor: default;
    }

    .int-item:hover {
        border-color: var(--c-border2);
        background: var(--c-surface2);
    }

    .int-item-icon {
        font-size: 1.1rem;
    }

    /* ============================================================
   PRICING
   ============================================================ */
    #pricing {
        padding: 7rem 0;
        position: relative;
        overflow: hidden;
    }

    #pricing::before {
        content: '';
        position: absolute;
        bottom: -100px;
        right: -200px;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.06), transparent 60%);
        pointer-events: none;
    }

    .pricing-toggle {
        display: inline-flex;
        align-items: center;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        border-radius: 50px;
        padding: 0.3rem;
        gap: 0.2rem;
        margin-bottom: 3.5rem;
    }

    .ptog-btn {
        font-family: var(--font-display);
        font-size: 0.82rem;
        font-weight: 700;
        padding: 0.5rem 1.3rem;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        transition: background var(--t-fast), color var(--t-fast);
        background: transparent;
        color: var(--c-muted);
    }

    .ptog-btn.active {
        background: var(--c-primary);
        color: #fff;
    }

    .ptog-save {
        font-size: 0.65rem;
        color: var(--c-accent);
        font-weight: 700;
        margin-left: 0.3rem;
    }

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        align-items: start;
    }

    @media (max-width: 991px) {
        .pricing-grid {
            grid-template-columns: 1fr;
            max-width: 400px;
            margin: 0 auto;
        }
    }

    .price-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-xl);
        padding: 2rem;
        position: relative;
        overflow: hidden;
        transition: border-color var(--t-mid), transform var(--t-mid);
    }

    .price-card:hover {
        transform: translateY(-6px);
    }

    .price-card.popular {
        border-color: var(--c-primary);
        background: linear-gradient(160deg, rgba(59, 130, 246, 0.06) 0%, var(--c-surface) 60%);
        box-shadow: 0 20px 60px rgba(59, 130, 246, 0.12);
    }

    .price-card.popular::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
    }

    .price-popular-badge {
        display: inline-block;
        background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
        color: #fff;
        font-family: var(--font-display);
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 0.22rem 0.8rem;
        border-radius: 50px;
        margin-bottom: 1.2rem;
    }

    .price-plan-name {
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--c-muted);
        margin-bottom: 0.5rem;
    }

    .price-amount {
        display: flex;
        align-items: flex-end;
        gap: 0.2rem;
        margin-bottom: 0.4rem;
    }

    .price-currency {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--c-text);
        line-height: 1.8;
    }

    .price-num {
        font-family: var(--font-display);
        font-size: 3rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
    }

    .price-per {
        font-size: 0.8rem;
        color: var(--c-muted);
        margin-bottom: 0.4rem;
    }

    .price-desc {
        font-size: 0.82rem;
        color: var(--c-muted);
        margin-bottom: 1.8rem;
        line-height: 1.5;
    }

    .price-divider {
        height: 1px;
        background: var(--c-border);
        margin-bottom: 1.5rem;
    }

    .price-features {
        list-style: none;
        padding: 0;
        margin: 0 0 2rem;
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
    }

    .price-features li {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        font-size: 0.84rem;
        color: var(--c-muted2);
    }

    .price-features li .pf-icon {
        font-size: 0.75rem;
        color: var(--c-accent);
        flex-shrink: 0;
        margin-top: 2px;
        font-weight: 700;
    }

    .price-features li.muted {
        color: var(--c-muted);
    }

    .price-features li.muted .pf-icon {
        color: var(--c-muted);
    }

    .price-cta-full {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.85rem;
        border-radius: 50px;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.88rem;
        text-decoration: none;
        transition: transform var(--t-fast), box-shadow var(--t-fast);
        cursor: pointer;
        border: none;
    }

    .price-cta-full.primary {
        background: var(--c-primary);
        color: #fff;
    }

    .price-cta-full.primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35);
        color: #fff;
    }

    .price-cta-full.outline {
        background: transparent;
        color: var(--c-text);
        border: 1px solid var(--c-border2);
    }

    .price-cta-full.outline:hover {
        border-color: var(--c-primary);
        background: rgba(59, 130, 246, 0.06);
        color: #fff;
    }

    .price-cta-full.cta-orange {
        background: var(--c-cta);
        color: #fff;
    }

    .price-cta-full.cta-orange:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px var(--c-cta-glow);
        color: #fff;
    }

    .price-note {
        text-align: center;
        margin-top: 2rem;
        font-size: 0.8rem;
        color: var(--c-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .price-note span::before {
        content: '✓ ';
        color: var(--c-accent);
        font-weight: 700;
    }

    /* ============================================================
   CTA BANNER
   ============================================================ */
    #cta-banner {
        padding: 6rem 0;
        position: relative;
        overflow: hidden;
    }

    .cta-banner-inner {
        background: linear-gradient(135deg, var(--c-surface2) 0%, rgba(59, 130, 246, 0.08) 50%, var(--c-surface2) 100%);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: var(--radius-xl);
        padding: 5rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .cta-banner-inner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-primary) 30%, var(--c-accent) 70%, transparent);
    }

    .cta-banner-inner::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-primary) 30%, var(--c-accent) 70%, transparent);
    }

    .cta-orb-left {
        position: absolute;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.12), transparent 60%);
        top: -100px;
        left: -100px;
        pointer-events: none;
        filter: blur(60px);
    }

    .cta-orb-right {
        position: absolute;
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.1), transparent 60%);
        bottom: -80px;
        right: -80px;
        pointer-events: none;
        filter: blur(60px);
    }

    .cta-banner-label {
        margin-bottom: 1.5rem;
    }

    .cta-banner-heading {
        font-size: clamp(2rem, 5vw, 3.8rem);
        font-weight: 800;
        font-family: var(--font-display);
        color: #fff;
        line-height: 1.1;
        letter-spacing: -0.03em;
        margin-bottom: 1.2rem;
    }

    .cta-banner-sub {
        font-size: 1rem;
        color: var(--c-muted2);
        max-width: 440px;
        margin: 0 auto 2.5rem;
        line-height: 1.7;
    }

    .cta-banner-btns {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }

    .cta-trust-strip {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .cta-trust-item {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.78rem;
        color: var(--c-muted);
    }

    .cta-trust-item .ck {
        color: var(--c-accent);
        font-size: 0.7rem;
        font-weight: 700;
    }

    /* ============================================================
   FOOTER
   ============================================================ */
    #footer {
        background: var(--c-surface);
        border-top: 1px solid var(--c-border);
        padding: 5rem 0 0;
        position: relative;
        overflow: hidden;
    }

    #footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-primary), var(--c-accent), transparent);
    }

    #footer::after {
        content: '';
        position: absolute;
        top: -200px;
        left: 50%;
        transform: translateX(-50%);
        width: 700px;
        height: 400px;
        background: radial-gradient(ellipse, rgba(59, 130, 246, 0.06), transparent 70%);
        pointer-events: none;
    }

    .footer-brand-name {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: #fff;
        margin-bottom: 0.6rem;
    }

    .footer-brand-name span {
        color: var(--c-accent);
    }

    .footer-tagline {
        font-size: 0.87rem;
        color: var(--c-muted);
        max-width: 240px;
        margin-bottom: 1.5rem;
        line-height: 1.65;
    }

    .social-row {
        display: flex;
        gap: 0.6rem;
        margin-bottom: 2rem;
    }

    .social-btn {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--c-border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--c-muted);
        text-decoration: none;
        font-size: 0.85rem;
        transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.7rem;
    }

    .social-btn:hover {
        background: rgba(59, 130, 246, 0.1);
        border-color: var(--c-primary);
        color: var(--c-primary);
    }

    .footer-col-title {
        font-family: var(--font-display);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--c-muted);
        margin-bottom: 1.2rem;
    }

    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .footer-links a {
        color: var(--c-muted2);
        text-decoration: none;
        font-size: 0.88rem;
        transition: color var(--t-fast);
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .footer-links a:hover {
        color: #fff;
    }

    .footer-links a .flink-badge {
        background: rgba(249, 115, 22, 0.15);
        border: 1px solid rgba(249, 115, 22, 0.3);
        color: var(--c-cta);
        font-size: 0.6rem;
        font-weight: 700;
        font-family: var(--font-display);
        letter-spacing: 0.05em;
        padding: 0.08rem 0.4rem;
        border-radius: 4px;
        text-transform: uppercase;
    }

    .footer-newsletter {
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .footer-newsletter h4 {
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.3rem;
    }

    .footer-newsletter p {
        font-size: 0.8rem;
        color: var(--c-muted);
        margin-bottom: 1rem;
    }

    .email-input-row {
        display: flex;
        gap: 0.5rem;
    }

    .email-input-row input {
        flex: 1;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--c-border2);
        border-radius: 50px;
        padding: 0.65rem 1.1rem;
        font-family: var(--font-body);
        font-size: 0.85rem;
        color: var(--c-text);
        outline: none;
        transition: border-color var(--t-fast);
        min-width: 0;
    }

    .email-input-row input:focus {
        border-color: var(--c-primary);
    }

    .email-input-row input::placeholder {
        color: var(--c-muted);
    }

    .footer-bottom {
        margin-top: 3.5rem;
        padding: 1.5rem 0;
        border-top: 1px solid var(--c-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .footer-bottom-left {
        font-size: 0.8rem;
        color: var(--c-muted);
    }

    .footer-bottom-left a {
        color: var(--c-muted);
        text-decoration: none;
        transition: color var(--t-fast);
    }

    .footer-bottom-left a:hover {
        color: var(--c-text);
    }

    .footer-bottom-links {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .footer-bottom-links a {
        font-size: 0.8rem;
        color: var(--c-muted);
        text-decoration: none;
        transition: color var(--t-fast);
    }

    .footer-bottom-links a:hover {
        color: var(--c-text);
    }

    .footer-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.75rem;
        color: var(--c-muted);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--c-border);
        padding: 0.3rem 0.8rem;
        border-radius: 50px;
    }

    .footer-badge .pulse-dot {
        width: 5px;
        height: 5px;
    }


    /* ------------------------ term of services page ---------------------- */
    .legal-hero {
        padding: 9rem 0 3.5rem;
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid var(--c-border)
    }

    .legal-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .lh-orb {
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(249, 115, 22, 0.07), transparent 65%);
        top: -200px;
        right: -150px;
        filter: blur(90px);
        pointer-events: none
    }

    .legal-meta {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        flex-wrap: wrap;
        margin-top: 1.5rem
    }

    .legal-meta-item {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.8rem;
        color: var(--c-muted);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--c-border);
        border-radius: 50px;
        padding: 0.3rem 0.8rem
    }

    .legal-meta-item span {
        color: var(--c-accent);
        font-weight: 700
    }

    .legal-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 3.5rem;
        padding: 4rem 0 6rem;
        align-items: start
    }

    @media(max-width:991px) {
        .legal-layout {
            grid-template-columns: 1fr
        }
    }

    .legal-toc {
        position: sticky;
        top: 96px
    }

    @media(max-width:991px) {
        .legal-toc {
            display: none
        }
    }

    .toc-title {
        font-family: var(--font-display);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--c-muted);
        margin-bottom: 1rem
    }

    .toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.2rem
    }

    .toc-list a {
        font-size: 0.82rem;
        color: var(--c-muted2);
        text-decoration: none;
        padding: 0.4rem 0.75rem;
        border-radius: var(--radius-sm);
        border-left: 2px solid transparent;
        display: block;
        transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast)
    }

    .toc-list a:hover {
        color: #fff;
        border-left-color: var(--c-cta);
        background: rgba(249, 115, 22, 0.05)
    }

    .toc-list a.active {
        color: var(--c-cta);
        border-left-color: var(--c-cta);
        background: rgba(249, 115, 22, 0.06)
    }

    .legal-content h2 {
        font-family: var(--font-display);
        font-size: 1.3rem;
        font-weight: 800;
        color: #fff;
        margin: 2.8rem 0 0.8rem;
        padding-top: 1rem;
        letter-spacing: -0.01em
    }

    .legal-content h2:first-child {
        margin-top: 0
    }

    .legal-content h3 {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: var(--c-text);
        margin: 1.5rem 0 0.5rem
    }

    .legal-content p {
        font-size: 0.9rem;
        color: var(--c-muted2);
        line-height: 1.8;
        margin-bottom: 1rem
    }

    .legal-content ul,
    .legal-content ol {
        padding-left: 1.2rem;
        margin-bottom: 1rem
    }

    .legal-content ul li,
    .legal-content ol li {
        font-size: 0.9rem;
        color: var(--c-muted2);
        line-height: 1.8;
        margin-bottom: 0.35rem
    }

    .legal-content a {
        color: var(--c-accent);
        text-decoration: none
    }

    .legal-content a:hover {
        text-decoration: underline
    }

    .legal-section {
        border-bottom: 1px solid var(--c-border);
        padding-bottom: 1.5rem;
        margin-bottom: 0.5rem
    }

    .legal-section:last-child {
        border-bottom: none
    }

    .highlight-box {
        background: rgba(59, 130, 246, 0.06);
        border: 1px solid rgba(59, 130, 246, 0.18);
        border-radius: var(--radius);
        padding: 1.2rem 1.4rem;
        margin: 1.2rem 0
    }

    .highlight-box p {
        margin: 0;
        font-size: 0.87rem;
        color: var(--c-text)
    }

    .highlight-box.orange {
        background: rgba(249, 115, 22, 0.06);
        border-color: rgba(249, 115, 22, 0.18)
    }

    .highlight-box.red {
        background: rgba(239, 68, 68, 0.06);
        border-color: rgba(239, 68, 68, 0.18)
    }

    .highlight-box.green {
        background: rgba(6, 229, 163, 0.06);
        border-color: rgba(6, 229, 163, 0.18)
    }



    /* ------------- login page ---------------- */
    .auth-page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6rem 1rem 3rem;
        position: relative;
        overflow: hidden
    }

    .auth-page::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .auth-orb-l {
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(80px);
        pointer-events: none
    }

    .auth-orb-r {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.08), transparent 65%);
        bottom: -150px;
        right: -150px;
        filter: blur(80px);
        pointer-events: none
    }

    .auth-card {
        width: 100%;
        max-width: 460px;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius-xl);
        padding: 2.8rem;
        position: relative;
        overflow: hidden;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4)
    }

    .auth-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--c-primary) 30%, var(--c-accent) 70%, transparent)
    }

    .auth-logo {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.4rem;
        letter-spacing: -0.03em;
        color: #fff;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 2rem
    }

    .auth-logo span {
        color: var(--c-accent)
    }

    .auth-title {
        font-family: var(--font-display);
        font-size: 1.65rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 0.4rem;
        letter-spacing: -0.02em
    }

    .auth-sub {
        font-size: 0.88rem;
        color: var(--c-muted);
        margin-bottom: 2rem
    }

    .auth-sub a {
        color: var(--c-accent);
        text-decoration: none;
        font-weight: 600
    }

    .auth-sub a:hover {
        text-decoration: underline
    }

    .form-group {
        margin-bottom: 1.2rem
    }

    .rf-label {
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--c-muted2);
        margin-bottom: 0.5rem;
        display: block;
        letter-spacing: 0.02em
    }

    .rf-input {
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius);
        padding: 0.85rem 1.1rem;
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: var(--c-text);
        outline: none;
        transition: border-color var(--t-fast), box-shadow var(--t-fast)
    }

    .rf-input:focus {
        border-color: var(--c-primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12)
    }

    .rf-input::placeholder {
        color: var(--c-muted)
    }

    .forgot-link {
        font-size: 0.78rem;
        color: var(--c-muted);
        text-decoration: none;
        transition: color var(--t-fast);
        float: right;
        margin-top: -0.3rem
    }

    .forgot-link:hover {
        color: var(--c-accent)
    }

    .btn-auth {
        width: 100%;
        padding: 0.95rem;
        border-radius: 50px;
        background: var(--c-primary);
        color: #fff;
        border: none;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        transition: transform var(--t-fast), box-shadow var(--t-fast);
        margin-top: 0.5rem
    }

    .btn-auth:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(59, 130, 246, 0.35)
    }

    .auth-divider {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 1.5rem 0;
        color: var(--c-muted);
        font-size: 0.78rem
    }

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--c-border)
    }

    .social-auth {
        display: flex;
        flex-direction: column;
        gap: 0.75rem
    }

    .btn-social {
        width: 100%;
        padding: 0.8rem;
        border-radius: var(--radius);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--c-border2);
        color: var(--c-text);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        transition: background var(--t-fast), border-color var(--t-fast);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        text-decoration: none
    }

    .btn-social:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: var(--c-border2);
        color: #fff
    }

    .auth-footer {
        text-align: center;
        margin-top: 1.8rem;
        font-size: 0.82rem;
        color: var(--c-muted)
    }

    .auth-footer a {
        color: var(--c-accent);
        text-decoration: none;
        font-weight: 600
    }

    .auth-footer a:hover {
        text-decoration: underline
    }

    .pass-wrapper {
        position: relative
    }

    .pass-toggle {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--c-muted);
        cursor: pointer;
        font-size: 0.8rem;
        padding: 0;
        font-family: var(--font-display);
        font-weight: 600;
        transition: color var(--t-fast)
    }

    .pass-toggle:hover {
        color: var(--c-text)
    }

    .trust-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.2rem;
        margin-top: 1.5rem;
        flex-wrap: wrap
    }

    .trust-item {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.72rem;
        color: var(--c-muted)
    }

    .trust-item .ti-dot {
        color: var(--c-accent);
        font-weight: 700
    }

    /* --------------- Sign Up page ---------------- */
    .auth-page {
        min-height: 100vh;
        display: flex;
        align-items: stretch;
        position: relative;
        overflow: hidden;
        padding-top: 72px
    }

    .auth-left {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3rem 2rem;
        position: relative
    }

    .auth-left::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .auth-orb-l {
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(80px);
        pointer-events: none
    }

    .auth-right {
        width: 420px;
        flex-shrink: 0;
        background: var(--c-surface);
        border-left: 1px solid var(--c-border);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem 2.5rem;
        gap: 1.5rem
    }

    @media(max-width:991px) {
        .auth-right {
            display: none
        }
    }

    .auth-card {
        width: 100%;
        max-width: 480px;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius-xl);
        padding: 2.8rem;
        position: relative;
        overflow: hidden;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4)
    }

    .auth-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--c-cta) 30%, var(--c-accent) 70%, transparent)
    }

    .auth-logo {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.4rem;
        letter-spacing: -0.03em;
        color: #fff;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 2rem
    }

    .auth-logo span {
        color: var(--c-accent)
    }

    .auth-title {
        font-family: var(--font-display);
        font-size: 1.55rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 0.4rem;
        letter-spacing: -0.02em
    }

    .auth-sub {
        font-size: 0.88rem;
        color: var(--c-muted);
        margin-bottom: 2rem
    }

    .auth-sub a {
        color: var(--c-accent);
        text-decoration: none;
        font-weight: 600
    }

    .form-group {
        margin-bottom: 1.1rem
    }

    .rf-label {
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--c-muted2);
        margin-bottom: 0.5rem;
        display: block;
        letter-spacing: 0.02em
    }

    .rf-input {
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius);
        padding: 0.85rem 1.1rem;
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: var(--c-text);
        outline: none;
        transition: border-color var(--t-fast), box-shadow var(--t-fast)
    }

    .rf-input:focus {
        border-color: var(--c-primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12)
    }

    .rf-input::placeholder {
        color: var(--c-muted)
    }

    .row-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem
    }

    .btn-auth {
        width: 100%;
        padding: 0.95rem;
        border-radius: 50px;
        background: var(--c-cta);
        color: #fff;
        border: none;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        transition: transform var(--t-fast), box-shadow var(--t-fast);
        margin-top: 0.5rem
    }

    .btn-auth:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px var(--c-cta-glow)
    }

    .auth-divider {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 1.5rem 0;
        color: var(--c-muted);
        font-size: 0.78rem
    }

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--c-border)
    }

    .social-auth {
        display: flex;
        gap: 0.75rem
    }

    .btn-social {
        flex: 1;
        padding: 0.8rem;
        border-radius: var(--radius);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--c-border2);
        color: var(--c-text);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 0.82rem;
        cursor: pointer;
        transition: background var(--t-fast), border-color var(--t-fast);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-decoration: none
    }

    .btn-social:hover {
        background: rgba(255, 255, 255, 0.07);
        color: #fff
    }

    .terms-note {
        font-size: 0.75rem;
        color: var(--c-muted);
        text-align: center;
        margin-top: 1rem;
        line-height: 1.6
    }

    .terms-note a {
        color: var(--c-muted2);
        text-decoration: underline
    }

    .pass-strength {
        display: flex;
        gap: 4px;
        margin-top: 0.4rem
    }

    .ps-bar {
        flex: 1;
        height: 3px;
        border-radius: 3px;
        background: var(--c-border2);
        transition: background 0.3s
    }

    .ps-bar.weak {
        background: #EF4444
    }

    .ps-bar.fair {
        background: #F97316
    }

    .ps-bar.good {
        background: #06E5A3
    }

    /* Right side trust panel */
    .trust-panel-title {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 1.2rem
    }

    .trust-feat {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.1rem
    }

    .tf-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        background: rgba(6, 229, 163, 0.1);
        border: 1px solid rgba(6, 229, 163, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0
    }

    .tf-title {
        font-family: var(--font-display);
        font-size: 0.85rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.2rem
    }

    .tf-sub {
        font-size: 0.77rem;
        color: var(--c-muted)
    }

    .trust-divider {
        height: 1px;
        background: var(--c-border);
        margin: 1.5rem 0
    }

    .testi-mini {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        padding: 1rem
    }

    .testi-mini-quote {
        font-size: 0.82rem;
        color: var(--c-muted2);
        font-style: italic;
        margin-bottom: 0.8rem;
        line-height: 1.6
    }

    .testi-mini-author {
        display: flex;
        align-items: center;
        gap: 0.6rem
    }

    .tma {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-family: var(--font-display);
        font-size: 0.6rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .tma-name {
        font-size: 0.75rem;
        font-weight: 700;
        color: #fff;
        font-family: var(--font-display)
    }

    .tma-role {
        font-size: 0.68rem;
        color: var(--c-muted)
    }


    /* ------------------- Startups page ------------------ */
    .feature-hero {
        padding: 9rem 0 5rem;
        position: relative;
        overflow: hidden
    }

    .feature-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .fh-orb1 {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.12), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .fh-orb2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.06), transparent 65%);
        bottom: -150px;
        right: -100px;
        filter: blur(80px);
        pointer-events: none
    }

    .feat-grid-page {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin: 4rem 0
    }

    @media(max-width:991px) {
        .feat-grid-page {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(max-width:575px) {
        .feat-grid-page {
            grid-template-columns: 1fr
        }
    }

    .fp-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 1.8rem;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid)
    }

    .fp-card:hover {
        border-color: rgba(6, 229, 163, 0.25);
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25)
    }

    .fp-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius);
        background: rgba(6, 229, 163, 0.12);
        border: 1px solid rgba(6, 229, 163, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-bottom: 1.1rem
    }

    .fp-title {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.5rem
    }

    .fp-desc {
        font-size: 0.84rem;
        color: var(--c-muted2);
        line-height: 1.65
    }

    /* Social proof strip */
    .sp-strip {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-xl);
        padding: 2rem;
        margin: 4rem 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        text-align: center
    }

    @media(max-width:767px) {
        .sp-strip {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .sp-item {
        padding: 1.2rem;
        border-right: 1px solid var(--c-border)
    }

    .sp-item:last-child {
        border-right: none
    }

    .sp-val {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.3rem
    }

    .sp-label {
        font-size: 0.75rem;
        color: var(--c-muted)
    }

    /* How it works */
    .hiw-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        position: relative;
        margin: 3rem 0
    }

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 16%;
        width: 68%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-border2), transparent);
        z-index: 0
    }

    @media(max-width:767px) {
        .hiw-steps {
            grid-template-columns: 1fr
        }

        .hiw-steps::before {
            display: none
        }
    }

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

    .hiw-num {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
        color: #06E5A3;
        box-shadow: 0 0 0 6px rgba(6, 229, 163, 0.06)
    }

    .hiw-title {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.4rem
    }

    .hiw-desc {
        font-size: 0.8rem;
        color: var(--c-muted);
        line-height: 1.6
    }

    /* CTA banner */
    .feat-cta {
        background: linear-gradient(135deg, var(--c-surface2), rgba(6, 229, 163, 0.12));
        border: 1px solid rgba(6, 229, 163, 0.25);
        border-radius: var(--radius-xl);
        padding: 4rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin: 5rem 0
    }

    .feat-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #06E5A3, transparent)
    }


    /* -------------------- pricing page ------------------ */
    .pricing-hero {
        padding: 9rem 0 5rem;
        text-align: center;
        position: relative;
        overflow: hidden
    }

    .pricing-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .ph-orb1 {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .ph-orb2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.07), transparent 65%);
        bottom: -150px;
        right: -100px;
        filter: blur(80px);
        pointer-events: none
    }

    .pricing-toggle {
        display: inline-flex;
        align-items: center;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        border-radius: 50px;
        padding: 0.3rem;
        gap: 0.2rem;
        margin-bottom: 3.5rem
    }

    .ptog-btn {
        font-family: var(--font-display);
        font-size: 0.82rem;
        font-weight: 700;
        padding: 0.5rem 1.3rem;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        transition: background var(--t-fast), color var(--t-fast);
        background: transparent;
        color: var(--c-muted)
    }

    .ptog-btn.active {
        background: var(--c-primary);
        color: #fff
    }

    .ptog-save {
        font-size: 0.65rem;
        color: var(--c-accent);
        font-weight: 700;
        margin-left: 0.3rem
    }

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        align-items: start;
        margin-bottom: 4rem
    }

    @media(max-width:991px) {
        .pricing-grid {
            grid-template-columns: 1fr;
            max-width: 420px;
            margin-left: auto;
            margin-right: auto
        }
    }

    .price-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-xl);
        padding: 2.2rem;
        position: relative;
        overflow: hidden;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid)
    }

    .price-card:hover {
        transform: translateY(-6px)
    }

    .price-card.popular {
        border-color: var(--c-primary);
        background: linear-gradient(160deg, rgba(59, 130, 246, 0.06) 0%, var(--c-surface) 60%);
        box-shadow: 0 20px 60px rgba(59, 130, 246, 0.12)
    }

    .price-card.popular::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--c-primary), var(--c-accent))
    }

    .price-popular-badge {
        display: inline-block;
        background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
        color: #fff;
        font-family: var(--font-display);
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 0.22rem 0.8rem;
        border-radius: 50px;
        margin-bottom: 1.2rem
    }

    .price-plan-name {
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--c-muted);
        margin-bottom: 0.5rem
    }

    .price-amount {
        display: flex;
        align-items: flex-end;
        gap: 0.2rem;
        margin-bottom: 0.4rem
    }

    .price-currency {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--c-text);
        line-height: 1.8
    }

    .price-num {
        font-family: var(--font-display);
        font-size: 3rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        transition: opacity 0.2s, transform 0.2s
    }

    .price-per {
        font-size: 0.8rem;
        color: var(--c-muted);
        margin-bottom: 0.4rem
    }

    .price-desc {
        font-size: 0.82rem;
        color: var(--c-muted);
        margin-bottom: 1.8rem;
        line-height: 1.5
    }

    .price-divider {
        height: 1px;
        background: var(--c-border);
        margin-bottom: 1.5rem
    }

    .price-features {
        list-style: none;
        padding: 0;
        margin: 0 0 2rem;
        display: flex;
        flex-direction: column;
        gap: 0.7rem
    }

    .price-features li {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        font-size: 0.84rem;
        color: var(--c-muted2)
    }

    .pf-icon {
        font-size: 0.75rem;
        color: var(--c-accent);
        flex-shrink: 0;
        margin-top: 2px;
        font-weight: 700
    }

    .price-features li.muted {
        color: var(--c-muted)
    }

    .price-features li.muted .pf-icon {
        color: var(--c-muted)
    }

    .price-cta-full {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.85rem;
        border-radius: 50px;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.88rem;
        text-decoration: none;
        transition: transform var(--t-fast), box-shadow var(--t-fast);
        cursor: pointer;
        border: none
    }

    .price-cta-full.primary {
        background: var(--c-primary);
        color: #fff
    }

    .price-cta-full.primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35);
        color: #fff
    }

    .price-cta-full.outline {
        background: transparent;
        color: var(--c-text);
        border: 1px solid var(--c-border2)
    }

    .price-cta-full.outline:hover {
        border-color: var(--c-primary);
        background: rgba(59, 130, 246, 0.06);
        color: #fff
    }

    .price-cta-full.cta-orange {
        background: var(--c-cta);
        color: #fff
    }

    .price-cta-full.cta-orange:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px var(--c-cta-glow);
        color: #fff
    }

    .price-note {
        text-align: center;
        margin-bottom: 5rem;
        font-size: 0.8rem;
        color: var(--c-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap
    }

    .price-note span::before {
        content: '✓ ';
        color: var(--c-accent);
        font-weight: 700
    }

    /* Compare table */
    .compare-section {
        padding: 0 0 6rem
    }

    .compare-title {
        font-family: var(--font-display);
        font-size: clamp(1.4rem, 3vw, 2rem);
        font-weight: 800;
        color: #fff;
        text-align: center;
        margin-bottom: 0.5rem
    }

    .compare-sub {
        text-align: center;
        color: var(--c-muted2);
        margin-bottom: 2.5rem;
        font-size: 0.9rem
    }

    .compare-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        overflow: hidden
    }

    .compare-table th {
        font-family: var(--font-display);
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--c-muted2);
        padding: 1rem 1.2rem;
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid var(--c-border);
        text-align: left
    }

    .compare-table th:not(:first-child) {
        text-align: center
    }

    .compare-table th.popular-col {
        color: var(--c-primary)
    }

    .compare-table td {
        padding: 0.9rem 1.2rem;
        border-bottom: 1px solid var(--c-border);
        font-size: 0.85rem;
        color: var(--c-muted2)
    }

    .compare-table td:not(:first-child) {
        text-align: center
    }

    .compare-table tr:last-child td {
        border-bottom: none
    }

    .compare-table tr:hover td {
        background: rgba(255, 255, 255, 0.02)
    }

    .compare-table .cat-row td {
        font-family: var(--font-display);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--c-muted);
        padding: 1.2rem 1.2rem 0.5rem;
        background: rgba(255, 255, 255, 0.02)
    }

    .check-yes {
        color: var(--c-accent);
        font-size: 1rem;
        font-weight: 700
    }

    .check-no {
        color: var(--c-muted);
        font-size: 0.9rem
    }

    /* FAQ */
    .faq-section {
        padding: 0 0 6rem
    }

    .faq-item {
        border-bottom: 1px solid var(--c-border);
        padding: 1.2rem 0
    }

    .faq-q {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        user-select: none
    }

    .faq-q::after {
        content: '+';
        color: var(--c-accent);
        font-size: 1.2rem;
        flex-shrink: 0;
        transition: transform 0.25s
    }

    .faq-item.open .faq-q::after {
        transform: rotate(45deg)
    }

    .faq-a {
        font-size: 0.87rem;
        color: var(--c-muted2);
        line-height: 1.75;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s var(--ease), padding 0.25s
    }

    .faq-item.open .faq-a {
        max-height: 200px;
        padding-top: 0.75rem
    }

    /* Enterprise CTA */
    .enterprise-cta {
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius-xl);
        padding: 3.5rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin-bottom: 5rem
    }

    .enterprise-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-primary) 30%, var(--c-accent) 70%, transparent)
    }

    .ec-orb {
        position: absolute;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(249, 115, 22, 0.06), transparent 60%);
        top: -100px;
        right: -100px;
        filter: blur(60px);
        pointer-events: none
    }


    /* -------------------- privacy page ----------------- */
    /* Legal page layout */
    .legal-hero {
        padding: 9rem 0 3.5rem;
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid var(--c-border)
    }

    .legal-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .lh-orb {
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.08), transparent 65%);
        top: -200px;
        left: -150px;
        filter: blur(90px);
        pointer-events: none
    }

    .legal-meta {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        flex-wrap: wrap;
        margin-top: 1.5rem
    }

    .legal-meta-item {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.8rem;
        color: var(--c-muted);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--c-border);
        border-radius: 50px;
        padding: 0.3rem 0.8rem
    }

    .legal-meta-item span {
        color: var(--c-accent);
        font-weight: 700
    }

    /* Layout */
    .legal-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 3.5rem;
        padding: 4rem 0 6rem;
        align-items: start
    }

    @media(max-width:991px) {
        .legal-layout {
            grid-template-columns: 1fr
        }
    }

    /* Sticky TOC sidebar */
    .legal-toc {
        position: sticky;
        top: 96px
    }

    @media(max-width:991px) {
        .legal-toc {
            display: none
        }
    }

    .toc-title {
        font-family: var(--font-display);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--c-muted);
        margin-bottom: 1rem
    }

    .toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.2rem
    }

    .toc-list a {
        font-size: 0.82rem;
        color: var(--c-muted2);
        text-decoration: none;
        padding: 0.4rem 0.75rem;
        border-radius: var(--radius-sm);
        border-left: 2px solid transparent;
        display: block;
        transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast)
    }

    .toc-list a:hover {
        color: #fff;
        border-left-color: var(--c-accent);
        background: rgba(6, 229, 163, 0.05)
    }

    .toc-list a.active {
        color: var(--c-accent);
        border-left-color: var(--c-accent);
        background: rgba(6, 229, 163, 0.06)
    }

    /* Content */
    .legal-content h2 {
        font-family: var(--font-display);
        font-size: 1.3rem;
        font-weight: 800;
        color: #fff;
        margin: 2.8rem 0 0.8rem;
        padding-top: 1rem;
        letter-spacing: -0.01em
    }

    .legal-content h2:first-child {
        margin-top: 0
    }

    .legal-content h3 {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: var(--c-text);
        margin: 1.5rem 0 0.5rem
    }

    .legal-content p {
        font-size: 0.9rem;
        color: var(--c-muted2);
        line-height: 1.8;
        margin-bottom: 1rem
    }

    .legal-content ul,
    .legal-content ol {
        padding-left: 1.2rem;
        margin-bottom: 1rem
    }

    .legal-content ul li,
    .legal-content ol li {
        font-size: 0.9rem;
        color: var(--c-muted2);
        line-height: 1.8;
        margin-bottom: 0.35rem
    }

    .legal-content a {
        color: var(--c-accent);
        text-decoration: none
    }

    .legal-content a:hover {
        text-decoration: underline
    }

    .legal-section {
        border-bottom: 1px solid var(--c-border);
        padding-bottom: 1.5rem;
        margin-bottom: 0.5rem
    }

    .legal-section:last-child {
        border-bottom: none
    }

    .highlight-box {
        background: rgba(59, 130, 246, 0.06);
        border: 1px solid rgba(59, 130, 246, 0.18);
        border-radius: var(--radius);
        padding: 1.2rem 1.4rem;
        margin: 1.2rem 0
    }

    .highlight-box p {
        margin: 0;
        font-size: 0.87rem;
        color: var(--c-text)
    }

    .highlight-box.green {
        background: rgba(6, 229, 163, 0.06);
        border-color: rgba(6, 229, 163, 0.18)
    }

    .highlight-box.orange {
        background: rgba(249, 115, 22, 0.06);
        border-color: rgba(249, 115, 22, 0.18)
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.2rem 0;
        font-size: 0.85rem
    }

    .data-table th {
        font-family: var(--font-display);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--c-muted);
        padding: 0.7rem 1rem;
        background: rgba(255, 255, 255, 0.03);
        border-bottom: 1px solid var(--c-border);
        text-align: left
    }

    .data-table td {
        padding: 0.8rem 1rem;
        border-bottom: 1px solid var(--c-border);
        color: var(--c-muted2);
        vertical-align: top
    }

    .data-table tr:last-child td {
        border-bottom: none
    }


    /* ---------------- lead finder page ----------------- */
    .feature-hero {
        padding: 9rem 0 5rem;
        position: relative;
        overflow: hidden
    }

    .feature-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .fh-orb1 {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.12), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .fh-orb2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.06), transparent 65%);
        bottom: -150px;
        right: -100px;
        filter: blur(80px);
        pointer-events: none
    }

    .feat-grid-page {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin: 4rem 0
    }

    @media(max-width:991px) {
        .feat-grid-page {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(max-width:575px) {
        .feat-grid-page {
            grid-template-columns: 1fr
        }
    }

    .fp-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 1.8rem;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid)
    }

    .fp-card:hover {
        border-color: rgba(6, 229, 163, 0.25);
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25)
    }

    .fp-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius);
        background: rgba(6, 229, 163, 0.12);
        border: 1px solid rgba(6, 229, 163, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-bottom: 1.1rem
    }

    .fp-title {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.5rem
    }

    .fp-desc {
        font-size: 0.84rem;
        color: var(--c-muted2);
        line-height: 1.65
    }

    /* Social proof strip */
    .sp-strip {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-xl);
        padding: 2rem;
        margin: 4rem 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        text-align: center
    }

    @media(max-width:767px) {
        .sp-strip {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .sp-item {
        padding: 1.2rem;
        border-right: 1px solid var(--c-border)
    }

    .sp-item:last-child {
        border-right: none
    }

    .sp-val {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.3rem
    }

    .sp-label {
        font-size: 0.75rem;
        color: var(--c-muted)
    }

    /* How it works */
    .hiw-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        position: relative;
        margin: 3rem 0
    }

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 16%;
        width: 68%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-border2), transparent);
        z-index: 0
    }

    @media(max-width:767px) {
        .hiw-steps {
            grid-template-columns: 1fr
        }

        .hiw-steps::before {
            display: none
        }
    }

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

    .hiw-num {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
        color: #06E5A3;
        box-shadow: 0 0 0 6px rgba(6, 229, 163, 0.06)
    }

    .hiw-title {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.4rem
    }

    .hiw-desc {
        font-size: 0.8rem;
        color: var(--c-muted);
        line-height: 1.6
    }

    /* CTA banner */
    .feat-cta {
        background: linear-gradient(135deg, var(--c-surface2), rgba(6, 229, 163, 0.12));
        border: 1px solid rgba(6, 229, 163, 0.25);
        border-radius: var(--radius-xl);
        padding: 4rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin: 5rem 0
    }

    .feat-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #06E5A3, transparent)
    }


    /* ------------ enterprise page -------------- */
    .feature-hero {
        padding: 9rem 0 5rem;
        position: relative;
        overflow: hidden
    }

    .feature-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .fh-orb1 {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .fh-orb2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.06), transparent 65%);
        bottom: -150px;
        right: -100px;
        filter: blur(80px);
        pointer-events: none
    }

    .feat-grid-page {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin: 4rem 0
    }

    @media(max-width:991px) {
        .feat-grid-page {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(max-width:575px) {
        .feat-grid-page {
            grid-template-columns: 1fr
        }
    }

    .fp-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 1.8rem;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid)
    }

    .fp-card:hover {
        border-color: rgba(249, 115, 22, 0.25);
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25)
    }

    .fp-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius);
        background: rgba(249, 115, 22, 0.12);
        border: 1px solid rgba(249, 115, 22, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-bottom: 1.1rem
    }

    .fp-title {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.5rem
    }

    .fp-desc {
        font-size: 0.84rem;
        color: var(--c-muted2);
        line-height: 1.65
    }

    /* Social proof strip */
    .sp-strip {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-xl);
        padding: 2rem;
        margin: 4rem 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        text-align: center
    }

    @media(max-width:767px) {
        .sp-strip {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .sp-item {
        padding: 1.2rem;
        border-right: 1px solid var(--c-border)
    }

    .sp-item:last-child {
        border-right: none
    }

    .sp-val {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.3rem
    }

    .sp-label {
        font-size: 0.75rem;
        color: var(--c-muted)
    }

    /* How it works */
    .hiw-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        position: relative;
        margin: 3rem 0
    }

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 16%;
        width: 68%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-border2), transparent);
        z-index: 0
    }

    @media(max-width:767px) {
        .hiw-steps {
            grid-template-columns: 1fr
        }

        .hiw-steps::before {
            display: none
        }
    }

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

    .hiw-num {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
        color: #F97316;
        box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.06)
    }

    .hiw-title {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.4rem
    }

    .hiw-desc {
        font-size: 0.8rem;
        color: var(--c-muted);
        line-height: 1.6
    }

    /* CTA banner */
    .feat-cta {
        background: linear-gradient(135deg, var(--c-surface2), rgba(249, 115, 22, 0.12));
        border: 1px solid rgba(249, 115, 22, 0.25);
        border-radius: var(--radius-xl);
        padding: 4rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin: 5rem 0
    }

    .feat-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #F97316, transparent)
    }

    /* ------------- email-campaign page -------------- */
    .feature-hero {
        padding: 9rem 0 5rem;
        position: relative;
        overflow: hidden
    }

    .feature-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .fh-orb1 {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.12), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .fh-orb2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.06), transparent 65%);
        bottom: -150px;
        right: -100px;
        filter: blur(80px);
        pointer-events: none
    }

    .feat-grid-page {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin: 4rem 0
    }

    @media(max-width:991px) {
        .feat-grid-page {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(max-width:575px) {
        .feat-grid-page {
            grid-template-columns: 1fr
        }
    }

    .fp-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 1.8rem;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid)
    }

    .fp-card:hover {
        border-color: rgba(59, 130, 246, 0.25);
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25)
    }

    .fp-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius);
        background: rgba(59, 130, 246, 0.12);
        border: 1px solid rgba(59, 130, 246, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-bottom: 1.1rem
    }

    .fp-title {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.5rem
    }

    .fp-desc {
        font-size: 0.84rem;
        color: var(--c-muted2);
        line-height: 1.65
    }

    /* Social proof strip */
    .sp-strip {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-xl);
        padding: 2rem;
        margin: 4rem 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        text-align: center
    }

    @media(max-width:767px) {
        .sp-strip {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .sp-item {
        padding: 1.2rem;
        border-right: 1px solid var(--c-border)
    }

    .sp-item:last-child {
        border-right: none
    }

    .sp-val {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.3rem
    }

    .sp-label {
        font-size: 0.75rem;
        color: var(--c-muted)
    }

    /* How it works */
    .hiw-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        position: relative;
        margin: 3rem 0
    }

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 16%;
        width: 68%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-border2), transparent);
        z-index: 0
    }

    @media(max-width:767px) {
        .hiw-steps {
            grid-template-columns: 1fr
        }

        .hiw-steps::before {
            display: none
        }
    }

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

    .hiw-num {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
        color: #3B82F6;
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.06)
    }

    .hiw-title {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.4rem
    }

    .hiw-desc {
        font-size: 0.8rem;
        color: var(--c-muted);
        line-height: 1.6
    }

    /* CTA banner */
    .feat-cta {
        background: linear-gradient(135deg, var(--c-surface2), rgba(59, 130, 246, 0.12));
        border: 1px solid rgba(59, 130, 246, 0.25);
        border-radius: var(--radius-xl);
        padding: 4rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin: 5rem 0
    }

    .feat-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #3B82F6, transparent)
    }


    /* --------------------- ecommerce page ----------------------- */

    .feature-hero {
        padding: 9rem 0 5rem;
        position: relative;
        overflow: hidden
    }

    .feature-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .fh-orb1 {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.12), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .fh-orb2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.06), transparent 65%);
        bottom: -150px;
        right: -100px;
        filter: blur(80px);
        pointer-events: none
    }

    .feat-grid-page {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin: 4rem 0
    }

    @media(max-width:991px) {
        .feat-grid-page {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(max-width:575px) {
        .feat-grid-page {
            grid-template-columns: 1fr
        }
    }

    .fp-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 1.8rem;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid)
    }

    .fp-card:hover {
        border-color: rgba(6, 229, 163, 0.25);
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25)
    }

    .fp-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius);
        background: rgba(6, 229, 163, 0.12);
        border: 1px solid rgba(6, 229, 163, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-bottom: 1.1rem
    }

    .fp-title {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.5rem
    }

    .fp-desc {
        font-size: 0.84rem;
        color: var(--c-muted2);
        line-height: 1.65
    }

    /* Social proof strip */
    .sp-strip {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-xl);
        padding: 2rem;
        margin: 4rem 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        text-align: center
    }

    @media(max-width:767px) {
        .sp-strip {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .sp-item {
        padding: 1.2rem;
        border-right: 1px solid var(--c-border)
    }

    .sp-item:last-child {
        border-right: none
    }

    .sp-val {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.3rem
    }

    .sp-label {
        font-size: 0.75rem;
        color: var(--c-muted)
    }

    /* How it works */
    .hiw-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        position: relative;
        margin: 3rem 0
    }

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 16%;
        width: 68%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-border2), transparent);
        z-index: 0
    }

    @media(max-width:767px) {
        .hiw-steps {
            grid-template-columns: 1fr
        }

        .hiw-steps::before {
            display: none
        }
    }

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

    .hiw-num {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
        color: #06E5A3;
        box-shadow: 0 0 0 6px rgba(6, 229, 163, 0.06)
    }

    .hiw-title {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.4rem
    }

    .hiw-desc {
        font-size: 0.8rem;
        color: var(--c-muted);
        line-height: 1.6
    }

    /* CTA banner */
    .feat-cta {
        background: linear-gradient(135deg, var(--c-surface2), rgba(6, 229, 163, 0.12));
        border: 1px solid rgba(6, 229, 163, 0.25);
        border-radius: var(--radius-xl);
        padding: 4rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin: 5rem 0
    }

    .feat-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #06E5A3, transparent)
    }


    /* -------------- case studeis ----------------- */
    .cs-hero {
        padding: 9rem 0 5rem;
        position: relative;
        overflow: hidden;
        text-align: center
    }

    .cs-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .cs-orb1 {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.08), transparent 65%);
        top: -200px;
        right: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .cs-orb2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.07), transparent 65%);
        bottom: -150px;
        left: -100px;
        filter: blur(80px);
        pointer-events: none
    }

    /* Stats bar */
    .cs-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
        margin-bottom: 5rem
    }

    @media(max-width:767px) {
        .cs-stats {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .cs-stat {
        padding: 1.8rem 1rem;
        text-align: center;
        border-right: 1px solid var(--c-border);
        transition: background var(--t-fast)
    }

    .cs-stat:last-child {
        border-right: none
    }

    .cs-stat:hover {
        background: rgba(59, 130, 246, 0.04)
    }

    .cs-stat-val {
        font-family: var(--font-display);
        font-size: 2.2rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.3rem
    }

    .cs-stat-val span {
        color: var(--c-accent)
    }

    .cs-stat-label {
        font-size: 0.8rem;
        color: var(--c-muted)
    }

    /* Featured CS */
    .cs-featured {
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius-xl);
        overflow: hidden;
        margin-bottom: 3rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        transition: border-color var(--t-mid), transform var(--t-mid)
    }

    .cs-featured:hover {
        border-color: rgba(6, 229, 163, 0.3);
        transform: translateY(-4px)
    }

    @media(max-width:767px) {
        .cs-featured {
            grid-template-columns: 1fr
        }
    }

    .csf-visual {
        background: linear-gradient(135deg, rgba(6, 229, 163, 0.06), rgba(59, 130, 246, 0.06));
        min-height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden
    }

    .csf-visual::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 28px 28px
    }

    .csf-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        padding: 2rem;
        position: relative;
        z-index: 1
    }

    .csf-metric {
        text-align: center
    }

    .csf-metric-val {
        font-family: var(--font-display);
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1;
        margin-bottom: 0.25rem
    }

    .csf-metric-label {
        font-size: 0.72rem;
        color: var(--c-muted)
    }

    .csf-content {
        padding: 2.5rem
    }

    .cs-tag {
        display: inline-block;
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 0.2rem 0.65rem;
        border-radius: 50px;
        margin-bottom: 1rem
    }

    .cs-tag.saas {
        background: rgba(59, 130, 246, 0.12);
        color: var(--c-primary);
        border: 1px solid rgba(59, 130, 246, 0.2)
    }

    .cs-tag.agency {
        background: rgba(139, 92, 246, 0.12);
        color: #A78BFA;
        border: 1px solid rgba(139, 92, 246, 0.2)
    }

    .cs-tag.ecom {
        background: rgba(6, 229, 163, 0.12);
        color: var(--c-accent);
        border: 1px solid rgba(6, 229, 163, 0.2)
    }

    .cs-tag.fintech {
        background: rgba(249, 115, 22, 0.12);
        color: var(--c-cta);
        border: 1px solid rgba(249, 115, 22, 0.2)
    }

    .csf-title {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 0.75rem;
        letter-spacing: -0.02em
    }

    .csf-quote {
        font-size: 0.9rem;
        color: var(--c-muted2);
        font-style: italic;
        line-height: 1.7;
        margin-bottom: 1.5rem;
        padding-left: 1rem;
        border-left: 2px solid var(--c-accent)
    }

    .cs-author {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.5rem
    }

    .cs-av {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0
    }

    .cs-name {
        font-size: 0.85rem;
        font-weight: 700;
        color: #fff;
        font-family: var(--font-display)
    }

    .cs-role {
        font-size: 0.73rem;
        color: var(--c-muted)
    }

    /* CS Grid */
    .cs-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-bottom: 4rem
    }

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

    @media(max-width:575px) {
        .cs-grid {
            grid-template-columns: 1fr
        }
    }

    .cs-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
        display: flex;
        flex-direction: column
    }

    .cs-card:hover {
        border-color: rgba(59, 130, 246, 0.25);
        transform: translateY(-5px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25)
    }

    .cs-card-top {
        padding: 1.8rem 1.8rem 0
    }

    .cs-metrics-mini {
        display: flex;
        gap: 1.5rem;
        margin: 1.2rem 0;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: var(--radius)
    }

    .cs-mini-val {
        font-family: var(--font-display);
        font-size: 1.4rem;
        font-weight: 800;
        color: #fff;
        line-height: 1
    }

    .cs-mini-val span {
        color: var(--c-accent)
    }

    .cs-mini-label {
        font-size: 0.68rem;
        color: var(--c-muted);
        margin-top: 0.2rem
    }

    .cs-card-body {
        padding: 0 1.8rem 1.8rem;
        flex: 1;
        display: flex;
        flex-direction: column
    }

    .cs-excerpt {
        font-size: 0.83rem;
        color: var(--c-muted2);
        line-height: 1.65;
        margin-bottom: 1.2rem;
        flex: 1
    }

    /* CTA bottom */
    .cs-cta-strip {
        background: linear-gradient(135deg, var(--c-surface2), rgba(6, 229, 163, 0.04));
        border: 1px solid rgba(6, 229, 163, 0.15);
        border-radius: var(--radius-xl);
        padding: 3.5rem;
        text-align: center;
        margin-bottom: 5rem;
        position: relative;
        overflow: hidden
    }

    .cs-cta-strip::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-accent), transparent)
    }

    /* ------------ blog page ------------ */

    .blog-hero {
        padding: 9rem 0 4rem;
        position: relative;
        overflow: hidden
    }

    .blog-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .bh-orb {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.09), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .blog-cats {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        margin-bottom: 3rem
    }

    .cat-pill {
        padding: 0.42rem 1rem;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--c-border);
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--c-muted2);
        cursor: pointer;
        transition: all var(--t-fast);
        text-decoration: none
    }

    .cat-pill:hover,
    .cat-pill.active {
        background: rgba(59, 130, 246, 0.1);
        border-color: var(--c-primary);
        color: var(--c-primary)
    }

    /* Featured post */
    .blog-featured {
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius-xl);
        overflow: hidden;
        margin-bottom: 3rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        transition: border-color var(--t-mid), transform var(--t-mid)
    }

    .blog-featured:hover {
        border-color: rgba(59, 130, 246, 0.3);
        transform: translateY(-4px)
    }

    @media(max-width:767px) {
        .blog-featured {
            grid-template-columns: 1fr
        }
    }

    .bf-image {
        background: linear-gradient(135deg, var(--c-surface2) 0%, rgba(59, 130, 246, 0.08) 100%);
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden
    }

    .bf-image::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 30px 30px
    }

    .bf-image-inner {
        font-size: 5rem;
        position: relative;
        z-index: 1
    }

    .bf-content {
        padding: 2.5rem
    }

    .blog-tag {
        display: inline-block;
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 0.2rem 0.65rem;
        border-radius: 50px;
        margin-bottom: 1rem
    }

    .blog-tag.blue {
        background: rgba(59, 130, 246, 0.12);
        color: var(--c-primary);
        border: 1px solid rgba(59, 130, 246, 0.2)
    }

    .blog-tag.mint {
        background: rgba(6, 229, 163, 0.12);
        color: var(--c-accent);
        border: 1px solid rgba(6, 229, 163, 0.2)
    }

    .blog-tag.orange {
        background: rgba(249, 115, 22, 0.12);
        color: var(--c-cta);
        border: 1px solid rgba(249, 115, 22, 0.2)
    }

    .blog-tag.purple {
        background: rgba(139, 92, 246, 0.12);
        color: #A78BFA;
        border: 1px solid rgba(139, 92, 246, 0.2)
    }

    .bf-title {
        font-family: var(--font-display);
        font-size: 1.55rem;
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 0.75rem;
        letter-spacing: -0.02em
    }

    .bf-title a {
        color: #fff;
        text-decoration: none;
        transition: color var(--t-fast)
    }

    .bf-title a:hover {
        color: var(--c-accent)
    }

    .bf-excerpt {
        font-size: 0.88rem;
        color: var(--c-muted2);
        line-height: 1.7;
        margin-bottom: 1.5rem
    }

    .post-meta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.78rem;
        color: var(--c-muted)
    }

    .post-meta-av {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        font-family: var(--font-display);
        font-size: 0.6rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .post-meta-dot {
        color: var(--c-border2)
    }

    .read-link {
        color: var(--c-accent);
        text-decoration: none;
        font-family: var(--font-display);
        font-size: 0.82rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        transition: gap var(--t-fast)
    }

    .read-link:hover {
        gap: 0.6rem;
        color: var(--c-accent)
    }

    /* Post grid */
    .posts-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-bottom: 4rem
    }

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

    @media(max-width:575px) {
        .posts-grid {
            grid-template-columns: 1fr
        }
    }

    .post-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
        text-decoration: none;
        display: flex;
        flex-direction: column
    }

    .post-card:hover {
        border-color: rgba(59, 130, 246, 0.25);
        transform: translateY(-5px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25)
    }

    .pc-thumb {
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        position: relative;
        overflow: hidden
    }

    .pc-thumb::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 24px 24px
    }

    .pc-body {
        padding: 1.4rem;
        flex: 1;
        display: flex;
        flex-direction: column
    }

    .pc-title {
        font-family: var(--font-display);
        font-size: 0.98rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
        margin: 0.6rem 0 0.5rem;
        flex: 1
    }

    .pc-title a {
        color: #fff;
        text-decoration: none;
        transition: color var(--t-fast)
    }

    .pc-title a:hover {
        color: var(--c-accent)
    }

    .pc-excerpt {
        font-size: 0.8rem;
        color: var(--c-muted);
        line-height: 1.6;
        margin-bottom: 1rem
    }

    /* Newsletter strip */
    .newsletter-strip {
        background: var(--c-surface2);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius-xl);
        padding: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        flex-wrap: wrap;
        margin-bottom: 4rem;
        position: relative;
        overflow: hidden
    }

    .newsletter-strip::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-accent), transparent)
    }

    .ns-left h3 {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 0.3rem
    }

    .ns-left p {
        font-size: 0.85rem;
        color: var(--c-muted);
        margin: 0
    }

    .ns-right {
        display: flex;
        gap: 0.6rem;
        flex-shrink: 0;
        flex-wrap: wrap
    }

    .ns-input {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--c-border2);
        border-radius: 50px;
        padding: 0.7rem 1.2rem;
        font-family: var(--font-body);
        font-size: 0.88rem;
        color: var(--c-text);
        outline: none;
        transition: border-color var(--t-fast);
        min-width: 220px
    }

    .ns-input:focus {
        border-color: var(--c-primary)
    }

    .ns-input::placeholder {
        color: var(--c-muted)
    }

    /* Pagination */
    .pagination-rf {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding-bottom: 5rem
    }

    .pg-btn {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-sm);
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--c-muted2);
        cursor: pointer;
        transition: all var(--t-fast);
        text-decoration: none
    }

    .pg-btn:hover,
    .pg-btn.active {
        background: rgba(59, 130, 246, 0.1);
        border-color: var(--c-primary);
        color: var(--c-primary)
    }


    /* -------------- analytics page ----------------- */
    .feature-hero {
        padding: 9rem 0 5rem;
        position: relative;
        overflow: hidden
    }

    .feature-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .fh-orb1 {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .fh-orb2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.06), transparent 65%);
        bottom: -150px;
        right: -100px;
        filter: blur(80px);
        pointer-events: none
    }

    .feat-grid-page {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin: 4rem 0
    }

    @media(max-width:991px) {
        .feat-grid-page {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(max-width:575px) {
        .feat-grid-page {
            grid-template-columns: 1fr
        }
    }

    .fp-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 1.8rem;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid)
    }

    .fp-card:hover {
        border-color: rgba(249, 115, 22, 0.25);
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25)
    }

    .fp-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius);
        background: rgba(249, 115, 22, 0.12);
        border: 1px solid rgba(249, 115, 22, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-bottom: 1.1rem
    }

    .fp-title {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.5rem
    }

    .fp-desc {
        font-size: 0.84rem;
        color: var(--c-muted2);
        line-height: 1.65
    }

    /* Social proof strip */
    .sp-strip {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-xl);
        padding: 2rem;
        margin: 4rem 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        text-align: center
    }

    @media(max-width:767px) {
        .sp-strip {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .sp-item {
        padding: 1.2rem;
        border-right: 1px solid var(--c-border)
    }

    .sp-item:last-child {
        border-right: none
    }

    .sp-val {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.3rem
    }

    .sp-label {
        font-size: 0.75rem;
        color: var(--c-muted)
    }

    /* How it works */
    .hiw-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        position: relative;
        margin: 3rem 0
    }

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 16%;
        width: 68%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-border2), transparent);
        z-index: 0
    }

    @media(max-width:767px) {
        .hiw-steps {
            grid-template-columns: 1fr
        }

        .hiw-steps::before {
            display: none
        }
    }

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

    .hiw-num {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
        color: #F97316;
        box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.06)
    }

    .hiw-title {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.4rem
    }

    .hiw-desc {
        font-size: 0.8rem;
        color: var(--c-muted);
        line-height: 1.6
    }

    /* CTA banner */
    .feat-cta {
        background: linear-gradient(135deg, var(--c-surface2), rgba(249, 115, 22, 0.12));
        border: 1px solid rgba(249, 115, 22, 0.25);
        border-radius: var(--radius-xl);
        padding: 4rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin: 5rem 0
    }

    .feat-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #F97316, transparent)
    }

    /* ---------------------- ai-writes page ---------------------- */
    .feature-hero {
        padding: 9rem 0 5rem;
        position: relative;
        overflow: hidden
    }

    .feature-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .fh-orb1 {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.12), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .fh-orb2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.06), transparent 65%);
        bottom: -150px;
        right: -100px;
        filter: blur(80px);
        pointer-events: none
    }

    .feat-grid-page {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin: 4rem 0
    }

    @media(max-width:991px) {
        .feat-grid-page {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(max-width:575px) {
        .feat-grid-page {
            grid-template-columns: 1fr
        }
    }

    .fp-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 1.8rem;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid)
    }

    .fp-card:hover {
        border-color: rgba(139, 92, 246, 0.25);
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25)
    }

    .fp-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius);
        background: rgba(139, 92, 246, 0.12);
        border: 1px solid rgba(139, 92, 246, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-bottom: 1.1rem
    }

    .fp-title {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.5rem
    }

    .fp-desc {
        font-size: 0.84rem;
        color: var(--c-muted2);
        line-height: 1.65
    }

    /* Social proof strip */
    .sp-strip {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-xl);
        padding: 2rem;
        margin: 4rem 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        text-align: center
    }

    @media(max-width:767px) {
        .sp-strip {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .sp-item {
        padding: 1.2rem;
        border-right: 1px solid var(--c-border)
    }

    .sp-item:last-child {
        border-right: none
    }

    .sp-val {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.3rem
    }

    .sp-label {
        font-size: 0.75rem;
        color: var(--c-muted)
    }

    /* How it works */
    .hiw-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        position: relative;
        margin: 3rem 0
    }

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 16%;
        width: 68%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-border2), transparent);
        z-index: 0
    }

    @media(max-width:767px) {
        .hiw-steps {
            grid-template-columns: 1fr
        }

        .hiw-steps::before {
            display: none
        }
    }

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

    .hiw-num {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
        color: #A78BFA;
        box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.06)
    }

    .hiw-title {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.4rem
    }

    .hiw-desc {
        font-size: 0.8rem;
        color: var(--c-muted);
        line-height: 1.6
    }

    /* CTA banner */
    .feat-cta {
        background: linear-gradient(135deg, var(--c-surface2), rgba(139, 92, 246, 0.12));
        border: 1px solid rgba(139, 92, 246, 0.25);
        border-radius: var(--radius-xl);
        padding: 4rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin: 5rem 0
    }

    .feat-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #A78BFA, transparent)
    }

    /* ------------------ agencies page ------------------ */
    .feature-hero {
        padding: 9rem 0 5rem;
        position: relative;
        overflow: hidden
    }

    .feature-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .fh-orb1 {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.12), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .fh-orb2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.06), transparent 65%);
        bottom: -150px;
        right: -100px;
        filter: blur(80px);
        pointer-events: none
    }

    .feat-grid-page {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin: 4rem 0
    }

    @media(max-width:991px) {
        .feat-grid-page {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(max-width:575px) {
        .feat-grid-page {
            grid-template-columns: 1fr
        }
    }

    .fp-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 1.8rem;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid)
    }

    .fp-card:hover {
        border-color: rgba(139, 92, 246, 0.25);
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25)
    }

    .fp-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius);
        background: rgba(139, 92, 246, 0.12);
        border: 1px solid rgba(139, 92, 246, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-bottom: 1.1rem
    }

    .fp-title {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.5rem
    }

    .fp-desc {
        font-size: 0.84rem;
        color: var(--c-muted2);
        line-height: 1.65
    }

    /* Social proof strip */
    .sp-strip {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-xl);
        padding: 2rem;
        margin: 4rem 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        text-align: center
    }

    @media(max-width:767px) {
        .sp-strip {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .sp-item {
        padding: 1.2rem;
        border-right: 1px solid var(--c-border)
    }

    .sp-item:last-child {
        border-right: none
    }

    .sp-val {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.3rem
    }

    .sp-label {
        font-size: 0.75rem;
        color: var(--c-muted)
    }

    /* How it works */
    .hiw-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        position: relative;
        margin: 3rem 0
    }

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 16%;
        width: 68%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-border2), transparent);
        z-index: 0
    }

    @media(max-width:767px) {
        .hiw-steps {
            grid-template-columns: 1fr
        }

        .hiw-steps::before {
            display: none
        }
    }

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

    .hiw-num {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
        color: #A78BFA;
        box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.06)
    }

    .hiw-title {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.4rem
    }

    .hiw-desc {
        font-size: 0.8rem;
        color: var(--c-muted);
        line-height: 1.6
    }

    /* CTA banner */
    .feat-cta {
        background: linear-gradient(135deg, var(--c-surface2), rgba(139, 92, 246, 0.12));
        border: 1px solid rgba(139, 92, 246, 0.25);
        border-radius: var(--radius-xl);
        padding: 4rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin: 5rem 0
    }

    .feat-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #A78BFA, transparent)
    }


    /* ----------------- integration page --------------------- */

    .int-hero {
        padding: 9rem 0 4.5rem;
        position: relative;
        overflow: hidden;
        text-align: center
    }

    .int-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none
    }

    .ih-orb1 {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent 65%);
        top: -200px;
        left: -200px;
        filter: blur(90px);
        pointer-events: none
    }

    .ih-orb2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(6, 229, 163, 0.07), transparent 65%);
        bottom: -150px;
        right: -100px;
        filter: blur(80px);
        pointer-events: none
    }

    /* Search bar */
    .int-search-wrap {
        max-width: 520px;
        margin: 0 auto 1.5rem;
        position: relative
    }

    .int-search {
        width: 100%;
        background: var(--c-surface);
        border: 1px solid var(--c-border2);
        border-radius: 50px;
        padding: 0.85rem 1.4rem 0.85rem 3rem;
        font-family: var(--font-body);
        font-size: 0.92rem;
        color: var(--c-text);
        outline: none;
        transition: border-color var(--t-fast), box-shadow var(--t-fast)
    }

    .int-search:focus {
        border-color: var(--c-primary);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1)
    }

    .int-search::placeholder {
        color: var(--c-muted)
    }

    .int-search-icon {
        position: absolute;
        left: 1.1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--c-muted);
        font-size: 1rem;
        pointer-events: none
    }

    /* Category filter */
    .int-cats {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        margin-bottom: 4rem
    }

    .int-cat {
        padding: 0.42rem 1rem;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--c-border);
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--c-muted2);
        cursor: pointer;
        transition: all var(--t-fast)
    }

    .int-cat:hover {
        background: rgba(59, 130, 246, 0.08);
        border-color: var(--c-primary);
        color: var(--c-primary)
    }

    .int-cat.active {
        background: rgba(59, 130, 246, 0.12);
        border-color: var(--c-primary);
        color: var(--c-primary)
    }

    /* Featured integrations */
    .featured-ints {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin-bottom: 3rem
    }

    @media(max-width:991px) {
        .featured-ints {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(max-width:575px) {
        .featured-ints {
            grid-template-columns: 1fr
        }
    }

    .int-card-featured {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 1.8rem;
        transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
        position: relative;
        overflow: hidden
    }

    .int-card-featured:hover {
        border-color: rgba(59, 130, 246, 0.3);
        transform: translateY(-5px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25)
    }

    .int-card-featured.native::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--c-primary), var(--c-accent))
    }

    .int-logo-big {
        width: 56px;
        height: 56px;
        border-radius: var(--radius);
        border: 1px solid var(--c-border2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        margin-bottom: 1.1rem;
        background: rgba(255, 255, 255, 0.04)
    }

    .int-name {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 0.3rem
    }

    .int-cat-tag {
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--c-muted);
        margin-bottom: 0.7rem
    }

    .int-desc {
        font-size: 0.84rem;
        color: var(--c-muted2);
        line-height: 1.65;
        margin-bottom: 1.2rem
    }

    .int-features {
        list-style: none;
        padding: 0;
        margin: 0 0 1.3rem;
        display: flex;
        flex-direction: column;
        gap: 0.4rem
    }

    .int-features li {
        font-size: 0.78rem;
        color: var(--c-muted2);
        display: flex;
        align-items: center;
        gap: 0.5rem
    }

    .int-features li::before {
        content: '✓';
        color: var(--c-accent);
        font-size: 0.65rem;
        font-weight: 800;
        flex-shrink: 0
    }

    .int-connect-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--c-primary);
        background: rgba(59, 130, 246, 0.08);
        border: 1px solid rgba(59, 130, 246, 0.2);
        padding: 0.4rem 0.9rem;
        border-radius: 50px;
        text-decoration: none;
        transition: all var(--t-fast)
    }

    .int-connect-btn:hover {
        background: rgba(59, 130, 246, 0.15);
        color: var(--c-primary)
    }

    .native-badge {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: rgba(6, 229, 163, 0.12);
        border: 1px solid rgba(6, 229, 163, 0.25);
        color: var(--c-accent);
        font-family: var(--font-display);
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.18rem 0.55rem;
        border-radius: 50px
    }

    /* Section heading */
    .int-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem
    }

    .int-section-title {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 800;
        color: #fff
    }

    /* All integrations grid */
    .all-ints-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 4rem
    }

    @media(max-width:991px) {
        .all-ints-grid {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    @media(max-width:575px) {
        .all-ints-grid {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .int-mini-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        padding: 1.2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.6rem;
        transition: border-color var(--t-fast), transform var(--t-fast);
        cursor: pointer
    }

    .int-mini-card:hover {
        border-color: rgba(59, 130, 246, 0.25);
        transform: translateY(-3px)
    }

    .int-mini-icon {
        font-size: 1.8rem
    }

    .int-mini-name {
        font-family: var(--font-display);
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--c-text)
    }

    .int-mini-cat {
        font-size: 0.68rem;
        color: var(--c-muted)
    }

    /* API section */
    .api-section {
        background: var(--c-surface2);
        border: 1px solid var(--c-border2);
        border-radius: var(--radius-xl);
        padding: 3rem;
        margin: 3rem 0;
        position: relative;
        overflow: hidden
    }

    .api-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--c-primary) 30%, var(--c-accent) 70%, transparent)
    }

    .api-code {
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        padding: 1.5rem;
        font-family: 'Courier New', monospace;
        font-size: 0.82rem;
        line-height: 1.8;
        overflow-x: auto;
        margin-top: 1.2rem
    }

    .code-key {
        color: #A78BFA
    }

    .code-str {
        color: #06E5A3
    }

    .code-num {
        color: #F97316
    }

    .code-comment {
        color: var(--c-muted)
    }

    /* Zapier CTA */
    .zapier-cta {
        background: linear-gradient(135deg, rgba(255, 74, 0, 0.06), rgba(59, 130, 246, 0.06));
        border: 1px solid rgba(255, 74, 0, 0.15);
        border-radius: var(--radius-xl);
        padding: 2.5rem;
        display: flex;
        align-items: center;
        gap: 2rem;
        flex-wrap: wrap;
        margin-bottom: 5rem
    }

    .zapier-icon {
        font-size: 3rem;
        flex-shrink: 0
    }

    .zapier-text h3 {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 0.3rem
    }

    .zapier-text p {
        font-size: 0.87rem;
        color: var(--c-muted2);
        margin: 0
    }