:root
{
	--bg:#1F1F29;
	--primary:#562dd4;
	--green:#009E45;
	--light:#FFFDB7;
	--text:#fff;
	--muted:#b7b7c8;
	--card:#2a2a38;
	--border:#ffffff14
}

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

html
{
	scroll-behavior:smooth
}

body
{
	font-family:'Inter',sans-serif;
	background:var(--bg);
	color:var(--text);
	line-height:1.6;
	overflow-x:hidden
}

a
{
	text-decoration:none;
	color:inherit
}

img
{
	max-width:100%
}

.container
{
	width:min(1180px,92%);
	margin:auto
}

section
{
	padding:70px 0
}

.badge
{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 18px;
	border-radius:999px;
	background:#562dd426;
	color:#d8ccff;
	font-size:.9rem;
	border:1px solid #562dd44d
}

.btn
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:15px 24px;
	border-radius:16px;
	font-weight:700;
	transition:.25s ease;
	border:none;
	cursor:pointer
}

.btn-primary
{
	background:var(--primary);
	color:#fff;
	box-shadow:0 10px 25px #562dd459
}

.btn-primary:hover
{
	transform:translateY(-2px)
}

.btn-outline
{
	border:1px solid #ffffff1f;
	background:#ffffff0a
}

header
{
	position:sticky;
	top:0;
	z-index:1000;
	backdrop-filter:blur(14px);
	background:#1f1f29d9;
	border-bottom:1px solid var(--border)
}

.nav
{
	height:74px;
	display:flex;
	align-items:center;
	justify-content:space-between
}

.logo
{
	font-size:1.4rem;
	font-weight:800
}

.logo span
{
	color:var(--light)
}

.nav-links
{
	display:flex;
	gap:24px;
	font-size:.95rem;
	color:var(--muted)
}

.hero
{
	padding-top:80px
}

.hero-grid
{
	display:grid;
	grid-template-columns:1fr;
	gap:40px;
	align-items:center
}

.hero h1
{
	font-size:3rem;
	line-height:1.1;
	margin:20px 0
}

.hero h1 span
{
	color:var(--light)
}

.hero p
{
	color:var(--muted);
	font-size:1.08rem;
	max-width:640px
}

.hero-actions
{
	margin-top:28px;
	display:flex;
	flex-wrap:wrap;
	gap:16px
}

.app-card
{
	background:linear-gradient(180deg,#2f2f43,#252532);
	border:1px solid var(--border);
	border-radius:28px;
	padding:26px;
	box-shadow:0 20px 40px #00000040
}

.stats
{
	margin-top:24px;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:14px
}

.stat
{
	background:#ffffff08;
	border-radius:18px;
	padding:18px;
	border:1px solid var(--border)
}

.stat h3
{
	font-size:1.6rem;
	color:var(--light)
}

.section-title
{
	text-align:center;
	margin-bottom:18px;
	font-size:2.2rem
}

.section-sub
{
	text-align:center;
	color:var(--muted);
	max-width:700px;
	margin:0 auto 50px
}

.pricing
{
	display:grid;
	grid-template-columns:1fr;
	gap:24px
}

.card
{
	background:var(--card);
	border-radius:26px;
	padding:28px;
	border:1px solid var(--border);
	position:relative
}

.popular
{
	border:1px solid #fffdb766;
	transform:scale(1.02)
}

.popular-badge
{
	position:absolute;
	top:16px;
	right:16px;
	background:var(--light);
	color:#111;
	padding:8px 14px;
	border-radius:999px;
	font-size:.75rem;
	font-weight:800
}

.price
{
	font-size:3rem;
	font-weight:800;
	margin:18px 0
}

.card ul
{
	list-style:none;
	margin:20px 0
}

.card ul li
{
	margin-bottom:12px;
	color:var(--muted)
}

.features-grid
{
	display:grid;
	grid-template-columns:1fr;
	gap:20px
}

.feature
{
	background:var(--card);
	border-radius:24px;
	padding:24px;
	border:1px solid var(--border)
}

.feature h3
{
	margin:12px 0
}

.feature p
{
	color:var(--muted)
}

.compare
{
	overflow:auto
}

table
{
	width:100%;
	border-collapse:collapse;
	min-width:700px
}

table th,table td
{
	padding:18px;
	border-bottom:1px solid var(--border);
	text-align:left
}

table th
{
	color:var(--light)
}

.testimonials
{
	display:grid;
	grid-template-columns:1fr;
	gap:20px
}

.testimonial
{
	background:var(--card);
	border-radius:24px;
	padding:24px;
	border:1px solid var(--border)
}

.testimonial p
{
	color:var(--muted);
	margin-bottom:18px
}

.faq
{
	display:grid;
	gap:16px
}

.faq-item
{
	background:var(--card);
	border-radius:18px;
	padding:20px;
	border:1px solid var(--border)
}

.cta
{
	background:linear-gradient(135deg,#562dd4,#009E45);
	border-radius:34px;
	padding:40px;
	text-align:center
}

.contact-grid
{
	display:grid;
	grid-template-columns:1fr;
	gap:26px
}

.input
{
	width:100%;
	padding:16px;
	border-radius:16px;
	border:1px solid var(--border);
	background:#252532;
	color:#fff;
	outline:none
}

textarea.input
{
	min-height:140px;
	resize:vertical
}

footer
{
	border-top:1px solid var(--border);
	padding:40px 0
}

.footer-grid
{
	display:grid;
	grid-template-columns:1fr;
	gap:30px
}

.footer-links
{
	display:grid;
	gap:10px;
	color:var(--muted)
}

.whatsapp
{
	position:fixed;
	right:18px;
	bottom:18px;
	width:62px;
	height:62px;
	border-radius:50%;
	background:#25D366;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:28px;
	color:#fff;
	box-shadow:0 12px 30px #00000059;
	z-index:999
}

@media(min-width:768px) {
	.hero-grid
	{
		grid-template-columns:1.2fr .8fr
	}

	.pricing
	{
		grid-template-columns:repeat(2,1fr)
	}

	.features-grid
	{
		grid-template-columns:repeat(2,1fr)
	}

	.testimonials
	{
		grid-template-columns:repeat(2,1fr)
	}

	.contact-grid
	{
		grid-template-columns:1fr 1fr
	}

	.footer-grid
	{
		grid-template-columns:2fr 1fr 1fr
	}
}

@media(min-width:1024px) {
	.pricing
	{
		grid-template-columns:repeat(4,1fr)
	}

	.features-grid
	{
		grid-template-columns:repeat(4,1fr)
	}

	.testimonials
	{
		grid-template-columns:repeat(3,1fr)
	}

	.hero h1
	{
		font-size:4.6rem
	}
}

.pricing-section
{
	padding:90px 0
}

.pricing-board
{
	background:#252532;
	border:1px solid #ffffff14;
	border-radius:32px;
	overflow:hidden
}

.pricing-toggle-wrap
{
	display:flex;
	justify-content:center;
	padding:32px 20px;
	border-bottom:1px solid #ffffff0f
}

.pricing-toggle
{
	display:inline-flex;
	background:#1b1b24;
	padding:5px;
	border-radius:999px;
	border:1px solid #ffffff0f
}

.pricing-toggle-btn
{
	border:none;
	background:transparent;
	color:#a7a7ba;
	padding:12px 20px;
	border-radius:999px;
	cursor:pointer;
	font-weight:600;
	font-size:.95rem;
	transition:.25s;
	display:flex;
	align-items:center;
	gap:10px
}

.pricing-toggle-btn.active
{
	background:#562dd4;
	color:#fff;
	box-shadow:0 10px 25px #562dd459
}

.save-badge
{
	background:#009E45;
	color:#fff;
	font-size:.7rem;
	padding:4px 8px;
	border-radius:999px
}

.pricing-grid
{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:1px;
	background:#ffffff0f
}

.plan-card
{
	background:#252532;
	padding:34px 28px;
	position:relative;
	display:flex;
	flex-direction:column
}

.featured-plan
{
	background:linear-gradient(180deg,#562dd433,#252532)
}

.plan-badge
{
	position:absolute;
	top:16px;
	right:16px;
	background:#FFFDB7;
	color:#111;
	font-size:.72rem;
	padding:7px 12px;
	border-radius:999px;
	font-weight:800
}

.plan-label
{
	color:#bdbdd3;
	font-size:.78rem;
	margin-bottom:20px;
	font-weight:700
}

.plan-price
{
	display:flex;
	align-items:flex-start;
	margin-bottom:10px
}

.currency
{
	font-size:1.3rem;
	margin-top:10px
}

.amount
{
	font-size:4rem;
	line-height:1;
	font-weight:800;
	letter-spacing:-.05em
}

.period
{
	color:#999;
	margin-left:8px;
	margin-top:24px
}

.billing-note
{
	color:#8f8fa7;
	font-size:.85rem;
	margin-bottom:18px
}

.plan-desc
{
	color:#b8b8c7;
	margin-bottom:24px
}

.plan-features
{
	list-style:none;
	display:flex;
	flex-direction:column;
	gap:14px;
	margin-bottom:30px;
	flex:1
}

.plan-features li
{
	display:flex;
	align-items:center;
	gap:10px;
	color:#d5d5df;
	font-size:.95rem
}

.plan-features i
{
	color:#009E45;
	font-size:1rem
}

.pricing-btn
{
	width:100%
}

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

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

	.amount
	{
		font-size:3.4rem
	}
}

html
{
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}


/* =========================================================
   PREMIUM TOP NUDGE PILL
========================================================= */

.top-nudge-pill{

    position:relative;

    display:inline-flex;
    align-items:center;
    gap:10px;

    white-space:nowrap;

    padding:
        12px 18px;

    border-radius:999px;

    overflow:hidden;

    font-size:.82rem;
    font-weight:800;

    letter-spacing:.02em;

    color:#fff;

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

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

    box-shadow:

        0 10px 30px rgba(86,45,212,.38),

        inset 0 1px 0 rgba(255,255,255,.14);

}

/* =========================================================
   SHINE EFFECT
========================================================= */

.top-nudge-pill::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    transform:skewX(-18deg);

    animation:
        nudgeShine 4.5s linear infinite;

}

/* =========================================================
   ICON
========================================================= */

.top-nudge-pill i{

    font-size:.95rem;

    color:#FFFDB7;

    filter:
        drop-shadow(
            0 0 10px rgba(255,253,183,.4)
        );

}

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

[data-theme="light"] .top-nudge-pill{

    background:
        linear-gradient(
            135deg,
            #562dd4 0%,
            #6c42f5 100%
        );

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

    box-shadow:

        0 12px 32px rgba(86,45,212,.18),

        inset 0 1px 0 rgba(255,255,255,.18);

}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes nudgeShine{

    0%{

        left:-120%;

    }

    100%{

        left:140%;

    }

}

/* =========================================================
   TOP BAR ENHANCEMENT
========================================================= */

.top-nudge-inner{

    position:relative;

    overflow:hidden;

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

    backdrop-filter:
        blur(28px);

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

    box-shadow:

        0 25px 60px rgba(0,0,0,.28),

        inset 0 1px 0 rgba(255,255,255,.05);

}

/* subtle gradient edge */

.top-nudge-inner::before{

    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    padding:1px;

    background:
        linear-gradient(
            135deg,
            rgba(124,93,255,.35),
            rgba(255,255,255,.04),
            rgba(0,158,69,.18)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}




/* =========================================================
   PUBLISHER MARQUEE
========================================================= */

.publisher-marquee-section{

    position:relative;

    overflow:hidden;

    padding:
        0px 0;

}

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

.publisher-marquee-head{

    text-align:center;

    max-width:860px;

    margin:
        0 auto 60px;

}

.publisher-marquee-head .section-title span{

    color:var(--primary);

}

/* =========================================================
   MARQUEE
========================================================= */

.publisher-marquee{

    position:relative;

    overflow:hidden;

    margin-bottom:24px;

}

/* fade edges */

.publisher-marquee::before,
.publisher-marquee::after{

    content:"";

    position:absolute;

    top:0;
    bottom:0;

    width:140px;

    z-index:2;

    pointer-events:none;

}

.publisher-marquee::before{

    left:0;

    background:
        linear-gradient(
            90deg,
            var(--bg),
            transparent
        );

}

.publisher-marquee::after{

    right:0;

    background:
        linear-gradient(
            -90deg,
            var(--bg),
            transparent
        );

}

/* =========================================================
   TRACK
========================================================= */

.publisher-track{

    display:flex;

    gap:24px;

    width:max-content;

    animation:
        marqueeMove 45s linear infinite;

}

.reverse-marquee .publisher-track{

    animation-direction:reverse;

    animation-duration:35s;

}

/* pause on hover */

.publisher-marquee:hover .publisher-track{

    animation-play-state:paused;

}

/* =========================================================
   BIG CARD
========================================================= */

.publisher-card{

    width:340px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:32px;

    background:var(--card);

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

    box-shadow:
        var(--shadow);

    transition:.35s;

}

.publisher-card:hover{

    transform:
        translateY(-6px);

}

.publisher-card img{

    width:100%;

    object-fit:cover;

}

.publisher-info{

    padding:24px;

}

.publisher-info h3{

    margin-bottom:10px;

    font-size:1.25rem;

}

.publisher-info span{

    color:var(--muted);

}

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

.publisher-mini-card{

    height:68px;

    padding:
        0 28px;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--card);

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

    box-shadow:
        var(--shadow);

    white-space:nowrap;

    font-weight:700;

    color:var(--text);

}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes marqueeMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

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

[data-theme="light"] .publisher-card{

    background:#fff;

}

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

@media(max-width:700px){

    .publisher-card{

        width:280px;

    }

    .publisher-card img{

        height:180px;

    }

    .publisher-marquee::before,
    .publisher-marquee::after{

        width:60px;

    }

}


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

.modern-footer{

    position:relative;

    overflow:hidden;

    margin-top:100px;

    padding:
        0 0 30px;

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

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(86,45,212,.03)
        );

}

/* =========================================================
   TRUST BAR
========================================================= */

.footer-trust-bar{

    display:grid;
grid-template-columns:
    repeat(3,1fr);

    gap:18px;

    padding:
        40px 0 50px;

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

}

.footer-trust-item{

    min-height:110px;

    padding:22px;

    border-radius:28px;

    background:var(--card);

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

    box-shadow:
        var(--shadow);

    display:flex;
    align-items:center;

    gap:18px;

    transition:.35s;

}

.footer-trust-item:hover{

    transform:
        translateY(-5px);

}

.footer-image-badge{

    justify-content:center;

}

.footer-image-badge img{

    width:100%;

    max-width:240px;

    object-fit:contain;

}

/* =========================================================
   TRUST ICONS
========================================================= */

.footer-trust-icon{

    width:60px;
    height:60px;

    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    flex-shrink:0;

    font-size:1.4rem;

}

.google-icon{

    background:
        linear-gradient(
            135deg,
            #4285F4,
            #34A853
        );

}

.sold-icon{

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #7c4dff
        );

}

.years-icon{

    background:
        linear-gradient(
            135deg,
            #ff9800,
            #ffc107
        );

}

.footer-trust-item h4{

    margin-bottom:8px;

    font-size:1rem;

}

.footer-trust-item p{

    color:var(--muted);

    font-size:.92rem;

    line-height:1.6;

}

/* =========================================================
   MAIN GRID
========================================================= */

.footer-main-grid{

    display:grid;

    grid-template-columns:
        1.2fr .7fr .7fr 1fr;

    gap:40px;

    padding:
        55px 0;

}

/* =========================================================
   BRAND
========================================================= */

.footer-logo-wrap{

    position:relative;

    display:inline-flex;

    margin-bottom:24px;

}

.footer-logo{

    height:42px;

    position:relative;

    z-index:2;

}

.footer-logo-glow{

    position:absolute;

    inset:auto;

    width:120px;
    height:120px;

    background:
        radial-gradient(
            rgba(86,45,212,.22),
            transparent 70%
        );

    top:-40px;
    left:-20px;

    filter:blur(24px);

}

.footer-description{

    max-width:420px;

    color:var(--muted);

    line-height:1.85;

}

/* =========================================================
   SOCIALS
========================================================= */

.footer-socials{

    display:flex;

    gap:14px;

    margin-top:28px;

}

.footer-socials a{

    width:46px;
    height:46px;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--card);

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

    color:var(--text);

    transition:.25s;

}

.footer-socials a:hover{

    background:var(--primary);

    color:#fff;

    transform:
        translateY(-3px);

}

/* =========================================================
   TITLES
========================================================= */

.footer-title{

    margin-bottom:18px;

    font-size:1.05rem;

}

/* =========================================================
   LINKS
========================================================= */

.footer-links{

    display:flex;
    flex-direction:column;

    gap:14px;

}

.footer-links a{

    color:var(--muted);

    transition:.25s;

}

.footer-links a:hover{

    color:var(--primary);

    transform:
        translateX(4px);

}

/* =========================================================
   NEWSLETTER
========================================================= */

.footer-newsletter p{

    color:var(--muted);

    line-height:1.75;

    margin-bottom:20px;

}

.footer-newsletter-form{

    display:flex;

    overflow:hidden;

    border-radius:18px;

    background:var(--card);

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

}

.footer-newsletter-form input{

    flex:1;

    height:58px;

    padding:
        0 18px;

    background:none;

    border:none;

    color:var(--text);

    outline:none;

}

.footer-newsletter-form button{

    width:64px;

    border:none;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    font-size:1.2rem;

}

/* =========================================================
   POWERED CHIPS
========================================================= */

.footer-powered{

    display:flex;

    gap:12px;

    margin-top:22px;

    flex-wrap:wrap;

}

.footer-powered-chip{

    height:42px;

    padding:
        0 16px;

    border-radius:999px;

    display:flex;
    align-items:center;

    gap:8px;

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

    color:var(--primary);

    font-size:.85rem;
    font-weight:700;

}

/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom{

    padding-top:30px;

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

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

}

.footer-copy{

    color:var(--muted);

    font-size:.92rem;

}

.footer-bottom-links{

    display:flex;

    gap:22px;

}

.footer-bottom-links a{

    color:var(--muted);

    font-size:.92rem;

}

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

@media(max-width:1200px){

    .footer-trust-bar{

        grid-template-columns:
            repeat(2,1fr);

    }

    .footer-main-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}

@media(max-width:700px){

    .footer-trust-bar,
    .footer-main-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        flex-direction:column;

        align-items:flex-start;

    }

    .footer-trust-item{

        border-radius:24px;

    }

}


/* =========================================================
   CLIENT AREA BUTTON
========================================================= */

.client-area-btn{

    position:relative;

    overflow:hidden;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:46px;

    padding:
        0 16px;

    border-radius:16px;

    text-decoration:none;

    isolation:isolate;

    background:
        linear-gradient(
            135deg,
            #1F1F29,
            #2a2a38
        );

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

    box-shadow:

        0 10px 24px rgba(0,0,0,.22),

        inset 0 1px 0 rgba(255,255,255,.03);

    transition:
        .28s ease;

}

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

[data-theme="light"] .client-area-btn{

    background:
        linear-gradient(
            135deg,
            #1F1F29,
            #2a2a38
        );

    border:
        1px solid rgba(0,0,0,.06);

}

/* =========================================================
   HOVER
========================================================= */

.client-area-btn:hover{

    transform:
        translateY(-2px);

    border-color:
        rgba(86,45,212,.22);

    box-shadow:

        0 14px 30px rgba(0,0,0,.28),

        0 0 24px rgba(86,45,212,.12);

}

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

.client-area-glow{

    position:absolute;

    top:-30px;
    right:-10px;

    width:90px;
    height:90px;

    background:
        radial-gradient(
            rgba(86,45,212,.26),
            transparent 70%
        );

    filter:blur(18px);

    z-index:0;

}

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

.client-area-content{

    position:relative;

    z-index:2;

    display:flex;
    align-items:center;

    gap:10px;

}

/* =========================================================
   ICON
========================================================= */

.client-area-icon{

    width:30px;
    height:30px;

    border-radius:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #562dd4,
            #6d49ff
        );

    color:#fff;

    flex-shrink:0;

    box-shadow:
        0 6px 16px rgba(86,45,212,.24);

}

.client-area-icon i{

    font-size:.95rem;

}

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

.client-area-text{

    display:flex;
    flex-direction:column;

    line-height:1;

}

.client-area-text strong{

    color:#fff;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:-0.01em;

}

.client-area-text small{

    margin-top:3px;

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

    font-size:.62rem;

    font-weight:600;

}

/* =========================================================
   ARROW
========================================================= */

.client-area-arrow{

    width:22px;
    height:22px;

    border-radius:8px;

    display:flex;
    align-items:center;
    justify-content:center;

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

    color:#bca9ff;

    transition:.25s;

}

.client-area-arrow i{

    font-size:.78rem;

}

.client-area-btn:hover .client-area-arrow{

    transform:
        translate(1px,-1px);

}

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

@media(max-width:768px){

    .client-area-btn{

        width:100%;

        justify-content:center;

    }

}

/* =========================================================
   COMPARISON SECTION
========================================================= */

.comparison-section{

    position:relative;

    overflow:hidden;

    padding:
        100px 0;

}

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

.comparison-head{

    text-align:center;

    max-width:860px;

    margin:
        0 auto 60px;

}

.comparison-head .section-title span{

    color:var(--primary);

}

/* =========================================================
   WRAPPER
========================================================= */

.comparison-wrapper{

    overflow:hidden;

    border-radius:38px;

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

    background:var(--card);

    box-shadow:
        var(--shadow-lg);

}

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

.comparison-header{

    display:grid;

    grid-template-columns:
        1.1fr 1fr 1fr;

    gap:0;

    background:
        linear-gradient(
            180deg,
            rgba(86,45,212,.08),
            transparent
        );

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

}

.comparison-col{

    padding:32px;

}

.feature-col{

    display:flex;
    align-items:center;

    font-size:1.05rem;
    font-weight:700;

}

.epaper-col{

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

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

}

/* =========================================================
   PRODUCT
========================================================= */

.comparison-product{

    display:flex;

    align-items:center;

    gap:16px;

}

.comparison-product-icon{

    width:60px;
    height:60px;

    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #7c4dff
        );

    color:#fff;

    font-size:1.5rem;

    box-shadow:
        0 14px 35px rgba(86,45,212,.2);

}

.other-icon{

    background:
        linear-gradient(
            135deg,
            #444,
            #666
        );

}

.comparison-product h3{

    margin-bottom:6px;

}

.comparison-product p{

    color:var(--muted);

}

/* =========================================================
   ROW
========================================================= */

.comparison-row{

    display:grid;

    grid-template-columns:
        1.1fr 1fr 1fr;

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

}

.comparison-row:last-child{

    border-bottom:none;

}

/* =========================================================
   FEATURE
========================================================= */

.comparison-feature{

    display:flex;

    align-items:center;

    gap:18px;

    padding:30px;

}

.comparison-feature-icon{

    width:58px;
    height:58px;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

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

    color:var(--primary);

    flex-shrink:0;

    font-size:1.35rem;

}

.comparison-feature h4{

    margin-bottom:8px;

    font-size:1.05rem;

}

.comparison-feature p{

    color:var(--muted);

    line-height:1.6;

    font-size:.92rem;

}

/* =========================================================
   VALUE
========================================================= */

.comparison-value{

    position:relative;

    padding:30px;

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.comparison-value i{

    font-size:1.4rem;

    margin-top:2px;

}

.comparison-value strong{

    display:block;

    margin-bottom:8px;

    font-size:1rem;

}

.comparison-value span{

    color:var(--muted);

    line-height:1.6;

    font-size:.92rem;

}

/* =========================================================
   SUCCESS
========================================================= */

.success-value{

    background:
        linear-gradient(
            135deg,
            rgba(0,158,69,.06),
            transparent
        );

}

.success-value i{

    color:var(--green);

}

/* =========================================================
   WARNING
========================================================= */

.warning-value{

    background:
        linear-gradient(
            135deg,
            rgba(255,193,7,.06),
            transparent
        );

}

.warning-value i{

    color:#ff9800;

}

/* =========================================================
   DANGER
========================================================= */

.danger-value{

    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,.05),
            transparent
        );

}

.danger-value i{

    color:#ef4444;

}

/* =========================================================
   HOVER
========================================================= */

.comparison-row{

    transition:
        background .35s ease;

}

.comparison-row:hover{

    background:
        rgba(86,45,212,.025);

}

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

[data-theme="light"] .comparison-wrapper{

    background:#fff;

}

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

@media(max-width:900px){

    .comparison-header{

        display:none;

    }

    .comparison-row{

        grid-template-columns:1fr;

    }

    .comparison-feature{

        padding-bottom:18px;

    }

    .comparison-value{

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

    }

}


/* =========================================================
   PREMIUM FEATURES
========================================================= */

.premium-features-section{

    position:relative;

    overflow:hidden;

    padding:
        110px 0;

}

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

.premium-features-head{

    text-align:center;

    max-width:860px;

    margin:
        0 auto 70px;

}

.premium-features-head .section-title span{

    color:var(--primary);

}

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

.premium-features-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:24px;

}

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

.premium-feature-card{

    position:relative;

    overflow:hidden;

    padding:30px;

    border-radius:32px;

    background:var(--card);

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

    box-shadow:
        var(--shadow);

    transition:
        .35s ease;

    isolation:isolate;

}

.premium-feature-card:hover{

    transform:
        translateY(-8px);

    border-color:
        rgba(86,45,212,.16);

    box-shadow:

        0 25px 60px rgba(0,0,0,.12),

        0 0 30px rgba(86,45,212,.06);

}

/* =========================================================
   FEATURED
========================================================= */

.featured-main-card{

    grid-column:
        span 2;

    background:
        linear-gradient(
            135deg,
            rgba(86,45,212,.08),
            var(--card)
        );

}

.premium-feature-highlight{

    background:
        linear-gradient(
            135deg,
            rgba(0,158,69,.06),
            var(--card)
        );

}

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

.feature-card-glow{

    position:absolute;

    width:220px;
    height:220px;

    top:-100px;
    right:-100px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(86,45,212,.18),
            transparent 70%
        );

    filter:blur(30px);

    z-index:-1;

}

.green-glow{

    background:
        radial-gradient(
            rgba(0,158,69,.18),
            transparent 70%
        );

}

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

.premium-feature-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:26px;

}

/* =========================================================
   ICON
========================================================= */

.premium-feature-icon{

    width:64px;
    height:64px;

    border-radius:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #7c4dff
        );

    color:#fff;

    box-shadow:
        0 14px 35px rgba(86,45,212,.2);

}

.premium-feature-icon i{

    font-size:1.6rem;

}

.autotag-icon-feature{

    background:
        linear-gradient(
            135deg,
            var(--green),
            #00c95a
        );

}

/* =========================================================
   CHIP
========================================================= */

.premium-feature-chip{

    height:34px;

    padding:
        0 14px;

    border-radius:999px;

    display:flex;
    align-items:center;

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

    color:var(--primary);

    font-size:.76rem;
    font-weight:700;

}

.ai-chip-feature{

    background:
        rgba(86,45,212,.12);

}

.success-chip{

    background:
        rgba(0,158,69,.12);

    color:var(--green);

}

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

.premium-feature-card h3{

    font-size:1.28rem;

    margin-bottom:16px;

    letter-spacing:-0.02em;

}

.premium-feature-card p{

    color:var(--muted);

    line-height:1.8;

    font-size:.96rem;

}

/* =========================================================
   LINK
========================================================= */

.feature-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:24px;

    color:var(--green);

    font-weight:700;

}

.feature-link i{

    transition:
        transform .3s ease;

}

.feature-link:hover i{

    transform:
        translateX(4px);

}

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

[data-theme="light"] .premium-feature-card{

    background:#fff;

}

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

@media(max-width:1100px){

    .premium-features-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

    .featured-main-card{

        grid-column:
            span 2;

    }

}

@media(max-width:700px){

    .premium-features-grid{

        grid-template-columns:1fr;

    }

    .featured-main-card{

        grid-column:
            span 1;

    }

    .premium-feature-card{

        padding:24px;

        border-radius:26px;

    }

}


/* =========================================================
   TESTIMONIALS
========================================================= */

.premium-testimonials-section{

    position:relative;

    overflow:hidden;

    padding:
        120px 0;

}

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

.premium-testimonials-head{

    text-align:center;

    max-width:860px;

    margin:
        0 auto 70px;

}

.premium-testimonials-head .section-title span{

    color:var(--primary);

}

/* =========================================================
   EDITORIAL GRID
========================================================= */

.testimonial-editorial-grid{

    display:grid;

    grid-template-columns:
        1.15fr .85fr;

    gap:28px;

    margin-bottom:28px;

}

/* =========================================================
   FEATURED
========================================================= */

.testimonial-featured-card{

    position:relative;

    overflow:hidden;

    padding:50px;

    border-radius:40px;

    background:
        linear-gradient(
            135deg,
            rgba(86,45,212,.12),
            rgba(86,45,212,.03)
        );

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

    box-shadow:
        var(--shadow-lg);

    isolation:isolate;

}

.testimonial-featured-bg{

    position:absolute;

    inset:auto;

    width:320px;
    height:320px;

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

    border-radius:50%;

    background:
        radial-gradient(
            rgba(124,77,255,.24),
            transparent 70%
        );

    filter:blur(30px);

    z-index:-1;

}

.testimonial-quote-icon{

    width:74px;
    height:74px;

    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:32px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #7c4dff
        );

    color:#fff;

    font-size:2rem;

    box-shadow:
        0 20px 40px rgba(86,45,212,.22);

}

.testimonial-featured-card h3{

    font-size:
        clamp(2rem,4vw,3rem);

    line-height:1.15;

    margin-bottom:24px;

    letter-spacing:-0.03em;

}

.testimonial-featured-card p{

    max-width:680px;

    color:var(--muted);

    line-height:1.9;

    font-size:1.05rem;

}

/* =========================================================
   USER
========================================================= */

.testimonial-featured-user{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:36px;

}

.testimonial-featured-user img{

    width:68px;
    height:68px;

    border-radius:50%;

    object-fit:cover;

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

}

.testimonial-featured-user strong{

    display:block;

    margin-bottom:6px;

    font-size:1rem;

}

.testimonial-featured-user span{

    color:var(--muted);

}

/* =========================================================
   SIDE STACK
========================================================= */

.testimonial-side-stack{

    display:flex;
    flex-direction:column;

    gap:24px;

}

/* =========================================================
   MODERN CARD
========================================================= */

.testimonial-modern-card{

    padding:30px;

    border-radius:32px;

    background:var(--card);

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

    box-shadow:
        var(--shadow);

    transition:.35s ease;

}

.testimonial-modern-card:hover{

    transform:
        translateY(-6px);

}

.testimonial-modern-top{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:24px;

}

.testimonial-modern-top img{

    width:58px;
    height:58px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-modern-top h4{

    margin-bottom:6px;

}

.testimonial-modern-top span{

    color:var(--muted);

    font-size:.92rem;

}

.testimonial-modern-card p{

    color:var(--muted);

    line-height:1.8;

}

/* =========================================================
   STARS
========================================================= */

.testimonial-stars{

    display:flex;

    gap:6px;

    margin-top:22px;

    color:#ffb400;

}

/* =========================================================
   FLOATING GRID
========================================================= */

.floating-testimonials-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:24px;

}

/* =========================================================
   FLOATING CARD
========================================================= */

.floating-testimonial-card{

    padding:26px;

    border-radius:28px;

    background:var(--card);

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

    box-shadow:
        var(--shadow);

    transition:.35s ease;

}

.floating-testimonial-card:hover{

    transform:
        translateY(-5px);

}

.floating-user{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:20px;

}

.floating-user img{

    width:52px;
    height:52px;

    border-radius:50%;

    object-fit:cover;

}

.floating-user h4{

    margin-bottom:5px;

    font-size:1rem;

}

.floating-user span{

    color:var(--muted);

    font-size:.88rem;

}

.floating-testimonial-card p{

    color:var(--muted);

    line-height:1.75;

}

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

[data-theme="light"] .testimonial-modern-card,
[data-theme="light"] .floating-testimonial-card{

    background:#fff;

}

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

@media(max-width:1100px){

    .testimonial-editorial-grid{

        grid-template-columns:1fr;

    }

    .floating-testimonials-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}

@media(max-width:700px){

    .floating-testimonials-grid{

        grid-template-columns:1fr;

    }

    .testimonial-featured-card{

        padding:32px;

        border-radius:30px;

    }

    .testimonial-modern-card,
    .floating-testimonial-card{

        border-radius:24px;

    }

}