/* ============================================================
   EBOOKERR THEME — Main Stylesheet
   ============================================================ */

/* --- Variables --- */
:root {
  --c-primary:   #7C3AED;
  --c-secondary: #EC4899;
  --c-grad:      linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  --c-dark:      #0F0A1E;
  --c-dark2:     #1A1040;
  --c-text:      #1F2937;
  --c-muted:     #6B7280;
  --c-border:    #E5E7EB;
  --c-bg:        #FAFAFA;
  --c-white:     #FFFFFF;
  --radius:      14px;
  --radius-lg:   20px;
  --shadow:      0 4px 24px rgba(124,58,237,.12);
  --shadow-lg:   0 12px 48px rgba(124,58,237,.2);
  --nav-h:       72px;
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition:  .25s cubic-bezier(.4,0,.2,1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font); color: var(--c-text); background: var(--c-white); line-height: 1.6; overflow-x: hidden; overscroll-behavior-y: contain; touch-action: pan-y; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { opacity: .85; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font); }

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

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 10px;
  font-size: 15px; font-weight: 700; line-height: 1;
  border: none; cursor: pointer; text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  white-space: nowrap; font-family: var(--font);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--c-grad); color: #fff;
  box-shadow: 0 4px 20px rgba(124,58,237,.4);
}
.btn-primary:hover { box-shadow: 0 8px 32px rgba(124,58,237,.55); color: #fff; opacity: 1; }

.btn-white {
  background: #fff; color: var(--c-primary);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.btn-white:hover { box-shadow: 0 8px 32px rgba(0,0,0,.2); color: var(--c-primary); }

.btn-ghost {
  background: rgba(255,255,255,.1); color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; opacity: 1; }

.btn-outline {
  background: transparent; color: var(--c-primary);
  border: 2px solid var(--c-primary);
}
.btn-outline:hover { background: var(--c-primary); color: #fff; }

.btn-xl { padding: 16px 32px; font-size: 17px; border-radius: 12px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-sm { padding: 9px 18px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; justify-content: center; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: rgba(15,10,30,.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
  background: rgba(15,10,30,.97);
  box-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px;
}

.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.site-logo .logo-icon { width: 36px; height: 36px; flex-shrink: 0; }
.site-logo .logo-text { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: #fff; }
.site-logo .logo-dot { color: var(--c-secondary); }

.site-nav { margin-left: auto; }
.nav-list { display: flex; gap: 4px; }
.nav-list a {
  display: block; padding: 8px 14px; font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.7); border-radius: 8px;
  transition: background var(--transition), color var(--transition);
}
.nav-list a:hover { color: #fff; background: rgba(255,255,255,.08); }

.header-cta { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.header-cta .btn { height: 38px; padding-top: 0; padding-bottom: 0; }
.header-buy { font-size: 13px; padding: 0 18px; }

.hamburger {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 40px; height: 40px; background: none; border: none;
  margin-left: auto; flex-shrink: 0;
}
.hamburger span {
  display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
  transition: all var(--transition); transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  position: fixed; top: var(--nav-h); right: -100%; bottom: 0;
  width: min(320px, 100%); background: #1A1040; z-index: 1001;
  transition: right .35s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,.4);
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.open { right: 0; }
.mobile-nav-inner { padding: 32px 24px; display: flex; flex-direction: column; gap: 12px; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav ul a {
  display: block; padding: 12px 16px; color: #fff;
  font-size: 16px; font-weight: 600; border-radius: 10px;
  transition: background var(--transition), color var(--transition);
}
.mobile-nav ul a:hover { background: rgba(255,255,255,.08); color: #fff; }
.mobile-buy { margin-top: 16px; justify-content: center; }
.mobile-legal { display: flex; gap: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 8px; }
.mobile-legal a { font-size: 12px; color: rgba(255,255,255,.5); }

.mobile-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000;
  opacity: 0; pointer-events: none; transition: opacity var(--transition); backdrop-filter: blur(4px);
  touch-action: none;
}
.mobile-overlay.open { opacity: 1; pointer-events: all; }

/* Lock the page in place while the mobile nav is open (iOS Safari ignores
   overflow:hidden on body for touch scrolling, so it needs position:fixed too) */
body.nav-open {
  position: fixed;
  left: 0; right: 0;
  overflow: hidden;
  width: 100%;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 100px 0; }
.section-dark { background: var(--c-dark); }
.section-light { background: #F5F3FF; }

.section-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.section-header h2 { font-family: var(--font-display); font-size: clamp(28px,4vw,48px); font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.section-header p { font-size: 17px; color: var(--c-muted); line-height: 1.7; }
.section-dark .section-header h2 { color: #fff; }
.section-dark .section-header p { color: rgba(255,255,255,.6); }

.section-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px;
  background: rgba(124,58,237,.12); color: var(--c-primary);
}
.section-badge.light { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }

.gradient-text {
  background: var(--c-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-light {
  background: linear-gradient(135deg, #C4B5FD 0%, #F9A8D4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background: var(--c-dark); overflow: hidden; padding-top: var(--nav-h);
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(124,58,237,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.08) 1px, transparent 1px);
  background-size: 60px 60px;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); animation: orbFloat 8s ease-in-out infinite;
}
.orb-1 { width: 600px; height: 600px; background: rgba(124,58,237,.3); top: -200px; right: -100px; animation-delay: 0s; }
.orb-2 { width: 400px; height: 400px; background: rgba(236,72,153,.2); bottom: -100px; left: -50px; animation-delay: -3s; }
.orb-3 { width: 300px; height: 300px; background: rgba(59,130,246,.15); top: 30%; left: 40%; animation-delay: -6s; }
@keyframes orbFloat { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-20px) scale(1.05); } 66% { transform: translate(-20px,30px) scale(.97); } }

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center;
  padding-top: 80px; padding-bottom: 80px;
  max-width: 760px; margin: 0 auto; text-align: center;
}
.hero-cta { justify-content: center; }
.hero-trust { align-items: center; }
.trust-items { justify-content: center; }
.hero-sub { margin-left: auto; margin-right: auto; }

/* ---- Hero visual: a pure-CSS floating "book" mockup, not a photo — keeps
   the hero from being flat text-on-gradient without claiming to show real
   product screenshots (those belong in a later, real-screenshot section). ---- */
@media (min-width: 1000px) {
  .hero-inner.has-visual {
    grid-template-columns: 1fr 460px; max-width: 1200px; text-align: left; gap: 40px;
  }
  .has-visual .hero-cta,
  .has-visual .trust-items { justify-content: flex-start; }
  .has-visual .hero-sub { margin-left: 0; }
}
.hero-visual {
  display: none; position: relative; height: 480px;
}
@media (min-width: 1000px) { .hero-visual { display: block; } }

.hv-book {
  position: absolute; top: 50%; left: 50%;
  width: 260px; height: 360px;
  transform: translate(-50%,-50%) perspective(1400px) rotateY(-18deg) rotateX(4deg);
  border-radius: 8px 14px 14px 8px;
  background: var(--c-grad);
  box-shadow: -30px 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  animation: hvFloat 6s ease-in-out infinite;
}
.hv-book::before {
  /* spine shadow */
  content:''; position:absolute; left:0; top:0; bottom:0; width:18px;
  background:linear-gradient(90deg, rgba(0,0,0,.35), transparent);
  border-radius: 8px 0 0 8px;
}
.hv-book-title {
  position:absolute; inset: 28px 22px auto 34px;
  color:#fff; font-family:var(--font-display); font-weight:800;
  font-size:22px; line-height:1.25; text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.hv-book-spark {
  position:absolute; left:34px; bottom:26px;
  color:rgba(255,255,255,.85); font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:6px;
}
.hv-book-spark svg { width:14px; height:14px; }

.hv-card {
  position:absolute; width: 190px; padding:14px 16px;
  background: rgba(255,255,255,.06); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  animation: hvDrift 7s ease-in-out infinite;
}
.hv-card-1 { top: 18px; right: 0; animation-delay: -1s; }
.hv-card-2 { bottom: 34px; left: -12px; animation-delay: -3.5s; }
.hv-card .hv-card-label { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#C4B5FD; margin-bottom:6px; }
.hv-card .hv-card-line { height:7px; border-radius:4px; background:rgba(255,255,255,.16); margin-bottom:6px; }
.hv-card .hv-card-line:last-child { margin-bottom:0; width:70%; }
.hv-card .hv-card-check { display:flex; align-items:center; gap:6px; font-size:12px; color:#fff; font-weight:600; }
.hv-card .hv-card-check svg { width:14px; height:14px; color:#34D399; flex-shrink:0; }

@keyframes hvFloat { 0%,100% { transform: translate(-50%,-50%) perspective(1400px) rotateY(-18deg) rotateX(4deg) translateY(0); } 50% { transform: translate(-50%,-50%) perspective(1400px) rotateY(-14deg) rotateX(2deg) translateY(-14px); } }
@keyframes hvDrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 20px;
  background: rgba(124,58,237,.2); border: 1px solid rgba(124,58,237,.4);
  color: #C4B5FD; font-size: 13px; font-weight: 600; margin-bottom: 24px;
}
.hero-badge svg { width: 14px; height: 14px; }
.hero-title {
  font-family: var(--font-display); font-size: clamp(32px,4.5vw,60px); font-weight: 800;
  color: #fff; line-height: 1.08; margin-bottom: 20px; letter-spacing: -.5px;
}
.hero-subheadline { font-size: 19px; font-weight: 600; color: #fff; line-height: 1.5; margin-bottom: 16px; max-width: 540px; }
.hero-sub { font-size: 18px; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 32px; max-width: 520px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-trust { display: flex; flex-direction: column; gap: 12px; }
.trust-stars { display: flex; align-items: center; gap: 4px; }
.trust-stars .star svg { width: 16px; height: 16px; color: #F59E0B; fill: #F59E0B; }
.trust-text { font-size: 14px; color: rgba(255,255,255,.6); margin-left: 4px; }
.trust-items { display: flex; gap: 20px; flex-wrap: wrap; }
.trust-items span { font-size: 13px; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 6px; }
.trust-items svg { width: 14px; height: 14px; }

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar { background: var(--c-dark2); border-top: 1px solid rgba(255,255,255,.06); padding: 40px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat-item { text-align: center; }
.stat-num {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  background: var(--c-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1.2; margin-bottom: 6px; white-space: nowrap;
}
.stat-label { font-size: 14px; color: rgba(255,255,255,.5); font-weight: 500; }

/* ============================================================
   FEATURES
   ============================================================ */
.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.feature-card {
  background: var(--c-white); border-radius: var(--radius-lg); padding: 32px 28px;
  border: 1.5px solid var(--c-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  animation-delay: var(--delay, 0s);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(124,58,237,.3);
}
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.feature-icon svg { width: 24px; height: 24px; }
.icon-purple { background: rgba(124,58,237,.12); color: var(--c-primary); }
.icon-pink    { background: rgba(236,72,153,.12); color: var(--c-secondary); }
.icon-blue    { background: rgba(59,130,246,.12);  color: #3B82F6; }
.icon-green   { background: rgba(16,185,129,.12);  color: #10B981; }
.icon-orange  { background: rgba(245,158,11,.12);  color: #F59E0B; }
.icon-teal    { background: rgba(20,184,166,.12);  color: #14B8A6; }
.feature-card h3 { font-size: 17px; font-weight: 700; color: var(--c-text); margin-bottom: 10px; }
.feature-card p  { font-size: 14px; color: var(--c-muted); line-height: 1.65; }

/* ============================================================
   WHO IT'S FOR
   ============================================================ */
.who-for { background: var(--c-bg); }
.who-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.who-card {
  background: var(--c-white); border-radius: var(--radius); padding: 26px 24px;
  border: 1.5px solid var(--c-border); text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  animation-delay: var(--delay, 0s);
}
.who-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(124,58,237,.25); }
.who-icon {
  width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-grad); color: #fff;
}
.who-icon svg { width: 22px; height: 22px; }
.who-card h3 { font-size: 16px; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
.who-card p  { font-size: 13.5px; color: var(--c-muted); line-height: 1.6; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps-grid {
  /* 4 .step cards + 3 .step-connector arrows between them = 7 grid children -
     explicit columns so each connector gets its own narrow "auto" track
     instead of the browser silently generating implicit tracks (which is
     what produced the broken/overlapping layout when a 4th step was added
     to what used to be a hardcoded 3-step, 5-column template). */
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 0; align-items: start;
}
.step {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg); padding: 36px 28px;
  transition: background var(--transition);
}
.step:hover { background: rgba(255,255,255,.07); }
.step-num {
  font-family: var(--font-display); font-size: 52px; font-weight: 800; line-height: 1;
  background: var(--c-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 16px;
}
.step h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.step p { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.7; }
.step-connector {
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px; margin-top: 60px; color: rgba(255,255,255,.2);
  font-size: 24px;
}
.step-connector::after { content: '→'; font-size: 28px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.testimonial-card {
  background: var(--c-white); border-radius: var(--radius-lg); padding: 28px;
  border: 1.5px solid var(--c-border); box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.testimonial-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.testimonial-stars svg { width: 16px; height: 16px; color: #F59E0B; fill: #F59E0B; }
.testimonial-text { font-size: 14px; line-height: 1.7; color: var(--c-text); margin-bottom: 20px; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-grad); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: .5px;
}
.author-name { font-size: 14px; font-weight: 700; color: var(--c-text); }
.author-role { font-size: 12px; color: var(--c-muted); }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-wrapper {
  display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; max-width: 900px; margin: 0 auto;
}
/* Two-tier (Lite/Pro) pricing: main column (both cards + note + free-tier
   strip) next to the same compare/guarantee side panel as before — the
   side panel stays a single flat grid child spanning the full height via
   align-self, no extra markup needed on its side. */
.pricing-wrapper-dual { grid-template-columns: 1fr 360px; max-width: 1180px; }
.pricing-main-col { display: flex; flex-direction: column; gap: 0; }
.pricing-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.pricing-cards-row .pricing-card { padding: 32px; }
.pricing-card-featured { border-color: var(--c-secondary); box-shadow: 0 16px 64px rgba(236,72,153,.22); }
.pricing-card-featured .pricing-badge { background: linear-gradient(135deg,#EC4899,#F59E0B); }
.pricing-card {
  background: var(--c-white); border-radius: var(--radius-lg); padding: 40px;
  border: 2px solid var(--c-primary);
  box-shadow: 0 16px 64px rgba(124,58,237,.2);
  position: relative; overflow: visible;
}
.pricing-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--c-grad); color: #fff; padding: 5px 20px; border-radius: 20px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
}
.pricing-header { text-align: center; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--c-border); }
.pricing-header h3 { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--c-dark); margin-bottom: 6px; }
.pricing-header p { font-size: 14px; color: var(--c-muted); margin-bottom: 24px; }
.price-display { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.price-original { font-size: 22px; font-weight: 600; color: #D1D5DB; text-decoration: line-through; }
.price-amount { font-family: var(--font-display); font-size: 60px; font-weight: 900; line-height: 1; color: var(--c-dark); }
.price-amount sup { font-size: 24px; vertical-align: top; margin-top: 12px; font-weight: 700; }
.price-note { font-size: 13px; color: var(--c-muted); align-self: flex-end; padding-bottom: 8px; }
.pricing-features { margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; }
.pricing-features li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--c-text); }
.pricing-features li svg { width: 18px; height: 18px; color: #10B981; flex-shrink: 0; }
.pricing-trust {
  display: flex; gap: 16px; justify-content: center; margin: 16px 0; flex-wrap: wrap;
  font-size: 13px; color: var(--c-muted);
}
.pricing-trust svg { width: 14px; height: 14px; }
.pricing-trust span { display: flex; align-items: center; gap: 5px; }
.pricing-note { text-align: center; font-size: 12px; color: var(--c-muted); margin-top: 8px; }

.compare-card {
  background: var(--c-white); border-radius: var(--radius); padding: 28px;
  border: 1.5px solid var(--c-border); margin-bottom: 16px;
}
.compare-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.compare-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--c-border); }
.compare-row:last-child { border-bottom: none; }
.compare-row span { width: 20px; flex-shrink: 0; font-size: 16px; font-weight: 700; }
.compare-row.bad { color: var(--c-muted); }
.compare-row.bad span { color: #EF4444; }
.compare-row.good { color: var(--c-primary); font-weight: 600; }
.compare-row.good span { color: #10B981; }

.guarantee-card {
  background: linear-gradient(135deg, #F5F3FF, #FDF2F8); border-radius: var(--radius);
  padding: 24px; border: 1px solid rgba(124,58,237,.2); text-align: center;
}
.guarantee-icon { font-size: 40px; margin-bottom: 12px; }
.guarantee-card h4 { font-size: 16px; font-weight: 700; color: var(--c-dark); margin-bottom: 8px; }
.guarantee-card p { font-size: 13px; color: var(--c-muted); line-height: 1.6; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border: none; border-left: 4px solid var(--c-primary); border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, rgba(124,58,237,.07) 0%, rgba(236,72,153,.05) 100%);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.faq-item.open { border-color: var(--c-primary); box-shadow: var(--shadow); background: linear-gradient(135deg, rgba(124,58,237,.13) 0%, rgba(236,72,153,.09) 100%); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: none; border: none; text-align: left;
  font-size: 16px; font-weight: 600; color: var(--c-text); cursor: pointer;
  transition: color var(--transition);
}
/* .faq-q is a native <button> - Astra (parent theme) applies its own global
   button hover/focus background (plain blue) to every <button> site-wide
   unless overridden more specifically. Pinning background/color explicitly
   with !important for every state, not just :hover, is what actually beats
   it (matches the same fix already applied for the WarriorPlus pages). */
.faq-grid .faq-item .faq-q,
.faq-grid .faq-item .faq-q:hover,
.faq-grid .faq-item .faq-q:focus,
.faq-grid .faq-item .faq-q:focus-visible,
.faq-grid .faq-item .faq-q:active,
.faq-grid .faq-item.open .faq-q {
  background: none !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.faq-q:hover, .faq-q:focus-visible { color: var(--c-primary); }
.faq-item.open .faq-q { color: var(--c-primary); }
.faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--c-border); transition: all var(--transition); }
.faq-icon svg { width: 14px; height: 14px; }
.faq-item.open .faq-icon { background: var(--c-primary); border-color: var(--c-primary); color: #fff; transform: rotate(0deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
.faq-a.open { max-height: 500px; }
.faq-a-inner { padding: 0 24px 20px; font-size: 15px; color: var(--c-muted); line-height: 1.7; }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  position: relative; background: var(--c-dark); padding: 120px 0; overflow: hidden;
  text-align: center;
}
.cta-bg { position: absolute; inset: 0; }
.orb-cta-1 { width: 500px; height: 500px; background: rgba(124,58,237,.35); top: -100px; right: -100px; }
.orb-cta-2 { width: 400px; height: 400px; background: rgba(236,72,153,.2); bottom: -100px; left: -100px; }
.cta-inner { position: relative; z-index: 2; }
.cta-section h2 { font-family: var(--font-display); font-size: clamp(28px,4vw,52px); font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.15; }
.cta-section p { font-size: 18px; color: rgba(255,255,255,.65); margin-bottom: 36px; max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-trust { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.cta-trust span { font-size: 14px; color: rgba(255,255,255,.5); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #07030F; }
.footer-top { padding: 72px 0 48px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand .site-logo { margin-bottom: 16px; }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.6; margin-bottom: 16px; max-width: 260px; }
.footer-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge-item { font-size: 12px; color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); padding: 5px 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,.08); }
.footer-links h4 { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.footer-links ul { display: flex; flex-direction: column; gap: 8px; }
.footer-links a { font-size: 14px; color: rgba(255,255,255,.5); transition: color var(--transition); }
.footer-links a:hover { color: #fff; opacity: 1; }
.footer-bottom { padding: 24px 0; border-top: 1px solid rgba(255,255,255,.06); text-align: center; }
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,.3); line-height: 1.6; }
.footer-disclaimer { margin-top: 4px; font-size: 11px !important; opacity: .6; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background: var(--c-dark); padding: 120px 0 80px;
  text-align: center; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.25) 0%, transparent 70%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(28px,4vw,48px); font-weight: 800; color: #fff; margin-bottom: 12px; }
.page-hero p { font-size: 17px; color: rgba(255,255,255,.6); max-width: 540px; margin: 0 auto; }
.page-meta { font-size: 13px; color: rgba(255,255,255,.4) !important; margin-top: 8px; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: 1fr 360px; gap: 48px; padding-top: 64px; padding-bottom: 80px; align-items: start; }
.contact-form-wrap h2 { font-size: 26px; font-weight: 800; margin-bottom: 28px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--c-text); text-transform: uppercase; letter-spacing: .5px; }
.req { color: var(--c-secondary); }
.form-group input,
.form-group select,
.form-group textarea {
  border: 2px solid var(--c-border); border-radius: 10px; padding: 13px 16px;
  font-size: 15px; color: var(--c-text); font-family: var(--font);
  background: var(--c-white); outline: none; width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-result { padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; display: none; margin-top: 8px; }
.form-result.success { background: #D1FAE5; color: #065F46; display: block; }
.form-result.error   { background: #FEE2E2; color: #991B1B; display: block; }
.info-card {
  background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: var(--radius);
  padding: 24px; margin-bottom: 16px;
}
.info-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(124,58,237,.1); color: var(--c-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.info-icon svg { width: 22px; height: 22px; }
.info-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.info-card p { font-size: 14px; color: var(--c-muted); line-height: 1.6; }
.info-link { color: var(--c-primary); font-weight: 600; font-size: 14px; display: block; margin-top: 8px; }
.info-note { display: block; font-size: 12px; color: var(--c-muted); margin-top: 4px; }

/* ============================================================
   HELP CENTER
   ============================================================ */
.help-topics { position: relative; z-index: 3; margin-top: -48px; }
.help-topics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.help-topic-card {
  position: relative; display: block; background: var(--c-white);
  border: 1.5px solid var(--c-border); border-radius: var(--radius-lg);
  padding: 26px 24px; text-decoration: none; color: var(--c-text);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.help-topic-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: rgba(124,58,237,.35);
}
.help-topic-icon {
  width: 48px; height: 48px; border-radius: 13px; color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(124,58,237,.25);
}
.help-topic-icon svg { width: 22px; height: 22px; }
.help-topic-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.help-topic-card p  { font-size: 13.5px; color: var(--c-muted); line-height: 1.55; }
.help-topic-arrow {
  position: absolute; top: 24px; right: 20px; color: var(--c-border);
  transition: color var(--transition), transform var(--transition);
}
.help-topic-arrow svg { width: 16px; height: 16px; }
.help-topic-card:hover .help-topic-arrow { color: var(--c-primary); transform: translateX(3px); }

.help-guides { padding: 64px 24px 80px; max-width: 860px; }
.help-section { margin-bottom: 56px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.help-section-head { margin-bottom: 22px; }
.help-section-head h2 { font-family: var(--font-display); font-size: clamp(22px,3vw,32px); font-weight: 800; margin-top: 10px; }

.help-cta {
  text-align: center; background: linear-gradient(135deg, #1E1B4B, #4C1D95);
  border-radius: var(--radius-lg); padding: 56px 32px; color: #fff;
  box-shadow: 0 20px 60px rgba(76,29,149,.3);
}
.help-cta-icon { font-size: 44px; margin-bottom: 14px; }
.help-cta h2 { font-family: var(--font-display); font-size: 28px; font-weight: 800; margin-bottom: 10px; color: #fff; }
.help-cta p  { color: rgba(255,255,255,.7); margin-bottom: 26px; }

@media (max-width: 900px) { .help-topics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .help-topics-grid { grid-template-columns: 1fr; } }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
/* Hero */
.legal-hero { text-align: center; }
.legal-hero-icon {
  width: 56px; height: 56px; border-radius: 16px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; box-shadow: 0 10px 30px rgba(124,58,237,.35);
}
.legal-hero-icon svg { width: 26px; height: 26px; }
.legal-hero-meta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.legal-meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7); font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 20px;
}
.legal-meta-chip svg { width: 13px; height: 13px; }

/* Layout */
.legal-content { display: grid; grid-template-columns: 1fr 280px; gap: 48px; padding: 64px 24px 80px; align-items: start; }
.legal-body-wrap { min-width: 0; }

/* Numbered section headings */
.legal-body { font-size: 15.5px; line-height: 1.85; color: var(--c-text); counter-reset: legal-section; }
.legal-body-numbered h2 {
  counter-increment: legal-section;
  font-size: 21px; font-weight: 800; margin: 44px 0 16px; color: var(--c-dark);
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px; border-bottom: 2px solid var(--c-border);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.legal-body-numbered h2::before {
  content: counter(legal-section, decimal-leading-zero);
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  background: var(--c-grad); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
}
.legal-body-numbered h2:first-of-type { margin-top: 0; }
.legal-body h3 { font-size: 16.5px; font-weight: 700; margin: 22px 0 10px; color: var(--c-dark); }
.legal-body p  { margin-bottom: 16px; }
.legal-body ul { margin: 0 0 16px 24px; list-style: disc; }
.legal-body li { margin-bottom: 6px; }
.legal-body a  { color: var(--c-primary); font-weight: 600; }
.legal-body strong { color: var(--c-dark); }
.legal-body em { color: var(--c-muted); }

/* Closing "agree" callout */
.legal-agree-card {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 44px; padding: 26px 28px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg,#F5F3FF,#FDF2F8);
  border: 1.5px solid rgba(124,58,237,.2);
}
.legal-agree-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--c-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.legal-agree-icon svg { width: 20px; height: 20px; }
.legal-agree-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.legal-agree-card p  { font-size: 13px; color: var(--c-muted); margin: 0; }
.legal-agree-card > div { flex: 1; min-width: 180px; }

/* Sidebar cards */
.legal-nav-card { background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; position: sticky; top: calc(var(--nav-h) + 20px); box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.legal-nav-card h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--c-muted); margin-bottom: 14px; }
.legal-nav-card ul { display: flex; flex-direction: column; gap: 2px; }
.legal-nav-card a { font-size: 13.5px; color: var(--c-text); display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--c-border); transition: color .15s, padding-left .15s; }
.legal-nav-card a svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--c-muted); }
.legal-nav-card a:hover { color: var(--c-primary); padding-left: 4px; }
.legal-nav-card a.is-current { color: var(--c-primary); font-weight: 700; }
.legal-nav-card a.is-current svg { color: var(--c-primary); }
.legal-toc a { border-left: 2px solid transparent; padding-left: 10px; margin-left: -10px; }
.legal-toc a.is-active { color: var(--c-primary); font-weight: 700; border-left-color: var(--c-primary); background: rgba(124,58,237,.05); }
.legal-contact-card { background: linear-gradient(135deg,#F5F3FF,#FDF2F8); border: 1px solid rgba(124,58,237,.2); border-radius: var(--radius); padding: 24px; text-align: center; }
.legal-contact-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.legal-contact-card p { font-size: 13px; color: var(--c-muted); margin-bottom: 16px; }

@media (max-width: 860px) {
  .legal-content { grid-template-columns: 1fr; }
  .legal-sidebar { order: -1; }
  .legal-nav-card { position: static; }
}

/* ============================================================
   SUCCESS PAGE
   ============================================================ */
.success-page { background: var(--c-bg); min-height: calc(100vh - var(--nav-h)); padding: var(--nav-h) 0 0; display: flex; align-items: center; }
/* The WarriorPlus welcome page runs without .site-header (see header.php), so
   the --nav-h top padding and the matching min-height subtraction above are
   both reserving space for an element that isn't on the page - left in, they
   push the card down and leave an empty strip above it. page-payment-success
   still uses the header, hence scoping this to the body class. */
.no-site-header .success-page { padding-top: 0; min-height: 100vh; }
.success-inner { padding: 60px 24px; }
.success-card { background: var(--c-white); border-radius: var(--radius-lg); padding: 56px 48px; max-width: 680px; margin: 0 auto; text-align: center; box-shadow: var(--shadow-lg); border: 1.5px solid var(--c-border); }
.success-icon { font-size: 64px; margin-bottom: 20px; }
.success-card h1 { font-family: var(--font-display); font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.success-sub { font-size: 18px; color: var(--c-muted); margin-bottom: 32px; }
.success-steps { text-align: left; background: var(--c-bg); border-radius: 12px; padding: 28px; margin: 28px 0; }
.success-steps h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.success-steps ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.success-steps li { font-size: 14px; line-height: 1.6; }
.success-note { font-size: 13px; color: var(--c-muted); margin-top: 18px; }
.success-feedback { text-align: left; background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.15); border-radius: 12px; padding: 24px 28px; margin: 28px 0; }
.success-feedback h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--c-dark); }
.success-feedback p { font-size: 14px; color: var(--c-muted); line-height: 1.6; }
.success-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 13px; }
.success-links a { color: var(--c-muted); }
.success-links a:hover { color: var(--c-primary); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.animate-fade-up {
  opacity: 0; transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--delay, 0s);
}
.animate-fade-up.visible { opacity: 1; transform: translateY(0); }

.animate-fade-left {
  opacity: 0; transform: translateX(40px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: .2s;
}
.animate-fade-left.visible { opacity: 1; transform: translateX(0); }

@keyframes floatBadge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.animate-float       { animation: floatBadge 3.5s ease-in-out infinite; }
.animate-float-delay { animation: floatBadge 3.5s ease-in-out -.8s infinite; }

/* Loading spinner on checkout btn */
.btn.loading { opacity: .7; pointer-events: none; }
.btn.loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: eb-spin .6s linear infinite; margin-left: 8px; }
@keyframes eb-spin { to { transform: rotate(360deg); } }

/* Checkout error toast */
.checkout-toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: #1F2937; color: #fff; padding: 14px 24px; border-radius: 10px;
  font-size: 14px; font-weight: 600; z-index: 9999;
  box-shadow: 0 8px 30px rgba(0,0,0,.3); opacity: 0;
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
  border-left: 4px solid #EF4444; white-space: nowrap;
}
.checkout-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   BLOG FRONT PAGE SECTION
   ============================================================ */
.blog-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-bottom: 40px;
}
.blog-fp-card {
  background: var(--c-white); border-radius: var(--radius-lg);
  border: 1.5px solid var(--c-border); overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex; flex-direction: column;
}
.blog-fp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(124,58,237,.25); }
.blog-fp-img-link { display: block; position: relative; overflow: hidden; aspect-ratio: 16/9; flex-shrink: 0; background: var(--c-bg); }
.blog-fp-img { width:100%; height:100%; object-fit:contain; transition: transform .4s ease; display: block; }
.blog-fp-card:hover .blog-fp-img { transform: scale(1.04); }
.blog-fp-img-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
}
.blog-fp-cat {
  position:absolute; top:12px; left:12px;
  color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.5px;
}
.blog-fp-body { padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.blog-fp-title { font-size:16px; font-weight:700; line-height:1.35; }
.blog-fp-title a { color:var(--c-dark); transition:color var(--transition); }
.blog-fp-title a:hover { color:var(--c-primary); }
.blog-fp-excerpt { font-size:13px; color:var(--c-muted); line-height:1.6; flex:1; }
.blog-fp-meta {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12px; color:var(--c-muted); margin-top:auto; padding-top:12px;
  border-top:1px solid var(--c-border);
}
.blog-fp-avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; }
.blog-fp-read {
  margin-left:auto; color:var(--c-primary); font-weight:600; font-size:12px;
  display:flex; align-items:center; gap:4px; white-space:nowrap;
  transition:gap var(--transition);
}
.blog-fp-read:hover { gap:7px; opacity:1; color:var(--c-primary); }
.blog-fp-read svg { flex-shrink:0; }
.blog-fp-footer { text-align:center; }

/* Blog archive / home.php */
.archive-hero {
  background:var(--c-dark); padding:110px 0 64px; text-align:center; position:relative; overflow:hidden;
}
.archive-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.28) 0%, transparent 60%);
}
/* Subtle dot-grid pattern */
.archive-hero-bg-grid {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.archive-hero-inner { position:relative; z-index:2; }
.archive-hero .container { position:relative; z-index:2; }
.archive-title { font-size:clamp(26px,4vw,46px); font-weight:800; color:#fff; margin-bottom:12px; line-height:1.2; }
.archive-sub   { font-size:16px; color:rgba(255,255,255,.6); max-width:500px; margin:0 auto 24px; }
.archive-search-inline { max-width:440px; margin:0 auto; }
/* Search form styles (searchform.php template) */
.search-form-inner {
  position: relative; display: flex; align-items: center; gap: 8px;
}
.search-form-inner .search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; flex-shrink: 0;
  color: rgba(255,255,255,.5); pointer-events: none;
}
.search-form-inner .search-field {
  flex: 1; padding: 12px 14px 12px 40px; min-width: 0;
  background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 10px; outline: none;
  font-size: 14px; color: #fff; font-family: var(--font);
  transition: border-color .2s, background .2s;
}
.search-form-inner .search-field:focus { border-color: var(--c-primary); background: rgba(255,255,255,.15); }
.search-form-inner .search-field::placeholder { color: rgba(255,255,255,.4); }
.search-form-inner .search-submit {
  padding: 12px 18px; background: var(--c-grad); border: none; border-radius: 10px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #fff; transition: transform .15s, box-shadow .15s, opacity .15s; flex-shrink: 0; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(124,58,237,.4);
}
.search-form-inner .search-submit:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(124,58,237,.5); }
.search-form-inner .search-submit:active { transform: translateY(0); }
.search-form-inner .search-submit svg { width: 15px; height: 15px; flex-shrink: 0; }
.search-submit-label { font-size: 13px; font-weight: 700; color: inherit; }

/* ── FEATURED POST ── */
.featured-post-wrap {
  background: linear-gradient(180deg, var(--c-dark) 0%, #0F0A1E 40%, var(--c-bg) 100%);
  padding: 0 24px 60px;
}
.featured-post {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
  background: #16103A;
}
/* Image side */
.fp-image-side {
  position: relative; overflow: hidden; min-height: 420px; background: #0F0A1E;
}
.fp-img-link { display: block; width: 100%; height: 100%; }
.fp-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform .6s ease;
}
.featured-post:hover .fp-img { transform: scale(1.04); }
.fp-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 420px;
}
.fp-image-badge {
  position: absolute; top: 18px; left: 18px;
  background: linear-gradient(135deg,#7C3AED,#EC4899);
  color: #fff; font-size: 10px; font-weight: 800;
  padding: 5px 14px; border-radius: 20px; letter-spacing: .8px;
  text-transform: uppercase; box-shadow: 0 4px 16px rgba(124,58,237,.45);
}

/* Content side */
.fp-content-side {
  display: flex; flex-direction: column; justify-content: center;
  padding: 52px 48px; gap: 16px;
}
.fp-cat {
  display: inline-block; color: #fff; font-size: 11px; font-weight: 700;
  padding: 5px 14px; border-radius: 20px; text-decoration: none;
  text-transform: uppercase; letter-spacing: .5px; align-self: flex-start;
  transition: opacity .2s;
}
.fp-cat:hover { opacity: .85; }
.fp-title {
  font-size: clamp(20px, 2.5vw, 30px); font-weight: 900; line-height: 1.25; margin: 0;
}
.fp-title a { color: #fff; text-decoration: none; transition: color .2s; }
.fp-title a:hover { color: rgba(255,255,255,.8); opacity: 1; }
.fp-excerpt {
  font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.75; margin: 0;
}
.fp-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.fp-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255,255,255,.15); }
.fp-meta-text { display: flex; flex-direction: column; gap: 2px; }
.fp-author { font-size: 14px; font-weight: 700; color: #fff; }
.fp-date-rt { font-size: 12px; color: rgba(255,255,255,.45); }
.fp-read-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}

/* Posts section header */
.posts-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.posts-section-title { font-size: 20px; font-weight: 800; color: var(--c-dark); position: relative; padding-left: 14px; }
.posts-section-title::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 4px; border-radius: 4px;
  background: var(--c-grad);
}

/* 2-column post card grid */
.posts-grid-2col { grid-template-columns: repeat(2,1fr); gap: 28px; }

.archive-layout { display:grid; grid-template-columns:1fr 300px; gap:48px; padding:60px 24px 80px; align-items:start; }
.posts-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }

/* Post cards used by home.php / archive.php — redesigned as vertical cards
   (image on top, full width, natural aspect ratio) instead of the old
   horizontal layout, specifically so featured images always show complete
   and uncropped rather than squeezed into a fixed-size box. */
.post-card {
  display:flex; flex-direction:column; background:var(--c-white);
  border-radius:var(--radius-lg); border:1.5px solid var(--c-border);
  overflow:hidden; transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(124,58,237,.25); }
.post-card-img-link {
  position:relative; display:block; background: var(--c-bg); overflow:hidden;
}
.post-card-img { width:100%; height:auto; display:block; transition:transform .4s ease; }
.post-card:hover .post-card-img { transform:scale(1.03); }
.post-card-img-placeholder {
  width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
}
.post-card-img-placeholder svg { width:56px; height:56px; opacity:.7; }
.post-card-cat {
  position:absolute; top:12px; left:12px; color:#fff;
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.5px;
}
.post-card-body {
  padding:22px; flex:1; display:flex; flex-direction:column; gap:8px;
}
.post-card-title { font-size:18px; font-weight:700; line-height:1.35; margin:0; }
.post-card-title a { color:var(--c-dark); transition:color var(--transition); }
.post-card-title a:hover { color:var(--c-primary); }
.post-card-excerpt { font-size:14px; color:var(--c-muted); line-height:1.6; flex:1; }
.post-card-meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:12px; color:var(--c-muted); padding-top:12px;
  border-top:1px solid var(--c-border); margin-top:auto;
}
.post-card-author { display:flex; align-items:center; gap:6px; }
.author-avatar    { width:26px; height:26px; border-radius:50%; object-fit:cover; }
.post-card-details { display:flex; align-items:center; gap:4px; }
.meta-dot { opacity:.4; }
.post-card-read {
  margin-left:auto; color:var(--c-primary); font-weight:600; font-size:12px;
  display:flex; align-items:center; gap:4px; white-space:nowrap;
  transition:gap var(--transition); text-decoration:none;
}
.post-card-read:hover { gap:7px; opacity:1; color:var(--c-primary); }
.post-card-read svg { width:14px; height:14px; flex-shrink:0; }
@media (max-width:900px) {
  .posts-grid, .posts-grid-2col { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .post-card-body { padding:18px; }
}
.archive-pagination { margin-top:40px; }
.archive-pagination ul { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; list-style:none; }
.archive-pagination li a,
.archive-pagination li span {
  display:flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:10px; font-size:14px; font-weight:600; border:1.5px solid var(--c-border);
  color:var(--c-text); text-decoration:none; transition:all var(--transition); background:var(--c-white);
}
.archive-pagination li .current,
.archive-pagination li a:hover { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.archive-pagination li a[rel] { font-size:13px; width:auto; padding:0 16px; }

.no-posts-found {
  text-align:center; padding:80px 40px; background:var(--c-white);
  border-radius:var(--radius-lg); border:1.5px solid var(--c-border);
}
.no-posts-icon { font-size:56px; margin-bottom:16px; }
.no-posts-found h2 { font-size:24px; font-weight:700; margin-bottom:8px; }
.no-posts-found p  { color:var(--c-muted); margin-bottom:24px; }

@media (max-width:1024px) { .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px)  {
  .blog-grid       { grid-template-columns:1fr; }
  .archive-layout  { grid-template-columns:1fr; }
  .featured-post   { grid-template-columns:1fr; }
  .fp-image-side   { min-height: 260px; }
  .fp-content-side { padding: 32px 28px; }
  .fp-read-btn     { margin-left: 0; }
}
@media (max-width:640px) {
  .posts-grid-2col { grid-template-columns:1fr; }
  .featured-post-wrap { padding-bottom: 40px; }
}

/* ============================================================
   CREATOR PAGE + FREE TIER
   ============================================================ */
.creator-page .site-footer { display: none; }
.btn-creator {
  background: linear-gradient(135deg,#059669,#10B981); color: #fff;
  box-shadow: 0 3px 12px rgba(16,185,129,.35);
}
.btn-creator:hover { box-shadow: 0 6px 20px rgba(16,185,129,.5); color: #fff; opacity: 1; }
.mobile-create-link { color: #10B981 !important; font-weight: 700 !important; }
.pricing-free-tier { margin-top: 16px; border-top: 1px solid var(--c-border); padding-top: 16px; }
.free-tier-inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #ECFDF5; border-radius: 10px; padding: 12px 16px; border: 1px solid #A7F3D0;
}
.free-tier-badge {
  background: #10B981; color: #fff; font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 4px; letter-spacing: .5px; flex-shrink: 0;
}
.free-tier-inner span { font-size: 13px; color: #065F46; flex: 1; min-width: 0; }
.free-tier-link { font-size: 13px; font-weight: 700; color: #059669; white-space: nowrap; flex-shrink: 0; }
.free-tier-link:hover { color: #047857; opacity: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .features-grid      { grid-template-columns: repeat(2,1fr); }
  .testimonials-grid  { grid-template-columns: repeat(2,1fr); }
  .who-grid            { grid-template-columns: repeat(2,1fr); }
  .pricing-wrapper    { grid-template-columns: 1fr; max-width: 540px; }
  .pricing-cards-row  { grid-template-columns: 1fr; }
  .steps-grid         { grid-template-columns: 1fr; gap: 24px; }
  .step-connector     { display: none; }
  .stats-grid         { grid-template-columns: repeat(2,1fr); }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .site-nav, .header-cta { display: none; }
  .hamburger  { display: flex; }
  .hero-inner { padding-top: 40px; }
  .hero-cta   { justify-content: center; }
  .trust-items { justify-content: center; }
  .trust-stars { justify-content: center; }
  .hero-title { font-size: 32px; }
  .hero-subheadline { font-size: 16px; }
  .hero-sub   { font-size: 16px; }
  .section    { padding: 70px 0; }
  .features-grid     { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .who-grid           { grid-template-columns: 1fr; }
  .contact-layout    { grid-template-columns: 1fr; }
  .legal-content     { grid-template-columns: 1fr; }
  .legal-nav-card    { position: static; }
  .form-row          { grid-template-columns: 1fr; }
  .footer-grid       { grid-template-columns: 1fr; }
  .cta-trust         { flex-direction: column; align-items: center; }
  .stats-grid        { grid-template-columns: repeat(2,1fr); }
  .page-hero         { padding: 100px 0 60px; }

  /* Pricing card had no mobile sizing at all - the 60px price, the
     nowrap "EARLY ACCESS PRICING" badge, and 40px of padding easily add
     up to more than a phone's viewport width. Since body has
     overflow-x:hidden (to stop unrelated decorative elements causing a
     horizontal scrollbar), that overflow doesn't scroll - it just gets
     silently clipped on the right, cutting text off with no visual sign
     anything is wrong until you count characters. */
  .pricing-card { padding: 32px 22px; }
  .pricing-badge { font-size: 11px; padding: 4px 14px; letter-spacing: .6px; max-width: calc(100% - 24px); white-space: normal; text-align: center; }
  .pricing-header h3 { font-size: 22px; }
  .price-display { flex-wrap: wrap; gap: 6px 10px; }
  .price-amount { font-size: 44px; }
  .price-amount sup { font-size: 18px; margin-top: 8px; }
  .price-original { font-size: 18px; }
}

@media (max-width: 480px) {
  .btn-xl  { padding: 14px 22px; font-size: 15px; }
  .hero-title { font-size: 28px; }
  .stat-num   { font-size: 16px; white-space: normal; }
  .success-card { padding: 36px 24px; }

  .pricing-card { padding: 26px 16px; }
  .price-amount { font-size: 36px; }
  .price-amount sup { font-size: 15px; margin-top: 6px; }
  .pricing-trust { gap: 10px; }
}

/* ============================================================
   BLOG SIDEBAR
   ============================================================ */
.sidebar-wrap { position: sticky; top: 100px; }
.sidebar { display: flex; flex-direction: column; gap: 24px; }
.sidebar-widget {
  background: var(--c-white); border-radius: var(--radius-lg);
  border: 1.5px solid var(--c-border); padding: 22px;
}
.widget-title {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; color: var(--c-muted); margin-bottom: 16px;
}

/* Search widget — light card context, so the translucent-white styling
   used on the dark hero variants (.archive-search-inline / .search-hero-form)
   must be overridden here or the input text/icon render invisible (white on white). */
.widget-search .search-icon { color: var(--c-muted); }
.widget-search .search-field {
  background: var(--c-bg); border: 1.5px solid var(--c-border); color: var(--c-text);
}
.widget-search .search-field:focus { border-color: var(--c-primary); background: var(--c-white); }
.widget-search .search-field::placeholder { color: var(--c-muted); }

/* Recent posts widget */
.recent-posts-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.recent-post-item  { display: flex; align-items: center; gap: 12px; }
.recent-thumb {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 9px;
  overflow: hidden; display: block; background: var(--c-bg);
}
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-thumb-placeholder {
  background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(236,72,153,.1));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--c-primary);
}
.recent-post-info  { flex: 1; min-width: 0; }
.recent-post-title {
  display: block; font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--c-text); text-decoration: none; transition: color .2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-post-title:hover { color: var(--c-primary); }
.recent-post-date  { font-size: 11px; color: var(--c-muted); }
.no-posts-note     { font-size: 13px; color: var(--c-muted); }

/* Category cloud */
.cat-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--c-bg); color: var(--c-text); border: 1.5px solid var(--c-border);
  text-decoration: none; transition: all .2s;
}
.cat-pill:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; opacity: 1; }
.cat-count {
  background: rgba(0,0,0,.08); border-radius: 10px;
  padding: 1px 7px; font-size: 10px;
}
.cat-pill:hover .cat-count { background: rgba(255,255,255,.2); }

/* Sidebar CTA */
.sidebar-cta { text-align: center; }
.sidebar-cta-icon { font-size: 40px; margin-bottom: 12px; }
.sidebar-cta h4 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.sidebar-cta p  { font-size: 13px; color: var(--c-muted); margin-bottom: 16px; }
.sidebar-cta-btn { width: 100%; justify-content: center; }
.btn-sm { padding: 9px 18px; font-size: 13px; }

/* ============================================================
   SINGLE ARTICLE PAGE
   ============================================================ */
.single-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--c-dark) 0%, #2D1B69 100%);
  padding: 120px 0 56px;
}
.single-hero.has-image { padding-bottom: 56px; }
.single-hero-inner { position: relative; z-index: 2; }

/* Featured image shown as a card below the hero — never behind the title.
   Capped to a smaller, centered size (not full page width) but still shows
   the complete image uncropped — height:auto never crops, max-height + the
   contain fallback just stop it from ever getting oversized. */
.single-feat-img {
  max-width: 760px; margin: 32px auto 40px; padding: 0 24px;
  position: relative; z-index: 3;
}
/* Gradient "picture frame" — a thin brand-color border ring plus a soft
   colored glow, so the featured image reads as a designed element on the
   page rather than a plain photo. */
.single-feat-img-frame {
  padding: 6px; line-height: 0; border-radius: calc(var(--radius-lg) + 6px);
  background: var(--c-grad);
  box-shadow: 0 24px 60px rgba(124,58,237,.28), 0 8px 24px rgba(0,0,0,.12);
}
.single-feat-img-el,
.single-feat-img img {
  /* No max-height/object-fit/white backing here on purpose — those caused
     letterboxing (visible white bars) whenever the image's aspect ratio
     didn't exactly match the box. height:auto means the frame always
     matches the image exactly, so the gradient border is the only thing
     visible around it, never white. */
  width: 100%; height: auto; display: block; border-radius: var(--radius-lg);
}

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 14px;
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,.6); text-decoration: none; }
.breadcrumb a:hover { color: #fff; opacity: 1; }
.breadcrumb span { opacity: .4; }

.single-cat-badge {
  display: inline-block; color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 20px; text-decoration: none;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px;
}
.single-title {
  font-size: clamp(24px, 4vw, 48px); font-weight: 900;
  color: #fff; line-height: 1.15; margin-bottom: 20px;
  max-width: 820px;
}
.single-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.single-author { display: flex; align-items: center; gap: 10px; }
.single-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.2); }
.author-name  { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.author-role  { font-size: 12px; color: rgba(255,255,255,.5); }
.single-meta-details {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: rgba(255,255,255,.6);
}

/* Layout */
.single-content-wrap { padding: 60px 24px 80px; }
.single-layout { display: grid; grid-template-columns: 40px 1fr 300px; gap: 40px; align-items: start; max-width: 1200px; margin: 0 auto; }

/* Share bar */
.share-bar {
  position: sticky; top: 100px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.share-btn {
  width: 40px; height: 40px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center;
  background: var(--c-white); border: 1.5px solid var(--c-border);
  cursor: pointer; transition: all .2s; text-decoration: none; color: var(--c-text);
}
.share-btn:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; opacity: 1; }
.share-btn svg  { width: 16px; height: 16px; flex-shrink: 0; }
.share-tooltip {
  position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
  background: #1F2937; color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.share-copy { position: relative; }
.share-copy.copied .share-tooltip { opacity: 1; }

/* Article body */
.single-article { min-width: 0; }
.single-body {
  font-size: 17px; line-height: 1.85; color: var(--c-text);
}
.single-body h2 { font-size: 26px; font-weight: 800; margin: 40px 0 14px; color: var(--c-dark); line-height: 1.25; }
.single-body h3 { font-size: 20px; font-weight: 700; margin: 30px 0 10px; color: var(--c-dark); }
.single-body h4 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
.single-body p  { margin-bottom: 20px; }
.single-body a  { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.single-body ul, .single-body ol { margin: 0 0 20px 24px; }
.single-body li { margin-bottom: 8px; }
.single-body img {
  max-width: 100%; height: auto; border-radius: var(--radius); display: block;
  margin: 28px auto; box-shadow: 0 8px 32px rgba(0,0,0,.1);
}
.single-body blockquote {
  border-left: 4px solid var(--c-primary); padding: 16px 24px;
  margin: 28px 0; background: #F5F3FF; border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic; font-size: 18px; color: #4B5563;
}
.single-body pre {
  background: #1E1B4B; color: #C4B5FD; padding: 20px 24px;
  border-radius: var(--radius); overflow-x: auto; font-family: monospace;
  font-size: 14px; margin-bottom: 24px; line-height: 1.7;
}
.single-body code { background: #F5F3FF; color: var(--c-primary); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: .9em; }
.single-body pre code { background: none; color: inherit; padding: 0; }
.single-body table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 15px; }
.single-body th { background: var(--c-bg); font-weight: 700; }
.single-body th, .single-body td { padding: 10px 14px; border: 1px solid var(--c-border); }
.single-body hr { border: none; border-top: 2px solid var(--c-border); margin: 36px 0; }

/* Tags */
.single-tags {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 36px 0; padding-top: 24px; border-top: 1.5px solid var(--c-border);
  font-size: 13px; font-weight: 600; color: var(--c-muted);
}
.tag-pill {
  padding: 5px 12px; background: var(--c-bg); border: 1.5px solid var(--c-border);
  border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--c-muted);
  text-decoration: none; transition: all .2s;
}
.tag-pill:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; opacity: 1; }

/* Author box */
.author-box {
  display: flex; gap: 20px; padding: 28px; margin: 36px 0;
  background: var(--c-bg); border-radius: var(--radius-lg);
  border: 1.5px solid var(--c-border);
}
.author-box-avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 3px solid var(--c-white); box-shadow: 0 0 0 2px var(--c-border);
}
.author-box-label { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--c-muted); font-weight: 700; }
.author-box-name  { font-size: 18px; font-weight: 800; margin: 4px 0 8px; }
.author-box-bio   { font-size: 14px; color: var(--c-muted); line-height: 1.6; margin: 0; }

/* Post navigation */
.post-nav {
  display: flex; gap: 16px; margin: 40px 0;
  padding-top: 32px; border-top: 1.5px solid var(--c-border);
}
.post-nav-item {
  flex: 1; padding: 18px 20px; background: var(--c-white);
  border: 1.5px solid var(--c-border); border-radius: var(--radius-lg);
  text-decoration: none; transition: all .2s; display: flex; flex-direction: column; gap: 4px;
}
.post-nav-item:hover { border-color: var(--c-primary); box-shadow: var(--shadow); opacity: 1; }
.post-nav-next { text-align: right; }
.post-nav-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--c-muted); }
.post-nav-title { font-size: 14px; font-weight: 700; color: var(--c-text); line-height: 1.4; }

/* Related posts */
.related-posts { margin: 40px 0; padding-top: 32px; border-top: 1.5px solid var(--c-border); }
.related-title { font-size: 20px; font-weight: 800; margin-bottom: 20px; }
.related-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.related-grid .post-card { flex-direction: column; }
.related-grid .post-card-img-link { width: 100%; height: 160px; }
.related-grid .post-card-body { padding: 16px; }

/* Comments */
.comments-wrap { margin-top: 40px; }
.comments-wrap .comment-list { list-style: none; }
.comments-wrap .comment { padding: 20px 0; border-bottom: 1px solid var(--c-border); }
.comments-wrap .comment-author b { font-size: 14px; font-weight: 700; }
.comments-wrap .comment-metadata { font-size: 12px; color: var(--c-muted); margin-top: 2px; }
.comments-wrap .comment-body p { font-size: 15px; margin-top: 10px; }
.comments-wrap .comment-respond { margin-top: 32px; }
.comments-wrap .comment-reply-title { font-size: 20px; font-weight: 800; margin-bottom: 16px; }
.comments-wrap .comment-form-comment label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.comments-wrap textarea, .comments-wrap input[type="text"], .comments-wrap input[type="email"] {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--c-border);
  border-radius: 9px; font-size: 14px; font-family: var(--font); outline: none;
  transition: border-color .2s; margin-bottom: 14px;
}
.comments-wrap textarea:focus, .comments-wrap input:focus { border-color: var(--c-primary); }
.comments-wrap textarea { height: 120px; resize: vertical; }
.comments-wrap .form-submit input {
  background: var(--c-grad); color: #fff; border: none;
  padding: 11px 24px; border-radius: 9px; font-weight: 700;
  font-size: 14px; cursor: pointer;
}

/* Single responsive */
@media (max-width: 1024px) {
  .single-layout { grid-template-columns: 1fr 260px; }
  .share-bar { display: none; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .single-layout { grid-template-columns: 1fr; }
  .single-content-wrap { padding: 32px 16px 60px; }
  .post-nav { flex-direction: column; }
  .related-grid { grid-template-columns: 1fr; }
  .author-box { flex-direction: column; }
}

/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */
.search-hero {
  background: var(--c-dark); padding: 100px 0 56px; text-align: center; position: relative;
}
.search-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.2) 0%, transparent 65%);
}
.search-hero .container { position: relative; z-index: 2; }
.search-hero-title { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.search-hero-sub   { font-size: 15px; color: rgba(255,255,255,.55); margin-bottom: 24px; }
.search-hero-form  { max-width: 480px; margin: 0 auto; }
.search-hero-form .search-form { display: flex; gap: 10px; }
.search-hero-form .search-field {
  flex: 1; padding: 12px 18px; border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 10px; background: rgba(255,255,255,.08); color: #fff;
  font-size: 15px; font-family: var(--font); outline: none;
}
.search-hero-form .search-field::placeholder { color: rgba(255,255,255,.35); }
.search-hero-form .search-field:focus { border-color: var(--c-primary); background: rgba(255,255,255,.12); }
.search-hero-form .search-submit {
  padding: 12px 22px; background: var(--c-grad); color: #fff;
  border: none; border-radius: 10px; font-weight: 700; font-size: 14px;
  cursor: pointer; font-family: var(--font);
}
.search-results-wrap { padding: 50px 24px 80px; }
.search-results-header { margin-bottom: 28px; }
.search-results-header h2 { font-size: 20px; font-weight: 700; }
.search-results-header span { color: var(--c-primary); }
.search-results-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 800px; }
.no-results-found { text-align: center; padding: 60px 40px; }
.no-results-found h2 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.no-results-found p  { color: var(--c-muted); margin-bottom: 24px; }