/* ===================================
   GLOBAL VARIABLES & RESET
=================================== */
:root {
    --accent:        #7f5af0;
    --accent-hover:  #6b44e0;
    --accent-light:  #ede9ff;
    --accent-glow:   rgba(127,90,240,0.18);
    --text-primary:  #0f0e17;
    --text-secondary:#6b7280;
    --surface:       #ffffff;
    --surface-2:     #f9f8ff;
    --border:        #e8e4f8;
    --green:         #22c55e;
    --red:           #ef4444;
    --max-w:         1280px;
    --radius:        14px;
    --nav-h:         72px;
    --bar-h:         44px;
    --shadow-sm:     0 4px 16px rgba(0,0,0,0.06);
    --shadow-md:     0 12px 40px rgba(0,0,0,0.10);
    --shadow-lg:     0 24px 64px rgba(0,0,0,0.12);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'DM Sans', sans-serif;
    color:var(--text-primary);
    background:var(--surface);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; transition:all 0.22s; }
ul { list-style:none; }
img { display:block; max-width:100%; }

.container {
    width:100%;
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 24px;
}

/* ===================================
   PROMO BAR
=================================== */
.promo-bar {
    background:var(--text-primary);
    color:rgba(255,255,255,0.8);
    height:var(--bar-h);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-family:'Outfit', sans-serif;
    font-size:0.875rem;
    font-weight:500;
    position:relative;
    z-index:200;
    letter-spacing:0.01em;
}
.promo-bar .highlight { color:#fff; font-weight:700; }
.promo-bar .countdown {
    background:var(--accent);
    color:#fff;
    font-weight:700;
    padding:3px 10px;
    border-radius:6px;
    font-size:0.8rem;
    letter-spacing:0.05em;
    font-variant-numeric:tabular-nums;
}
.promo-bar .promo-link {
    color:var(--accent-light);
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:2px;
    margin-left:4px;
}
.promo-bar .promo-link:hover { color:#fff; }
@media(max-width:500px){
    .promo-bar { font-size:.76rem; gap:5px; }
    .promo-bar .countdown { font-size:.7rem; padding:2px 7px; }
    .promo-bar .hide-xs { display:none; }
}

/* ===================================
   HEADER / NAV
=================================== */
.site-header {
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    height:var(--nav-h);
    display:flex;
    align-items:center;
}
.nav-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:100%;
    gap:12px;
}
.logo {
    font-family:'Outfit', sans-serif;
    font-size:1.45rem;
    font-weight:900;
    color:var(--text-primary);
    letter-spacing:-0.5px;
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
}
.logo img { height:38px; width:auto; object-fit:contain; }
.logo em { color:var(--accent); font-style:normal; }
.logo:hover { opacity:.85; }

/* Main nav */
.nav-links {
    display:flex;
    align-items:center;
    gap:2px;
}
.nav-links > li {
    position:relative;
}
.nav-links > li > a {
    font-family:'Outfit', sans-serif;
    font-weight:600;
    font-size:0.93rem;
    color:var(--text-primary);
    padding:8px 14px;
    border-radius:9px;
    display:flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
}
.nav-links > li > a:hover { background:var(--accent-light); color:var(--accent); }
.nav-links > li > a .chev {
    display:inline-flex;
    transition:transform 0.25s;
    font-size:10px;
    opacity:.7;
}
.nav-links > li:hover > a .chev { transform:rotate(180deg); }

/* ===================================
   DROPDOWN MENU
=================================== */
.has-dropdown { position:relative; }

.dropdown-menu {
    position:absolute;
    top:calc(100% + 10px);
    left:50%;
    transform:translateX(-50%) translateY(8px);
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(127,90,240,0.08);
    padding:10px;
    min-width:260px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index:999;
}
/* small arrow */
.dropdown-menu::before {
    content:'';
    position:absolute;
    top:-7px;
    left:50%;
    transform:translateX(-50%);
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:8px solid var(--border);
}
.dropdown-menu::after {
    content:'';
    position:absolute;
    top:-6px;
    left:50%;
    transform:translateX(-50%);
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:7px solid #fff;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
    opacity:1;
    visibility:visible;
    pointer-events:all;
    transform:translateX(-50%) translateY(0);
}

.dropdown-item {
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 14px;
    border-radius:10px;
    color:var(--text-primary);
    transition:background 0.18s;
    cursor:pointer;
}
.dropdown-item:hover { background:var(--accent-light); }
.dropdown-item:hover .di-icon { background:var(--accent); color:#fff; }
.dropdown-item:hover .di-title { color:var(--accent); }

.di-icon {
    width:42px;
    height:42px;
    border-radius:10px;
    background:var(--accent-light);
    color:var(--accent);
    display:grid;
    place-items:center;
    font-size:1.05rem;
    flex-shrink:0;
    transition:background 0.18s, color 0.18s;
}
.di-text { flex:1; }
.di-title {
    font-family:'Outfit', sans-serif;
    font-weight:700;
    font-size:0.92rem;
    color:var(--text-primary);
    display:block;
    margin-bottom:2px;
    transition:color 0.18s;
}
.di-desc {
    font-size:0.78rem;
    color:var(--text-secondary);
    font-weight:500;
    line-height:1.4;
}
.di-badge {
    font-size:0.65rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:2px 7px;
    border-radius:20px;
    flex-shrink:0;
}
.di-badge.free { background:#dcfce7; color:#16a34a; }
.di-badge.hot  { background:#fee2e2; color:#dc2626; }

.dropdown-footer {
    margin-top:6px;
    padding:10px 14px;
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.dropdown-footer span { font-size:0.8rem; color:var(--text-secondary); }
.dropdown-footer a { font-size:0.8rem; font-weight:700; color:var(--accent); }
.dropdown-footer a:hover { text-decoration:underline; }

/* Nav actions */
.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.btn-login {
    font-family:'Outfit', sans-serif;
    font-weight:600;
    font-size:0.9rem;
    color:var(--text-secondary);
    padding:8px 16px;
    border-radius:9px;
    white-space:nowrap;
}
.btn-login:hover { color:var(--accent); background:var(--accent-light); }
.btn-cta {
    font-family:'Outfit', sans-serif;
    font-weight:700;
    font-size:0.9rem;
    color:#fff;
    background:var(--accent);
    padding:10px 22px;
    border-radius:10px;
    box-shadow:0 4px 14px var(--accent-glow);
    white-space:nowrap;
}
.btn-cta:hover { background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 8px 20px var(--accent-glow); }

/* Hamburger */
.hamburger {
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:40px; height:40px;
    padding:8px;
    border-radius:9px;
    cursor:pointer;
    border:1.5px solid var(--border);
    background:transparent;
    flex-shrink:0;
}
.hamburger span {
    display:block; width:100%; height:2px;
    background:var(--text-primary); border-radius:4px; transition:.3s;
}
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; width:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile Drawer */
.mobile-nav {
    display:none;
    position:fixed;
    top:calc(var(--bar-h) + var(--nav-h));
    left:0; right:0;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:16px 20px 28px;
    box-shadow:0 20px 40px rgba(0,0,0,0.07);
    z-index:99;
    transform:translateY(-10px);
    opacity:0;
    transition:.3s;
    pointer-events:none;
    max-height:calc(100vh - var(--bar-h) - var(--nav-h));
    overflow-y:auto;
}
.mobile-nav.open {
    display:block;
    transform:translateY(0);
    opacity:1;
    pointer-events:all;
}
.mobile-nav > ul > li > a {
    font-family:'Outfit', sans-serif;
    font-weight:700;
    font-size:1rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px 14px;
    border-radius:10px;
    color:var(--text-primary);
}
.mobile-nav > ul > li > a:hover { background:var(--accent-light); color:var(--accent); }

/* Mobile sub-items */
.mobile-sub {
    display:none;
    flex-direction:column;
    gap:4px;
    padding:6px 0 10px 8px;
}
.mobile-sub.open { display:flex; }
.mobile-sub-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    border-radius:10px;
    color:var(--text-secondary);
    font-weight:500;
    font-size:.93rem;
}
.mobile-sub-item:hover { background:var(--accent-light); color:var(--accent); }
.mobile-sub-item i { width:18px; text-align:center; color:var(--accent); }
.mobile-nav-actions {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--border);
}
.mobile-nav-actions a {
    text-align:center;
    padding:14px;
    border-radius:10px;
    font-family:'Outfit', sans-serif;
    font-weight:700;
}

@media(max-width:960px){
    .nav-links, .nav-actions { display:none !important; }
    .hamburger { display:flex; }
}

/* ===================================
   SHARED PAGE UTILITIES (used across sections)
=================================== */
.section-header {
    text-align:center;
    margin-bottom:64px;
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
}
.section-tag {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--accent-light);
    color:var(--accent);
    font-family:'Outfit', sans-serif;
    font-weight:700;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    padding:5px 14px;
    border-radius:100px;
    margin-bottom:16px;
    border:1px solid rgba(127,90,240,.2);
}
.section-header h2 {
    font-family:'Outfit', sans-serif;
    font-size:clamp(2rem,4vw,2.8rem);
    margin-bottom:16px;
    font-weight:800;
    letter-spacing:-1px;
}
.section-header p {
    color:var(--text-secondary);
    font-size:1.05rem;
    line-height:1.65;
}

/* ===================================
   HERO
=================================== */
.hero {
    padding:90px 0 110px;
    position:relative;
    overflow:hidden;
}
.hero::before, .hero::after {
    content:'';
    position:absolute;
    pointer-events:none;
    background:radial-gradient(circle, rgba(127,90,240,.07) 0%, transparent 70%);
}
.hero::before { top:-120px; right:-120px; width:700px; height:700px; }
.hero::after  { bottom:-80px; left:-80px; width:500px; height:500px; }

.hero-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
    position:relative;
    z-index:1;
}
.hero-content { max-width:580px; }
.offer-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--accent-light);
    color:var(--accent);
    font-family:'Outfit', sans-serif;
    font-weight:700;
    font-size:.875rem;
    padding:6px 14px 6px 8px;
    border-radius:100px;
    margin-bottom:24px;
    border:1px solid rgba(127,90,240,.2);
}
.offer-badge .dot {
    width:22px; height:22px;
    background:var(--accent);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:.7rem;
}
.hero h1 {
    font-family:'Outfit', sans-serif;
    font-size:clamp(2.5rem,5vw,4.2rem);
    font-weight:900;
    line-height:1.05;
    letter-spacing:-2px;
    margin-bottom:22px;
}
.hero h1 .accent-word { color:var(--accent); }
.hero-sub {
    font-size:clamp(.98rem,1.8vw,1.18rem);
    color:var(--text-secondary);
    line-height:1.65;
    margin-bottom:32px;
    max-width:480px;
}
.feat-list { display:flex; flex-direction:column; gap:12px; margin-bottom:36px; }
.feat-list li { display:flex; align-items:center; gap:12px; font-weight:600; font-size:.98rem; }
.feat-list li .check {
    width:22px; height:22px; border-radius:50%;
    background:#dcfce7; color:var(--green);
    display:grid; place-items:center; font-size:.65rem;
    flex-shrink:0;
}
.price-row { display:flex; align-items:flex-end; gap:6px; margin-bottom:6px; }
.price-currency { font-family:'Outfit', sans-serif; font-size:1.6rem; font-weight:800; padding-bottom:12px; }
.price-amount { font-family:'Outfit', sans-serif; font-size:clamp(3rem,6vw,5rem); font-weight:900; line-height:1; letter-spacing:-3px; }
.price-term { font-size:1rem; color:var(--text-secondary); font-weight:500; padding-bottom:10px; }
.price-note { font-size:.875rem; color:var(--accent); font-weight:700; margin-bottom:28px; display:flex; align-items:center; gap:6px; }
.btn-hero {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--accent); color:#fff;
    font-family:'Outfit', sans-serif; font-weight:700; font-size:1.05rem;
    padding:16px 36px; border-radius:12px;
    box-shadow:0 8px 24px rgba(127,90,240,.28);
    transition:.2s;
}
.btn-hero:hover { background:var(--accent-hover); transform:translateY(-3px); box-shadow:0 14px 32px rgba(127,90,240,.34); }
.btn-secondary-row { margin-top:16px; display:flex; align-items:center; gap:14px; }
.trust-avatars { display:flex; }
.trust-avatars span {
    width:32px; height:32px; border-radius:50%;
    border:2px solid var(--surface);
    background:var(--accent-light);
    display:grid; place-items:center;
    font-size:.75rem; margin-left:-8px;
    font-weight:700; color:var(--accent);
}
.trust-avatars span:first-child { margin-left:0; }
.trust-text { font-size:.85rem; color:var(--text-secondary); font-weight:500; }
.trust-text strong { color:var(--text-primary); font-weight:700; }

.hero-visual { position:relative; display:flex; justify-content:center; align-items:center; min-height:400px; }
.hero-img-wrap { position:relative; width:100%; max-width:520px; }
.hero-img-wrap img { width:100%; height:auto; border-radius:20px; box-shadow:var(--shadow-lg); }
.badge {
    position:absolute; background:var(--surface); border-radius:16px;
    box-shadow:0 12px 36px rgba(0,0,0,.1);
    animation:floatUp 5s ease-in-out infinite; z-index:10;
}
.badge-discount { top:8%; right:-6%; padding:18px 22px; text-align:center; }
.badge-discount .pct { font-family:'Outfit', sans-serif; font-size:2.4rem; font-weight:900; color:var(--accent); line-height:1; letter-spacing:-1px; }
.badge-discount .label { font-size:.8rem; font-weight:600; color:var(--text-secondary); }
.badge-trust { bottom:10%; left:-6%; padding:14px 18px; display:flex; align-items:center; gap:14px; animation-delay:1.5s; }
.badge-trust-icon { width:40px; height:40px; background:var(--accent-light); border-radius:12px; display:grid; place-items:center; color:var(--accent); }
.badge-trust-text strong { display:block; font-family:'Outfit', sans-serif; font-weight:800; font-size:1.1rem; }
.badge-trust-text span { font-size:.8rem; color:var(--text-secondary); font-weight:500; }
.badge-uptime { top:55%; right:-4%; padding:12px 16px; display:flex; align-items:center; gap:10px; animation-delay:.8s; }
.uptime-dot { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.2); }
.badge-uptime strong { font-family:'Outfit', sans-serif; font-weight:800; font-size:1rem; }
.badge-uptime span { font-size:.78rem; color:var(--text-secondary); display:block; }

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

@media(max-width:840px){
    .hero-grid { grid-template-columns:1fr; text-align:center; gap:48px; }
    .hero-content { margin:0 auto; }
    .hero-sub { margin:0 auto 32px; }
    .feat-list { align-items:center; }
    .price-row, .price-note, .btn-secondary-row { justify-content:center; align-items:center; }
    .badge { display:none; }
    .hero-img-wrap { margin:0 auto; max-width:400px; }
}

/* ===================================
   STATS STRIP
=================================== */
.stats-strip {
    background:var(--text-primary);
    padding:36px 0;
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px;
    text-align:center;
}
.stat-item .num {
    font-family:'Outfit', sans-serif;
    font-size:clamp(1.8rem,4vw,2.8rem);
    font-weight:900;
    color:#fff;
    letter-spacing:-1px;
    line-height:1;
    margin-bottom:6px;
}
.stat-item .num span { color:var(--accent); }
.stat-item p { font-size:.88rem; color:rgba(255,255,255,.55); font-weight:500; }
@media(max-width:720px){ .stats-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:360px){ .stats-grid { grid-template-columns:1fr; } }

/* ===================================
   DOMAIN SEARCH
=================================== */
.domain-search {
    padding:70px 0;
    background:var(--surface-2);
    border-bottom:1px solid var(--border);
    text-align:center;
}
.domain-search h2 {
    font-family:'Outfit', sans-serif;
    font-size:clamp(1.8rem,3vw,2.4rem);
    margin-bottom:8px;
    font-weight:800;
}
.domain-search .sub { color:var(--text-secondary); margin-bottom:30px; font-size:1rem; }
.domain-form {
    max-width:760px; margin:0 auto;
    display:flex; gap:12px;
    background:#fff; padding:10px;
    border-radius:14px;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border);
}
.domain-form input {
    flex:1; border:none; padding:16px 20px;
    font-size:1.05rem; font-family:inherit;
    outline:none; background:transparent;
    min-width:0;
}
.domain-form select {
    border:none; font-size:1.05rem; font-weight:600;
    outline:none; background:transparent;
    cursor:pointer; padding-right:12px;
    color:var(--text-primary);
}
.domain-form .btn-search {
    background:var(--accent); color:#fff; border:none;
    padding:0 32px; border-radius:10px;
    font-weight:700; font-size:1rem;
    cursor:pointer; font-family:'Outfit', sans-serif; transition:.2s;
    white-space:nowrap; flex-shrink:0;
}
.domain-form .btn-search:hover { background:var(--accent-hover); transform:translateY(-2px); }
.domain-extensions {
    display:flex; justify-content:center; flex-wrap:wrap;
    gap:20px; margin-top:24px;
    font-weight:500; font-size:.93rem; color:var(--text-secondary);
}
.domain-extensions span strong { color:var(--text-primary); font-weight:800; font-family:'Outfit', sans-serif; }
@media(max-width:768px){
    .domain-form { flex-direction:column; background:transparent; box-shadow:none; padding:0; border:none; gap:10px; }
    .domain-form input, .domain-form select, .domain-form .btn-search {
        background:#fff; padding:16px; border-radius:10px;
        border:1px solid var(--border); width:100%;
    }
    .domain-form .btn-search { padding:16px; }
}

/* ===================================
   FEATURES
=================================== */
.features-section { padding:100px 0; background:var(--surface); }
.features-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:32px;
}
.feat-box {
    padding:30px; border-radius:20px;
    background:var(--surface-2);
    border:1.5px solid transparent;
    transition:.3s;
}
.feat-box:hover { border-color:var(--border); transform:translateY(-5px); box-shadow:var(--shadow-sm); }
.feat-box .icon {
    width:60px; height:60px;
    background:var(--accent-light); color:var(--accent);
    border-radius:14px; display:grid; place-items:center;
    font-size:1.7rem; margin-bottom:22px;
    transition:.2s;
}
.feat-box:hover .icon { background:var(--accent); color:#fff; }
.feat-box h4 { font-family:'Outfit', sans-serif; font-size:1.3rem; margin-bottom:10px; font-weight:700; }
.feat-box p { color:var(--text-secondary); line-height:1.6; font-size:.93rem; }

/* ===================================
   HOSTING COMPARISON TABLE
=================================== */
.compare-section { padding:100px 0; background:var(--surface-2); }
.compare-table-wrap { overflow-x:auto; border-radius:20px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-sm); }
.compare-table { width:100%; border-collapse:collapse; }
.compare-table th {
    font-family:'Outfit', sans-serif; font-weight:700; font-size:.9rem;
    padding:20px 24px; text-align:center; border-bottom:1px solid var(--border);
    background:var(--surface-2);
}
.compare-table th:first-child { text-align:left; border-radius:20px 0 0 0; }
.compare-table th:last-child { border-radius:0 20px 0 0; }
.compare-table th.popular-col { background:var(--accent-light); color:var(--accent); }
.compare-table td {
    padding:16px 24px; text-align:center; border-bottom:1px solid var(--border);
    font-size:.93rem; color:var(--text-secondary);
}
.compare-table td:first-child { text-align:left; font-weight:600; color:var(--text-primary); }
.compare-table td.popular-col { background:rgba(127,90,240,.04); }
.compare-table tr:last-child td { border-bottom:none; }
.compare-table .check-yes { color:var(--green); font-size:1rem; }
.compare-table .check-no  { color:#d1d5db; font-size:1rem; }
@media(max-width:600px){
    .compare-table th, .compare-table td { padding:12px 14px; font-size:.82rem; }
}

/* ===================================
   TESTIMONIALS
=================================== */
.testimonials-section { padding:100px 0; background:var(--surface); }
.testimonials-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:28px;
}
.testi-card {
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:20px;
    padding:32px;
    transition:.3s;
}
.testi-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.testi-stars { display:flex; gap:4px; margin-bottom:16px; }
.testi-stars i { color:#f59e0b; font-size:.9rem; }
.testi-card p { color:var(--text-secondary); line-height:1.7; font-size:.95rem; margin-bottom:24px; }
.testi-author { display:flex; align-items:center; gap:12px; }
.testi-avatar {
    width:44px; height:44px; border-radius:50%;
    background:var(--accent-light); color:var(--accent);
    display:grid; place-items:center;
    font-family:'Outfit', sans-serif; font-weight:800;
    font-size:1.1rem; flex-shrink:0;
}
.testi-name { font-family:'Outfit', sans-serif; font-weight:700; font-size:.93rem; }
.testi-role { font-size:.8rem; color:var(--text-secondary); margin-top:2px; }

/* ===================================
   FAQ
=================================== */
.faq-section { padding:100px 0; background:var(--surface-2); }
.faq-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    max-width:960px;
    margin:0 auto;
}
.faq-item {
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
}
.faq-q {
    width:100%; background:none; border:none;
    padding:22px 24px; text-align:left;
    display:flex; justify-content:space-between; align-items:center;
    gap:16px; cursor:pointer;
    font-family:'Outfit', sans-serif; font-weight:700;
    font-size:.95rem; color:var(--text-primary);
}
.faq-q .faq-icon { color:var(--accent); transition:transform .3s; flex-shrink:0; }
.faq-item.open .faq-q .faq-icon { transform:rotate(45deg); }
.faq-a {
    max-height:0; overflow:hidden;
    transition:max-height .4s ease, padding .3s;
    padding:0 24px;
}
.faq-item.open .faq-a { max-height:300px; padding:0 24px 22px; }
.faq-a p { color:var(--text-secondary); font-size:.93rem; line-height:1.7; }
@media(max-width:700px){ .faq-grid { grid-template-columns:1fr; } }

/* ===================================
   PRICING
=================================== */
.pricing-section { padding:100px 0 120px; background:var(--surface); }
.pricing-toggle {
    display:flex; align-items:center; justify-content:center; gap:12px;
    margin-bottom:48px;
}
.pricing-toggle span {
    font-family:'Outfit', sans-serif; font-weight:600;
    font-size:.93rem; color:var(--text-secondary);
}
.pricing-toggle span.active { color:var(--text-primary); }
.toggle-switch {
    width:52px; height:28px; border-radius:100px;
    background:var(--accent); cursor:pointer; position:relative;
    transition:.3s; border:none; flex-shrink:0;
}
.toggle-switch::after {
    content:''; position:absolute;
    top:3px; left:3px; width:22px; height:22px;
    border-radius:50%; background:#fff;
    transition:.3s;
}
.toggle-switch.annual::after { left:calc(100% - 25px); }
.pricing-save-badge {
    background:#dcfce7; color:#16a34a;
    font-family:'Outfit', sans-serif; font-weight:700; font-size:.78rem;
    padding:3px 10px; border-radius:20px;
}
.pricing-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:28px;
    align-items:center;
}
.price-card {
    border:1.5px solid var(--border); border-radius:24px;
    padding:44px 36px; background:#fff; transition:.3s; position:relative;
}
.price-card:hover { box-shadow:var(--shadow-md); }
.price-card.popular {
    border:2px solid var(--accent);
    box-shadow:0 24px 48px var(--accent-glow);
    transform:scale(1.02);
    padding:52px 36px;
}
.price-card.popular:hover { transform:scale(1.02) translateY(-5px); }
.popular-badge {
    position:absolute; top:-16px; left:50%; transform:translateX(-50%);
    background:var(--accent); color:#fff;
    padding:7px 20px; border-radius:20px;
    font-size:.82rem; font-weight:700; text-transform:uppercase;
    letter-spacing:1px; font-family:'Outfit', sans-serif;
}
.price-card h3 { font-family:'Outfit', sans-serif; font-size:1.55rem; margin-bottom:6px; }
.price-card p.desc { color:var(--text-secondary); font-size:.93rem; margin-bottom:28px; min-height:44px; }
.price-card .price { display:flex; align-items:baseline; gap:5px; margin-bottom:28px; }
.price-card .price .curr { font-size:1.3rem; font-weight:700; }
.price-card .price .amt { font-size:3.4rem; font-family:'Outfit', sans-serif; font-weight:900; letter-spacing:-2px; line-height:1; }
.price-card .price .term { color:var(--text-secondary); font-weight:500; }
.price-card .btn-buy {
    display:block; text-align:center;
    background:var(--accent-light); color:var(--accent);
    padding:15px; border-radius:12px;
    font-weight:700; font-family:'Outfit', sans-serif; font-size:1rem;
    margin-bottom:36px; transition:.2s;
}
.price-card.popular .btn-buy { background:var(--accent); color:#fff; box-shadow:0 8px 24px var(--accent-glow); }
.price-card .btn-buy:hover { background:var(--text-primary); color:#fff; }
.price-card h5 { font-family:'Outfit', sans-serif; font-size:.93rem; margin-bottom:18px; font-weight:700; }
.price-card ul { display:flex; flex-direction:column; gap:14px; }
.price-card ul li { display:flex; align-items:flex-start; gap:10px; font-size:.93rem; color:var(--text-secondary); font-weight:500; }
.price-card ul li i { color:var(--green); font-size:.88rem; margin-top:3px; flex-shrink:0; }
@media(max-width:992px){
    .price-card.popular { transform:scale(1); padding:44px 36px; }
    .price-card.popular:hover { transform:translateY(-5px); }
}

/* ===================================
   CTA BANNER
=================================== */
.cta-banner {
    padding:90px 0;
    background:linear-gradient(135deg, var(--accent) 0%, #5b3dd4 100%);
    text-align:center;
    position:relative;
    overflow:hidden;
}
.cta-banner::before {
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(ellipse at top right, rgba(255,255,255,.12) 0%, transparent 60%);
}
.cta-banner h2 {
    font-family:'Outfit', sans-serif;
    font-size:clamp(2rem,4vw,3rem);
    font-weight:900; color:#fff;
    letter-spacing:-1px; margin-bottom:16px;
}
.cta-banner p { color:rgba(255,255,255,.75); font-size:1.1rem; margin-bottom:36px; }
.cta-banner-btns { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.btn-white {
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; color:var(--accent);
    font-family:'Outfit', sans-serif; font-weight:700; font-size:1rem;
    padding:15px 36px; border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.15); transition:.2s;
}
.btn-white:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.2); }
.btn-outline-white {
    display:inline-flex; align-items:center; gap:8px;
    background:transparent; color:#fff;
    font-family:'Outfit', sans-serif; font-weight:700; font-size:1rem;
    padding:15px 32px; border-radius:12px;
    border:2px solid rgba(255,255,255,.45); transition:.2s;
}
.btn-outline-white:hover { background:rgba(255,255,255,.12); border-color:#fff; }

/* ===================================
   FOOTER
=================================== */
.site-footer { background:var(--text-primary); color:rgba(255,255,255,.6); }
.footer-top { padding:72px 0 56px; border-bottom:1px solid rgba(255,255,255,.07); }
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:48px;
}
.footer-brand .logo {
    font-family:'Outfit', sans-serif; font-size:1.4rem; font-weight:900;
    color:#fff; display:inline-flex; align-items:center; gap:8px;
    margin-bottom:16px;
}
.footer-brand p { font-size:.93rem; line-height:1.7; max-width:280px; margin-bottom:24px; }
.social-links { display:flex; gap:10px; }
.social-links a {
    width:36px; height:36px; border-radius:9px;
    border:1px solid rgba(255,255,255,.12);
    display:grid; place-items:center;
    color:rgba(255,255,255,.6); transition:.2s;
}
.social-links a:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.footer-col h4 {
    font-family:'Outfit', sans-serif; color:#fff;
    font-size:.9rem; font-weight:700; margin-bottom:18px; text-transform:uppercase;
    letter-spacing:.05em;
}
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { font-size:.88rem; color:rgba(255,255,255,.6); display:block; }
.footer-col ul li a:hover { color:#fff; padding-left:4px; }
.footer-bottom {
    padding:24px 0; display:flex; align-items:center;
    justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-bottom p { font-size:.83rem; color:rgba(255,255,255,.4); }
.footer-bottom p span { color:var(--accent); font-weight:700; }
.footer-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
    border-radius:8px; padding:6px 12px;
    font-size:.78rem; color:rgba(255,255,255,.5);
}
.footer-badge .dot { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.25); }

@media(max-width:960px){ .footer-grid { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:span 2; } }
@media(max-width:600px){ .footer-grid { grid-template-columns:1fr; } .footer-brand { grid-column:span 1; } .footer-bottom { flex-direction:column; text-align:center; } }