/* ═══════════════════════════════════════════════════
   RESUMEFLOW — Ana CSS
   Design System: Açık, temiz, profesyonel, modern
═══════════════════════════════════════════════════ */

:root {
  --primary:     #ffffff;
  --accent:      #16a34a;
  --accent-dark: #15803d;
  --accent-hover:#14532d;
  --accent-light: #dcfce7;
  --accent-mid:  #bbf7d0;
  --surface:     #f9fafb;
  --surface-2:   #f3f4f6;
  --bg:          #ffffff;
  --text:        #111827;
  --text-2:      #374151;
  --muted:       #6b7280;
  --muted-2:     #9ca3af;
  --border:      #e5e7eb;
  --border-2:    #d1d5db;
  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   20px;
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --shadow:      0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.1);
  --font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition:  0.2s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; font-size: 16px }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── TYPOGRAPHY ─────────────────────────────────── */
h1,h2,h3,h4,h5 { line-height: 1.25; font-weight: 700; color: var(--text) }
h1 { font-size: clamp(2rem,5vw,3.5rem) }
h2 { font-size: clamp(1.5rem,4vw,2.25rem) }
h3 { font-size: 1.125rem }
a { color: var(--accent); text-decoration: none; transition: color var(--transition) }
a:hover { color: var(--accent-dark) }
p { color: var(--muted) }

/* ─── LAYOUT ─────────────────────────────────────── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px }
.section { padding: 88px 0 }
.text-center { text-align: center }

/* ─── BUTTONS ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(22,163,74,0.3);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(22,163,74,0.4);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1.5px solid var(--border-2);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn-outline:hover:not(:disabled) {
  background: var(--accent-light);
  color: var(--accent-dark);
}

.btn-danger {
  background: #ef4444;
  color: #fff;
}
.btn-danger:hover:not(:disabled) { background: #dc2626 }

.btn-social {
  width: 100%;
  justify-content: center;
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  padding: 12px;
}
.btn-social:hover { background: var(--surface-2); color: var(--text) }

.btn-lg { padding: 13px 28px; font-size: 16px }
.btn-sm { padding: 7px 14px; font-size: 13px }
.btn-block { width: 100%; justify-content: center }

/* ─── CARDS ──────────────────────────────────────── */
.card {
  background: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card-title { font-size: 1rem; font-weight: 600; margin-bottom: 20px; color: var(--text) }

/* ─── BADGES ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.badge-pro { background: linear-gradient(135deg,#f59e0b,#ef4444); color:#fff }
.badge-free { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border) }

/* ─── FORMS ──────────────────────────────────────── */
.form-group { margin-bottom: 16px }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--primary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.1);
}
.form-group textarea { resize: vertical; min-height: 80px }
.form-hint { font-size: 12px; color: var(--muted-2); margin-bottom: 8px }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrap > i {
  position: absolute;
  left: 12px;
  color: var(--muted-2);
  font-size: 14px;
  pointer-events: none;
}
.input-wrap input { padding-left: 36px }
.toggle-password {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--muted-2);
  cursor: pointer;
  font-size: 13px;
}

/* ─── FLASH ──────────────────────────────────────── */
.flash {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 9999;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  max-width: 380px;
  animation: slideIn 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-lg);
}
.flash-success { background: #16a34a; color: #fff }
.flash-error   { background: #ef4444; color: #fff }
.flash-info    { background: #3b82f6; color: #fff }
@keyframes slideIn { from { transform: translateX(110%); opacity:0 } to { transform: translateX(0); opacity:1 } }

/* ─── NAVBAR ─────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
}
.nav-logo:hover { color: var(--text) }
.logo-icon {
  width: 34px;
  height: 34px;
  background: var(--accent);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.logo-icon-sm { width: 26px; height: 26px; font-size: 13px; border-radius: 7px }
.accent { color: var(--accent) }
.nav-links { display: flex; align-items: center; gap: 6px }
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  padding: 7px 12px;
  border-radius: 7px;
  transition: all var(--transition);
  text-decoration: none;
}
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
}

/* ─── HERO ───────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  background: linear-gradient(160deg, #f0fdf4 0%, #ffffff 50%, #eff6ff 100%);
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none }
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
}
.hero-blob-1 { width: 500px; height: 500px; background: #bbf7d0; top: -150px; right: -100px; animation: float 10s ease-in-out infinite }
.hero-blob-2 { width: 400px; height: 400px; background: #dbeafe; bottom: -100px; left: -100px; animation: float 13s ease-in-out infinite reverse }
.hero-blob-3 { width: 300px; height: 300px; background: #d1fae5; top: 40%; left: 35%; animation: float 8s ease-in-out infinite }
@keyframes float {
  0%,100% { transform: translateY(0) scale(1) }
  50% { transform: translateY(-25px) scale(1.04) }
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-light);
  border: 1px solid var(--accent-mid);
  color: var(--accent-dark);
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}
.hero-title {
  font-size: clamp(2.4rem,4.5vw,3.6rem);
  margin-bottom: 18px;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.02em;
}
.gradient-text {
  background: linear-gradient(135deg, var(--accent), #0d9488);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 32px;
  line-height: 1.75;
}
.hero-subtitle strong { color: var(--text-2) }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap }

/* Hero Stats */
.hero-stats {
  display: flex;
  gap: 24px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.hero-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}
.hero-stat span { font-size: 12px; color: var(--muted) }

/* CV Mockup */
.cv-mockup {
  position: relative;
  perspective: 1000px;
}
.cv-mockup-inner {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transform: rotateY(-6deg) rotateX(3deg);
  transition: transform var(--transition);
  animation: mockupFloat 6s ease-in-out infinite;
  border: 1px solid var(--border);
}
.cv-mockup-inner:hover { transform: rotateY(-3deg) rotateX(1.5deg) }
@keyframes mockupFloat {
  0%,100% { transform: rotateY(-6deg) rotateX(3deg) translateY(0) }
  50% { transform: rotateY(-6deg) rotateX(3deg) translateY(-10px) }
}
.cv-mock-template { padding: 22px; min-height: 300px }
.mock-header { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--accent) }
.mock-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,var(--accent),#0d9488); flex-shrink: 0 }
.mock-name { height: 12px; background: var(--text); opacity: 0.8; border-radius: 4px; width: 120px; margin-bottom: 7px }
.mock-title { height: 9px; background: var(--muted-2); border-radius: 4px; width: 90px }
.mock-section { margin-bottom: 14px }
.mock-section-title { height: 7px; background: var(--accent); border-radius: 3px; width: 70px; margin-bottom: 10px }
.mock-line { height: 7px; background: var(--surface-2); border-radius: 3px; margin-bottom: 5px }
.mock-line-short { width: 65% }
.cv-mockup-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(22,163,74,0.12) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.cv-mockup-badge {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-md);
  animation: badgeFloat 4s ease-in-out infinite;
}
.cv-mockup-badge i { color: var(--accent) }
.cv-mockup-badge-1 { bottom: -16px; left: -24px; animation-delay: 0s }
.cv-mockup-badge-2 { top: 20px; right: -32px; animation-delay: 2s }
@keyframes badgeFloat {
  0%,100% { transform: translateY(0) }
  50% { transform: translateY(-7px) }
}

/* ─── TRUST BAR ──────────────────────────────────── */
.trust-bar {
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.trust-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center }
.trust-text { font-size: 12px; color: var(--muted); white-space: nowrap; font-weight: 500 }
.trust-logos { display: flex; gap: 24px; flex-wrap: wrap }
.trust-logo {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: 0.3px;
}

/* ─── SECTION HEADERS ────────────────────────────── */
.section-header { text-align: center; margin-bottom: 52px }
.section-badge {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent-dark);
  border: 1px solid var(--accent-mid);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.section-title { font-size: clamp(1.7rem,3vw,2.2rem); margin-bottom: 12px; color: var(--text) }
.section-sub { font-size: 16px; color: var(--muted); max-width: 520px; margin: 0 auto }

/* ─── HOW IT WORKS ───────────────────────────────── */
.how-it-works { background: var(--surface) }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px }
.step-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  transition: all var(--transition);
  box-shadow: var(--shadow);
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-mid) }
.step-number {
  font-size: 52px;
  font-weight: 900;
  color: var(--accent-light);
  position: absolute;
  top: 16px;
  right: 20px;
  line-height: 1;
}
.step-icon {
  width: 52px;
  height: 52px;
  background: var(--accent-light);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 18px;
}
.step-card h3 { color: var(--text); margin-bottom: 8px; font-size: 1.05rem }
.step-card p { font-size: 14px; line-height: 1.65 }

/* ─── TEMPLATE GALLERY ───────────────────────────── */
.template-grid-preview { display: grid; grid-template-columns: repeat(auto-fill,minmax(172px,1fr)); gap: 20px }
.template-card { cursor: pointer }
.template-thumb {
  aspect-ratio: 3/4;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: all var(--transition);
  padding: 14px;
}
.template-thumb:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent) }
.template-thumb-inner { height: 100%; display: flex; flex-direction: column; gap: 7px }
.tmock-header { height: 36px; border-radius: 4px; background: rgba(0,0,0,0.06) }
.tmock-lines { display: flex; flex-direction: column; gap: 5px; flex: 1; padding-top: 6px }
.tmock-line { height: 7px; background: rgba(0,0,0,0.08); border-radius: 3px }
.tmock-line-sm { width: 60% }
.template-pro-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg,#f59e0b,#ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
}
.template-overlay {
  position: absolute;
  inset: 0;
  background: rgba(22,163,74,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}
.template-thumb:hover .template-overlay { opacity: 1 }
.template-info { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 0 2px }
.template-name { font-size: 14px; font-weight: 600; color: var(--text) }
.template-cat { font-size: 11px; color: var(--muted) }

/* ─── FEATURES ───────────────────────────────────── */
.features { background: var(--surface) }
.features-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(290px,1fr)); gap: 20px }
.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition: all var(--transition);
  box-shadow: var(--shadow);
}
.feature-card:hover { border-color: var(--accent-mid); transform: translateY(-3px); box-shadow: var(--shadow-md) }
.feature-icon {
  width: 50px;
  height: 50px;
  background: var(--accent-light);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 20px;
  margin-bottom: 16px;
}
.feature-card h3 { color: var(--text); margin-bottom: 8px; font-size: 0.95rem; font-weight: 600 }
.feature-card p { font-size: 13.5px; line-height: 1.65 }

/* ─── PRICING ────────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 20px; max-width: 680px; margin: 0 auto }
.pricing-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  transition: all var(--transition);
  box-shadow: var(--shadow);
}
.pricing-card:hover { box-shadow: var(--shadow-lg) }
.pricing-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(22,163,74,0.08), var(--shadow-md);
  transform: scale(1.02);
}
.pricing-featured:hover { box-shadow: 0 0 0 4px rgba(22,163,74,0.12), var(--shadow-lg) }
.pricing-popular {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  white-space: nowrap;
}
.pricing-plan { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px }
.pricing-price { font-size: 38px; font-weight: 900; color: var(--text); margin-bottom: 4px; letter-spacing: -0.02em }
.pricing-price span { font-size: 15px; color: var(--muted); font-weight: 500 }
.pricing-alt { font-size: 13px; color: var(--muted); margin-bottom: 20px }
.pricing-alt strong { color: var(--accent-dark) }
.pricing-features { list-style: none; margin-bottom: 24px }
.pricing-features li { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--border) }
.pricing-features li:last-child { border-bottom: none }
.pricing-features li.ok { color: var(--text-2) }
.pricing-features li.ok i { color: var(--accent) }
.pricing-features li.no { opacity: 0.45 }
.pricing-features li.no i { color: var(--muted-2) }
.pricing-note { font-size: 12px; color: var(--muted-2); text-align: center; margin-top: 12px }

/* ─── TESTIMONIALS ───────────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px }
.testimonial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition: all var(--transition);
  box-shadow: var(--shadow);
}
.testimonial-card:hover { border-color: var(--accent-mid); transform: translateY(-3px); box-shadow: var(--shadow-md) }
.testimonial-stars { color: #f59e0b; margin-bottom: 12px; font-size: 14px }
.testimonial-text { color: var(--text-2); font-size: 14px; line-height: 1.75; margin-bottom: 20px }
.testimonial-author { display: flex; align-items: center; gap: 12px }
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #0d9488);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}
.testimonial-author div strong { display: block; font-size: 14px; color: var(--text) }
.testimonial-author div span { font-size: 12px; color: var(--muted) }

/* ─── FAQ ────────────────────────────────────────── */
.faq { background: var(--surface) }
.faq-list { max-width: 700px; margin: 0 auto }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
  transition: all var(--transition);
  background: #fff;
}
.faq-item:hover { border-color: var(--border-2) }
.faq-item.open { border-color: var(--accent) }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-question:hover { color: var(--accent-dark) }
.faq-answer {
  background: var(--accent-light);
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  font-size: 14px;
  color: var(--text-2);
}
.faq-item.open .faq-answer { max-height: 200px; padding: 16px 20px }
.faq-icon { transition: transform 0.3s; color: var(--muted); flex-shrink: 0 }
.faq-item.open .faq-icon { transform: rotate(180deg); color: var(--accent) }

/* ─── CTA SECTION ────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, var(--accent) 0%, #0d9488 100%);
}
.cta-card {
  text-align: center;
  padding: 72px 32px;
}
.cta-card h2 { color: #fff; margin-bottom: 14px; font-size: 2rem }
.cta-card p { color: rgba(255,255,255,0.85); margin-bottom: 32px; font-size: 16px }
.cta-card .btn-primary {
  background: #fff;
  color: var(--accent-dark);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.cta-card .btn-primary:hover {
  background: #f0fdf4;
  color: var(--accent-dark);
}
.cta-card .btn-ghost {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.4);
}
.cta-card .btn-ghost:hover { background: rgba(255,255,255,0.15); color: #fff }

/* ─── FOOTER ─────────────────────────────────────── */
.footer {
  background: #111827;
  border-top: 1px solid #1f2937;
  padding: 60px 0 30px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px }
.footer-brand p { color: #9ca3af; font-size: 14px; margin-top: 12px; max-width: 210px; line-height: 1.65 }
.footer .nav-logo { color: #fff }
.footer-col h4 { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px }
.footer-col a { display: block; font-size: 14px; color: #9ca3af; margin-bottom: 10px; text-decoration: none; transition: color var(--transition) }
.footer-col a:hover { color: #fff }
.footer-bottom {
  border-top: 1px solid #1f2937;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 13px; color: #6b7280 }

/* ─── AUTH ───────────────────────────────────────── */
.auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(160deg, #f0fdf4 0%, #ffffff 60%, #eff6ff 100%);
}
.auth-bg { display: none }
.auth-container { position: relative; z-index: 1; width: 100%; max-width: 420px }
.auth-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 28px;
  justify-content: center;
  text-decoration: none;
}
.auth-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-xl);
}
.auth-card-center { text-align: center }
.auth-title { font-size: 1.7rem; color: var(--text); margin-bottom: 6px }
.auth-subtitle { color: var(--muted); margin-bottom: 28px; font-size: 14px }
.auth-form { display: flex; flex-direction: column; gap: 0 }
.auth-divider {
  text-align: center;
  position: relative;
  margin: 18px 0;
}
.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.auth-divider span {
  position: relative;
  background: #fff;
  padding: 0 12px;
  font-size: 13px;
  color: var(--muted);
}
.auth-switch { text-align: center; font-size: 14px; color: var(--muted); margin-top: 20px }
.auth-terms { font-size: 12px; color: var(--muted-2); text-align: center; margin-top: 12px; line-height: 1.6 }
.auth-icon-wrap { margin-bottom: 16px }
.forgot-link { float: right; font-size: 12px; color: var(--accent) }

/* ─── MODALS ─────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  max-width: 580px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--muted-2);
  font-size: 18px;
  cursor: pointer;
  transition: color var(--transition);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.modal-close:hover { color: var(--text); background: var(--surface) }
.modal h2 { color: var(--text); margin-bottom: 8px }
.modal-subtitle { color: var(--muted); margin-bottom: 24px; font-size: 14px }

/* Paywall */
.paywall-modal { max-width: 680px }
.paywall-plans { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; margin-bottom: 16px }
.paywall-plan {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
}
.paywall-plan-featured { border-color: var(--accent); background: #f0fdf4 }
.plan-badge {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 12px;
}
.paywall-plan h3 { color: var(--text); margin-bottom: 8px; font-size: 1rem }
.plan-price { font-size: 26px; font-weight: 900; color: var(--text); margin-bottom: 4px }
.plan-price span { font-size: 14px; color: var(--muted); font-weight: 500 }
.plan-price-alt { font-size: 12px; color: var(--muted); margin-bottom: 14px }
.plan-features { list-style: none; margin-bottom: 18px }
.plan-features li { font-size: 13px; padding: 4px 0; display: flex; align-items: center; gap: 8px; color: var(--text-2) }
.plan-features li i { width: 14px }
.plan-features li i.fa-check { color: var(--accent) }
.plan-features li.disabled { opacity: 0.4 }
.plan-features li.disabled i { color: var(--muted-2) }
.paywall-note { font-size: 12px; color: var(--muted); text-align: center }

/* ─── ANIMATIONS ─────────────────────────────────── */
[data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease }
[data-animate].visible { opacity: 1; transform: translateY(0) }
[data-animate="fadeInLeft"] { transform: translateX(-30px) }
[data-animate="fadeInLeft"].visible { transform: translateX(0) }
[data-animate="fadeInRight"] { transform: translateX(30px) }
[data-animate="fadeInRight"].visible { transform: translateX(0) }

/* ─── DISCOUNT BADGE ─────────────────────────────── */
.discount-badge {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 4px;
}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 40px }
  .hero-visual { display: none }
  .hero-cta { justify-content: center }
  .hero-stats { justify-content: center }
  .steps-grid { grid-template-columns: 1fr 1fr }
  .testimonials-grid { grid-template-columns: 1fr 1fr }
  .footer-grid { grid-template-columns: 1fr 1fr }
}

@media (max-width: 768px) {
  .steps-grid,
  .testimonials-grid,
  .pricing-grid,
  .paywall-plans { grid-template-columns: 1fr }
  .pricing-featured { transform: scale(1) }
  .nav-toggle { display: block }
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 200;
    gap: 8px;
  }
  .nav-links.open { display: flex }
  .form-row-2 { grid-template-columns: 1fr }
  .cta-card { padding: 48px 24px }
  .footer-grid { grid-template-columns: 1fr }
  .footer-bottom { flex-direction: column; text-align: center }
  .section { padding: 64px 0 }
}