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


    html {
        scroll-behavior: smooth;
    }



    /* ── UTILS ── */
    .container {
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 32px;
    }

    .section-eyebrow {
        font-family: var(--inter);
        font-size: var(--size_Label);
        line-height: var(--line_Label);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--primary);
        margin-bottom: 12px;
    }

    .section-title {
        font-family: var(--poppins);
        font-size: var(--size_H3);
        line-height: var(--line_H3);
        font-weight: 700;
        color: var(--grayDark);
        margin-bottom: 16px;
    }

    .section-title span {
        background: linear-gradient(135deg, var(--primary), var(--primaryMedium));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: var(--poppins);
        font-size: var(--size_H3);
        line-height: var(--line_H3);
        font-weight: 700;
        margin-bottom: 16px;
    }

    .section-sub {
        font-family: var(--inter);
        font-size: var(--size_default);
        line-height: var(--line_default);
        color: var(--gray);
    }

    .center {
        text-align: center;
    }

    .sub-center {
        max-width: 560px;
        margin: 0 auto;
        text-align: center;
    }

    /* ── BUTTONS ── */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: var(--inter);
        font-size: var(--size_Button);
        line-height: var(--line_Button);
        font-weight: 600;
        border-radius: var(--radius);
        padding: 14px 28px;
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition: var(--animation);
        white-space: nowrap;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primaryMedium) 100%);
        color: var(--white);
        box-shadow: 0 4px 16px rgba(119, 37, 152, 0.32);
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(119, 37, 152, 0.42);
    }

    .btn-outline {
        background: var(--white);
        color: var(--primary);
        border: 1.5px solid var(--primaryLight);
        box-shadow: var(--shadowClickable);
    }

    .btn-outline:hover {
        background: var(--primaryMild);
        border-color: var(--primary);
    }

    .btn-ghost {
        background: transparent;
        color: var(--gray);
        border: 1.5px solid var(--grayMild);
    }

    .btn-ghost:hover {
        background: var(--grayMild);
        color: var(--grayDark);
    }

    .btn-sm {
        padding: 10px 20px;
        font-size: var(--size_Label);
        line-height: var(--line_Label);
    }


    /* ── HERO ── */
    .hero {
        padding: 50px 0 50px;
        position: relative;
        overflow: hidden;
        background: linear-gradient(160deg, var(--primaryMild) 0%, rgba(246, 228, 255, 0.3) 40%, var(--white) 65%);
    }

    .hero-blob-1 {
        position: absolute;
        top: -160px;
        right: -160px;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(224, 98, 255, 0.14) 0%, transparent 65%);
        pointer-events: none;
    }

    .hero-blob-2 {
        position: absolute;
        bottom: -80px;
        left: -80px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(119, 37, 152, 0.07) 0%, transparent 65%);
        pointer-events: none;
    }

    .hero-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 64px;
        position: relative;
        z-index: 2;
    }

    /* Hero left */
    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--inter);
        font-size: var(--size_Badge);
        line-height: var(--line_Badge);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--primary);
        background: var(--primaryMild);
        border: 1px solid var(--primaryLight);
        padding: 5px 12px;
        border-radius: 999px;
        margin-bottom: 24px;
    }

    .badge-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--primaryMedium);
        animation: pulse 1.6s ease-in-out infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: .5;
            transform: scale(1.5);
        }
    }

    .hero-title {
        font-family: var(--poppins);
        font-size: clamp(36px, 5.5vw, var(--size_Display));
        line-height: 1.1;
        font-weight: 800;
        color: var(--grayDark);
        margin-bottom: 24px;
        letter-spacing: -1.5px;
    }

    .hero-title .grad {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primaryMedium) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: var(--poppins);
        font-size: clamp(36px, 5.5vw, var(--size_Display));
        line-height: 1.1;
        font-weight: 800;
        margin-bottom: 24px;
        letter-spacing: -1.5px;
    }

    .hero-desc {
        font-family: var(--inter);
        font-size: var(--size_SubHead);
        line-height: var(--line_SubHead);
        color: var(--gray);
        margin-bottom: 40px;
        max-width: 480px;
    }

    .hero-actions {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .hero-social-proof {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 10px;
        padding-top: 5px;
        border-top: 1px solid var(--borderColor);
    }

    .proof-avatars {
        display: flex;
    }

    .proof-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid var(--white);
        background: linear-gradient(135deg, var(--primaryMild), var(--primaryLight));
        display: grid;
        place-items: center;
        font-size: 10px;
        font-weight: 700;
        color: var(--primary);
        margin-left: -9px;
    }

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

    .proof-text {
        font-family: var(--inter);
        font-size: var(--size_Label);
        color: var(--gray);
        line-height: var(--line_Label);
    }

    .proof-text strong {
        color: var(--grayDark);
    }

    /* Hero right – stream widget */
    .hero-right {
        position: relative;
    }

    .stream-widget {
        background: var(--white);
        border-radius: 20px;
        box-shadow: var(--shadowDefault);
        border: 1px solid var(--borderColor);
        overflow: hidden;
    }

    .sw-top {
        padding: 18px 22px;
        border-bottom: 1px solid var(--borderColor);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sw-title-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .sw-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--primaryMild);
        display: grid;
        place-items: center;
        font-size: 16px;
    }

    .sw-name {
        font-family: var(--poppins);
        font-size: var(--size_H6);
        line-height: var(--line_H6);
        font-weight: 700;
        color: var(--grayDark);
    }

    .sw-sub {
        font-family: var(--inter);
        font-size: var(--size_Small);
        color: var(--grayLight);
    }

    .live-pill {
        display: flex;
        align-items: center;
        gap: 5px;
        background: rgba(238, 40, 25, 0.08);
        color: var(--danger);
        font-family: var(--inter);
        font-size: var(--size_Small);
        font-weight: 700;
        letter-spacing: 0.06em;
        padding: 5px 12px;
        border-radius: 999px;
        border: 1px solid rgba(238, 40, 25, 0.18);
    }

    .live-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--danger);
        animation: pulse 1s ease-in-out infinite;
    }

    .sw-preview {
        margin: 18px 22px;
        height: 156px;
        border-radius: var(--radius);
        background: linear-gradient(135deg, var(--primaryMild), #edd5ff);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .preview-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(8px);
        font-family: var(--inter);
        font-size: var(--size_Small);
        font-weight: 600;
        color: var(--grayDark);
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid var(--borderColor);
    }

    .play-btn {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--primaryMedium));
        display: grid;
        place-items: center;
        z-index: 2;
        box-shadow: 0 0 0 12px rgba(119, 37, 152, 0.12), 0 6px 20px rgba(119, 37, 152, 0.35);
        cursor: pointer;
        transition: var(--animationSlow);
    }

    .play-btn:hover {
        transform: scale(1.08);
    }

    .play-btn svg {
        width: 18px;
        height: 18px;
        fill: white;
        margin-left: 3px;
    }

    .sw-body {
        padding: 0 22px 18px;
    }

    .sw-chips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 18px;
    }

    .chip {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--inter);
        font-size: var(--size_Small);
        font-weight: 600;
        color: var(--grayDark);
        background: var(--grayMild);
        border: 1px solid var(--borderColor);
        padding: 6px 14px;
        border-radius: 999px;
        transition: var(--animation);
    }

    .chip:hover {
        background: var(--primaryMild);
        color: var(--primary);
    }

    .chip-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

    .chip-dot.yt {
        background: #FF0000;
    }

    .chip-dot.fb {
        background: #1877F2;
    }

    .chip-dot.rtmp {
        background: var(--warningMedium);
    }

    .sw-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding-top: 16px;
        border-top: 1px solid var(--borderColor);
    }

    .sw-stat {
        text-align: center;
        padding: 12px 8px;
        background: var(--grayMild);
        border-radius: var(--radius);
    }

    .sw-stat-val {
        font-family: var(--poppins);
        font-size: var(--size_H5);
        line-height: var(--line_H5);
        font-weight: 700;
        color: var(--primary);
    }

    .sw-stat-lbl {
        font-family: var(--inter);
        font-size: var(--size_Small);
        color: var(--gray);
        margin-top: 2px;
    }

    .float-card {
        position: absolute;
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadowDark);
        border: 1px solid var(--borderColor);
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--inter);
        font-size: var(--size_Small);
        font-weight: 600;
        color: var(--grayDark);
        animation: floatAnim 3s ease-in-out infinite;
    }

    .float-card.fc1 {
        top: -18px;
        left: -28px;
    }

    .float-card.fc2 {
        bottom: 16px;
        right: -22px;
        animation-delay: 1.4s;
    }

    .float-card .fc-val {
        color: var(--primary);
    }

    @keyframes floatAnim {

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

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

    /* ── LOGO BAR ── */
    .logo-bar {
        padding: 36px 0;
        border-top: 1px solid var(--borderColor);
        border-bottom: 1px solid var(--borderColor);
        background: var(--grayMild);
    }

    .logo-bar-inner {
        display: flex;
        align-items: center;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .lb-label {
        font-family: var(--inter);
        font-size: var(--size_Label);
        color: var(--grayLight);
        font-weight: 500;
        margin-right: 6px;
    }

    .lb-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--inter);
        font-size: var(--size_Label);
        font-weight: 600;
        color: var(--gray);
        padding: 8px 16px;
        border-radius: var(--radius);
        background: var(--white);
        border: 1px solid var(--borderColor);
        box-shadow: var(--shadowClickable);
        transition: var(--animation);
    }

    .lb-chip:hover {
        border-color: var(--primaryLight);
        color: var(--primary);
    }

    .lb-chip span {
        font-size: 17px;
    }

    /* ── HOW IT WORKS ── */
    .how {
        padding: 50px 0;
        background: var(--white);
    }

    .how-header {
        text-align: center;
        margin-bottom: 60px;
    }

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

    .step-card {
        background: var(--white);
        border: 1px solid var(--borderColor);
        border-radius: 16px;
        padding: 32px;
        box-shadow: var(--shadowDefault);
        transition: var(--animation);
        position: relative;
        overflow: hidden;
    }

    .step-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary), var(--primaryMedium));
        opacity: 0;
        transition: var(--animation);
    }

    .step-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadowDark);
    }

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

    .step-num {
        font-family: var(--poppins);
        font-size: 52px;
        font-weight: 800;
        color: var(--primaryMild);
        line-height: 1;
        margin-bottom: 14px;
    }

    .step-icon {
        width: 52px;
        height: 52px;
        border-radius: var(--radius);
        background: var(--primaryMild);
        display: grid;
        place-items: center;
        font-size: 22px;
        margin-bottom: 18px;
    }

    .step-card h3 {
        font-family: var(--poppins);
        font-size: var(--size_H6);
        line-height: var(--line_H6);
        font-weight: 700;
        color: var(--grayDark);
        margin-bottom: 10px;
    }

    .step-card p {
        font-family: var(--inter);
        font-size: var(--size_default);
        line-height: var(--line_default);
        color: var(--gray);
    }

    /* ── FEATURES ── */
    .features {
        padding: 100px 0;
        background: var(--grayMild);
    }

    .features-header {
        margin-bottom: 56px;
    }

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

    .feat-card {
        background: var(--white);
        border: 1px solid var(--borderColor);
        border-radius: 16px;
        padding: 28px;
        box-shadow: var(--shadowDefault);
        transition: var(--animation);
    }

    .feat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadowDark);
        border-color: var(--primaryLight);
    }

    .feat-icon {
        width: 52px;
        height: 52px;
        border-radius: var(--radius);
        background: var(--primaryMild);
        display: grid;
        place-items: center;
        font-size: 22px;
        margin-bottom: 18px;
    }

    .feat-card h3 {
        font-family: var(--poppins);
        font-size: var(--size_H6);
        line-height: var(--line_H6);
        font-weight: 700;
        color: var(--grayDark);
        margin-bottom: 8px;
    }

    .feat-card p {
        font-family: var(--inter);
        font-size: 15px;
        line-height: var(--line_default);
        color: var(--gray);
    }

    /* ── PLATFORMS ── */
    .platforms {
        padding: 50px 0;
        background: var(--white);
    }

    .platforms-header {
        text-align: center;
        margin-bottom: 52px;
    }

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

    .platform-card {
        background: var(--white);
        border: 1.5px solid var(--borderColor);
        border-radius: 20px;
        padding: 40px 28px;
        text-align: center;
        box-shadow: var(--shadowDefault);
        transition: var(--animation);
    }

    .platform-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadowDark);
        border-color: var(--primaryLight);
    }

    .p-emoji {
        font-size: 40px;
        margin-bottom: 16px;
        display: block;
    }

    .platform-card h3 {
        font-family: var(--poppins);
        font-size: var(--size_H5);
        line-height: var(--line_H5);
        font-weight: 700;
        color: var(--grayDark);
        margin-bottom: 8px;
    }

    .platform-card p {
        font-family: var(--inter);
        font-size: var(--size_default);
        line-height: var(--line_default);
        color: var(--gray);
    }

    .platform-verified {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 16px;
        font-family: var(--inter);
        font-size: var(--size_Small);
        font-weight: 600;
        color: var(--success);
        background: var(--successMild);
        padding: 3px 10px;
        border-radius: 999px;
    }

    /* ── STATS ── */
    .stats {
        padding: 80px 0;
        background: linear-gradient(135deg, var(--primary) 0%, #5a1a72 100%);
    }

    .stats-inner {
        text-align: center;
    }

    .stats-title {
        font-family: var(--poppins);
        font-size: var(--size_H3);
        line-height: var(--line_H3);
        font-weight: 700;
        color: var(--white);
        margin-bottom: 8px;
    }

    .stats-sub {
        font-family: var(--inter);
        font-size: var(--size_default);
        color: var(--primaryLight);
        margin-bottom: 52px;
    }

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

    .stat-box {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 16px;
        padding: 32px 20px;
        text-align: center;
        backdrop-filter: blur(8px);
        transition: var(--animation);
    }

    .stat-box:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-3px);
    }

    .stat-num {
        font-family: var(--poppins);
        font-size: clamp(28px, 3.5vw, 40px);
        font-weight: 800;
        color: var(--white);
        margin-bottom: 6px;
    }

    .stat-desc {
        font-family: var(--inter);
        font-size: var(--size_Label);
        color: var(--primaryLight);
    }

    /* ── TESTIMONIALS ── */
    .testimonials {
        padding: 50px 0;
        background: var(--grayMild);
    }

    .testi-header {
        text-align: center;
        margin-bottom: 56px;
    }

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

    .testi-card {
        background: var(--white);
        border: 1px solid var(--borderColor);
        border-radius: 20px;
        padding: 28px;
        box-shadow: var(--shadowDefault);
        transition: var(--animation);
    }

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

    .testi-stars {
        color: var(--warningMedium);
        font-size: 15px;
        margin-bottom: 14px;
    }

    .testi-text {
        font-family: var(--inter);
        font-size: var(--size_default);
        line-height: var(--line_default);
        color: var(--grayDark);
        margin-bottom: 20px;
        font-style: italic;
    }

    .testi-author {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .testi-avi {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primaryMild), var(--primaryLight));
        display: grid;
        place-items: center;
        font-family: var(--poppins);
        font-size: var(--size_Label);
        font-weight: 700;
        color: var(--primary);
    }

    .testi-name {
        font-family: var(--poppins);
        font-size: var(--size_Label);
        font-weight: 700;
        color: var(--grayDark);
    }

    .testi-role {
        font-family: var(--inter);
        font-size: var(--size_Small);
        color: var(--grayLight);
    }

    /* ── PRICING ── */
    .pricing {
        padding: 50px 0;
        background: var(--white);
    }

    .pricing-header {
        text-align: center;
        margin-bottom: 56px;
    }

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

    .pricing-card {
        background: var(--white);
        border: 1.5px solid var(--borderColor);
        border-radius: 20px;
        padding: 36px 28px;
        box-shadow: var(--shadowDefault);
        position: relative;
        overflow: hidden;
        transition: var(--animation);
    }

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

    .pricing-card.featured {
        border-color: var(--primary);
        box-shadow: 0 0 0 1px var(--primary), var(--shadowDefault);
    }

    .pop-badge {
        position: absolute;
        top: 0;
        right: 0;
        background: linear-gradient(135deg, var(--primary), var(--primaryMedium));
        color: var(--white);
        font-family: var(--inter);
        font-size: var(--size_Small);
        font-weight: 700;
        letter-spacing: 0.04em;
        padding: 6px 20px;
        border-radius: 0 20px 0 12px;
    }

    .plan-label {
        font-family: var(--inter);
        font-size: var(--size_Label);
        font-weight: 600;
        color: var(--grayLight);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 10px;
    }

    .price-row {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        margin-bottom: 2px;
    }

    .price-cur {
        font-family: var(--poppins);
        font-size: var(--size_H5);
        font-weight: 700;
        color: var(--grayDark);
        margin-bottom: 5px;
    }

    .price-amt {
        font-family: var(--poppins);
        font-size: 40px;
        font-weight: 800;
        color: var(--grayDark);
        line-height: 1;
    }

    .price-amt.featured {
        color: var(--primary);
    }

    .price-period {
        font-family: var(--inter);
        font-size: var(--size_Small);
        color: var(--grayLight);
        margin-bottom: 4px;
    }

    .price-og {
        font-family: var(--inter);
        font-size: var(--size_Small);
        color: var(--grayLight);
        margin-bottom: 22px;
    }

    .discount-tag {
        background: var(--successMild);
        color: var(--success);
        padding: 2px 8px;
        border-radius: 999px;
        font-weight: 700;
        margin-left: 6px;
    }

    .plan-divider {
        border: none;
        border-top: 1px solid var(--borderColor);
        margin: 18px 0;
    }

    .plan-features {
        list-style: none;
        margin-bottom: 26px;
    }

    .plan-features li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid var(--borderColor);
        font-family: var(--inter);
        font-size: 15px;
        color: var(--grayDark);
    }

    .plan-features li:last-child {
        border-bottom: none;
    }

    .chk {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--successMild);
        display: grid;
        place-items: center;
        margin-top: 2px;
    }

    .chk svg {
        width: 10px;
        height: 10px;
        stroke: var(--success);
        fill: none;
        stroke-width: 2.5;
    }

    .plan-cta {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* ── FAQ ── */
    .faq {
        padding: 50px 0;
        background: var(--grayMild);
    }

    .faq-wrap {
        max-width: 720px;
        margin: 0 auto;
    }

    .faq-header {
        text-align: center;
        margin-bottom: 52px;
    }

    .faq-item {
        background: var(--white);
        border: 1px solid var(--borderColor);
        border-radius: var(--radius);
        margin-bottom: 12px;
        box-shadow: var(--shadowClickable);
        overflow: hidden;
        transition: var(--animation);
    }

    .faq-item.open {
        border-color: var(--primaryLight);
        box-shadow: var(--shadowDropdown);
    }

    .faq-q {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        cursor: pointer;
        user-select: none;
        font-family: var(--poppins);
        font-size: var(--size_H6);
        line-height: var(--line_H6);
        font-weight: 600;
        color: var(--grayDark);
        transition: var(--animation);
    }

    .faq-q:hover {
        color: var(--primary);
    }

    .faq-item.open .faq-q {
        color: var(--primary);
    }

    .faq-toggle {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        flex-shrink: 0;
        background: var(--grayMild);
        display: grid;
        place-items: center;
        font-size: 18px;
        font-weight: 300;
        color: var(--gray);
        transition: var(--animationSlow);
    }

    .faq-item.open .faq-toggle {
        background: var(--primaryMild);
        color: var(--primary);
        transform: rotate(45deg);
    }

    .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s;
        font-family: var(--inter);
        font-size: var(--size_default);
        line-height: var(--line_default);
        color: var(--gray);
        padding: 0 24px;
    }

    .faq-item.open .faq-a {
        max-height: 300px;
        padding: 0 24px 22px;
    }

    /* ── CTA ── */
    .cta-sec {
        padding: 50px 0;
        text-align: center;
        position: relative;
        overflow: hidden;
        background: linear-gradient(160deg, var(--primaryMild) 0%, rgba(246, 228, 255, 0.2) 50%, var(--white) 100%);
    }

    .cta-sec::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 800px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(ellipse, rgba(224, 98, 255, 0.1), transparent 65%);
        pointer-events: none;
    }

    .cta-sec .section-title {
        margin-bottom: 16px;
    }

    .cta-sec p {
        font-family: var(--inter);
        font-size: var(--size_SubHead);
        line-height: var(--line_SubHead);
        color: var(--gray);
        margin-bottom: 40px;
    }

    .cta-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .cta-note {
        margin-top: 20px;
        font-family: var(--inter);
        font-size: var(--size_Small);
        color: var(--grayLight);
    }

    /* ── FOOTER ── */
    footer {
        background: var(--grayDark);
        padding: 52px 0 32px;
    }

    .footer-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 48px;
        flex-wrap: wrap;
    }

    .footer-brand {
        max-width: 280px;
    }

    .footer-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        text-decoration: none;
    }

    .footer-logo-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        font-size: 17px;
        background: linear-gradient(135deg, var(--primary), var(--primaryMedium));
        display: grid;
        place-items: center;
    }

    .footer-logo-text {
        font-family: var(--poppins);
        font-size: var(--size_H6);
        font-weight: 700;
        color: var(--white);
    }

    .footer-tagline {
        font-family: var(--inter);
        font-size: var(--size_Label);
        color: var(--grayLight);
        line-height: var(--line_default);
    }

    .footer-col h4 {
        font-family: var(--poppins);
        font-size: var(--size_Label);
        font-weight: 700;
        color: var(--white);
        margin-bottom: 16px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .footer-col ul {
        list-style: none;
    }

    .footer-col li {
        margin-bottom: 10px;
    }

    .footer-col a {
        font-family: var(--inter);
        font-size: var(--size_Label);
        color: var(--grayLight);
        text-decoration: none;
        transition: var(--animation);
    }

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

    .footer-bottom {
        padding-top: 28px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .footer-copy {
        font-family: var(--inter);
        font-size: var(--size_Small);
        color: var(--grayLight);
    }

    .footer-btm-links {
        display: flex;
        gap: 22px;
    }

    .footer-btm-links a {
        font-family: var(--inter);
        font-size: var(--size_Small);
        color: var(--grayLight);
        text-decoration: none;
        transition: var(--animation);
    }

    .footer-btm-links a:hover {
        color: var(--primaryLight);
    }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(22px);
        }

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

    .reveal {
        opacity: 0;
    }

    .reveal.in {
        animation: fadeUp 0.5s ease both;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 960px) {
        .hero-inner {
            grid-template-columns: 1fr;
        }

        .hero-right {
            display: none;
        }

        .steps-grid,
        .feat-grid,
        .platform-cards,
        .pricing-grid,
        .testi-grid,
        .stats-grid {
            grid-template-columns: 1fr;
        }

        .section-title {
            font-size: 28px;
            line-height: 38px;
        }
    }

    @media (max-width: 640px) {
        .nav-links {
            display: none;
        }

        .container {
            padding: 0 20px;
        }

        section,
        .how,
        .features,
        .platforms,
        .stats,
        .testimonials,
        .pricing,
        .faq,
        .cta-sec {
            padding: 72px 0;
        }
    }