/* ============================================
   FUN88-BONUS — Landing Page Stylesheet
   Colors: primary=#7c3aed, secondary=#ec4899,
   accent=#f472b6, accent_light=#fdf2f8,
   bg=#faf5ff, text=#1e1b4b
   ============================================ */

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Prompt',sans-serif;
  color:#1e1b4b;
  background:#faf5ff;
  line-height:1.7;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}

/* ---------- Utility ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Color Vars ---------- */
:root{
  --primary:#7c3aed;
  --secondary:#ec4899;
  --accent:#f472b6;
  --accent-light:#fdf2f8;
  --bg:#faf5ff;
  --text:#1e1b4b;
  --white:#ffffff;
  --shadow:0 8px 30px rgba(124,58,237,.15);
  --radius:16px;
  --transition:all .3s cubic-bezier(.4,0,.2,1);
}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:rgba(250,245,255,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(124,58,237,.1);
  transition:var(--transition);
}
.site-header.scrolled{
  background:rgba(250,245,255,.95);
  box-shadow:0 2px 20px rgba(124,58,237,.12);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.logo{
  font-size:1.6rem;font-weight:700;color:var(--primary);
  display:flex;align-items:center;gap:8px;
}
.logo span{color:var(--secondary)}
.nav-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.nav-links a{
  font-size:.95rem;font-weight:500;color:var(--text);
  position:relative;padding:4px 0;
  transition:var(--transition);
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  transition:var(--transition);
}
.nav-links a:hover{color:var(--primary)}
.nav-links a:hover::after{width:100%}

.hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  background:none;border:none;padding:4px;
}
.hamburger span{
  width:26px;height:3px;background:var(--text);border-radius:4px;
  transition:var(--transition);
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,6px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}

/* ---------- Hero Section ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:url('../images/hero-bonus.jpg') center/cover no-repeat;
  filter:brightness(.55);
  z-index:0;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(124,58,237,.7),rgba(236,72,153,.5));
  z-index:1;
}
.hero-content{
  position:relative;z-index:2;
  max-width:800px;padding:0 24px;
  animation:fadeUp .8s ease-out;
}
.hero-badge{
  display:inline-block;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
  padding:6px 20px;border-radius:50px;
  font-size:.85rem;font-weight:500;color:#fff;
  margin-bottom:20px;
  border:1px solid rgba(255,255,255,.25);
}
.hero h1{
  font-size:3rem;font-weight:700;color:#fff;
  line-height:1.25;margin-bottom:18px;
  text-shadow:0 2px 20px rgba(0,0,0,.25);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#f9a8d4,#fbbf24);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{
  font-size:1.15rem;color:rgba(255,255,255,.92);
  margin-bottom:32px;line-height:1.8;
}
.btn-hero{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;font-size:1.1rem;font-weight:600;
  padding:16px 40px;border-radius:50px;
  border:none;cursor:pointer;
  box-shadow:0 8px 30px rgba(124,58,237,.4);
  transition:var(--transition);
}
.btn-hero:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(124,58,237,.5);
}
.btn-hero svg{width:20px;height:20px;fill:currentColor}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Sections General ---------- */
.section{
  padding:80px 0;
  position:relative;
}
.section:nth-child(even){
  background:var(--accent-light);
}
.section-title{
  text-align:center;margin-bottom:50px;
}
.section-title h2{
  font-size:2rem;font-weight:700;color:var(--text);
  margin-bottom:12px;
}
.section-title p{
  font-size:1.05rem;color:rgba(30,27,75,.65);max-width:600px;margin:0 auto;
}
.section-title .badge{
  display:inline-block;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;font-size:.8rem;font-weight:500;
  padding:4px 16px;border-radius:50px;margin-bottom:12px;
}

/* ---------- Card ---------- */
.card{
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:var(--transition);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(124,58,237,.18);
}
.card-img{
  width:100%;height:220px;object-fit:cover;
}
.card-body{padding:24px}
.card-body h3{
  font-size:1.25rem;font-weight:700;margin-bottom:10px;color:var(--text);
}
.card-body p{
  font-size:.95rem;color:rgba(30,27,75,.7);line-height:1.7;
}

/* ---------- Grid ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* ---------- Bonus Section ---------- */
.bonus-grid{display:flex;flex-direction:column;gap:32px}
.bonus-item{
  display:flex;align-items:center;gap:30px;
  background:var(--white);border-radius:var(--radius);
  padding:28px 32px;
  box-shadow:var(--shadow);
  transition:var(--transition);
}
.bonus-item:hover{transform:translateX(8px)}
.bonus-item img{
  width:200px;height:160px;object-fit:cover;border-radius:12px;
  flex-shrink:0;
}
.bonus-info{flex:1}
.bonus-info h3{font-size:1.3rem;font-weight:700;margin-bottom:8px}
.bonus-info p{font-size:.95rem;color:rgba(30,27,75,.7);line-height:1.7}
.bonus-tag{
  display:inline-block;background:var(--accent-light);
  color:var(--primary);font-size:.8rem;font-weight:500;
  padding:4px 12px;border-radius:50px;margin-bottom:8px;
}

/* ---------- Tabs ---------- */
.tabs-wrapper{margin-top:40px}
.tabs-nav{
  display:flex;gap:0;
  background:var(--white);
  border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.tab-btn{
  flex:1;padding:16px 24px;
  font-size:1rem;font-weight:600;
  background:transparent;color:rgba(30,27,75,.5);
  border:none;cursor:pointer;
  transition:var(--transition);
  position:relative;
}
.tab-btn.active{
  color:var(--white);
  background:linear-gradient(135deg,var(--primary),var(--secondary));
}
.tab-content{
  background:var(--white);
  border-radius:0 0 var(--radius) var(--radius);
  padding:40px;
  box-shadow:var(--shadow);
  display:none;
  animation:fadeIn .4s ease;
}
.tab-content.active{display:block}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.tab-steps{display:flex;flex-direction:column;gap:20px}
.tab-step{
  display:flex;align-items:flex-start;gap:16px;
}
.step-num{
  width:40px;height:40px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;font-weight:700;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}
.step-text h4{font-size:1.05rem;font-weight:600;margin-bottom:4px}
.step-text p{font-size:.92rem;color:rgba(30,27,75,.65)}

.tab-img{
  width:100%;max-height:350px;object-fit:cover;
  border-radius:12px;margin-top:20px;
}

/* ---------- Progress Bars ---------- */
.progress-section{margin-top:40px}
.progress-item{margin-bottom:28px}
.progress-label{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;
}
.progress-label span:first-child{font-weight:600;font-size:.95rem}
.progress-label span:last-child{
  font-weight:700;color:var(--primary);font-size:.95rem;
}
.progress-track{
  width:100%;height:14px;
  background:var(--accent-light);
  border-radius:50px;overflow:hidden;
}
.progress-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  border-radius:50px;
  transition:width 1.2s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.progress-fill::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:shimmer 2s infinite;
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* ---------- Cashback Section ---------- */
.cashback-card{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;border-radius:var(--radius);
  padding:48px 40px;
  display:flex;align-items:center;gap:40px;
  box-shadow:var(--shadow);
}
.cashback-card img{
  width:300px;height:220px;object-fit:cover;border-radius:12px;
  flex-shrink:0;
}
.cashback-info h3{font-size:1.6rem;font-weight:700;margin-bottom:12px}
.cashback-info p{font-size:1rem;line-height:1.8;opacity:.92}
.cashback-percent{
  font-size:3.5rem;font-weight:700;
  background:linear-gradient(90deg,#fbbf24,#f9a8d4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- Games Section ---------- */
.game-card{
  text-align:center;
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:var(--transition);
}
.game-card:hover{transform:translateY(-8px)}
.game-card img{width:100%;height:200px;object-fit:cover}
.game-card .game-body{padding:20px}
.game-card h3{font-size:1.1rem;font-weight:600;margin-bottom:6px}
.game-card p{font-size:.85rem;color:rgba(30,27,75,.6)}

/* ---------- Sticky CTA ---------- */
.sticky-cta{
  position:fixed;bottom:0;left:0;width:100%;
  z-index:999;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  padding:14px 0;
  text-align:center;
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -4px 20px rgba(124,58,237,.3);
}
.sticky-cta.visible{transform:translateY(0)}
.sticky-cta a{
  display:inline-flex;align-items:center;gap:8px;
  color:#fff;font-size:1.05rem;font-weight:600;
  padding:10px 36px;
  background:rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.5);
  border-radius:50px;
  transition:var(--transition);
}
.sticky-cta a:hover{
  background:rgba(255,255,255,.35);
  border-color:#fff;
}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{
  background:var(--white);
  border-radius:12px;
  margin-bottom:12px;
  box-shadow:0 2px 12px rgba(124,58,237,.08);
  overflow:hidden;
}
.faq-question{
  width:100%;padding:20px 24px;
  display:flex;justify-content:space-between;align-items:center;
  background:none;border:none;cursor:pointer;
  font-family:'Prompt',sans-serif;
  font-size:1rem;font-weight:600;color:var(--text);
  text-align:left;
  transition:var(--transition);
}
.faq-question:hover{color:var(--primary)}
.faq-icon{
  width:28px;height:28px;flex-shrink:0;
  background:var(--accent-light);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
}
.faq-icon svg{width:14px;height:14px;stroke:var(--primary);transition:var(--transition)}
.faq-item.open .faq-icon{background:var(--primary);transform:rotate(45deg)}
.faq-item.open .faq-icon svg{stroke:#fff}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
}
.faq-answer-inner{
  padding:0 24px 20px;
  font-size:.92rem;color:rgba(30,27,75,.7);line-height:1.8;
}

/* ---------- About / Footer ---------- */
.footer{
  background:#1e1b4b;color:rgba(255,255,255,.8);
  padding:60px 0 100px;
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer h4{color:#fff;font-size:1.1rem;font-weight:600;margin-bottom:16px}
.footer p{font-size:.9rem;line-height:1.8;opacity:.75}
.footer a{color:rgba(255,255,255,.8);transition:var(--transition)}
.footer a:hover{color:var(--accent)}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:.9rem}
.footer-bottom{
  margin-top:40px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
  font-size:.82rem;opacity:.5;
}
.footer-logo{font-size:1.4rem;font-weight:700;color:#fff;margin-bottom:12px}
.footer-logo span{color:var(--accent)}

.sponsors{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  margin-top:12px;
}
.sponsors span{
  font-size:.82rem;
  background:rgba(255,255,255,.08);
  padding:4px 14px;border-radius:20px;
}

/* ---------- Animations on Scroll ---------- */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.visible{
  opacity:1;transform:translateY(0);
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-links{
    position:fixed;top:0;right:-100%;width:280px;height:100vh;
    background:var(--white);
    flex-direction:column;padding:80px 30px 30px;
    box-shadow:-4px 0 30px rgba(0,0,0,.1);
    transition:right .35s ease;
    z-index:998;
  }
  .nav-links.open{right:0}
  .hamburger{display:flex}
  
  .hero h1{font-size:2rem}
  .hero p{font-size:1rem}
  
  .section{padding:50px 0}
  .section-title h2{font-size:1.6rem}
  
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  
  .bonus-item{flex-direction:column;text-align:center}
  .bonus-item img{width:100%;height:200px}
  
  .cashback-card{flex-direction:column;text-align:center;padding:32px 24px}
  .cashback-card img{width:100%;height:200px}
  
  .tabs-nav{flex-direction:column}
  .tab-content{padding:24px 20px}
  
  .footer-grid{grid-template-columns:1fr}
  
  .btn-hero{padding:14px 28px;font-size:1rem}
  
  .progress-track{height:12px}
}
@media(max-width:480px){
  .hero h1{font-size:1.6rem}
  .hero p{font-size:.9rem}
  .cashback-percent{font-size:2.5rem}
  .section-title h2{font-size:1.4rem}
  .sticky-cta a{font-size:.95rem;padding:8px 24px}
}


/* === STYLE & LAYOUT VARIANTS === */
/* ===== Fun88 Generator — CSS Variants ===== */
/* Each variant class is applied to <html> as variant-{name} */

/* ================================================================
   VARIANT 1: FLAT — clean, no shadows, solid colors, bold borders
   ================================================================ */
html.variant-flat .feature-card {
  border-radius: 0;
  border: 2px solid var(--primary);
  box-shadow: none;
  background: #fff;
}
html.variant-flat .feature-card:hover {
  background: var(--accent-light);
  transform: none;
}
html.variant-flat .btn-glow {
  border-radius: 0;
  box-shadow: none;
  border: 2px solid #fff;
}
html.variant-flat .btn-glow:hover {
  box-shadow: none;
  transform: none;
}
html.variant-flat .site-header {
  box-shadow: none;
  border-bottom: 3px solid var(--primary);
}
html.variant-flat .hero-section {
  min-height: 380px;
}
html.variant-flat .hero-overlay {
  background: var(--secondary);
  opacity: .92;
}
html.variant-flat .blog-card {
  border-radius: 0;
  border: 2px solid var(--border);
}
html.variant-flat .cta-section {
  border-top: 4px solid var(--accent);
  border-bottom: 4px solid var(--accent);
  background: var(--primary);
}
html.variant-flat .timeline-num {
  border-radius: 0;
}

/* ================================================================
   VARIANT 2: GLASS — glassmorphism, blur, frosted, semi-transparent
   ================================================================ */
html.variant-glass .feature-card {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
}
html.variant-glass .feature-card:hover {
  background: rgba(255,255,255,.25);
  transform: translateY(-5px) scale(1.02);
}
html.variant-glass .site-header {
  background: rgba(30,41,59,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html.variant-glass .hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.6));
}
html.variant-glass .btn-glow {
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
}
html.variant-glass .btn-glow:hover {
  background: rgba(255,255,255,.35);
  transform: translateY(-3px);
}
html.variant-glass .blog-card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
}
html.variant-glass .cta-section {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.2);
  border-bottom: 1px solid rgba(255,255,255,.2);
}
html.variant-glass .sidebar-nav {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(12px);
}

/* ================================================================
   VARIANT 3: GRADIENT — bold gradients, colorful, eye-catching
   ================================================================ */
html.variant-gradient .feature-card {
  background: linear-gradient(135deg, var(--bg-alt), #fff);
  border: none;
  box-shadow: 0 8px 25px rgba(0,0,0,.1);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
html.variant-gradient .feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
html.variant-gradient .feature-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 35px rgba(0,0,0,.15);
}
html.variant-gradient .site-header {
  background: linear-gradient(135deg, var(--secondary), var(--primary));
}
html.variant-gradient .hero-overlay {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  opacity: .85;
}
html.variant-gradient .btn-glow {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 50px;
  padding: 1rem 2.5rem;
}
html.variant-gradient .btn-glow:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0,0,0,.2);
}
html.variant-gradient .blog-card {
  border-radius: 16px;
  overflow: hidden;
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
html.variant-gradient .cta-section {
  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
html.variant-gradient .stat-item span {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   VARIANT 4: NEON — cyberpunk, glowing borders, neon colors, dark
   ================================================================ */
html.variant-neon .feature-card {
  background: rgba(15,15,30,.9);
  border: 1px solid var(--primary);
  box-shadow: 0 0 15px rgba(124,58,237,.2), inset 0 0 15px rgba(124,58,237,.05);
  border-radius: 4px;
}
html.variant-neon .feature-card:hover {
  box-shadow: 0 0 25px rgba(124,58,237,.4), inset 0 0 25px rgba(124,58,237,.1);
  transform: translateY(-4px);
  border-color: var(--accent);
}
html.variant-neon .feature-icon {
  text-shadow: 0 0 20px var(--primary);
}
html.variant-neon .feature-card h3 {
  text-shadow: 0 0 10px var(--primary);
}
html.variant-neon .site-header {
  background: #0a0a1a;
  border-bottom: 1px solid var(--primary);
  box-shadow: 0 2px 20px rgba(124,58,237,.3);
}
html.variant-neon .logo {
  text-shadow: 0 0 15px var(--primary);
}
html.variant-neon .hero-section {
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
}
html.variant-neon .hero-overlay {
  background: linear-gradient(180deg, rgba(10,10,26,.95), rgba(10,10,26,.7));
}
html.variant-neon .hero-content h1 {
  text-shadow: 0 0 30px var(--primary), 0 0 60px var(--primary);
}
html.variant-neon .btn-glow {
  background: transparent;
  border: 2px solid var(--primary);
  box-shadow: 0 0 15px var(--primary), inset 0 0 15px rgba(124,58,237,.1);
  color: #fff;
}
html.variant-neon .btn-glow:hover {
  background: var(--primary);
  box-shadow: 0 0 30px var(--primary);
}
html.variant-neon .blog-card {
  background: rgba(15,15,30,.8);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 4px;
}
html.variant-neon .cta-section {
  background: #0a0a1a;
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--accent);
}
html.variant-neon .cta-section .btn-glow {
  background: transparent;
}
html.variant-neon .tips-list li::before {
  text-shadow: 0 0 10px var(--primary);
}
html.variant-neon .stat-item span {
  text-shadow: 0 0 20px var(--primary);
  color: var(--accent);
}

/* ================================================================
   VARIANT 5: CARD-SHADOW — depth, large shadows, layered, premium
   ================================================================ */
html.variant-shadow .feature-card {
  background: #fff;
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
  padding: 2rem;
  transition: all .3s ease;
}
html.variant-shadow .feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
html.variant-shadow .feature-icon {
  width: 60px; height: 60px;
  background: var(--accent-light);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}
html.variant-shadow .site-header {
  background: #fff;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
}
html.variant-shadow .site-header .logo { color: var(--primary); }
html.variant-shadow .site-header .logo .accent { color: var(--accent); }
html.variant-shadow .main-nav a { color: var(--text); }
html.variant-shadow .main-nav a:hover,
html.variant-shadow .main-nav a.active {
  color: #fff;
  background: var(--primary);
  border-radius: 50px;
}
html.variant-shadow .hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.7));
}
html.variant-shadow .btn-glow {
  border-radius: 50px;
  padding: 1rem 2.5rem;
  box-shadow: 0 8px 25px rgba(0,0,0,.2);
}
html.variant-shadow .blog-card {
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  border: none;
  overflow: hidden;
}
html.variant-shadow .cta-section {
  border-radius: 0;
  box-shadow: inset 0 0 80px rgba(0,0,0,.1);
}
html.variant-shadow .stat-item {
  background: #fff;
  padding: 1.5rem;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}

/* ================================================================
   VARIANT 6: OUTLINE — thin lines, minimal fill, sketch feel
   ================================================================ */
html.variant-outline .feature-card {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  position: relative;
}
html.variant-outline .feature-card::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px; right: -3px; bottom: -3px;
  border: 1.5px solid var(--primary);
  border-radius: 12px;
  z-index: -1;
  opacity: .3;
}
html.variant-outline .feature-card:hover {
  border-color: var(--primary);
  transform: translate(-2px, -2px);
}
html.variant-outline .site-header {
  background: #fff;
  border-bottom: 1.5px solid var(--border);
  box-shadow: none;
}
html.variant-outline .site-header .logo { color: var(--text); }
html.variant-outline .site-header .logo .accent { color: var(--primary); }
html.variant-outline .main-nav a { color: var(--text); }
html.variant-outline .main-nav a:hover,
html.variant-outline .main-nav a.active {
  color: var(--primary);
  background: transparent;
  border-bottom: 2px solid var(--primary);
  border-radius: 0;
}
html.variant-outline .hero-section {
  min-height: 360px;
  border-bottom: 1.5px solid var(--border);
}
html.variant-outline .hero-overlay {
  background: var(--bg-alt);
  opacity: .95;
}
html.variant-outline .hero-content { color: var(--text); }
html.variant-outline .hero-content h1 { color: var(--primary); text-shadow: none; }
html.variant-outline .hero-sub { color: var(--text-muted); }
html.variant-outline .btn-glow {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: none;
}
html.variant-outline .btn-glow:hover {
  background: var(--primary);
  color: #fff;
  transform: none;
}
html.variant-outline .blog-card {
  background: transparent;
  border: 1.5px solid var(--border);
}
html.variant-outline .cta-section {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--primary);
  border-radius: 12px;
  max-width: 800px;
  margin: 2rem auto;
}
html.variant-outline .cta-section h2 { color: var(--primary); }
html.variant-outline .cta-section .btn-glow {
  border-color: var(--primary);
}

/* ================================================================
   VARIANT 7: MINIMAL — super clean, lots of whitespace, tiny accents
   ================================================================ */
html.variant-minimal .feature-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 1.5rem 0;
  box-shadow: none;
}
html.variant-minimal .feature-card:hover {
  transform: none;
  box-shadow: none;
}
html.variant-minimal .feature-icon {
  font-size: 1.5rem;
  margin-bottom: .25rem;
}
html.variant-minimal .feature-card h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
html.variant-minimal .feature-card p {
  font-size: .85rem;
}
html.variant-minimal .site-header {
  background: #fff;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
}
html.variant-minimal .site-header .logo { color: var(--text); font-size: 1.2rem; }
html.variant-minimal .site-header .logo .accent { color: var(--primary); }
html.variant-minimal .main-nav a {
  color: var(--text-muted);
  font-size: .85rem;
  padding: .4rem .6rem;
}
html.variant-minimal .main-nav a:hover,
html.variant-minimal .main-nav a.active {
  color: var(--text);
  background: transparent;
}
html.variant-minimal .hero-section {
  min-height: 320px;
}
html.variant-minimal .hero-overlay { background: var(--bg-alt); opacity: .98; }
html.variant-minimal .hero-content { color: var(--text); max-width: 600px; }
html.variant-minimal .hero-content h1 {
  color: var(--text);
  text-shadow: none;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
html.variant-minimal .hero-sub { color: var(--text-muted); font-size: 1rem; }
html.variant-minimal .btn-glow {
  background: var(--text);
  color: #fff;
  border-radius: 4px;
  padding: .7rem 1.5rem;
  font-size: .9rem;
  box-shadow: none;
}
html.variant-minimal .btn-glow:hover {
  transform: none;
  box-shadow: none;
  opacity: .85;
}
html.variant-minimal .content-section h2 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border-bottom: none;
  border-left: none;
  padding-left: 0;
  padding-bottom: .25rem;
}
html.variant-minimal .blog-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding-bottom: 1.5rem;
}
html.variant-minimal .blog-card:hover { transform: none; }
html.variant-minimal .cta-section {
  background: var(--text);
  color: #fff;
  padding: 2rem;
}
html.variant-minimal .feature-grid {
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
html.variant-minimal .content-section {
  max-width: 720px;
}
html.variant-minimal .stat-item {
  text-align: left;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

/* ================================================================
   LAYOUT VARIANTS — applied as layout-{name} on <body>
   ================================================================ */

/* --- LAYOUT: sidebar-right (default is sidebar-left) --- */
body.layout-sidebar-right main {
  display: grid;
  grid-template-columns: 1fr 240px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 60vh;
}
body.layout-sidebar-right .sidebar-nav {
  background: var(--bg-alt);
  padding: 1.5rem;
  border-left: 1px solid var(--border);
  border-right: none;
  order: 2;
}
body.layout-sidebar-right .content-section {
  max-width: 100%;
}
@media (max-width: 768px) {
  body.layout-sidebar-right main { grid-template-columns: 1fr; }
  body.layout-sidebar-right .sidebar-nav { border-left: none; border-bottom: 1px solid var(--border); order: 0; }
}

/* --- LAYOUT: magazine (2-col content, hero = banner) --- */
body.layout-magazine .hero-section {
  min-height: 280px;
  border-radius: 0;
}
body.layout-magazine .content-section {
  max-width: 100%;
  padding: 2rem;
}
body.layout-magazine .feature-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
body.layout-magazine .feature-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
body.layout-magazine .feature-icon { margin-bottom: 0; flex-shrink: 0; }
body.layout-magazine .blog-card {
  flex-direction: column;
}
body.layout-magazine .blog-card img {
  width: 100%;
  min-height: 180px;
}
body.layout-magazine main {
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.layout-magazine .feature-grid { grid-template-columns: 1fr; }
}

/* --- LAYOUT: split-hero (hero = 2 cols: text left, image right) --- */
body.layout-split-hero .hero-section {
  min-height: 500px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
body.layout-split-hero .hero-overlay { display: none; }
body.layout-split-hero .hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 3rem;
  background: var(--secondary);
  max-width: 100%;
}
body.layout-split-hero .hero-image-col {
  background-size: cover;
  background-position: center;
  min-height: 400px;
}
@media (max-width: 768px) {
  body.layout-split-hero .hero-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  body.layout-split-hero .hero-image-col { min-height: 200px; order: -1; }
  body.layout-split-hero .hero-content { text-align: center; padding: 2rem 1.5rem; }
}

/* --- LAYOUT: fullwidth-centered (narrow content, wide hero) --- */
body.layout-fullwidth-centered .hero-section {
  min-height: 60vh;
}
body.layout-fullwidth-centered .content-section {
  max-width: 700px;
  padding: 3rem 1.5rem;
}
body.layout-fullwidth-centered .feature-grid {
  max-width: 900px;
  margin: 1.5rem auto 0;
}
body.layout-fullwidth-centered .cta-section {
  padding: 4rem 1.5rem;
}