/* ===================================
   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 - FIXED & UPGRADED
=================================== */
.has-dropdown { position:relative; }

/* 1. THE FIX: Invisible bridge */
.has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 25px;
    background: transparent;
    z-index: 10;
}

/* 2. THE UI UPGRADE */
.dropdown-menu {
    position:absolute;
    top:calc(100% + 15px);
    left:50%;
    transform:translateX(-50%) translateY(12px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.08), 0 8px 16px rgba(127,90,240,0.06);
    padding: 12px;
    min-width: 290px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
    z-index: 999;
}

.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:16px;
    padding:14px 16px;
    border-radius:14px;
    color:var(--text-primary);
    transition: all 0.25s ease;
    cursor:pointer;
}

.dropdown-item:hover { 
    background: var(--surface-2); 
    transform: translateX(4px); 
}
.dropdown-item:hover .di-icon { 
    background: var(--accent); 
    color: #fff; 
    box-shadow: 0 4px 12px var(--accent-glow); 
}
.dropdown-item:hover .di-title { color:var(--accent); }

.di-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--accent-light);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: all 0.25s ease;
}
.di-text { flex:1; }
.di-title {
    font-family:'Outfit', sans-serif;
    font-weight:700;
    font-size:0.95rem;
    color:var(--text-primary);
    display:block;
    margin-bottom:3px;
    transition:color 0.2s ease;
}
.di-desc {
    font-size:0.8rem;
    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:3px 8px;
    border-radius:20px;
    flex-shrink:0;
}
.di-badge.free { background:#dcfce7; color:#16a34a; }
.di-badge.hot  { background:#fee2e2; color:#dc2626; }

.dropdown-footer {
    margin-top: 8px;
    padding: 14px 16px 6px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dropdown-footer span { 
    font-size: 0.85rem; 
    color: var(--text-secondary); 
    font-weight: 500;
}
.dropdown-footer a { 
    font-size: 0.85rem; 
    font-weight: 700; 
    color: var(--accent); 
    display: inline-block; 
    transition: transform 0.2s ease;
}
.dropdown-footer a:hover { 
    transform: translateX(3px); 
}

/* 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 - UI Updated */
.mobile-nav {
    display:none;
    position:fixed;
    top:calc(var(--bar-h) + var(--nav-h));
    left:0; right:0;
    background:rgba(255, 255, 255, 0.95);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    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
=================================== */
.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 - UI Updated
=================================== */
.hero {
    padding:90px 0 110px;
    position:relative;
    overflow:hidden;
    background-color: var(--surface);
}
.hero::before, .hero::after {
    content:'';
    position:absolute;
    pointer-events:none;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: pulseGlow 8s infinite alternate ease-in-out;
}
.hero::before {
    top:-100px; 
    right:-100px; 
    width:600px; 
    height:600px; 
    background:radial-gradient(circle, rgba(127,90,240,0.15) 0%, transparent 70%); 
}
.hero::after  {
    bottom:-100px; 
    left:-100px; 
    width:500px; 
    height:500px;
    background: radial-gradient(circle, rgba(34,197,94,0.1) 0%, transparent 70%); 
    animation-delay: -4s; 
}

@keyframes pulseGlow {
    0% { transform: scale(1) translate(0, 0); opacity: 0.4; }
    100% { transform: scale(1.1) translate(-20px, 20px); opacity: 0.7; }
}

.hero-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
    position:relative;
    z-index:1;
}
.hero-content { max-width:580px; }

/* Enhanced Offer Badge */
.offer-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: linear-gradient(145deg, var(--accent-light), #ffffff);
    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,0.15);
    box-shadow: 0 4px 12px rgba(127,90,240,0.06);
}
.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); }

/* Floating Badges Enhanced */
.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;
    border: 1px solid rgba(0,0,0,0.03);
    backdrop-filter: blur(8px);
}
.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 - UI Updated
=================================== */
.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; }

/* Enhanced Glassmorphism Form */
.domain-form {
    max-width:760px; margin:0 auto;
    display:flex; gap:12px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding:10px;
    border-radius:16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.domain-form:focus-within {
    box-shadow: 0 12px 40px rgba(127,90,240,0.12);
    border-color: rgba(127,90,240,0.4);
}
.domain-form input {
    flex:1; border:none; padding:16px 20px;
    font-size:1.05rem; font-family:inherit;
    outline:none; background:transparent;
    color:var(--text-primary);
    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:rgba(255,255,255,0.9); 
        box-shadow:0 4px 16px rgba(0,0,0,0.05); 
        padding:16px; 
        border:1px solid rgba(255,255,255,0.6); 
        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 - UI Updated
=================================== */
.features-section { padding:100px 0; background:var(--surface); }
.features-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:32px;
}
/* Enhanced Hover Lifting */
.feat-box {
    padding:30px; border-radius:20px;
    background:var(--surface-2);
    border:1px solid transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.feat-box:hover { 
    border-color: rgba(127,90,240, 0.3); 
    transform: translateY(-6px); 
    box-shadow: 0 12px 30px rgba(127,90,240, 0.08); 
    background: #ffffff;
}
.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 - UI Updated
=================================== */
.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); }

/* Enhanced Toggle Switch */
.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;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.toggle-switch.annual::after { left: 3px; transform: translateX(24px); }

/* Bouncing Save Badge */
.pricing-save-badge {
    background:#dcfce7; color:#16a34a;
    font-family:'Outfit', sans-serif; font-weight:700; font-size:.78rem;
    padding:4px 12px; border-radius:20px;
    animation: subtleBounce 3s infinite;
}
@keyframes subtleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ===================================
   PRICING - UI Updated
=================================== */
.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); }

/* Enhanced Toggle Switch */
.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;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.toggle-switch.annual::after { left: 3px; transform: translateX(24px); }

/* Bouncing Save Badge */
.pricing-save-badge {
    background:#dcfce7; color:#16a34a;
    font-family:'Outfit', sans-serif; font-weight:700; font-size:.78rem;
    padding:4px 12px; border-radius:20px;
    animation: subtleBounce 3s infinite;
}
@keyframes subtleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ===================================
   THE MISSING GRID FIX
=================================== */
.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); }

/* Inner Card Typography */
.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); }
}

/* ===================================
   FOOLPROOF CUSTOM PRICING DROPDOWN
=================================== */
.pricing-section select,
.pricing-grid select,
.price-card select,
select[name^="cycle"],
select[name^="billing"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 24px !important; 
    padding: 14px 40px 14px 18px !important;
    display: block !important;
    
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    line-height: 1.5 !important;
    
    background-color: var(--surface-2) !important;
    border: 2px solid var(--border) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
    transition: all 0.25s ease !important;
    
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f5af0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
}

.pricing-section select:hover,
.pricing-grid select:hover,
.price-card select:hover {
    border-color: var(--accent) !important;
    background-color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(127,90,240,0.08) !important;
}

.pricing-section select:focus,
.pricing-grid select:focus,
.price-card select:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px var(--accent-glow) !important;
    background-color: #ffffff !important;
}

.price-card.popular select {
    background-color: #ffffff !important;
    border-color: rgba(127,90,240, 0.3) !important;
}

.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; } }


/* =============================================
   EpicHostly — Global UX Enhancement Patch v2
   Mobile nav, focus states, footer, utilities
   ============================================= */

/* ── Focus-visible accessibility ── */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Footer ── */
.site-footer {
    background: var(--text-primary);
    color: rgba(255,255,255,.65);
}
.footer-top { padding: 64px 0 48px; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
}
.footer-brand .logo img { filter: brightness(10); opacity: .9; height: 30px; margin-bottom: 16px; }
.footer-brand p {
    font-size: .88rem;
    line-height: 1.7;
    color: rgba(255,255,255,.5);
    max-width: 260px;
    margin-bottom: 24px;
}
.social-links { display: flex; gap: 10px; }
.social-links a {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    display: grid; place-items: center;
    color: rgba(255,255,255,.6);
    font-size: .9rem;
    transition: .2s;
}
.social-links a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.footer-col h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
    font-size: .88rem;
    color: rgba(255,255,255,.5);
    font-weight: 500;
    transition: .2s;
}
.footer-col ul li a:hover { color: #fff; padding-left: 4px; }
.footer-bottom {
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .83rem;
    color: rgba(255,255,255,.4);
}
.footer-bottom span { color: var(--accent); font-weight: 700; }
.footer-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: rgba(255,255,255,.5);
    font-weight: 600;
}
.footer-badge .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34,197,94,.25);
    animation: statusPulse 2.5s infinite;
}
@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
    50% { box-shadow: 0 0 0 5px rgba(34,197,94,.0); }
}
@media (max-width: 960px) {
    .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand p { max-width: 100%; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-top { padding: 44px 0 32px; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }
}
@media (max-width: 400px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ── Mobile nav accessibility ── */
.mobile-nav[aria-hidden="true"] { pointer-events: none; }

/* ── Btn-cta touch target ── */
@media (hover: none) and (pointer: coarse) {
    .btn-cta, .btn-login { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Page transition ── */
main { animation: pageLoad .35s ease-out both; }
@keyframes pageLoad {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Container padding on mobile ── */
@media (max-width: 640px) {
    .container { padding: 0 16px; }
    .section-header { margin-bottom: 40px; }
}

/* ── Scrollbar thin ── */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }

/* ── Image optimize ── */
img { image-rendering: -webkit-optimize-contrast; }

/* ── Error pages (401, 403, 404, 500) ── */
.error-page {
    min-height: calc(100vh - var(--nav-h) - var(--bar-h));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
}
.error-code {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(4rem, 15vw, 9rem);
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -4px;
}
.error-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    margin-bottom: 12px;
}
.error-msg {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 480px;
    margin: 0 auto 28px;
}
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }