/* =========================================================
   AUTO LIGHT / DARK MODE ENGINE
   Works on top of existing CSS
========================================================= */

/* =========================================================
   LIGHT MODE
========================================================= */

:root{

    --bg:#f5f7fb;
    --primary:#562dd4;
    --green:#009E45;
    --light:#FFFDB7;

    --text:#111827;
    --muted:#667085;

    --card:#ffffff;

    --border:#0f172a14;

    --surface:#eef2f7;

    --shadow:
        0 10px 30px rgba(15,23,42,.05);

    --shadow-lg:
        0 20px 50px rgba(15,23,42,.08);

}

/* =========================================================
   LIGHT MODE
========================================================= */

:root{

    --bg:#f5f7fb;

    --primary:#562dd4;
    --green:#009E45;

    /* changed */
    --light:#111827;

    --text:#111827;
    --muted:#667085;

    --card:#ffffff;

    --border:#0f172a14;

}

/* =========================================================
   DARK MODE
========================================================= */

[data-theme="dark"]{

    --bg:#1F1F29;

    --primary:#562dd4;
    --green:#009E45;

    /* original cream highlight */
    --light:#FFFDB7;

    --text:#ffffff;
    --muted:#b7b7c8;

    --card:#2a2a38;

    --border:#ffffff14;

}

/* =========================================================
   DARK MODE
========================================================= */

[data-theme="dark"]{

    --bg:#1F1F29;

    --text:#ffffff;
    --muted:#b7b7c8;

    --card:#2a2a38;

    --border:#ffffff14;

    --surface:#252532;

    --shadow:
        0 20px 40px rgba(0,0,0,.35);

    --shadow-lg:
        0 30px 70px rgba(0,0,0,.45);

}

/* =========================================================
   GLOBAL
========================================================= */

html,
body{

    background:var(--bg) !important;
    color:var(--text) !important;

}

/* =========================================================
   TEXT
========================================================= */

.hero p,
.section-sub,
.feature p,
.card ul li,
.plan-desc,
.billing-note,
.period,
.footer-links,
.nav-links,
.testimonial p{

    color:var(--muted) !important;

}

.plan-features li,
table td,
h1,
h2,
h3,
h4{

    color:var(--text);

}

/* =========================================================
   HEADER
========================================================= */

header{

    background:
        rgba(255,255,255,.82) !important;

    border-bottom:
        1px solid var(--border) !important;

}

[data-theme="dark"] header{

    background:
        rgba(31,31,41,.84) !important;

}

/* =========================================================
   CARDS
========================================================= */

.card,
.feature,
.testimonial,
.faq-item,
.plan-card,
.app-card,
.pricing-board,
.stat{

    background:var(--card) !important;

    border-color:
        var(--border) !important;

    box-shadow:
        var(--shadow);

}

/* =========================================================
   APP CARD
========================================================= */

.app-card{

    background:
        linear-gradient(
            180deg,
            rgba(86,45,212,.12),
            var(--card)
        ) !important;

}

/* =========================================================
   BUTTONS
========================================================= */

.btn-outline{

    background:
        rgba(255,255,255,.7);

    border:
        1px solid var(--border) !important;

    color:var(--text);

}

[data-theme="dark"] .btn-outline{

    background:#ffffff0a;

}

/* =========================================================
   INPUTS
========================================================= */

.input{

    background:var(--surface) !important;

    color:var(--text) !important;

    border:
        1px solid var(--border) !important;

}

.input::placeholder{

    color:var(--muted);

}

/* =========================================================
   PRICING
========================================================= */

.pricing-board{

    background:var(--card) !important;

}

.pricing-toggle{

    background:var(--surface) !important;

    border:
        1px solid var(--border);

}

.pricing-grid{

    background:var(--border);

}

.plan-card{

    background:var(--card);

}

.featured-plan{

    background:
        linear-gradient(
            180deg,
            rgba(86,45,212,.14),
            var(--card)
        ) !important;

}

/* =========================================================
   TABLE
========================================================= */

table th,
table td{

    border-color:
        var(--border) !important;

}

/* =========================================================
   FOOTER
========================================================= */

footer{

    background:var(--card);

    border-top:
        1px solid var(--border);

}

/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu-inner{

    background:var(--bg);

}

.mobile-menu-links a,
.mobile-close,
.mobile-menu-toggle,
.theme-toggle{

    background:var(--card);

    border:
        1px solid var(--border);

    color:var(--text);

}

/* =========================================================
   TOP NUDGE
========================================================= */

.top-nudge-inner{

    background:
        rgba(255,255,255,.88);

    border:
        1px solid var(--border);

}

[data-theme="dark"] .top-nudge-inner{

    background:
        rgba(31,31,41,.88);

}

/* =========================================================
   LIGHT MODE SHADOWS
========================================================= */

[data-theme="light"] .card,
[data-theme="light"] .feature,
[data-theme="light"] .testimonial,
[data-theme="light"] .faq-item,
[data-theme="light"] .plan-card{

    box-shadow:
        0 10px 24px rgba(15,23,42,.04);

}

/* =========================================================
   BADGE THEMING
========================================================= */

/* LIGHT MODE */

.badge{

    background:
        rgba(86,45,212,.08) !important;

    color:
        var(--primary) !important;

    border:
        1px solid rgba(86,45,212,.14) !important;

}

/* DARK MODE */

[data-theme="dark"] .badge{

    background:
        rgba(124,93,255,.18) !important;

    color:
        #ece4ff !important;

    border:
        1px solid rgba(124,93,255,.28) !important;

}


/* =========================================================
   MODERN CTA
========================================================= */

.modern-cta{

    position:relative;

    overflow:hidden;

    border-radius:36px;

    padding:
        70px 40px;

    isolation:isolate;

    background:
        linear-gradient(
            135deg,
            #562dd4 0%,
            #3f24a8 45%,
            #009E45 100%
        );

    box-shadow:
        0 30px 80px rgba(86,45,212,.28);

}

/* =========================================================
   LIGHT MODE CTA
========================================================= */

[data-theme="light"] .modern-cta{

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f4ff 45%,
            #eefcf4 100%
        );

    border:
        1px solid rgba(86,45,212,.08);

    box-shadow:
        0 25px 60px rgba(15,23,42,.06);

}

/* =========================================================
   CONTENT
========================================================= */

.cta-content{

    position:relative;
    z-index:2;

    text-align:center;

}

.modern-cta h2{

    font-size:
        clamp(2.3rem,5vw,4.5rem);

    line-height:1;

    margin:
        22px 0 24px;

    font-weight:800;

    color:#fff;

}

[data-theme="light"] .modern-cta h2{

    color:#111827;

}

.modern-cta h2 span{

    color:var(--light);

}

[data-theme="light"] .modern-cta h2 span{

    color:var(--primary);

}

.modern-cta p{

    max-width:760px;

    margin:
        0 auto 34px;

    color:
        rgba(255,255,255,.82);

    font-size:1.08rem;

}

[data-theme="light"] .modern-cta p{

    color:#667085;

}

/* =========================================================
   PATTERNS
========================================================= */

.cta-pattern{

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(255,255,255,.14),
            transparent 70%
        );

    top:-180px;
    right:-120px;

    z-index:0;

}

.pattern-2{

    width:300px;
    height:300px;

    left:-100px;
    bottom:-120px;

    top:auto;
    right:auto;

    background:
        radial-gradient(
            rgba(255,255,255,.08),
            transparent 70%
        );

}

/* =========================================================
   GRID PATTERN
========================================================= */

.modern-cta::before{

    content:"";

    position:absolute;
    inset:0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size:
        36px 36px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 85%
        );

    z-index:0;

}

[data-theme="light"] .modern-cta::before{

    background-image:

        linear-gradient(
            rgba(86,45,212,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(86,45,212,.05) 1px,
            transparent 1px
        );

}

/* =========================================================
   GLOW
========================================================= */

.cta-glow{

    position:absolute;

    inset:auto;

    width:420px;
    height:420px;

    background:
        radial-gradient(
            rgba(255,255,255,.16),
            transparent 70%
        );

    bottom:-200px;
    left:50%;

    transform:
        translateX(-50%);

    filter:blur(30px);

    z-index:0;

}

/* =========================================================
   CTA BADGE
========================================================= */

.cta-badge{

    background:
        rgba(255,255,255,.14) !important;

    color:#fff !important;

    border:
        1px solid rgba(255,255,255,.18) !important;

}

[data-theme="light"] .cta-badge{

    background:
        rgba(86,45,212,.08) !important;

    color:
        var(--primary) !important;

    border:
        1px solid rgba(86,45,212,.12) !important;

}

/* =========================================================
   STATS
========================================================= */

.cta-stats{

    margin-top:40px;

    display:flex;
    justify-content:center;
    gap:18px;

    flex-wrap:wrap;

}

.cta-stat{

    min-width:140px;

    padding:18px;

    border-radius:22px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter:
        blur(14px);

}

[data-theme="light"] .cta-stat{

    background:
        rgba(255,255,255,.72);

    border:
        1px solid rgba(86,45,212,.08);

}

.cta-stat strong{

    display:block;

    font-size:1.4rem;

    color:#fff;

}

[data-theme="light"] .cta-stat strong{

    color:#111827;

}

.cta-stat span{

    color:
        rgba(255,255,255,.7);

    font-size:.9rem;

}

[data-theme="light"] .cta-stat span{

    color:#667085;

}

/* =========================================================
   CTA BUTTONS
========================================================= */

.cta-actions{

    justify-content:center;

}

[data-theme="light"] .modern-cta .btn-outline{

    background:#fff;

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .modern-cta{

        padding:
            50px 24px;

        border-radius:28px;

    }

    .cta-stat{

        width:100%;

    }

}