/* ============================================
   SUNA - Modern Professional Hosting Theme
   FOSSBilling Theme v1.1
   ============================================ */

:root,
[data-bs-theme="dark"] {
  --sn-primary: #ff3d2c;
  --sn-primary-hover: #ff6b5a;
  --sn-primary-light: rgba(99, 102, 241, 0.08);
  --sn-primary-glow: rgba(99, 102, 241, 0.25);
  --sn-primary-gradient: linear-gradient(135deg, #ff3d2c 0%, #ff5c4d 50%, #ff8b7c 100%);
  --sn-accent: #06b6d4;
  --sn-accent-light: rgba(6, 182, 212, 0.08);
  --sn-bg-body: #09090b;
  --sn-bg-card: #18181b;
  --sn-bg-card-hover: #1f1f23;
  --sn-bg-header: #0f0f12;
  --sn-bg-mega: #141418;
  --sn-bg-input: #1e1e24;
  --sn-bg-topbar: #0a0a0d;
  --sn-text-primary: #fafafa;
  --sn-text-secondary: #a1a1aa;
  --sn-text-muted: #52525b;
  --sn-border: #27272a;
  --sn-border-light: #1f1f23;
  --sn-shadow: 0 8px 32px rgba(0,0,0,0.5);
  --sn-shadow-sm: 0 2px 12px rgba(0,0,0,0.3);
  --sn-shadow-glow: 0 0 40px rgba(255,61,44,0.1);
  --sn-radius: 12px;
  --sn-radius-sm: 8px;
  --sn-radius-lg: 16px;
  --sn-radius-xl: 20px;
  --sn-gradient-mesh: radial-gradient(at 20% 80%, rgba(255,61,44,0.06) 0%, transparent 50%), radial-gradient(at 80% 20%, rgba(255,100,80,0.04) 0%, transparent 50%);
}

[data-bs-theme="light"] {
  --sn-primary: #ff3d2c;
  --sn-primary-hover: #e63326;
  --sn-primary-light: rgba(99, 102, 241, 0.06);
  --sn-primary-glow: rgba(99, 102, 241, 0.12);
  --sn-accent: #0891b2;
  --sn-accent-light: rgba(6, 182, 212, 0.06);
  --sn-bg-body: #fafafa;
  --sn-bg-card: #ffffff;
  --sn-bg-card-hover: #f5f5f7;
  --sn-bg-header: #ffffff;
  --sn-bg-mega: #ffffff;
  --sn-bg-input: #f4f4f5;
  --sn-bg-topbar: #f8f8fa;
  --sn-text-primary: #18181b;
  --sn-text-secondary: #52525b;
  --sn-text-muted: #a1a1aa;
  --sn-border: #e4e4e7;
  --sn-border-light: #f0f0f2;
  --sn-shadow: 0 8px 32px rgba(0,0,0,0.06);
  --sn-shadow-sm: 0 2px 12px rgba(0,0,0,0.03);
  --sn-shadow-glow: 0 0 40px rgba(255,61,44,0.05);
  --sn-gradient-mesh: radial-gradient(at 20% 80%, rgba(255,61,44,0.03) 0%, transparent 50%), radial-gradient(at 80% 20%, rgba(255,100,80,0.02) 0%, transparent 50%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--sn-bg-body);
  color: var(--sn-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInRight { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 var(--sn-primary-glow); } 50% { opacity:0.8; box-shadow:0 0 20px 4px var(--sn-primary-glow); } }
@keyframes shimmer { 0% { background-position:-200% center; } 100% { background-position:200% center; } }
@keyframes slideInMega { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes borderGlow { 0%,100% { border-color:rgba(255,61,44,0.2); } 50% { border-color:rgba(255,61,44,0.5); } }
@keyframes gradientShift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes spin { to { transform:rotate(360deg); } }

.animate-on-scroll { opacity:0; transform:translateY(30px); transition:all 0.7s cubic-bezier(0.4,0,0.2,1); }
.animate-on-scroll.visible { opacity:1; transform:translateY(0); }

/* ===== TOP BAR ===== */
.sn-topbar { background:var(--sn-bg-topbar); border-bottom:1px solid var(--sn-border-light); font-size:0.78rem; color:var(--sn-text-muted); padding:0.5rem 0; }
.sn-topbar a { color:var(--sn-text-muted); text-decoration:none; transition:color 0.2s; }
.sn-topbar a:hover { color:var(--sn-primary); }
.sn-topbar-inner { max-width:1320px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.sn-topbar-left, .sn-topbar-right { display:flex; align-items:center; gap:1.5rem; }
.sn-topbar-item { display:flex; align-items:center; gap:0.4rem; }
.sn-topbar-item i { color:var(--sn-primary); font-size:0.85rem; }

/* ===== HEADER ===== */
.sn-header { background:var(--sn-bg-header); border-bottom:1px solid var(--sn-border-light); position:sticky; top:0; z-index:1050; box-shadow:var(--sn-shadow-sm); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.sn-header-inner { max-width:1320px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; height:68px; }
.sn-logo { display:flex; align-items:center; gap:0.5rem; text-decoration:none; }
.sn-logo img { height:36px; }
.sn-logo span { font-size:1.3rem; font-weight:800; background:var(--sn-primary-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ===== NAVIGATION ===== */
.sn-nav { display:flex; align-items:center; gap:0.25rem; }
.sn-nav-item { position:relative; }
.sn-nav-link { display:flex; align-items:center; gap:0.4rem; padding:0 0.85rem; height:68px; color:var(--sn-text-secondary); text-decoration:none; font-size:0.88rem; font-weight:500; transition:all 0.2s; white-space:nowrap; }
.sn-nav-link:hover { color:var(--sn-primary); }
.sn-nav-link .chevron { font-size:0.7rem; transition:transform 0.2s; }
.sn-nav-item:hover .chevron { transform:rotate(180deg); }
.sn-nav-item.active .sn-nav-link { color:var(--sn-primary); font-weight:600; }
.sn-nav-link i { font-size:1rem; }

/* ===== MEGA MENU ===== */
.sn-mega-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:680px; background:var(--sn-bg-mega); border:1px solid var(--sn-border); border-radius:var(--sn-radius-lg); box-shadow:var(--sn-shadow); padding:1.5rem; opacity:0; visibility:hidden; pointer-events:none; transition:all 0.25s cubic-bezier(0.4,0,0.2,1); z-index:1060; }
.sn-mega-menu::before { content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:16px; height:16px; background:var(--sn-bg-mega); border-top:1px solid var(--sn-border); border-left:1px solid var(--sn-border); transform:translateX(-50%) rotate(45deg); }
.sn-nav-item:hover .sn-mega-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.sn-mega-3col { display:grid; grid-template-columns:1fr auto 1fr; gap:1.5rem; }
.sn-mega-col { display:flex; flex-direction:column; gap:0.25rem; }
.sn-mega-section-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--sn-text-muted); padding:0.5rem 0.75rem 0.5rem; }
.sn-mega-link { display:flex; align-items:center; gap:0.85rem; padding:0.65rem 0.75rem; border-radius:var(--sn-radius-sm); text-decoration:none; transition:all 0.2s; }
.sn-mega-link:hover { background:var(--sn-primary-light); }
.sn-mega-link-icon { width:38px; height:38px; border-radius:var(--sn-radius-sm); background:var(--sn-primary-light); display:flex; align-items:center; justify-content:center; color:var(--sn-primary); font-size:1.1rem; flex-shrink:0; transition:all 0.2s; }
.sn-mega-link:hover .sn-mega-link-icon { background:var(--sn-primary); color:#fff; }
.sn-mega-link-text strong { display:block; font-size:0.86rem; font-weight:600; color:var(--sn-text-primary); margin-bottom:0.1rem; }
.sn-mega-link-text small { font-size:0.76rem; color:var(--sn-text-muted); }
.sn-mega-visual { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; background:var(--sn-primary-light); border-radius:var(--sn-radius); border:1px dashed var(--sn-border); min-width:160px; text-align:center; }
.sn-mega-visual-icon { font-size:2.5rem; margin-bottom:0.5rem; }
.sn-mega-visual h4 { font-size:1.1rem; font-weight:800; color:var(--sn-primary); }
.sn-mega-visual p { font-size:0.82rem; color:var(--sn-text-secondary); margin-top:0.25rem; }

/* ===== HEADER RIGHT ===== */
.sn-header-right { display:flex; align-items:center; gap:0.75rem; }
.sn-theme-toggle { background:none; border:none; cursor:pointer; font-size:1.1rem; padding:0.4rem; border-radius:var(--sn-radius-sm); transition:background 0.2s; display:flex; align-items:center; }
.sn-theme-toggle:hover { background:var(--sn-primary-light); }
.sn-theme-toggle .icon { transition:opacity 0.2s; }

/* ===== BUTTONS ===== */
.btn-sn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.6rem 1.25rem; border-radius:var(--sn-radius-sm); font-size:0.88rem; font-weight:600; text-decoration:none; cursor:pointer; border:none; transition:all 0.25s; font-family:inherit; }
.btn-sn-primary { background:var(--sn-primary-gradient); color:#fff; box-shadow:0 4px 14px var(--sn-primary-glow); }
.btn-sn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px var(--sn-primary-glow); filter:brightness(1.1); }
.btn-sn-outline { background:transparent; color:var(--sn-primary); border:1.5px solid var(--sn-primary); }
.btn-sn-outline:hover { background:var(--sn-primary-light); }
.btn-sn-sm { padding:0.4rem 0.9rem; font-size:0.82rem; }

/* ===== SECTIONS ===== */
.sn-section { padding:5rem 0; }
.sn-section-inner { max-width:1320px; margin:0 auto; padding:0 1.5rem; }
.sn-section-header { text-align:center; margin-bottom:3.5rem; }
.sn-section-title { font-size:2rem; font-weight:800; margin-bottom:0.75rem; }
.sn-section-sub { color:var(--sn-text-secondary); font-size:1rem; max-width:560px; margin:0 auto; }

/* ===== HERO ===== */
.sn-hero { padding:5rem 0 4rem; background:var(--sn-gradient-mesh); position:relative; overflow:hidden; }
.sn-hero-inner { max-width:1320px; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.sn-hero-badge { display:inline-flex; align-items:center; gap:0.5rem; padding:0.4rem 1rem; background:var(--sn-primary-light); border:1px solid var(--sn-border); border-radius:100px; font-size:0.78rem; font-weight:600; color:var(--sn-primary); margin-bottom:1.5rem; }
.sn-hero-title { font-size:2.8rem; font-weight:900; line-height:1.15; margin-bottom:1rem; }
.sn-hero-title span { background:var(--sn-primary-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sn-hero-sub { font-size:1.05rem; color:var(--sn-text-secondary); line-height:1.7; margin-bottom:2rem; max-width:480px; }
.sn-hero-actions { display:flex; gap:0.75rem; flex-wrap:wrap; }
.sn-hero-stats { display:flex; gap:2.5rem; margin-top:2.5rem; }
.sn-hero-stat-value { font-size:1.5rem; font-weight:800; color:var(--sn-primary); }
.sn-hero-stat-label { font-size:0.78rem; color:var(--sn-text-muted); }
.sn-hero-right { display:flex; align-items:center; justify-content:center; }
.sn-hero-visual { width:100%; max-width:480px; aspect-ratio:4/3; background:var(--sn-bg-card); border:1px solid var(--sn-border); border-radius:var(--sn-radius-xl); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; box-shadow:var(--sn-shadow); }
.sn-hero-visual::before { content:''; position:absolute; inset:0; background:var(--sn-primary-gradient); opacity:0.05; }
.sn-hero-visual-icon { font-size:5rem; opacity:0.6; }

/* ===== BROWSER MOCKUP ===== */
.sn-browser { background:var(--sn-bg-card); border:1px solid var(--sn-border); border-radius:var(--sn-radius-lg); overflow:hidden; box-shadow:var(--sn-shadow); }
.sn-browser-bar { display:flex; align-items:center; gap:0.5rem; padding:0.75rem 1rem; background:var(--sn-bg-header); border-bottom:1px solid var(--sn-border-light); }
.sn-browser-dot { width:10px; height:10px; border-radius:50%; }
.sn-browser-dot:nth-child(1) { background:#ef4444; }
.sn-browser-dot:nth-child(2) { background:#f59e0b; }
.sn-browser-dot:nth-child(3) { background:#22c55e; }
.sn-browser-url { flex:1; margin-left:0.5rem; padding:0.35rem 0.75rem; background:var(--sn-bg-input); border-radius:6px; font-size:0.72rem; color:var(--sn-text-muted); }
.sn-browser-content { padding:2rem; }

/* ===== FEATURES ===== */
.sn-features-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem; }
.sn-feature-card { background:var(--sn-bg-card); border:1px solid var(--sn-border); border-radius:var(--sn-radius-lg); padding:1.75rem; transition:all 0.3s; }
.sn-feature-card:hover { border-color:var(--sn-primary); transform:translateY(-4px); box-shadow:var(--sn-shadow-glow); }
.sn-feature-icon { width:48px; height:48px; border-radius:var(--sn-radius); background:var(--sn-primary-light); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--sn-primary); margin-bottom:1.25rem; transition:all 0.3s; }
.sn-feature-card:hover .sn-feature-icon { background:var(--sn-primary); color:#fff; transform:scale(1.1); }
.sn-feature-title { font-size:1rem; font-weight:700; margin-bottom:0.5rem; }
.sn-feature-desc { font-size:0.85rem; color:var(--sn-text-secondary); line-height:1.6; }

/* ===== PRICING ===== */
.sn-pricing-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem; }
.sn-pricing-card { background:var(--sn-bg-card); border:1px solid var(--sn-border); border-radius:var(--sn-radius-xl); padding:2rem; transition:all 0.3s; position:relative; }
.sn-pricing-card:hover { transform:translateY(-4px); box-shadow:var(--sn-shadow); }
.sn-pricing-featured { border-color:var(--sn-primary); box-shadow:var(--sn-shadow-glow); }
.sn-pricing-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--sn-primary-gradient); color:#fff; font-size:0.72rem; font-weight:700; padding:0.3rem 1rem; border-radius:100px; text-transform:uppercase; letter-spacing:0.05em; }
.sn-pricing-header { margin-bottom:1.5rem; }
.sn-pricing-name { font-size:1.15rem; font-weight:700; margin-bottom:0.35rem; }
.sn-pricing-desc { font-size:0.82rem; color:var(--sn-text-muted); }
.sn-pricing-price { margin-bottom:1.5rem; display:flex; align-items:baseline; gap:0.15rem; }
.sn-pricing-currency { font-size:1rem; font-weight:600; color:var(--sn-text-secondary); }
.sn-pricing-amount { font-size:2.5rem; font-weight:900; line-height:1; }
.sn-pricing-period { font-size:0.85rem; color:var(--sn-text-muted); }
.sn-pricing-features { list-style:none; margin-bottom:2rem; }
.sn-pricing-features li { display:flex; align-items:center; gap:0.6rem; padding:0.45rem 0; font-size:0.86rem; color:var(--sn-text-secondary); }
.sn-pricing-features li i { color:var(--sn-primary); font-size:0.9rem; }

/* ===== FAQ ===== */
.sn-faq-grid { max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:0.75rem; }
.sn-faq-item { background:var(--sn-bg-card); border:1px solid var(--sn-border); border-radius:var(--sn-radius); overflow:hidden; transition:all 0.3s; }
.sn-faq-item:hover { border-color:var(--sn-primary); }
.sn-faq-question { display:flex; align-items:center; justify-content:space-between; padding:1.15rem 1.25rem; cursor:pointer; font-size:0.92rem; font-weight:600; color:var(--sn-text-primary); background:none; border:none; width:100%; text-align:left; font-family:inherit; transition:color 0.2s; }
.sn-faq-question:hover { color:var(--sn-primary); }
.sn-faq-question i { transition:transform 0.3s; color:var(--sn-text-muted); }
.sn-faq-item.open .sn-faq-question i { transform:rotate(180deg); color:var(--sn-primary); }
.sn-faq-answer { max-height:0; overflow:hidden; transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1); }
.sn-faq-item.open .sn-faq-answer { max-height:300px; }
.sn-faq-answer-inner { padding:0 1.25rem 1.25rem; color:var(--sn-text-secondary); font-size:0.88rem; line-height:1.7; }

/* ===== CTA ===== */
.sn-cta { background:var(--sn-primary-gradient); padding:4rem 0; text-align:center; position:relative; overflow:hidden; }
.sn-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1), transparent 60%); }
.sn-cta-inner { max-width:600px; margin:0 auto; padding:0 1.5rem; position:relative; z-index:1; }
.sn-cta h2 { font-size:1.8rem; font-weight:800; color:#fff; margin-bottom:0.75rem; }
.sn-cta p { color:rgba(255,255,255,0.8); margin-bottom:2rem; font-size:1rem; }
.sn-cta .btn-sn { background:#fff; color:var(--sn-primary); font-weight:700; }
.sn-cta .btn-sn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.2); }

/* ===== FOOTER ===== */
.sn-footer { background:var(--sn-bg-header); border-top:1px solid var(--sn-border-light); padding:4rem 0 0; }
.sn-footer-inner { max-width:1320px; margin:0 auto; padding:0 1.5rem; }
.sn-footer-grid { display:grid; grid-template-columns:1.5fr repeat(3, 1fr); gap:2.5rem; margin-bottom:3rem; }
.sn-footer-brand p { color:var(--sn-text-secondary); font-size:0.86rem; line-height:1.7; margin-top:1rem; max-width:280px; }
.sn-footer-title { font-size:0.92rem; font-weight:700; margin-bottom:1.25rem; color:var(--sn-text-primary); }
.sn-footer-links { list-style:none; }
.sn-footer-links li { margin-bottom:0.55rem; }
.sn-footer-links a { color:var(--sn-text-secondary); text-decoration:none; font-size:0.86rem; transition:all 0.2s; display:inline-flex; align-items:center; gap:0.3rem; }
.sn-footer-links a:hover { color:var(--sn-primary); transform:translateX(3px); }
.sn-footer-bottom { border-top:1px solid var(--sn-border-light); padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.sn-footer-copy { font-size:0.8rem; color:var(--sn-text-muted); }
.sn-footer-socials { display:flex; gap:0.6rem; }
.sn-footer-social { width:36px; height:36px; border-radius:8px; border:1px solid var(--sn-border); display:flex; align-items:center; justify-content:center; color:var(--sn-text-secondary); text-decoration:none; font-size:1rem; transition:all 0.25s; }
.sn-footer-social:hover { border-color:var(--sn-primary); color:var(--sn-primary); background:var(--sn-primary-light); transform:translateY(-3px); }

/* ===== MOBILE ===== */
.sn-mobile-toggle { display:none; background:none; border:none; width:36px; height:36px; flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer; padding:0; }
.sn-mobile-toggle span { display:block; width:22px; height:2px; background:var(--sn-text-primary); border-radius:2px; transition:all 0.3s; }
.sn-mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px, 5px); }
.sn-mobile-toggle.active span:nth-child(2) { opacity:0; }
.sn-mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px, -5px); }

/* ===== DASHBOARD ===== */
.sn-dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.25rem; margin-bottom:2rem; }
.sn-stat-card { background:var(--sn-bg-card); border:1px solid var(--sn-border); border-radius:var(--sn-radius-lg); padding:1.5rem; transition:all 0.3s; }
.sn-stat-card:hover { border-color:var(--sn-primary); transform:translateY(-2px); box-shadow:var(--sn-shadow-sm); }
.sn-stat-icon { width:44px; height:44px; border-radius:var(--sn-radius); background:var(--sn-primary-light); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--sn-primary); margin-bottom:1rem; }
.sn-stat-value { font-size:1.5rem; font-weight:800; margin-bottom:0.2rem; }
.sn-stat-label { font-size:0.78rem; color:var(--sn-text-muted); text-transform:uppercase; letter-spacing:0.5px; }

/* ===== SIDEBAR ===== */
.sn-sidebar { background:var(--sn-bg-card); border:1px solid var(--sn-border); border-radius:var(--sn-radius-lg); padding:1.25rem; }
.sn-sidebar-menu { list-style:none; }
.sn-sidebar-menu li { margin-bottom:0.25rem; }
.sn-sidebar-menu a { display:flex; align-items:center; gap:0.75rem; padding:0.65rem 0.85rem; border-radius:var(--sn-radius-sm); color:var(--sn-text-secondary); text-decoration:none; font-size:0.86rem; font-weight:500; transition:all 0.2s; }
.sn-sidebar-menu a:hover { background:var(--sn-primary-light); color:var(--sn-primary); }
.sn-sidebar-menu a.active { background:var(--sn-primary-light); color:var(--sn-primary); font-weight:600; border-left:3px solid var(--sn-primary); }
.sn-sidebar-menu a i { font-size:1rem; width:20px; text-align:center; }

/* ===== CARDS & TABLES ===== */
.sn-card { background:var(--sn-bg-card); border:1px solid var(--sn-border); border-radius:var(--sn-radius-lg); padding:1.5rem; }
.sn-card-header { font-size:1.1rem; font-weight:700; margin-bottom:1.25rem; padding-bottom:0.75rem; border-bottom:1px solid var(--sn-border-light); display:flex; align-items:center; gap:0.5rem; }
.sn-table { width:100%; border-collapse:collapse; }
.sn-table th { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--sn-text-muted); font-weight:600; padding:0.75rem 1rem; text-align:left; border-bottom:1px solid var(--sn-border); }
.sn-table td { padding:0.85rem 1rem; border-bottom:1px solid var(--sn-border-light); font-size:0.88rem; color:var(--sn-text-secondary); }
.sn-table tr:hover td { background:var(--sn-primary-light); }
.sn-badge { display:inline-flex; align-items:center; padding:0.2rem 0.65rem; border-radius:100px; font-size:0.72rem; font-weight:600; }
.sn-badge-success { background:rgba(34,197,94,0.1); color:#22c55e; }
.sn-badge-warning { background:rgba(245,158,11,0.1); color:#f59e0b; }
.sn-badge-danger { background:rgba(239,68,68,0.1); color:#ef4444; }
.sn-badge-info { background:var(--sn-primary-light); color:var(--sn-primary); }

/* ===== FORMS ===== */
.sn-label { display:block; font-size:0.82rem; font-weight:600; color:var(--sn-text-secondary); margin-bottom:0.4rem; }
.sn-input { width:100%; padding:0.65rem 0.85rem; border:1px solid var(--sn-border); border-radius:var(--sn-radius-sm); background:var(--sn-bg-input); color:var(--sn-text-primary); font-size:0.88rem; transition:all 0.2s; font-family:inherit; }
.sn-input:focus { outline:none; border-color:var(--sn-primary); box-shadow:0 0 0 3px var(--sn-primary-light); }
.sn-input::placeholder { color:var(--sn-text-muted); }
textarea.sn-input { resize:vertical; min-height:80px; }
.sn-select { width:100%; padding:0.65rem 0.85rem; border:1px solid var(--sn-border); border-radius:var(--sn-radius-sm); background:var(--sn-bg-input); color:var(--sn-text-primary); font-size:0.88rem; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a1a1aa' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.85rem center; font-family:inherit; }
.sn-select:focus { outline:none; border-color:var(--sn-primary); box-shadow:0 0 0 3px var(--sn-primary-light); }

/* ===== ALERTS ===== */
.sn-alert { padding:0.85rem 1.25rem; border-radius:var(--sn-radius-sm); margin-bottom:1rem; font-size:0.88rem; }
.sn-alert-inner { display:flex; align-items:center; gap:0.65rem; }
.sn-alert-error { background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2); color:#ef4444; }
.sn-alert-success { background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2); color:#22c55e; }
.sn-alert-warning { background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.2); color:#f59e0b; }
.sn-alert-info { background:var(--sn-primary-light); border:1px solid var(--sn-primary-glow); color:var(--sn-primary); }

/* ===== PAGINATION ===== */
.sn-pagination { display:flex; align-items:center; justify-content:center; gap:0.35rem; }
.sn-page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 0.5rem; border-radius:var(--sn-radius-sm); border:1px solid var(--sn-border); background:var(--sn-bg-card); color:var(--sn-text-secondary); font-size:0.85rem; font-weight:500; text-decoration:none; transition:all 0.2s; }
.sn-page-btn:hover { border-color:var(--sn-primary); color:var(--sn-primary); background:var(--sn-primary-light); }
.sn-page-btn.active { background:var(--sn-primary); border-color:var(--sn-primary); color:#fff; }
.sn-page-btn.disabled { opacity:0.4; pointer-events:none; }

/* ===== LOGIN PAGE ===== */
.sn-login-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--sn-bg-body); background-image:var(--sn-gradient-mesh); padding:2rem; }
.sn-login-card { background:var(--sn-bg-card); border:1px solid var(--sn-border); border-radius:var(--sn-radius-xl); padding:2.5rem; width:100%; max-width:420px; box-shadow:var(--sn-shadow); }
.sn-login-logo { text-align:center; margin-bottom:2rem; }
.sn-login-logo img { height:42px; }
.sn-login-title { font-size:1.3rem; font-weight:700; text-align:center; margin-bottom:0.5rem; }
.sn-login-sub { font-size:0.88rem; color:var(--sn-text-secondary); text-align:center; margin-bottom:2rem; }

/* ===== PUBLIC PAGES ===== */
.sn-public-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.sn-public-bg { position:absolute; inset:0; z-index:0; }
.sn-public-bg-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.15; }
.sn-public-bg-orb-1 { width:400px; height:400px; background:var(--sn-primary); top:-100px; right:-100px; }
.sn-public-bg-orb-2 { width:300px; height:300px; background:var(--sn-accent); bottom:-80px; left:-80px; }
.sn-public-bg-grid { position:absolute; inset:0; background-image:linear-gradient(var(--sn-border-light) 1px, transparent 1px), linear-gradient(90deg, var(--sn-border-light) 1px, transparent 1px); background-size:60px 60px; opacity:0.3; }
.sn-public-content { position:relative; z-index:1; width:100%; max-width:480px; padding:2rem; }
.sn-public-home-link { display:inline-flex; align-items:center; gap:0.4rem; color:var(--sn-text-muted); text-decoration:none; font-size:0.85rem; margin-bottom:2rem; transition:color 0.2s; }
.sn-public-home-link:hover { color:var(--sn-primary); }

/* ===== TOAST ===== */
.sn-toast { display:flex; align-items:center; gap:0.75rem; background:var(--sn-bg-card); border:1px solid var(--sn-border); border-radius:var(--sn-radius); padding:0.85rem 1rem; box-shadow:var(--sn-shadow); min-width:280px; }
.sn-toast-icon { width:36px; height:36px; border-radius:var(--sn-radius-sm); background:var(--sn-primary-light); display:flex; align-items:center; justify-content:center; color:var(--sn-primary); flex-shrink:0; }
.sn-toast-body { flex:1; }
.sn-toast-body strong { display:block; font-size:0.85rem; font-weight:600; }
.sn-toast-body small { font-size:0.75rem; color:var(--sn-text-muted); }
.sn-toast-action { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--sn-text-muted); text-decoration:none; transition:all 0.2s; }
.sn-toast-action:hover { background:var(--sn-primary-light); color:var(--sn-primary); }

/* ===== MOBILE MENU LINKS ===== */
.sn-mobile-link { display:flex; align-items:center; gap:0.75rem; padding:0.85rem 1rem; color:var(--sn-text-secondary); text-decoration:none; font-size:0.9rem; font-weight:500; border-bottom:1px solid var(--sn-border-light); transition:all 0.2s; }
.sn-mobile-link:hover, .sn-mobile-link.active { color:var(--sn-primary); background:var(--sn-primary-light); }
.sn-mobile-link i { font-size:1.1rem; width:22px; text-align:center; }
.sn-mobile-balance { display:flex; align-items:center; justify-content:space-between; padding:1rem; background:var(--sn-primary-light); border-radius:var(--sn-radius-sm); margin:0.75rem; }
.sn-mobile-balance-label { font-size:0.82rem; color:var(--sn-text-muted); font-weight:600; }
.sn-mobile-balance-value { font-size:1.1rem; font-weight:800; color:var(--sn-primary); }

/* ===== RESPONSIVE ===== */
@media (max-width:991px) {
  .sn-topbar { display:none; }
  .sn-mobile-toggle { display:flex; }
  .sn-nav { position:fixed; top:68px; left:0; right:0; bottom:0; background:var(--sn-bg-mega); flex-direction:column; align-items:stretch; height:auto; padding:1rem; overflow-y:auto; transform:translateX(-100%); transition:transform 0.3s; z-index:1040; }
  .sn-nav.open { transform:translateX(0); }
  .sn-nav-link { padding:0.85rem 0; height:auto; border-bottom:1px solid var(--sn-border-light); }
  .sn-mega-menu { position:static; transform:none; min-width:100%; box-shadow:none; border:none; border-radius:0; padding:1rem 0; display:none; opacity:1; visibility:visible; pointer-events:auto; }
  .sn-mega-menu::before { display:none; }
  .sn-nav-item.open .sn-mega-menu { display:block; }
  .sn-mega-3col { grid-template-columns:1fr; }
  .sn-mega-visual { min-height:auto; padding:1rem; margin-bottom:1rem; }
  .sn-hero-inner { grid-template-columns:1fr; text-align:center; }
  .sn-hero-sub { margin:0 auto 2rem; }
  .sn-hero-actions { justify-content:center; }
  .sn-hero-stats { justify-content:center; }
  .sn-hero-right { order:-1; }
  .sn-features-grid { grid-template-columns:repeat(3, 1fr); gap:1rem; }
  .sn-footer-grid { grid-template-columns:1fr 1fr; }
  .sn-pricing-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto; }
  .sn-header-right .btn-sn { display:none; }
}

@media (max-width:575px) {
  .sn-features-grid { grid-template-columns:repeat(2, 1fr); }
  .sn-footer-grid { grid-template-columns:1fr; }
  .sn-footer-bottom { flex-direction:column; text-align:center; }
  .sn-hero { padding:2.5rem 0 2rem; }
  .sn-hero-title { font-size:1.8rem; }
  .sn-hero-stats { flex-direction:column; gap:1rem; }
  .sn-browser-content { padding:1.25rem; }
  .sn-dashboard-grid { grid-template-columns:1fr; }
  .sn-section { padding:3rem 0; }
  .sn-section-title { font-size:1.5rem; }
}

/* ===== FOSSBILLING DEFAULT OVERRIDES ===== */
.h-block { padding:1rem 1.25rem; border-radius:var(--sn-radius-sm); margin-bottom:1rem; font-size:0.88rem; }
.h-block.error { background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2); color:#ef4444; }
.h-block.success { background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2); color:#22c55e; }
.h-block.warning { background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.2); color:#f59e0b; }
.h-block.info { background:var(--sn-primary-light); border:1px solid var(--sn-primary-glow); color:var(--sn-primary); }

/* Bootstrap overrides for FossBilling compatibility */
.pagination { display:flex; gap:0.35rem; padding-left:0; list-style:none; margin:0; justify-content:center; }
.page-item .page-link { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 0.5rem; border-radius:var(--sn-radius-sm); border:1px solid var(--sn-border); background:var(--sn-bg-card); color:var(--sn-text-secondary); font-size:0.85rem; text-decoration:none; transition:all 0.2s; }
.page-item .page-link:hover { border-color:var(--sn-primary); color:var(--sn-primary); }
.page-item.active .page-link { background:var(--sn-primary); border-color:var(--sn-primary); color:#fff; }
.page-item.disabled .page-link { opacity:0.4; pointer-events:none; }

.form-label { display:block; font-size:0.82rem; font-weight:600; color:var(--sn-text-secondary); margin-bottom:0.4rem; }
.form-control, .form-select { width:100%; padding:0.65rem 0.85rem; border:1px solid var(--sn-border); border-radius:var(--sn-radius-sm); background:var(--sn-bg-input); color:var(--sn-text-primary); font-size:0.88rem; font-family:inherit; transition:all 0.2s; }
.form-control:focus, .form-select:focus { border-color:var(--sn-primary); box-shadow:0 0 0 3px var(--sn-primary-light); outline:none; }
.form-check-input { accent-color:var(--sn-primary); }

/* Generic content wrapper for module pages */
.sn-content { max-width:1320px; margin:0 auto; padding:2rem 1.5rem; }

/* ===== HERO BANNER (Split Layout) ===== */
.sn-hero-banner {
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
    background: var(--sn-bg-body);
}
.sn-hero-banner-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sn-hero-banner-mesh { position: absolute; inset: 0; }
.sn-hero-banner-mesh::before {
    content: '';
    position: absolute;
    width: 700px; height: 700px;
    top: -200px; right: -150px;
    background: radial-gradient(circle, rgba(255,61,44,0.08) 0%, transparent 60%);
    animation: snMesh1 20s ease-in-out infinite;
}
.sn-hero-banner-mesh::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    bottom: -100px; left: -100px;
    background: radial-gradient(circle, rgba(255,100,80,0.06) 0%, transparent 60%);
    animation: snMesh2 25s ease-in-out infinite;
}
@keyframes snMesh1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-60px,40px) scale(1.1)} }
@keyframes snMesh2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.15)} }
.sn-hero-banner-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(var(--sn-border-light) 1px, transparent 1px), linear-gradient(90deg, var(--sn-border-light) 1px, transparent 1px);
    background-size: 70px 70px;
    opacity: 0.4;
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
}
.sn-hero-banner-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sn-hp {
    position: absolute;
    width: 3px; height: 3px;
    background: rgba(255,61,44,0.2);
    border-radius: 50%;
    animation: snFloat linear infinite;
}
.sn-hp:nth-child(1){left:10%;animation-duration:18s;width:4px;height:4px}
.sn-hp:nth-child(2){left:25%;animation-duration:22s;animation-delay:3s;opacity:.5}
.sn-hp:nth-child(3){left:40%;animation-duration:16s;animation-delay:6s;width:5px;height:5px}
.sn-hp:nth-child(4){left:55%;animation-duration:24s;animation-delay:1s}
.sn-hp:nth-child(5){left:70%;animation-duration:19s;animation-delay:4s;width:4px;height:4px}
.sn-hp:nth-child(6){left:85%;animation-duration:21s;animation-delay:7s}
@keyframes snFloat{0%{transform:translateY(100vh) scale(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(-10vh) scale(1.2);opacity:0}}

/* Split layout */
.sn-hero-banner-split {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
}
.sn-hero-banner-left {
    animation: snFadeDown 1s cubic-bezier(0.22,1,0.36,1);
}
.sn-hero-banner-logo { margin-bottom: 1.5rem; }
.sn-hero-banner-logo img {
    height: 200px;
    width: auto;
    filter: drop-shadow(0 8px 40px rgba(255,61,44,0.12));
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.sn-hero-banner-logo img:hover { transform: scale(1.04) translateY(-4px); }
@keyframes snFadeDown { from{opacity:0;transform:translateY(-24px)} to{opacity:1;transform:translateY(0)} }

.sn-hero-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sn-primary-light);
    border: 1px solid var(--sn-primary-glow);
    border-radius: 100px;
    padding: 7px 20px;
    font-size: 0.72rem;
    color: var(--sn-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 1.25rem;
    animation: snFadeDown 1s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
.sn-hero-banner-dot {
    width: 7px; height: 7px;
    background: var(--sn-primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.sn-hero-banner-title {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.85rem;
    animation: snFadeDown 1s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
.sn-hero-banner-title span {
    background: var(--sn-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sn-hero-banner-desc {
    color: var(--sn-text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    animation: snFadeDown 1s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}
.sn-hero-banner-features {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    animation: snFadeDown 1s cubic-bezier(0.22,1,0.36,1) 0.4s both;
}
.sn-hbf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sn-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}
.sn-hbf-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--sn-primary-light);
    border: 1px solid var(--sn-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sn-primary);
    font-size: 0.85rem;
}

/* Domain search card (right side) */
.sn-hero-banner-right {
    display: flex;
    justify-content: center;

/* ===== HERO BANNER (Compact + Wide) ===== */
.sn-hero-banner {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 0;
    background: var(--sn-bg-body);
    min-height: 420px;
}
.sn-hero-banner-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sn-hero-banner-mesh { position: absolute; inset: 0; }
.sn-hero-banner-mesh::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    top: -150px; right: -100px;
    background: radial-gradient(circle, rgba(255,61,44,0.1) 0%, transparent 60%);
    animation: snMesh1 18s ease-in-out infinite;
}
.sn-hero-banner-mesh::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    bottom: -80px; left: -80px;
    background: radial-gradient(circle, rgba(255,100,80,0.08) 0%, transparent 60%);
    animation: snMesh2 22s ease-in-out infinite;
}
@keyframes snMesh1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,30px) scale(1.1)} }
@keyframes snMesh2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-20px) scale(1.15)} }

.sn-hero-banner-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(var(--sn-border-light) 1px, transparent 1px), linear-gradient(90deg, var(--sn-border-light) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.3;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
}

/* Particles */
.sn-hero-banner-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sn-hp {
    position: absolute;
    width: 3px; height: 3px;
    background: rgba(255,61,44,0.25);
    border-radius: 50%;
    animation: snFloat linear infinite;
}
.sn-hp:nth-child(1){left:8%;animation-duration:16s;width:4px;height:4px}
.sn-hp:nth-child(2){left:22%;animation-duration:20s;animation-delay:2s;opacity:.5}
.sn-hp:nth-child(3){left:38%;animation-duration:14s;animation-delay:5s;width:5px;height:5px}
.sn-hp:nth-child(4){left:52%;animation-duration:22s;animation-delay:1s}
.sn-hp:nth-child(5){left:68%;animation-duration:17s;animation-delay:3s;width:4px;height:4px}
.sn-hp:nth-child(6){left:82%;animation-duration:19s;animation-delay:6s}
.sn-hp:nth-child(7){left:15%;animation-duration:21s;animation-delay:4s;width:2px;height:2px;opacity:.3}
.sn-hp:nth-child(8){left:92%;animation-duration:24s;animation-delay:7s;width:4px;height:4px;opacity:.4}
@keyframes snFloat{0%{transform:translateY(100vh) scale(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(-10vh) scale(1.2);opacity:0}}

/* Floating glowing orbs */
.sn-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: snOrbFloat ease-in-out infinite;
}
.sn-orb-1 {
    width: 200px; height: 200px;
    background: rgba(255,61,44,0.12);
    top: 10%; right: 15%;
    animation-duration: 12s;
}
.sn-orb-2 {
    width: 150px; height: 150px;
    background: rgba(255,100,80,0.1);
    bottom: 20%; left: 10%;
    animation-duration: 15s;
    animation-delay: 3s;
}
.sn-orb-3 {
    width: 100px; height: 100px;
    background: rgba(255,100,80,0.08);
    top: 50%; left: 50%;
    animation-duration: 10s;
    animation-delay: 6s;
}
@keyframes snOrbFloat {
    0%,100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.1); }
    50% { transform: translate(-20px, 30px) scale(0.9); }
    75% { transform: translate(15px, 15px) scale(1.05); }
}

/* Animated ring */
.sn-ring {
    position: absolute;
    width: 300px; height: 300px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,61,44,0.08);
    border-radius: 50%;
    animation: snRingSpin 30s linear infinite;
}
.sn-ring::before {
    content: '';
    position: absolute;
    top: -3px; left: 50%;
    width: 6px; height: 6px;
    background: var(--sn-primary);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--sn-primary-glow);
}
@keyframes snRingSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Glowing lines */
.sn-glow-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sn-primary-glow), transparent);
    animation: snGlowPulse 4s ease-in-out infinite;
}
.sn-glow-line-1 {
    width: 200px;
    top: 30%; left: 5%;
    transform: rotate(-15deg);
}
.sn-glow-line-2 {
    width: 150px;
    bottom: 25%; right: 8%;
    transform: rotate(20deg);
    animation-delay: 2s;
}
@keyframes snGlowPulse {
    0%,100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}

/* Split layout */
.sn-hero-banner-split {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.sn-hero-banner-left {
    animation: snFadeDown 1s cubic-bezier(0.22,1,0.36,1);
}
@keyframes snFadeDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

.sn-hero-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sn-primary-light);
    border: 1px solid var(--sn-primary-glow);
    border-radius: 100px;
    padding: 6px 18px;
    font-size: 0.7rem;
    color: var(--sn-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 1rem;
    animation: snFadeDown 1s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
.sn-hero-banner-dot {
    width: 6px; height: 6px;
    background: var(--sn-primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.sn-hero-banner-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.65rem;
    animation: snFadeDown 1s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
.sn-hero-banner-title span {
    background: var(--sn-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sn-hero-banner-desc {
    color: var(--sn-text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    animation: snFadeDown 1s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}
.sn-hero-banner-features {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    animation: snFadeDown 1s cubic-bezier(0.22,1,0.36,1) 0.4s both;
}
.sn-hbf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--sn-text-muted);
    font-size: 0.76rem;
    font-weight: 500;
}
.sn-hbf-icon {
    width: 26px; height: 26px;
    border-radius: 6px;
    background: var(--sn-primary-light);
    border: 1px solid var(--sn-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sn-primary);
    font-size: 0.75rem;
}

/* ===== BROWSER-STYLE DOMAIN CARD ===== */
.sn-browser-card {
    width: 100%;
    max-width: 420px;
    background: var(--sn-bg-card);
    border: 1px solid var(--sn-border);
    border-radius: var(--sn-radius-xl);
    box-shadow: var(--sn-shadow), 0 0 40px rgba(255,61,44,0.05);
    overflow: hidden;
    animation: snFadeDown 1s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
.sn-browser-chrome {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.85rem;
    background: var(--sn-bg-header);
    border-bottom: 1px solid var(--sn-border-light);
}
.sn-browser-dots { display: flex; gap: 5px; flex-shrink: 0; }
.sn-dot { width: 10px; height: 10px; border-radius: 50%; }
.sn-dot-red { background: #ff5f57; }
.sn-dot-yellow { background: #febc2e; }
.sn-dot-green { background: #28c840; }
.sn-browser-url {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--sn-bg-input);
    border: 1px solid var(--sn-border);
    border-radius: 5px;
    padding: 0.3rem 0.65rem;
    font-size: 0.72rem;
    color: var(--sn-text-muted);
    min-width: 0;
}
.sn-browser-url i { color: #22c55e; font-size: 0.65rem; flex-shrink: 0; }
.sn-browser-url span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-browser-actions { color: var(--sn-text-muted); font-size: 0.8rem; flex-shrink: 0; }

.sn-browser-body {
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: center;
}
.sn-browser-search-icon {
    width: 44px; height: 44px;
    margin: 0 auto 0.75rem;
    border-radius: 14px;
    background: var(--sn-primary-light);
    border: 1px solid var(--sn-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--sn-primary);
}
.sn-browser-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.2rem; }
.sn-browser-sub { font-size: 0.78rem; color: var(--sn-text-muted); margin-bottom: 1.25rem; }

.sn-browser-search { margin-bottom: 1.25rem; }
.sn-browser-search-inner {
    display: flex;
    align-items: center;
    background: var(--sn-bg-input);
    border: 1.5px solid var(--sn-border);
    border-radius: var(--sn-radius);
    overflow: hidden;
    transition: all 0.25s;
}
.sn-browser-search-inner:focus-within {
    border-color: var(--sn-primary);
    box-shadow: 0 0 0 3px var(--sn-primary-light);
}
.sn-browser-search-inner i { padding: 0 0 0 0.85rem; color: var(--sn-text-muted); font-size: 0.9rem; }
.sn-browser-search-inner input {
    flex: 1; padding: 0.7rem 0.65rem; border: none; background: transparent;
    color: var(--sn-text-primary); font-size: 0.9rem; font-family: inherit; outline: none;
}
.sn-browser-search-inner input::placeholder { color: var(--sn-text-muted); }
.sn-browser-search-inner button {
    padding: 0.7rem 1.1rem; margin: 3px;
    background: var(--sn-primary-gradient); color: #fff; border: none;
    border-radius: calc(var(--sn-radius) - 3px);
    font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: inherit;
    transition: all 0.2s; white-space: nowrap;
}
.sn-browser-search-inner button:hover { filter: brightness(1.1); }

.sn-browser-tlds {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.sn-browser-tld {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--sn-bg-input);
    border: 1px solid var(--sn-border);
    border-radius: var(--sn-radius-sm);
    transition: all 0.2s;
}
.sn-browser-tld:hover { border-color: var(--sn-primary); background: var(--sn-primary-light); }
.sn-tld-ext { font-weight: 700; font-size: 0.82rem; color: var(--sn-text-primary); }
.sn-tld-price { font-size: 0.74rem; color: var(--sn-primary); font-weight: 600; }

.sn-browser-footer {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.85rem;
    border-top: 1px solid var(--sn-border-light);
}
.sn-browser-footer span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--sn-text-muted);
}
.sn-browser-footer i { color: #22c55e; font-size: 0.8rem; }

@media (max-width: 991px) {
    .sn-hero-banner-split {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
    }
    .sn-hero-banner-left { order: 1; }
    .sn-hero-banner-right { order: 0; }
    .sn-hero-banner-title { font-size: 1.5rem; }
    .sn-hero-banner-features { justify-content: center; }
    .sn-browser-card { max-width: 360px; margin: 0 auto; }
    .sn-orb, .sn-ring, .sn-glow-line { display: none; }
}
@media (max-width: 575px) {
    .sn-hero-banner { padding: 2rem 0; min-height: auto; }
    .sn-hero-banner-features { flex-direction: column; align-items: center; gap: 0.4rem; }
    .sn-browser-body { padding: 1.25rem 1rem; }
    .sn-browser-tlds { grid-template-columns: 1fr; }
}

/* ===== HOSTING PLANS SECTION ===== */
.sn-plans-section {
    padding: 3rem 0 4rem;
    background: var(--sn-bg-body);
    position: relative;
}
.sn-plans-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.sn-plans-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.sn-plans-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}
.sn-plans-sub {
    font-size: 0.88rem;
    color: var(--sn-text-secondary);
}

/* Plans grid */
.sn-plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

/* Plan card */
.sn-plan-card {
    background: var(--sn-bg-card);
    border: 1px solid var(--sn-border);
    border-radius: var(--sn-radius-lg);
    padding: 1.75rem;
    position: relative;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}
.sn-plan-card:hover {
    border-color: var(--sn-primary);
    transform: translateY(-4px);
    box-shadow: var(--sn-shadow);
}

/* Popular card */
.sn-plan-popular {
    border-color: var(--sn-primary);
    box-shadow: 0 0 30px rgba(255,61,44,0.1);
}
.sn-plan-popular::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--sn-primary-gradient);
    border-radius: var(--sn-radius-lg) var(--sn-radius-lg) 0 0;
}
.sn-plan-popular-badge {
    position: absolute;
    top: -10px;
    right: 1.5rem;
    background: var(--sn-primary-gradient);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.25rem 0.85rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card elements */
.sn-plan-badge {
    font-size: 0.7rem;
    color: var(--sn-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.sn-plan-name {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.15rem;
}
.sn-plan-target {
    font-size: 0.78rem;
    color: var(--sn-text-muted);
    margin-bottom: 1.25rem;
}
.sn-plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}
.sn-plan-old {
    font-size: 0.9rem;
    color: var(--sn-text-muted);
    text-decoration: line-through;
}
.sn-plan-amount {
    font-size: 2rem;
    font-weight: 900;
    color: var(--sn-primary);
}
.sn-plan-period {
    font-size: 0.85rem;
    color: var(--sn-text-muted);
}
.sn-plan-discount {
    display: inline-block;
    background: rgba(255,61,44,0.08);
    color: var(--sn-primary);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 100px;
    margin-bottom: 1.25rem;
}

/* Features list */
.sn-plan-features {
    flex: 1;
    margin-bottom: 1.5rem;
}
.sn-plan-feat {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.82rem;
    color: var(--sn-text-secondary);
    border-bottom: 1px solid var(--sn-border-light);
}
.sn-plan-feat:last-child { border-bottom: none; }
.sn-plan-feat i {
    color: var(--sn-primary);
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
}

/* Button */
.sn-plan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: var(--sn-radius-sm);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid var(--sn-primary);
    background: transparent;
    color: var(--sn-primary);
    transition: all 0.25s;
    font-family: inherit;
}
.sn-plan-btn:hover {
    background: var(--sn-primary-light);
}
.sn-plan-btn-primary {
    background: var(--sn-primary-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(255,61,44,0.25);
}
.sn-plan-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255,61,44,0.3);
}

@media (max-width: 991px) {
    .sn-plans-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .sn-plan-popular { order: -1; }
}