/* ============================================
   CAPTY — Premium SaaS Landing Page CSS
   Font: Plus Jakarta Sans | Icons: Lucide
   ============================================ */

/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
  --primary: #6c33ff;
  --primary-hover: #5a2be6;
  --primary-light: rgba(108,51,255,0.08);
  --primary-glow: rgba(108,51,255,0.3);
  --dark: #0a0a1a;
  --dark-800: #0f172a;
  --dark-700: #1e293b;
  --text: #334155;
  --text-light: #64748b;
  --text-lighter: #94a3b8;
  --bg: #fafbff;
  --white: #ffffff;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --success: #10b981;
  --error: #ef4444;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.1);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.12);
  --shadow-primary: 0 8px 24px rgba(108,51,255,0.25);
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: all 0.5s cubic-bezier(0.4,0,0.2,1);
}

html{scroll-behavior:smooth;scroll-padding-top:100px}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--dark-800);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

a{text-decoration:none;color:inherit;transition:var(--transition)}
li{list-style:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}

/* ============ ANIMATIONS ============ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes slideRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(calc(-50% - 24px))}}

.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.delay-1{transition-delay:.1s}
.reveal.delay-2{transition-delay:.2s}
.reveal.delay-3{transition-delay:.3s}
.reveal.delay-4{transition-delay:.4s}
.reveal.delay-5{transition-delay:.5s}

/* ============ BUTTONS ============ */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 32px;border-radius:var(--radius-full);font-weight:700;
  font-size:0.95rem;border:none;transition:var(--transition);cursor:pointer;
  letter-spacing:-0.01em;position:relative;overflow:hidden;
}
.btn-primary{background:var(--primary);color:var(--white);box-shadow:var(--shadow-primary)}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 12px 28px rgba(108,51,255,0.35)}
.btn-outline{background:transparent;color:var(--dark-800);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,0.2)}
.btn-ghost:hover{border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.05)}
.btn-sm{padding:10px 22px;font-size:0.875rem}
.btn-full{width:100%}
.btn .lucide{width:18px;height:18px}

/* ============ HEADER ============ */
.site-header {
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:rgba(255,255,255,0.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;transition:var(--transition);padding:16px 0;
}
.site-header.scrolled{background:rgba(255,255,255,0.95);border-bottom-color:var(--border);padding:12px 0;box-shadow:var(--shadow-sm)}

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

.logo{display:flex;align-items:center;gap:4px;font-weight:800;font-size:1.3rem;color:var(--dark-800)}
.logo img{height:36px;width:auto}

.nav-links{display:none;align-items:center;gap:32px}
.nav-links>a,.nav-dropdown-trigger{font-weight:500;color:var(--text);font-size:0.925rem;position:relative;display:flex;align-items:center;gap:4px;background:none;border:none;padding:0;cursor:pointer}
.nav-links>a:hover,.nav-dropdown-trigger:hover{color:var(--primary)}
.nav-links>a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary);transition:var(--transition);border-radius:2px}
.nav-links>a:hover::after{width:100%}
.nav-chevron{width:14px;height:14px;transition:var(--transition)}

.nav-dropdown{position:relative}
.nav-dropdown-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);opacity:0;visibility:hidden;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px;min-width:240px;transition:var(--transition);z-index:100}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dropdown:hover .nav-chevron{transform:rotate(180deg)}
.nav-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:0.9rem;font-weight:500;color:var(--text)}
.nav-dropdown-menu a:hover{background:var(--primary-light);color:var(--primary)}
.nav-dropdown-menu a .lucide{width:18px;height:18px;color:var(--primary)}
.nav-mega{min-width:750px;padding:16px;display:flex;gap:0;left:auto;right:auto;transform:translateX(-35%) translateY(8px)}
.nav-dropdown:hover .nav-mega{transform:translateX(-35%) translateY(0)}
.nav-mega-col{flex:1;padding:0 8px;border-right:1px solid var(--border-light)}
.nav-mega-col:last-child{border-right:none}
.nav-mega-label{font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-lighter);padding:4px 10px 10px;display:block}
.nav-item-soon{opacity:0.45;pointer-events:none;cursor:default}
.nav-item-soon .soon-badge{font-size:0.65rem;font-weight:700;color:var(--primary);background:var(--primary-light);padding:2px 6px;border-radius:4px;margin-left:auto}

.nav-actions{display:flex;align-items:center;gap:12px}
.lang-switch{background:var(--border-light);border:1px solid var(--border);border-radius:var(--radius-full);padding:3px;display:flex;font-size:0.8rem;font-weight:700}
.lang-switch a{padding:5px 12px;border-radius:var(--radius-full);color:var(--text-light);transition:var(--transition)}
.lang-switch a.active{background:var(--white);color:var(--primary);box-shadow:var(--shadow-sm)}

.mobile-menu-toggle{display:flex;background:none;border:none;color:var(--dark-800);padding:8px}
.mobile-menu-toggle .lucide{width:24px;height:24px}

.mobile-menu{display:none;flex-direction:column;gap:0;padding:16px 24px 24px;background:var(--white);border-bottom:1px solid var(--border);max-height:80vh;overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 0;font-weight:500;color:var(--text);font-size:0.95rem;border-bottom:1px solid var(--border-light)}
.mobile-menu .btn{margin-top:16px;border-bottom:none}
.mobile-menu .btn.btn-primary{color:var(--white);text-align:center;justify-content:center;border-radius:var(--radius-full);padding:14px 24px}

@media(max-width:1023px){
  #nav-waitlist-btn{display:none}
}
@media(min-width:1024px){
  .nav-links{display:flex}
  .mobile-menu-toggle{display:none}
}

/* ============ HERO ============ */
.hero {
  padding:160px 0 100px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#f5f0ff 0%,var(--bg) 100%);
}
.hero::before {
  content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:800px;height:800px;border-radius:50%;
  background:radial-gradient(circle,rgba(108,51,255,0.12) 0%,transparent 70%);
  pointer-events:none;
}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;background:var(--primary-light);color:var(--primary);border-radius:var(--radius-full);font-size:0.85rem;font-weight:600;margin-bottom:28px;animation:fadeInUp 0.6s ease forwards}
.hero-badge .lucide{width:16px;height:16px}

.hero h1{font-size:clamp(2.2rem,5vw,4.2rem);margin-bottom:24px;animation:fadeInUp 0.6s ease 0.1s both}
.hero h1 .highlight{background:linear-gradient(135deg,var(--primary),#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero .subtitle{font-size:clamp(1rem,2vw,1.2rem);color:var(--text-light);max-width:640px;margin:0 auto 40px;line-height:1.7;animation:fadeInUp 0.6s ease 0.2s both}

.hero-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;animation:fadeInUp 0.6s ease 0.3s both}

/* Animated Dashboard Mockup */
.hero-visual{margin-top:72px;position:relative;animation:fadeInUp 0.8s ease 0.4s both;will-change:transform;transform-style:preserve-3d}
.dashboard-mockup{max-width:960px;margin:0 auto;background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-xl),0 0 80px rgba(108,51,255,0.08);overflow:hidden;position:relative}
.mockup-header{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--border-light);border-bottom:1px solid var(--border)}
.mockup-dot{width:10px;height:10px;border-radius:50%}
.mockup-dot.red{background:#ef4444}.mockup-dot.yellow{background:#eab308}.mockup-dot.green{background:#22c55e}
.mockup-body{display:grid;grid-template-columns:190px 1fr;min-height:420px}

/* Sidebar */
.mockup-sidebar{background:#0f0a2a;padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.mockup-sidebar-logo{padding:4px 8px 12px;margin-bottom:4px}
.mockup-sidebar-workspace{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:rgba(108,51,255,0.15);border:1px solid rgba(108,51,255,0.3);color:var(--white);font-size:0.7rem;font-weight:600;margin-bottom:12px}
.mockup-workspace-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0}
.mockup-sidebar-label{font-size:0.6rem;color:rgba(255,255,255,0.3);font-weight:700;letter-spacing:0.08em;padding:12px 10px 4px;text-transform:uppercase;text-align:left}
.mockup-sidebar-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:rgba(255,255,255,0.45);font-size:0.72rem;font-weight:500;transition:var(--transition)}
.mockup-sidebar-item.active{background:var(--primary);color:var(--white)}
.mockup-sidebar-item .lucide{width:14px;height:14px}

/* Main content */
.mockup-main{padding:20px;display:flex;flex-direction:column;gap:16px;background:var(--border-light)}

/* Top bar */
.mockup-topbar{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:4px}
.mockup-topbar-title{font-size:1rem;font-weight:700;color:var(--dark);text-align:left}
.mockup-topbar-sub{font-size:0.68rem;color:var(--text-light);margin-top:2px;text-align:left}
.mockup-btn-create{display:flex;align-items:center;gap:6px;background:var(--primary);color:var(--white);font-size:0.68rem;font-weight:600;padding:7px 14px;border-radius:8px;white-space:nowrap}

/* Stat cards */
.mockup-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mockup-stat-card{background:var(--white);border-radius:10px;padding:14px 16px;border:1px solid var(--border)}
.mockup-stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mockup-stat-label{font-size:0.65rem;color:var(--text-light);font-weight:500}
.mockup-stat-icon{color:var(--primary);opacity:0.6}
.mockup-stat-value{font-size:1.5rem;font-weight:800;color:var(--dark);line-height:1}
.mockup-stat-pct::after{content:"%";font-size:1rem}
.mockup-stat-change{font-size:0.6rem;color:var(--text-lighter);margin-top:6px;display:flex;align-items:center;gap:3px}
.mockup-stat-change.positive{color:var(--success)}
.dashboard-mockup .mockup-stat-change{opacity:0;transform:translateY(6px);transition:opacity 0.5s ease,transform 0.5s ease}
.dashboard-mockup .mockup-stat-change.pop-in{opacity:1;transform:translateY(0)}

/* Content row */
.mockup-content-row{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
.mockup-content-card{background:var(--white);border-radius:10px;padding:14px 16px;border:1px solid var(--border)}
.mockup-content-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mockup-content-header span:first-child{font-size:0.75rem;font-weight:700;color:var(--dark)}
.mockup-link{font-size:0.62rem;color:var(--primary);font-weight:600;cursor:default}

/* Post items */
.mockup-post-list{display:flex;flex-direction:column;gap:10px}
.mockup-post-item{display:flex;align-items:center;gap:10px}
.mockup-post-thumb{width:36px;height:36px;border-radius:6px;background:linear-gradient(135deg,var(--border-light),var(--border));flex-shrink:0}
.mockup-post-info{min-width:0}
.mockup-post-title{font-size:0.65rem;font-weight:600;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.mockup-post-meta{font-size:0.58rem;color:var(--text-lighter);margin-top:2px;display:flex;align-items:center;gap:6px}
.mockup-badge{font-size:0.52rem;font-weight:600;padding:2px 6px;border-radius:4px}
.mockup-badge.pending{background:#fef3c7;color:#92400e}
.mockup-badge.approved{background:#d1fae5;color:#065f46}

/* Schedule */
.mockup-schedule{background:var(--white);border-radius:10px;padding:14px 16px;border:1px solid var(--border)}
.mockup-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:4px}
.mockup-cal-day{text-align:center;padding:8px 4px;border-radius:8px;background:var(--border-light);border:1px solid transparent}
.mockup-cal-day.active{background:rgba(108,51,255,0.08);border-color:rgba(108,51,255,0.2)}
.mockup-cal-day.today{background:var(--primary);border-color:var(--primary)}
.mockup-cal-day.today .mockup-cal-label,.mockup-cal-day.today .mockup-cal-num,.mockup-cal-day.today .mockup-cal-info{color:var(--white)}
.mockup-cal-label{font-size:0.55rem;color:var(--text-lighter);font-weight:500}
.mockup-cal-num{font-size:0.85rem;font-weight:700;color:var(--dark);margin:2px 0}
.mockup-cal-info{font-size:0.5rem;color:var(--text-lighter)}
.mockup-cal-info.highlight{color:var(--primary);font-weight:600}
.mockup-cal-day.today .mockup-cal-info.highlight{color:var(--white)}

.hero-float-badge{position:absolute;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(108,51,255,0.12);border-radius:var(--radius);padding:12px 18px;box-shadow:var(--shadow-lg),0 4px 20px rgba(108,51,255,0.06);display:flex;align-items:center;gap:10px;font-size:0.85rem;font-weight:600;animation:float 4s ease-in-out infinite}
.hero-float-badge .lucide{color:var(--primary);width:20px;height:20px}
.float-badge-1{top:20%;right:-20px;animation-delay:0s}
.float-badge-2{bottom:20%;left:-20px;animation-delay:1s}

/* Dashboard staggered entrance animations */
@keyframes mockupSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes mockupSlideIn{from{opacity:0;transform:translateX(-20px);filter:blur(4px)}to{opacity:1;transform:translateX(0);filter:blur(0)}}
@keyframes mockupScaleIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
@keyframes mockupFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mockupPulse{0%,100%{box-shadow:0 0 0 0 rgba(108,51,255,0)}50%{box-shadow:0 0 0 6px rgba(108,51,255,0.12)}}

/* Shimmer effect for stat cards */
@keyframes shimmerSlide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes shimmerFadeOut{0%{opacity:1}100%{opacity:0}}
@keyframes statCardGlow{0%{box-shadow:0 0 0 0 rgba(108,51,255,0)}40%{box-shadow:0 0 20px 2px rgba(108,51,255,0.12)}100%{box-shadow:0 0 0 0 rgba(108,51,255,0)}}

.mockup-stat-card{position:relative;overflow:hidden}
.mockup-stat-card::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(108,51,255,0.06) 40%,rgba(168,85,247,0.1) 50%,rgba(108,51,255,0.06) 60%,transparent 100%);transform:translateX(-100%);opacity:0;pointer-events:none;z-index:1}
.dashboard-mockup.animate .mockup-stat-card::after{animation:shimmerSlide 1s ease 0.2s 1 both,shimmerFadeOut 0.3s ease 1.2s both;opacity:1}
.dashboard-mockup.animate .mockup-stat-card:nth-child(1)::after{animation-delay:0.6s,1.6s}
.dashboard-mockup.animate .mockup-stat-card:nth-child(2)::after{animation-delay:0.75s,1.75s}
.dashboard-mockup.animate .mockup-stat-card:nth-child(3)::after{animation-delay:0.9s,1.9s}
.dashboard-mockup.animate .mockup-stat-card{animation:mockupScaleIn 0.5s ease both,statCardGlow 0.8s ease both}

/* Count-up color transition */
.mockup-stat-value{transition:color 1.2s ease}
.mockup-stat-value.counting{color:var(--text-lighter)}
.mockup-stat-value.counted{color:var(--dark)}

/* Post thumbnail shimmer */
@keyframes thumbShimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
.mockup-post-thumb{position:relative}
.dashboard-mockup:not(.animate) .mockup-post-thumb{background:linear-gradient(90deg,var(--border-light) 25%,var(--border) 50%,var(--border-light) 75%)!important;background-size:400px 100%;animation:thumbShimmer 1.5s ease infinite}
.dashboard-mockup.animate .mockup-post-thumb{animation:mockupFadeIn 0.6s ease both}

.dashboard-mockup.animate .mockup-sidebar{animation:mockupSlideIn 0.6s ease 0.2s both}
.dashboard-mockup.animate .mockup-topbar{animation:mockupSlideUp 0.5s ease 0.4s both}
.dashboard-mockup.animate .mockup-stat-card:nth-child(1){animation-delay:0.6s}
.dashboard-mockup.animate .mockup-stat-card:nth-child(2){animation-delay:0.75s}
.dashboard-mockup.animate .mockup-stat-card:nth-child(3){animation-delay:0.9s}
.dashboard-mockup.animate .mockup-content-card{animation:mockupSlideUp 0.5s ease both}
.dashboard-mockup.animate .mockup-content-card:nth-child(1){animation-delay:1.1s}
.dashboard-mockup.animate .mockup-content-card:nth-child(2){animation-delay:1.25s}
.dashboard-mockup.animate .mockup-schedule{animation:mockupSlideUp 0.5s ease 1.4s both}
.dashboard-mockup.animate .mockup-post-item{animation:mockupFadeIn 0.4s ease both}
.dashboard-mockup.animate .mockup-content-card:nth-child(1) .mockup-post-item:nth-child(1){animation-delay:1.3s}
.dashboard-mockup.animate .mockup-content-card:nth-child(1) .mockup-post-item:nth-child(2){animation-delay:1.45s}
.dashboard-mockup.animate .mockup-content-card:nth-child(1) .mockup-post-item:nth-child(3){animation-delay:1.6s}
.dashboard-mockup.animate .mockup-content-card:nth-child(2) .mockup-post-item:nth-child(1){animation-delay:1.45s}
.dashboard-mockup.animate .mockup-content-card:nth-child(2) .mockup-post-item:nth-child(2){animation-delay:1.6s}

/* Calendar wave animation */
.dashboard-mockup.animate .mockup-cal-day{animation:mockupCalWave 0.4s ease both}
@keyframes mockupCalWave{0%{opacity:0;transform:translateY(-8px) scale(0.9)}60%{opacity:1;transform:translateY(2px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
.dashboard-mockup.animate .mockup-cal-day:nth-child(1){animation-delay:1.5s}
.dashboard-mockup.animate .mockup-cal-day:nth-child(2){animation-delay:1.54s}
.dashboard-mockup.animate .mockup-cal-day:nth-child(3){animation-delay:1.58s}
.dashboard-mockup.animate .mockup-cal-day:nth-child(4){animation-delay:1.62s}
.dashboard-mockup.animate .mockup-cal-day:nth-child(5){animation-delay:1.66s}
.dashboard-mockup.animate .mockup-cal-day:nth-child(6){animation-delay:1.7s}
.dashboard-mockup.animate .mockup-cal-day:nth-child(7){animation-delay:1.74s}

/* Active calendar day glow pulse */
@keyframes calDayPulse{0%,100%{box-shadow:0 0 0 0 rgba(108,51,255,0)}50%{box-shadow:0 0 8px 3px rgba(108,51,255,0.15)}}
.dashboard-mockup.animate .mockup-cal-day.today{animation:mockupCalWave 0.4s ease 1.74s both,calDayPulse 2.5s ease 2.5s infinite}
.dashboard-mockup.animate .mockup-cal-day.active{animation:mockupCalWave 0.4s ease 1.7s both,calDayPulse 2.5s ease 2.8s infinite}

/* Create button breathe loop */
@keyframes btnBreathe{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(108,51,255,0)}50%{transform:scale(1.04);box-shadow:0 0 16px 4px rgba(108,51,255,0.12)}}
.dashboard-mockup.animate .mockup-btn-create{animation:mockupScaleIn 0.4s ease 0.5s both,mockupPulse 2s ease 2.5s 2,btnBreathe 4s ease 6s infinite}

/* Float badges glassmorphism + multi-axis float */
@keyframes floatDrift1{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-10px) rotate(1.5deg)}75%{transform:translateY(6px) rotate(-1deg)}}
@keyframes floatDrift2{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(8px) rotate(-2deg)}70%{transform:translateY(-8px) rotate(1.5deg)}}
.dashboard-mockup.animate .hero-float-badge{animation:mockupScaleIn 0.5s ease both}
.dashboard-mockup.animate .float-badge-1{animation:mockupScaleIn 0.5s ease 1.8s both,floatDrift1 5s ease-in-out 3s infinite}
.dashboard-mockup.animate .float-badge-2{animation:mockupScaleIn 0.5s ease 2.0s both,floatDrift2 6s ease-in-out 3.5s infinite}

/* Approval badge storytelling */
@keyframes approvalRipple{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(16,185,129,0.4)}100%{transform:scale(1);box-shadow:0 0 0 12px rgba(16,185,129,0)}}
@keyframes approvalBounce{0%{transform:scale(0.8)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.mockup-badge{transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.mockup-badge.approving{opacity:0.6;transform:scale(0.9)}
.mockup-badge.approved-pop{animation:approvalBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) both,approvalRipple 0.8s ease 0.2s both}
.approval-checkring{position:absolute;top:-4px;right:-4px;width:16px;height:16px;pointer-events:none;opacity:0;transition:opacity 0.3s ease}
.approval-checkring.visible{opacity:1}
.approval-checkring circle{fill:none;stroke:#10b981;stroke-width:2;stroke-dasharray:44;stroke-dashoffset:44;stroke-linecap:round}
.approval-checkring.animate circle{animation:drawCheckring 0.6s ease forwards}
@keyframes drawCheckring{to{stroke-dashoffset:0}}

/* Typing cursor for topbar */
@keyframes typingBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
.mockup-typing-cursor{display:inline-block;width:1px;height:0.7em;background:var(--primary);margin-left:2px;vertical-align:middle;animation:typingBlink 0.8s step-end infinite;opacity:0}
.mockup-typing-cursor.active{opacity:1}
.mockup-topbar-typing{font-size:0.68rem;color:var(--primary);margin-top:4px;text-align:left;min-height:1em;opacity:0;transition:opacity 0.3s ease}
.mockup-topbar-typing.visible{opacity:1}

/* Pre-animation hidden states */
.dashboard-mockup:not(.animate) .mockup-sidebar,
.dashboard-mockup:not(.animate) .mockup-topbar,
.dashboard-mockup:not(.animate) .mockup-stat-card,
.dashboard-mockup:not(.animate) .mockup-content-card,
.dashboard-mockup:not(.animate) .mockup-schedule,
.dashboard-mockup:not(.animate) .mockup-post-item,
.dashboard-mockup:not(.animate) .mockup-cal-day,
.dashboard-mockup:not(.animate) .mockup-btn-create{opacity:0}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
.dashboard-mockup,.dashboard-mockup *,.hero-float-badge,.mockup-stat-card::after,.mockup-badge,.mockup-btn-create,.hero-visual,.mockup-typing-cursor{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
.dashboard-mockup:not(.animate) .mockup-sidebar,.dashboard-mockup:not(.animate) .mockup-topbar,.dashboard-mockup:not(.animate) .mockup-stat-card,.dashboard-mockup:not(.animate) .mockup-content-card,.dashboard-mockup:not(.animate) .mockup-schedule,.dashboard-mockup:not(.animate) .mockup-post-item,.dashboard-mockup:not(.animate) .mockup-cal-day,.dashboard-mockup:not(.animate) .mockup-btn-create{opacity:1}
.dashboard-mockup .mockup-stat-change{opacity:1;transform:none}
.mockup-topbar-typing{opacity:1}
}

@media(max-width:768px){
  .mockup-body{grid-template-columns:1fr}
  .mockup-sidebar{display:none}
  .hero-float-badge{display:none}
  .mockup-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .mockup-stat-value{font-size:1.1rem}
  .mockup-stat-label{font-size:0.55rem}
  .mockup-content-row{grid-template-columns:1fr}
  .mockup-calendar{gap:3px}
  .mockup-cal-day{padding:6px 2px}
  .mockup-cal-num{font-size:0.72rem}
  .mockup-topbar-actions{display:none}
  .mockup-post-title{max-width:140px}
}

/* ============ PAIN POINTS ============ */
.pain-points{padding:120px 0;background:var(--white)}
.section-header{text-align:center;max-width:700px;margin:0 auto 64px}
.section-header h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:16px}
.section-header h2 .highlight{background:linear-gradient(135deg,var(--primary),#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-header p{color:var(--text-light);font-size:1.05rem}

.pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.pain-card{padding:32px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--white);transition:var(--transition);position:relative;overflow:hidden}
.pain-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),#a855f7);transform:scaleX(0);transition:var(--transition);transform-origin:left}
.pain-card:hover{border-color:var(--primary-glow);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.pain-card:hover::before{transform:scaleX(1)}
.pain-card-icon{width:48px;height:48px;border-radius:12px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.pain-card-icon .lucide{width:24px;height:24px;color:var(--primary)}
.pain-card h3{font-size:1.15rem;margin-bottom:10px;font-weight:700}
.pain-card p{color:var(--text-light);font-size:0.93rem;line-height:1.7}

/* ============ HOW IT WORKS ============ */
.how-it-works{padding:120px 0;background:var(--bg)}
.steps-container{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;position:relative;margin-top:24px}
.steps-container::before{content:'';position:absolute;top:48px;left:calc(16.66% + 24px);right:calc(16.66% + 24px);height:2px;background:linear-gradient(90deg,var(--primary),#a855f7);opacity:0.3}
.step{text-align:center;position:relative}
.step-number{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#a855f7);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;margin:0 auto 24px;position:relative;z-index:1;box-shadow:var(--shadow-primary)}
.step-icon{width:80px;height:80px;border-radius:20px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.step-icon .lucide{width:36px;height:36px;color:var(--primary)}
.step h3{font-size:1.15rem;margin-bottom:10px}
.step p{color:var(--text-light);font-size:0.93rem}

@media(max-width:768px){
  .steps-container{grid-template-columns:1fr;gap:40px}
  .steps-container::before{display:none}
}

/* ============ FEATURES TABS ============ */
.features-tabs{padding:120px 0;background:var(--white)}
.tabs-nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:48px}
.tab-btn{padding:12px 24px;border-radius:var(--radius-full);background:var(--border-light);border:1px solid var(--border);color:var(--text);font-weight:600;font-size:0.9rem;transition:var(--transition);cursor:pointer}
.tab-btn:hover{border-color:var(--primary);color:var(--primary)}
.tab-btn.active{background:var(--primary);color:var(--white);border-color:var(--primary);box-shadow:var(--shadow-primary)}

.tab-content{display:none;animation:fadeIn 0.4s ease}
.tab-content.active{display:block}
.tab-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.tab-text h3{font-size:clamp(1.4rem,3vw,1.8rem);margin-bottom:16px}
.tab-text>p{color:var(--text-light);margin-bottom:28px;line-height:1.7}
.tab-features{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.tab-feature-item{display:flex;align-items:flex-start;gap:12px;font-size:0.95rem}
.tab-feature-item .check{width:22px;height:22px;min-width:22px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;margin-top:2px}
.tab-feature-item .check .lucide{width:14px;height:14px;color:var(--primary)}

.tab-visual{position:relative}
.tab-visual-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;min-height:300px;display:flex;flex-direction:column;justify-content:center;gap:16px;position:relative;overflow:hidden}
.tab-visual-card::after{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(108,51,255,0.04) 0%,transparent 60%);pointer-events:none}

.visual-line{height:12px;border-radius:8px;opacity:0.7}
.visual-line.purple{background:linear-gradient(90deg,var(--primary),#a855f7)}
.visual-line.gray{background:var(--border)}

@media(max-width:768px){
  .tab-inner{grid-template-columns:1fr}
  .tab-visual{display:none}
}

/* ============ PRICING ============ */
.pricing{padding:120px 0;background:var(--bg)}
.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:56px}
.pricing-toggle span{font-weight:600;font-size:0.95rem;color:var(--text-light)}
.pricing-toggle span.active-label{color:var(--dark-800)}
.toggle-switch{position:relative;width:56px;height:30px;cursor:pointer}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:30px;transition:var(--transition)}
.toggle-slider::before{content:'';position:absolute;height:22px;width:22px;left:4px;bottom:4px;background:var(--white);border-radius:50%;transition:var(--transition);box-shadow:var(--shadow-sm)}
.toggle-switch input:checked+.toggle-slider{background:var(--primary)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(26px)}
.save-badge{background:var(--primary-light);color:var(--primary);padding:4px 12px;border-radius:var(--radius-full);font-size:0.8rem;font-weight:700}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto}
.pricing-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 32px;position:relative;transition:var(--transition)}
.pricing-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.pricing-card.featured{border-color:var(--primary);box-shadow:var(--shadow-primary)}
.pricing-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--primary),#a855f7);color:var(--white);padding:6px 20px;border-radius:var(--radius-full);font-size:0.8rem;font-weight:700;white-space:nowrap}
.pricing-card h3{font-size:1.3rem;margin-bottom:8px}
.pricing-card .plan-desc{color:var(--text-light);font-size:0.9rem;margin-bottom:24px;min-height:44px}
.pricing-card .price{margin-bottom:8px}
.pricing-card .price .amount{font-size:3rem;font-weight:800;color:var(--dark-800);line-height:1}
.pricing-card .price .currency{font-size:1.5rem;font-weight:700;color:var(--dark-800);vertical-align:super}
.pricing-card .price .period{color:var(--text-light);font-size:0.9rem;margin-left:4px}
.pricing-card .yearly-note{font-size:0.8rem;color:var(--text-lighter);margin-bottom:24px;display:none}
.pricing-card .yearly-note.show{display:block}
.pricing-card .extra-cost{font-size:0.8rem;color:var(--text-lighter);margin-top:8px}

.pricing-features{border-top:1px solid var(--border);padding-top:24px;margin:24px 0;display:flex;flex-direction:column;gap:12px}
.pricing-features li{display:flex;align-items:center;gap:10px;font-size:0.9rem;color:var(--text)}
.pricing-features li .lucide{width:18px;height:18px;min-width:18px;color:var(--primary)}

.enterprise-section{margin-top:64px;background:linear-gradient(135deg,var(--dark-800),#1a1040);border-radius:var(--radius-xl);padding:56px 48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;color:var(--white);align-items:center}
.enterprise-section h3{font-size:1.8rem;color:var(--white);margin-bottom:12px}
.enterprise-section>p{color:rgba(255,255,255,0.7);margin-bottom:24px}
.enterprise-price{font-size:1.2rem;font-weight:700;color:var(--white);margin-bottom:24px;display:flex;align-items:center;gap:8px}
.enterprise-features{display:flex;flex-direction:column;gap:10px}
.enterprise-features li{display:flex;align-items:center;gap:10px;font-size:0.9rem;color:rgba(255,255,255,0.8)}
.enterprise-features li .lucide{width:18px;height:18px;color:#a855f7}

.pricing-vat{text-align:center;margin-top:32px;font-size:0.85rem;color:var(--text-lighter)}

@media(max-width:900px){
  .pricing-grid{grid-template-columns:1fr;max-width:420px}
  .enterprise-section{grid-template-columns:1fr;padding:40px 28px}
}

/* ============ FAQ ============ */
.faq{padding:120px 0;background:var(--white)}
.faq-list{max-width:750px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition)}
.faq-item:hover{border-color:var(--primary-glow)}
.faq-item.open{border-color:var(--primary);box-shadow:0 4px 12px rgba(108,51,255,0.08)}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;cursor:pointer;font-weight:600;font-size:1rem;background:none;border:none;width:100%;text-align:left;color:var(--dark-800);gap:16px}
.faq-question .lucide{width:20px;height:20px;min-width:20px;color:var(--primary);transition:var(--transition)}
.faq-item.open .faq-question .lucide{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.35s ease}
.faq-answer-inner{padding:0 24px 20px;color:var(--text-light);line-height:1.8;font-size:0.95rem}

/* ============ INTEGRATIONS ============ */
.integrations{padding:120px 0;background:var(--bg)}
.integrations-track{overflow:hidden;margin-top:48px;mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent)}
.integrations-slider{display:flex;gap:48px;animation:marquee 30s linear infinite;width:max-content}
.integration-item{display:flex;align-items:center;gap:14px;padding:20px 32px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);font-weight:600;font-size:1rem;white-space:nowrap;transition:var(--transition);min-width:200px;flex-shrink:0}
.integration-item:hover{border-color:var(--primary-glow);box-shadow:var(--shadow-md)}
.integration-item img.platform-icon{width:28px;height:28px;object-fit:contain;opacity:0.85}
.integration-item .coming-soon{font-size:0.7rem;font-weight:700;color:var(--primary);background:var(--primary-light);padding:2px 8px;border-radius:var(--radius-full)}

/* ============ NEWSLETTER ============ */
.newsletter{padding:120px 0;background:linear-gradient(135deg,var(--dark-800),#1a1040);position:relative;overflow:hidden}
.newsletter::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(108,51,255,0.2),transparent 70%);pointer-events:none}
.newsletter .section-header h2,.newsletter .section-header h2 .highlight{color:var(--white)}
.newsletter .section-header h2 .highlight{-webkit-text-fill-color:#a855f7}
.newsletter .section-header p{color:rgba(255,255,255,0.6)}
.newsletter-form{display:flex;gap:12px;max-width:500px;margin:0 auto}
.newsletter-form input{flex:1;padding:16px 20px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);border-radius:var(--radius-full);color:var(--white);font-size:0.95rem;font-family:inherit;transition:var(--transition)}
.newsletter-form input::placeholder{color:rgba(255,255,255,0.4)}
.newsletter-form input:focus{outline:none;border-color:var(--primary);background:rgba(255,255,255,0.1)}
.newsletter-privacy{text-align:center;margin-top:16px;font-size:0.8rem;color:rgba(255,255,255,0.4)}
.newsletter-privacy a{color:var(--primary);text-decoration:underline}
#newsletter-message{text-align:center;margin-top:12px}

@media(max-width:500px){
  .newsletter-form{flex-direction:column}
}

/* Removed Contact CSS */

/* ============ FOOTER ============ */
.site-footer{background:var(--dark-800);color:rgba(255,255,255,0.7);padding:80px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:48px;margin-bottom:56px}
.mobile-menu-label{display:block;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-lighter);padding:12px 0 4px;border-bottom:none}
.mobile-menu-sub{padding:10px 0 10px 16px !important;font-size:0.9rem !important;display:flex;align-items:center;gap:8px}
.mobile-menu-sub .lucide{width:16px;height:16px;color:var(--primary)}
.footer-brand .logo{color:var(--white);margin-bottom:16px}
.footer-brand p{font-size:0.9rem;line-height:1.7;max-width:280px}
.footer-col h4{color:var(--white);font-size:0.9rem;font-weight:700;margin-bottom:20px;letter-spacing:0.03em;text-transform:uppercase}
.footer-col a{display:block;font-size:0.9rem;color:rgba(255,255,255,0.6);margin-bottom:12px;transition:var(--transition)}
.footer-col a:hover{color:var(--primary)}
.footer-social{display:flex;gap:12px;margin-top:20px}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.footer-social a:hover{background:var(--primary)}
.footer-social a{color:rgba(255,255,255,0.7)}
.footer-social a:hover{color:var(--white)}
.footer-social a svg{width:18px;height:18px;display:block;transition:var(--transition)}

.footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.85rem}
.footer-bottom-links{display:flex;gap:24px}
.footer-bottom-links a{color:rgba(255,255,255,0.5)}
.footer-bottom-links a:hover{color:var(--primary)}
.footer-made{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,0.5)}
.footer-made .lucide{width:16px;height:16px;color:#ef4444}

@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:500px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* Removed Waitlist Panel CSS */
/* ============ COOKIE BANNER ============ */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:3000;background:var(--white);border-top:1px solid var(--border);box-shadow:0 -4px 20px rgba(0,0,0,0.08);padding:20px 0;transform:translateY(100%);transition:transform 0.5s cubic-bezier(0.4,0,0.2,1)}
.cookie-banner.show{transform:translateY(0)}
.cookie-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cookie-text{flex:1;min-width:280px}
.cookie-text h4{font-size:0.95rem;margin-bottom:4px}
.cookie-text p{font-size:0.85rem;color:var(--text-light);line-height:1.6}
.cookie-text a{color:var(--primary);text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions .btn{padding:10px 20px;font-size:0.85rem}

/* ============ LEGAL PAGES ============ */
.legal-page{padding:140px 0 80px}
.legal-content{max-width:800px;margin:0 auto}
.legal-content h1{font-size:2.2rem;margin-bottom:32px}
.legal-content h2{font-size:1.4rem;margin-top:40px;margin-bottom:16px;color:var(--dark-800)}
.legal-content h3{font-size:1.1rem;margin-top:24px;margin-bottom:12px}
.legal-content p,.legal-content li{font-size:0.95rem;line-height:1.8;color:var(--text);margin-bottom:12px}
.legal-content ul{padding-left:24px;margin-bottom:16px}
.legal-content ul li{list-style:disc;margin-bottom:8px}
.legal-content a{color:var(--primary);text-decoration:underline}
.legal-content .last-updated{color:var(--text-lighter);font-size:0.85rem;margin-bottom:32px}

/* ============================================================
   COMPREHENSIVE RESPONSIVE — All pages / all breakpoints
   Approach: attribute selectors with !important override inline
   styles; class-based overrides for CSS-defined components.
   ============================================================ */

/* --- Scrollable table wrapper (added via PHP to tables) --- */
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-scroll table,.compare-scroll>div{min-width:600px}

/* ===== LARGE TABLET (≤1023px): nav, hero layout ===== */
@media(max-width:1023px){
  .nav-mega{min-width:480px;transform:translateX(-40%) translateY(8px)}
  .nav-dropdown:hover .nav-mega{transform:translateX(-40%) translateY(0)}
}

/* ===== TABLET (≤900px): hero splits → 1 column ===== */
@media(max-width:900px){
  /* Hero container splits (1fr 1fr with large gap) → single column */
  .container[style*="grid-template-columns:1fr 1fr"],
  .container[style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns:1fr !important;
    gap:40px !important;
  }
  /* Feature deep-dives (1fr 1fr inside container but not .container itself) */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:80px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:72px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:64px"]{
    grid-template-columns:1fr !important;
    gap:40px !important;
  }
  /* Small-gap 1fr 1fr (before/after tables etc.) — only change columns, keep gap */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:2px"]{
    grid-template-columns:1fr !important;
  }
  /* 4-col → 2-col */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  /* Hero sections: reduce top padding */
  [style*="padding:160px 0 100px"]{padding-top:120px !important;padding-bottom:72px !important}
  [style*="padding:160px 0"]{padding-top:120px !important}
}

/* ===== MOBILE (≤768px): stack grids, reduce padding ===== */
@media(max-width:768px){
  /* 3-col grids → 1-col (skip 2-col, too tight on 768) */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"]{
    grid-template-columns:1fr !important;
  }
  /* 2-col inner grids → 1-col */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2,1fr)"]{
    grid-template-columns:1fr !important;
  }
  /* 4-col → 1-col */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"]{
    grid-template-columns:1fr !important;
  }
  /* Timeline items: tighter */
  [style*="grid-template-columns:80px 1fr"]{
    grid-template-columns:56px 1fr !important;
    gap:16px !important;
  }
  /* Section padding reduction */
  [style*="padding:120px 0"]{padding-top:64px !important;padding-bottom:64px !important}
  [style*="padding:100px 0"]{padding-top:56px !important;padding-bottom:56px !important}
  [style*="padding:80px 0"]{padding-top:48px !important;padding-bottom:48px !important}
  /* Comparison tables → allow scroll */
  .compare-scroll>div,[style*="grid-template-columns:2fr 1fr 1fr 1fr"]{min-width:560px}
  /* Pain grid */
  .pain-grid{grid-template-columns:1fr !important}
  /* Pricing grid responsive */
  .pricing-grid{grid-template-columns:1fr !important;max-width:460px}
  /* Hero buttons: stack on narrow */
  [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"]{
    flex-direction:column;align-items:stretch;gap:12px !important;
  }
  [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"] .btn{
    text-align:center;justify-content:center;width:100%;
  }
  /* Inline font-size overrides for headings that use inline styles */
  [style*="font-size:clamp(2.4rem"],
  [style*="font-size:clamp(2.5rem"]{
    font-size:clamp(1.8rem,7vw,2.4rem) !important;
  }
  /* Max-width text blocks: let them fill mobile */
  [style*="max-width:480px"],
  [style*="max-width:500px"],
  [style*="max-width:600px"]{max-width:100% !important}
  /* Stats bars / counters that use inline flex with large gaps */
  [style*="display:flex"][style*="justify-content:center"][style*="gap:48px"],
  [style*="display:flex"][style*="justify-content:center"][style*="gap:64px"]{
    flex-wrap:wrap !important;gap:24px !important;
  }
  /* Mockup cards: reduce padding */
  [style*="padding:32px"][style*="border-radius"]{padding:20px !important}
  [style*="padding:40px"][style*="border-radius"]{padding:24px !important}
}

/* ===== SMALL MOBILE (≤640px) ===== */
@media(max-width:640px){
  .container{padding:0 16px}
  /* Hero padding further reduced */
  [style*="padding:160px 0 100px"]{padding-top:96px !important;padding-bottom:48px !important}
  .hero{padding:96px 0 48px}
  .hero h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .section-header{margin-bottom:36px}
  .section-header h2{font-size:clamp(1.5rem,6vw,2rem) !important}
  .pain-grid{grid-template-columns:1fr}
  .pricing-toggle{flex-wrap:wrap;gap:10px}
  .enterprise-section{padding:32px 20px !important;grid-template-columns:1fr !important}
  .footer-bottom{flex-direction:column;text-align:center;gap:8px}
  .footer-bottom-links{flex-wrap:wrap;justify-content:center;gap:12px}
  /* Reduce inline gap values for stacked grids */
  .container[style*="grid-template-columns:1fr 1fr"],
  .container[style*="grid-template-columns: 1fr 1fr"]{gap:32px !important}
  [style*="grid-template-columns:1fr 1fr"][style*="gap:80px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:72px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:64px"]{gap:28px !important}
}

/* ============ CONTENT EXAMPLES ============ */
.content-examples{padding:100px 0;background:var(--white)}
.examples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.example-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:var(--transition)}
.example-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl)}
.example-platform-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;font-weight:700;font-size:0.82rem;border-bottom:1px solid var(--border-light)}
.example-platform-bar .lucide{width:15px;height:15px}
.example-photo-wrap{position:relative;overflow:hidden}
.example-photo-wrap img{width:100%;height:210px;object-fit:cover;display:block;transition:transform 0.4s ease}
.example-card:hover .example-photo-wrap img{transform:scale(1.03)}
.example-ai-tag{position:absolute;top:10px;right:10px;background:rgba(255,255,255,0.95);border:1px solid var(--border);border-radius:var(--radius-full);padding:4px 10px;font-size:0.7rem;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:4px;backdrop-filter:blur(6px)}
.example-ai-tag .lucide{width:11px;height:11px}
.example-caption-body{padding:16px;min-height:80px}
.example-caption-body p{font-size:0.81rem;color:var(--text);line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.example-footer{padding:10px 16px;border-top:1px solid var(--border-light);display:flex;align-items:center;gap:14px}
.example-footer span{display:flex;align-items:center;gap:4px;font-size:0.76rem;color:var(--text-light)}
.example-footer .lucide{width:13px;height:13px}
.example-generated-label{margin-left:auto;color:var(--primary);font-weight:600;font-size:0.72rem}

/* Tab visual with photo */
.tab-visual-card--media{padding:0;min-height:unset}
.tab-visual-card--media::after{display:none}
.tab-photo-wrap{position:relative;overflow:hidden;border-radius:var(--radius-lg)}
.tab-photo-wrap img{width:100%;height:340px;object-fit:cover;display:block}
.tab-float-card{position:absolute;bottom:12px;left:12px;right:12px;background:rgba(255,255,255,0.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.95);border-radius:10px;padding:10px 12px;box-shadow:0 4px 16px rgba(0,0,0,0.12);font-size:0.75rem;line-height:1.4}
.tfc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.tfc-tag{background:var(--primary-light);color:var(--primary);padding:2px 8px;border-radius:var(--radius-full);font-size:0.7rem;font-weight:500}
.tfc-kv{display:flex;justify-content:space-between;margin-bottom:4px}
.tfc-key{color:var(--text-light)}
.tfc-val{font-weight:600;color:var(--dark-800)}
.tfc-green{color:#16a34a!important}
.tfc-muted{color:var(--text-light)!important;font-weight:400!important}
.tfc-check{color:#16a34a;font-weight:500;margin-bottom:4px}
.tfc-approved{font-size:0.88rem;font-weight:700;color:var(--dark-800);margin-bottom:6px}
.tfc-metric{font-weight:700;color:var(--dark-800);margin-bottom:3px;font-size:0.8rem}
.tfc-up{color:#16a34a;font-weight:800}
.tfc-footer{font-size:0.7rem;color:var(--text-light);margin-top:6px;border-top:1px solid var(--border);padding-top:5px}

@media(max-width:900px){.examples-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.examples-grid{grid-template-columns:1fr;gap:16px}}

/* ============ CREATE DEMO MOCKUP ============ */
.create-demo-wrap{max-width:1000px;margin:0 auto}
.create-demo-body{grid-template-columns:170px 1fr 280px!important;min-height:480px!important}
/* Form area */
.cm-form{padding:16px 16px;display:flex;flex-direction:column;gap:0;border-right:1px solid var(--border);overflow-y:auto}
.cm-step{margin-bottom:14px}
.cm-step-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cm-step-num{width:20px;height:20px;border-radius:50%;background:var(--primary);color:var(--white);font-size:0.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cm-step-title{font-size:0.72rem;font-weight:700;color:var(--dark-800);text-transform:uppercase;letter-spacing:0.06em}
/* Platform pills */
.cm-pills{display:flex;flex-wrap:wrap;gap:5px}
.cm-pill{display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:var(--radius-full);border:1px solid var(--border);font-size:0.66rem;font-weight:500;color:var(--text-light);cursor:default;transition:var(--transition)}
.cm-pill .lucide{width:10px;height:10px}
.cm-pill-active{background:#fce7f3;border-color:#ec4899;color:#db2777;font-weight:600}
.cm-pill-selected{background:#dbeafe;border-color:#3b82f6;color:#2563eb;font-weight:600}
.cm-pill-tiktok{border-color:#ff0050;color:#ff0050}
/* Format tabs */
.cm-format-tabs{display:flex;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:10px}
.cm-format-tab{flex:1;padding:6px 0;text-align:center;font-size:0.64rem;font-weight:500;color:var(--text-light);border-right:1px solid var(--border);cursor:default}
.cm-format-tab:last-child{border-right:none}
.cm-format-active{background:var(--primary);color:var(--white);font-weight:600}
/* Media upload area */
.cm-media-area{display:flex;gap:10px;align-items:center;margin-bottom:10px;padding:8px;background:var(--bg-light);border:1px solid var(--border);border-radius:8px}
.cm-media-preview{width:56px;height:56px;border-radius:6px;overflow:hidden;flex-shrink:0}
.cm-media-preview img{width:100%;height:100%;object-fit:cover}
.cm-media-info{flex:1;min-width:0}
.cm-media-filename{font-size:0.66rem;font-weight:600;color:var(--dark-800);display:flex;align-items:center;gap:4px;margin-bottom:2px}
.cm-media-meta{font-size:0.6rem;color:var(--text-light)}
/* AI Prompt */
.cm-ai-prompt{margin-bottom:10px;border:1px solid rgba(108,51,255,0.3);border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#f5f3ff,#faf5ff)}
.cm-ai-prompt-label{display:flex;align-items:center;gap:5px;padding:6px 10px;font-size:0.62rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid rgba(108,51,255,0.15)}
.cm-ai-prompt-label .lucide{width:11px;height:11px}
.cm-ai-prompt-input{padding:8px 10px;font-size:0.7rem;color:var(--dark-800);line-height:1.5;min-height:36px;word-break:break-word}
.cm-cursor{display:inline-block;color:var(--primary);font-weight:300;animation:cmBlink 0.9s step-end infinite}
@keyframes cmBlink{0%,100%{opacity:1}50%{opacity:0}}
/* Select dropdowns row */
.cm-selects-row{display:flex;gap:6px}
.cm-select{flex:1;border:1px solid var(--border);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.cm-select-label{font-size:0.58rem;color:var(--text-light);font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.cm-select-val{font-size:0.66rem;font-weight:600;color:var(--dark-800);display:flex;align-items:center;gap:3px}
.cm-select-val .lucide{width:9px;height:9px;opacity:0.4;margin-left:auto}
/* Right preview panel */
.cm-preview-panel{padding:14px 12px;display:flex;flex-direction:column;gap:8px;background:var(--bg-light)}
.cm-bv-card{display:flex;align-items:center;justify-content:space-between;background:var(--white);border:1px solid var(--border);border-radius:8px;padding:7px 10px}
.cm-bv-label{font-size:0.58rem;color:var(--text-light);font-weight:700;text-transform:uppercase;letter-spacing:0.06em}
.cm-bv-val{display:flex;align-items:center;gap:4px;font-size:0.68rem;font-weight:600;color:var(--dark-800)}
.cm-bv-val .lucide{width:11px;height:11px}
.cm-preview-box{flex:1;background:var(--white);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.cm-preview-tabs{display:flex;border-bottom:1px solid var(--border)}
.cm-preview-tab{display:flex;align-items:center;gap:4px;padding:7px 10px;font-size:0.62rem;font-weight:500;color:var(--text-light);border-bottom:2px solid transparent;cursor:default}
.cm-preview-tab .lucide{width:10px;height:10px}
.cm-preview-tab-active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.cm-preview-content{flex:1;padding:10px;min-height:60px}
/* Social post mockup inside preview */
.cm-social-post{display:flex;flex-direction:column;gap:6px}
.cm-social-header{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.cm-social-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-hover));flex-shrink:0}
.cm-social-name{font-size:0.66rem;font-weight:700;color:var(--dark-800);line-height:1.2}
.cm-social-handle{font-size:0.58rem;color:var(--text-light)}
.cm-social-caption{font-size:0.66rem;color:var(--dark-800);line-height:1.55}
#cm-preview-text{font-size:0.66rem;color:var(--dark-800);line-height:1.55}
.cm-social-media{border-radius:6px;overflow:hidden;margin:4px 0}
.cm-social-media img{width:100%;height:80px;object-fit:cover;display:block}
.cm-social-actions{display:flex;gap:10px;padding-top:4px;align-items:center}
.cm-social-actions .lucide{width:13px;height:13px;color:var(--text-light)}
/* Platforms hint */
.cm-platforms-hint{display:flex;align-items:center;gap:5px;font-size:0.64rem;color:var(--text-light);font-weight:500;padding:2px 0}
/* Generate button */
.cm-gen-btn{width:100%;padding:11px;background:var(--primary);color:var(--white);border:none;border-radius:10px;font-size:0.76rem;font-weight:700;cursor:default;display:flex;align-items:center;justify-content:center;gap:7px;position:relative;overflow:hidden;transition:var(--transition)}
.cm-gen-btn .lucide{width:14px;height:14px}
.cm-gen-pulse{box-shadow:0 0 0 0 rgba(108,51,255,0.5);animation:cmGenPulse 1.2s ease-out 3}
@keyframes cmGenPulse{0%{box-shadow:0 0 0 0 rgba(108,51,255,0.5)}70%{box-shadow:0 0 0 10px rgba(108,51,255,0)}100%{box-shadow:0 0 0 0 rgba(108,51,255,0)}}
.cm-gen-loading{background:var(--primary-hover)}
.cm-gen-btn::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transform:skewX(-15deg)}
.cm-gen-pulse::after{animation:cmShimmer 1s ease 0.3s}
@keyframes cmShimmer{0%{left:-60%}100%{left:120%}}
/* ===== Create demo staggered entrance ===== */
.create-demo:not(.animate) .mockup-sidebar,
.create-demo:not(.animate) .cm-step-head,
.create-demo:not(.animate) .cm-pill,
.create-demo:not(.animate) .cm-format-tabs,
.create-demo:not(.animate) .cm-media-area,
.create-demo:not(.animate) .cm-ai-prompt,
.create-demo:not(.animate) .cm-selects-row,
.create-demo:not(.animate) .cm-bv-card,
.create-demo:not(.animate) .cm-preview-box,
.create-demo:not(.animate) .cm-platforms-hint,
.create-demo:not(.animate) .cm-gen-btn{opacity:0}

/* Sidebar */
.create-demo.animate .mockup-sidebar{animation:mockupSlideIn 0.5s ease 0.2s both}

/* Form: Step 1 heading + pills pop individually */
.create-demo.animate .cm-step:nth-child(1) .cm-step-head{animation:mockupSlideUp 0.35s ease 0.4s both}
@keyframes cmPillPop{0%{opacity:0;transform:scale(0.4)}65%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
.create-demo.animate .cm-pill{animation:cmPillPop 0.35s cubic-bezier(0.34,1.56,0.64,1) both}
.create-demo.animate .cm-pill:nth-child(1){animation-delay:0.52s}
.create-demo.animate .cm-pill:nth-child(2){animation-delay:0.59s}
.create-demo.animate .cm-pill:nth-child(3){animation-delay:0.66s}
.create-demo.animate .cm-pill:nth-child(4){animation-delay:0.73s}
.create-demo.animate .cm-pill:nth-child(5){animation-delay:0.80s}
.create-demo.animate .cm-pill:nth-child(6){animation-delay:0.87s}

/* Form: Step 2 heading + content staggered */
.create-demo.animate .cm-step:nth-child(2) .cm-step-head{animation:mockupSlideUp 0.35s ease 0.92s both}
.create-demo.animate .cm-format-tabs{animation:mockupFadeIn 0.35s ease 1.02s both}
.create-demo.animate .cm-media-area{animation:mockupScaleIn 0.45s ease 1.12s both}
.create-demo.animate .cm-ai-prompt{animation:mockupSlideUp 0.4s ease 1.28s both}
.create-demo.animate .cm-selects-row{animation:mockupFadeIn 0.35s ease 1.4s both}

/* Preview panel: staggered from top to bottom */
.create-demo.animate .cm-bv-card{animation:mockupSlideUp 0.35s ease 0.65s both}
.create-demo.animate .cm-preview-box{animation:mockupScaleIn 0.45s ease 0.8s both}
.create-demo.animate .cm-platforms-hint{animation:mockupFadeIn 0.3s ease 0.95s both}
.create-demo.animate .cm-gen-btn{animation:mockupScaleIn 0.4s ease 1.05s both}

/* ===== Payoff animations ===== */
/* Hashtag highlight */
.cm-hashtag{color:var(--primary);font-weight:600;opacity:0;transform:translateY(2px);display:inline-block;transition:opacity 0.4s ease,transform 0.4s ease,text-shadow 0.4s ease}
.cm-hashtag.visible{opacity:1;transform:translateY(0);text-shadow:0 0 12px rgba(108,51,255,0.15)}

/* Heart pulse */
#cm-heart-wrap{display:inline-flex;transition:transform 0.3s ease}
@keyframes cmHeartPulse{0%{transform:scale(1)}20%{transform:scale(1.5)}40%{transform:scale(0.85)}60%{transform:scale(1.25)}80%{transform:scale(0.95)}100%{transform:scale(1)}}
#cm-heart-wrap.pulse{animation:cmHeartPulse 0.7s cubic-bezier(0.34,1.56,0.64,1) both}
#cm-heart-wrap.pulse svg{color:#ef4444!important}

/* Payoff badge */
.cm-payoff-badge{display:none;align-items:center;gap:5px;padding:7px 10px;background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46;border-radius:8px;font-size:0.64rem;font-weight:700;margin-top:6px;opacity:0;transform:translateY(8px)}
@keyframes cmPayoffSlide{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.cm-payoff-badge.visible{display:flex;animation:cmPayoffSlide 0.5s cubic-bezier(0.34,1.56,0.64,1) both}

/* Generate button success state */
@keyframes cmBtnSuccess{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.cm-gen-btn.success{background:#059669!important;animation:cmBtnSuccess 0.4s ease both}

/* ===== Create demo responsive ===== */
@media(max-width:768px){
  .create-demo-body{grid-template-columns:1fr!important}
  .mockup-sidebar{display:none!important}
  .cm-preview-panel{border-top:1px solid var(--border);padding-top:16px}
  .cm-social-media img{height:140px}
  .cm-preview-box{min-height:auto}
}
@media(max-width:600px){
  .create-demo-body{grid-template-columns:1fr!important;min-height:auto!important}
  .cm-form{border-right:none;border-bottom:1px solid var(--border)}
  .cm-selects-row{flex-direction:column}
}

/* ============ BLOG ============ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:var(--transition)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}
.blog-card-img{height:200px;background:linear-gradient(135deg,var(--primary-light),#ede9fe);background-size:cover;background-position:center}
.blog-card-body{padding:24px;flex:1;display:flex;flex-direction:column;gap:10px}
.blog-tag{display:inline-block;padding:4px 12px;background:var(--primary-light);color:var(--primary);border-radius:var(--radius-full);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;width:fit-content}
.blog-card h2{font-size:1.05rem;line-height:1.4;color:var(--dark-800);margin:0;font-weight:700}
.blog-card p{font-size:0.88rem;color:var(--text-light);line-height:1.6;margin:0;flex:1}
.blog-meta{display:flex;gap:16px;font-size:0.78rem;color:var(--text-lighter);margin-top:auto;padding-top:12px;border-top:1px solid var(--border-light)}

/* Single post */
.blog-post-hero{height:380px;overflow:hidden;position:relative}
.blog-post-hero-img{width:100%;height:100%;background-size:cover;background-position:center}
.blog-post-hero-gradient{width:100%;height:100%;background:linear-gradient(135deg,#6d28d9,#a855f7 60%,#ec4899)}
.blog-post-container{max-width:760px;padding-top:48px;padding-bottom:96px}
.blog-back-link{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;font-size:0.88rem;text-decoration:none;margin-bottom:32px;transition:var(--transition)}
.blog-back-link:hover{opacity:0.8}
.blog-post-header{margin-bottom:48px}
.blog-post-header h1{font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.2;margin:16px 0 20px}
.blog-post-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:0.85rem;color:var(--text-light)}
.blog-post-meta span{display:inline-flex;align-items:center;gap:5px}
.blog-post-excerpt{font-size:1.05rem;color:var(--text-light);line-height:1.75;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}

/* Post body typography */
.blog-post-content{font-size:1.05rem;line-height:1.85;color:var(--dark-800)}
.blog-post-content h2{font-size:1.55rem;font-weight:700;margin:2.5rem 0 1rem;color:var(--dark-800)}
.blog-post-content h3{font-size:1.15rem;font-weight:700;margin:2rem 0 0.6rem;color:var(--dark-800)}
.blog-post-content p{margin-bottom:1.4rem}
.blog-post-content ul,.blog-post-content ol{margin:0 0 1.4rem 1.4rem}
.blog-post-content li{margin-bottom:0.5rem}
.blog-post-content strong{color:var(--dark-800)}
.blog-post-content a{color:var(--primary);text-decoration:underline}
.blog-post-content a:hover{text-decoration:none}
.blog-post-content hr{border:none;border-top:1px solid var(--border);margin:2.5rem 0}
.blog-post-content blockquote{border-left:3px solid var(--primary);padding:12px 20px;margin:1.5rem 0;background:var(--primary-light);border-radius:0 var(--radius) var(--radius) 0;font-style:italic;color:var(--text-light)}
.blog-post-content table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.95rem;border-radius:var(--radius);overflow:hidden}
.blog-post-content th{background:var(--primary-light);color:var(--primary);font-weight:700;padding:12px 16px;text-align:left;border:1px solid var(--border)}
.blog-post-content td{padding:11px 16px;border:1px solid var(--border)}
.blog-post-content tr:nth-child(even) td{background:var(--bg)}
.blog-post-content code{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-size:0.85rem;font-family:monospace}
.blog-post-content pre{background:var(--dark-800);color:#f8f8f2;border-radius:var(--radius);padding:20px;overflow-x:auto;margin:1.5rem 0}
.blog-post-content pre code{background:none;border:none;color:inherit;font-size:0.9rem}

/* Post CTA box */
.blog-post-cta{margin-top:56px;padding:40px 48px;background:linear-gradient(135deg,var(--primary-light),#ede9fe);border-radius:var(--radius-lg);text-align:center;border:1px solid rgba(109,40,217,0.1)}
.blog-post-cta h3{font-size:1.4rem;margin-bottom:8px}
.blog-post-cta p{color:var(--text-light);margin-bottom:24px}

@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}.blog-post-hero{height:220px}.blog-post-meta{gap:12px}.blog-post-cta{padding:28px 20px}}

/* ============ 404 PAGE ============ */
.error-page{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 0 80px}
.error-content{max-width:560px;margin:0 auto}
.error-code{display:block;font-size:clamp(6rem,15vw,10rem);font-weight:800;letter-spacing:-0.04em;line-height:1;background:linear-gradient(135deg,var(--primary),var(--primary-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}
.error-content h1{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:16px}
.error-subtitle{font-size:1.1rem;color:var(--text-light);line-height:1.7;margin-bottom:8px}
.error-hint{font-size:1rem;color:var(--text);font-weight:600;margin-bottom:32px}
.error-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ===== EXTRA SMALL (≤400px) ===== */
@media(max-width:400px){
  .container{padding:0 12px}
  .btn{padding:12px 20px;font-size:0.85rem}
  .btn-sm{padding:8px 16px}
  .hero h1{font-size:1.7rem}
  .pricing-card{padding:28px 16px}
  .lang-switch a{padding:4px 8px}
  [style*="font-size:clamp(1.8rem"]{font-size:1.5rem !important}
}