:root {
  --bg: #f8f7f4;
  --bg2: #ffffff;
  --bg3: #f2f0ec;
  --ink: #1a1a18;
  --ink2: #4a4a46;
  --ink3: #8a8a84;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-light: #eff6ff;
  --border: #e4e2dc;
  --border2: #d4d2cc;
  --green: #16a34a;
  --green-bg: #f0fdf4;
  --red: #dc2626;
  --radius: 6px;
  --radius-lg: 12px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Geist', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; overflow-x: hidden; }

/* ─── NAV ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(248,247,244,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 48px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 32px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { font-size: 0.875rem; color: var(--ink2); text-decoration: none; font-weight: 400; transition: color 0.15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { background: var(--accent); color: #fff; padding: 8px 20px; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background 0.15s; white-space: nowrap; }
.nav-cta:hover { background: var(--accent-hover); }

/* ─── HERO ─── */
.hero { padding: 120px 48px 80px; max-width: 1100px; margin: 0 auto; }
.hero-cols { display: grid; grid-template-columns: 55fr 45fr; gap: 64px; align-items: center; }
h1 { font-family: 'Instrument Serif', serif; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.12; font-weight: 400; color: var(--ink); margin-bottom: 20px; }
h1 em { font-style: italic; color: var(--accent); }
.hero-sub { font-size: 1.0625rem; color: var(--ink2); max-width: 540px; line-height: 1.7; margin-bottom: 36px; font-weight: 300; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-image-placeholder { border: 2px dashed var(--border2); border-radius: var(--radius-lg); height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ink3); font-size: 0.875rem; background: var(--bg3); }
.btn-primary { background: var(--accent); color: #fff; padding: 12px 28px; border-radius: var(--radius); font-size: 0.9375rem; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s, transform 0.15s; border: none; cursor: pointer; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-secondary { background: var(--bg2); color: var(--ink); padding: 12px 28px; border-radius: var(--radius); font-size: 0.9375rem; font-weight: 500; text-decoration: none; border: 1px solid var(--border2); transition: border-color 0.15s; display: inline-flex; align-items: center; gap: 8px; }
.btn-secondary:hover { border-color: var(--ink2); }
.hero-trust { display: flex; align-items: center; gap: 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ink3); }
.trust-item svg { color: var(--green); flex-shrink: 0; }

/* ─── SECTION WRAPPERS ─── */
.section { padding: 80px 48px; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-alt { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-dark { background: var(--ink); color: #fff; }

.section-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; color: var(--ink3); text-transform: uppercase; margin-bottom: 12px; display: block; }
h2 { font-family: 'Instrument Serif', serif; font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 400; line-height: 1.2; margin-bottom: 16px; }
.section-desc { font-size: 1rem; color: var(--ink2); line-height: 1.7; max-width: 520px; font-weight: 300; }

/* ─── METRICS GRID ─── */
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.metric-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; transition: box-shadow 0.2s, transform 0.2s; overflow: hidden; }
.metric-card:hover { box-shadow: 0 4px 24px rgba(37,99,235,0.08); transform: translateY(-2px); }
.metric-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 10px; }
.metric-value { font-family: 'Instrument Serif', serif; font-size: 2.75rem; color: var(--ink); line-height: 1; margin-bottom: 14px; }
.metric-value .metric-accent { color: var(--accent); }
.metric-sub { font-size: 0.8125rem; color: var(--ink2); font-weight: 300; }
/* Sparkline */
.metric-sparkline { display: block; margin-top: 12px; }
/* Progress bar */
.metric-progress-wrap { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 14px; }
.metric-progress-bar { height: 100%; border-radius: 3px; background: var(--accent); animation: growBar 1.4s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes growBar { from { width: 0; } }
/* Timeline */
.metric-timeline { display: flex; align-items: center; margin-top: 14px; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.tl-line { flex: 1; height: 2px; background: var(--border); }
.tl-dot-end { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--border2); flex-shrink: 0; }
/* Status indicator */
.metric-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 0.8125rem; font-weight: 500; color: var(--green); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: pulseGreen 2s ease-in-out infinite; }
@keyframes pulseGreen { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.45); } 50% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } }

/* ─── LEAD EXPLAIN ─── */
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.lead-visual { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.lead-title { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 20px; }
.funnel-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.funnel-row:last-child { border-bottom: none; }
.funnel-num { font-size: 0.6875rem; font-weight: 600; color: var(--ink3); min-width: 20px; }
.funnel-bar-wrap { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.funnel-bar { height: 100%; background: var(--accent); border-radius: 3px; }
.funnel-label { font-size: 0.8125rem; color: var(--ink); min-width: 80px; text-align: right; font-weight: 500; }
.funnel-sub { font-size: 0.75rem; color: var(--ink3); margin-top: 4px; }
.funnel-conversion { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius); padding: 12px 16px; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; }
.funnel-conversion-label { font-size: 0.8125rem; font-weight: 500; color: var(--green); }
.funnel-conversion-val { font-size: 1.25rem; font-weight: 600; color: var(--green); font-family: 'Instrument Serif', serif; }
.lead-list { list-style: none; margin-top: 24px; }
.lead-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; color: var(--ink2); font-weight: 300; }
.lead-list li:last-child { border-bottom: none; }
.lead-list li svg { color: var(--accent); margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; }

/* ─── SOCIAL PROOF ─── */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.review-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.stars { display: flex; gap: 2px; margin-bottom: 12px; }
.stars svg { width: 14px; height: 14px; color: #f59e0b; fill: #f59e0b; }
.review-text { font-size: 0.875rem; color: var(--ink2); line-height: 1.6; margin-bottom: 16px; font-style: italic; font-weight: 300; }
.reviewer { display: flex; align-items: center; gap: 10px; }
.reviewer-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: var(--accent); flex-shrink: 0; }
.reviewer-name { font-size: 0.8125rem; font-weight: 500; }
.reviewer-biz { font-size: 0.75rem; color: var(--ink3); }
.google-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; color: var(--ink3); font-weight: 500; margin-bottom: 8px; }
.rating-summary { margin-top: 28px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px; display: flex; align-items: center; gap: 24px; }
.rating-big { font-family: 'Instrument Serif', serif; font-size: 3rem; color: var(--ink); }
.rating-stars { display: flex; gap: 2px; }
.rating-stars svg { width: 16px; height: 16px; color: #f59e0b; fill: #f59e0b; }
.rating-count { font-size: 0.8125rem; color: var(--ink3); margin-top: 2px; }

/* ─── PRICING ─── */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.plan-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; position: relative; }
.plan-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 0.6875rem; font-weight: 600; padding: 3px 12px; border-radius: 100px; white-space: nowrap; letter-spacing: 0.04em; }
.plan-name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 16px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.plan-from { font-size: 0.75rem; color: var(--ink3); margin-right: 4px; }
.plan-amount { font-family: 'Instrument Serif', serif; font-size: 2.5rem; color: var(--ink); line-height: 1; }
.plan-currency { font-size: 1rem; color: var(--ink2); }
.plan-monthly { font-size: 0.8125rem; color: var(--ink3); margin-bottom: 8px; }
.plan-monthly strong { color: var(--ink); font-weight: 500; }
.plan-desc { font-size: 0.8125rem; color: var(--ink2); line-height: 1.6; margin-bottom: 0; font-weight: 300; }
.plan-features { list-style: none; margin-bottom: 24px; }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.8125rem; color: var(--ink2); padding: 6px 0; font-weight: 300; }
.plan-features li svg { color: var(--green); flex-shrink: 0; margin-top: 2px; width: 14px; height: 14px; }
.price-breakdown { background: #f8f7f4; border: 1px solid #e4e2dc; border-radius: 8px; padding: 14px 16px; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.price-breakdown-title { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a84; margin-bottom: 2px; }
.price-line { display: flex; justify-content: space-between; align-items: flex-start; font-size: 0.8125rem; color: #4a4a46; }
.price-line-label { display: flex; align-items: flex-start; gap: 6px; font-weight: 400; flex: 1; }
.price-line-label svg { width: 12px; height: 12px; color: #8a8a84; flex-shrink: 0; margin-top: 2px; }
.price-line-amount { font-weight: 600; color: #1a1a18; white-space: nowrap; margin-left: 12px; }
.price-line-amount.monthly { color: #2563eb; }
.price-line-sub { font-size: 0.6875rem; color: #8a8a84; display: block; margin-top: 1px; font-style: italic; }
.price-divider { border: none; border-top: 1px solid #e4e2dc; margin: 2px 0; }
.price-total { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; font-weight: 600; color: #1a1a18; }
.price-total-label { display: flex; align-items: center; gap: 6px; }
.price-total-label svg { width: 12px; height: 12px; color: #16a34a; }
.plan-cta { display: block; text-align: center; padding: 11px; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.15s; }
.plan-cta-primary { background: var(--accent); color: #fff; }
.plan-cta-primary:hover { background: var(--accent-hover); }
.plan-cta-outline { background: transparent; color: var(--ink); border: 1px solid var(--border2); }
.plan-cta-outline:hover { border-color: var(--ink2); }
.pricing-note { text-align: center; font-size: 0.8125rem; color: var(--ink3); margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pricing-note svg { color: var(--green); width: 14px; height: 14px; }

/* ─── PROCESS ─── */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 48px; position: relative; }
.process-grid::before { content: ''; position: absolute; top: 20px; left: 10%; right: 10%; height: 1px; background: var(--border); z-index: 0; }
.process-step { text-align: center; padding: 0 16px; position: relative; z-index: 1; }
.step-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--bg2); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 0.75rem; font-weight: 600; color: var(--ink3); }
.step-circle.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.process-step h4 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 6px; }
.process-step p { font-size: 0.8125rem; color: var(--ink2); line-height: 1.5; font-weight: 300; }
.process-book-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 0.8125rem; font-weight: 500; color: var(--accent); text-decoration: none; transition: gap 0.15s; }
.process-book-link:hover { gap: 8px; }

/* ─── CTA BAND ─── */
.cta-band { background: var(--ink); padding: 64px 48px; text-align: center; }
.cta-band h2 { font-family: 'Instrument Serif', serif; font-size: clamp(1.75rem, 3vw, 2.5rem); color: #fff; margin-bottom: 12px; font-weight: 400; }
.cta-band p { color: rgba(255,255,255,0.5); font-size: 0.9375rem; margin-bottom: 32px; font-weight: 300; }
.cta-form { display: flex; gap: 8px; justify-content: center; max-width: 440px; margin: 0 auto; }
.cta-input { flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff; padding: 11px 16px; border-radius: var(--radius); font-family: 'Geist', sans-serif; font-size: 0.875rem; outline: none; transition: border-color 0.15s; }
.cta-input:focus { border-color: rgba(255,255,255,0.4); }
.cta-input::placeholder { color: rgba(255,255,255,0.35); }
.btn-white { background: #fff; color: var(--ink); padding: 11px 24px; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.btn-white:hover { background: #f0f0f0; }
.cta-legal { font-size: 0.75rem; color: rgba(255,255,255,0.3); margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.cta-legal svg { width: 12px; height: 12px; }

/* ─── FOOTER ─── */
footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 32px 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-logo { font-family: 'Instrument Serif', serif; font-size: 1rem; }
.footer-logo span { color: var(--accent); }
.footer-legal { font-size: 0.75rem; color: var(--ink3); margin-top: 2px; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { font-size: 0.8125rem; color: var(--ink3); text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: var(--ink); }

/* ─── COOKIE BANNER ─── */
.cookie { position: fixed; bottom: 20px; left: 20px; right: 20px; max-width: 560px; background: var(--ink); color: #fff; padding: 20px 24px; border-radius: var(--radius-lg); display: flex; align-items: flex-start; gap: 16px; z-index: 99; box-shadow: 0 8px 32px rgba(0,0,0,0.2); transition: transform 0.3s; }
.cookie.hidden { transform: translateY(200%); }
.cookie-icon { flex-shrink: 0; margin-top: 2px; }
.cookie-icon svg { width: 18px; height: 18px; color: rgba(255,255,255,0.5); }
.cookie-text { font-size: 0.8125rem; color: rgba(255,255,255,0.7); line-height: 1.5; flex: 1; font-weight: 300; }
.cookie-text strong { color: #fff; font-weight: 500; }
.cookie-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cookie-accept { background: #fff; color: var(--ink); padding: 6px 16px; border-radius: var(--radius); font-size: 0.8125rem; font-weight: 600; border: none; cursor: pointer; transition: background 0.15s; }
.cookie-decline { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); padding: 6px 14px; border-radius: var(--radius); font-size: 0.8125rem; border: none; cursor: pointer; }

/* ─── NOTIF ─── */
.notif { position: fixed; top: 76px; right: 24px; background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--green); padding: 12px 20px; border-radius: var(--radius); font-size: 0.875rem; display: flex; align-items: center; gap: 10px; z-index: 99; box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateX(120%); transition: transform 0.3s; }
.notif.show { transform: translateX(0); }
.notif svg { color: var(--green); flex-shrink: 0; width: 16px; height: 16px; }

/* ─── UTILS ─── */
.divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.text-accent { color: var(--accent); }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  .hero, .section { padding-left: 24px; padding-right: 24px; }
  .hero-cols { grid-template-columns: 1fr; }
  .hero-image-placeholder { height: 260px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .lead-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .process-grid::before { display: none; }
  footer { flex-direction: column; align-items: flex-start; padding: 24px; }
  .cta-band { padding: 48px 24px; }
  .cta-form { flex-direction: column; }
}
@media (max-width: 600px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
}

/* ─── NAV ACTIONS ─── */
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-client { background: transparent; color: var(--ink2); padding: 7px 16px; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; text-decoration: none; border: 1px solid var(--border2); transition: border-color 0.15s, color 0.15s; white-space: nowrap; }
.nav-client:hover { border-color: var(--ink); color: var(--ink); }

/* ─── STATS WHY WEBSITE ─── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.stat-block { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; transition: box-shadow 0.2s, transform 0.2s; }
.stat-block:hover { box-shadow: 0 4px 24px rgba(37,99,235,0.08); transform: translateY(-2px); }
.stat-icon { width: 36px; height: 36px; margin: 0 auto 14px; color: var(--accent); }
.stat-number { font-family: 'Instrument Serif', serif; font-size: 3rem; line-height: 1; color: var(--accent); margin-bottom: 8px; }
.stat-pct { font-size: 1.5rem; }
.stat-label { font-size: 0.875rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.stat-desc { font-size: 0.8125rem; color: var(--ink3); font-weight: 300; line-height: 1.5; }

/* ─── MODAL OVERLAY ─── */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s; overflow-y: auto; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box { position: relative; width: 100%; max-width: 560px; perspective: 1200px; margin: auto; flex-shrink: 0; }
.modal-close { position: absolute; top: -14px; right: -14px; z-index: 10; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.modal-close:hover { background: var(--ink2); }

/* ─── FLIP CARD ─── */
.flip-card-inner { display: grid; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(.4,0,.2,1); }
.flip-card-inner.flipped { transform: rotateY(180deg); }
.flip-face { grid-row: 1; grid-column: 1; background: var(--bg2); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: 0 8px 40px rgba(0,0,0,0.12); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); }
.flip-title { font-family: 'Instrument Serif', serif; font-size: 1.375rem; font-weight: 400; margin-bottom: 2px; color: var(--ink); }
.flip-subtitle { font-size: 0.8125rem; color: var(--ink3); margin-bottom: 18px; }

/* ─── FORM ELEMENTS ─── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { margin-bottom: 12px; }
.form-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink2); margin-bottom: 4px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 9px 13px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); font-family: 'Geist', sans-serif; font-size: 0.875rem; outline: none; appearance: none; -webkit-appearance: none; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); transform: scale(1.02); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.form-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a84' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.form-textarea { resize: none; }
.form-radios { display: flex; gap: 20px; margin-top: 4px; }
.form-radio { display: flex; align-items: center; gap: 7px; font-size: 0.875rem; color: var(--ink2); cursor: pointer; }
.form-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.form-check { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ink2); cursor: pointer; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.15s; user-select: none; }
.form-check:has(input:checked) { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.form-check input { display: none; }
.form-error { font-size: 0.75rem; color: var(--red); margin-top: 6px; margin-bottom: 4px; display: none; }
.form-error.visible { display: block; }
.flip-btn { width: 100%; padding: 11px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-family: 'Geist', sans-serif; font-size: 0.9375rem; font-weight: 500; cursor: pointer; margin-top: 4px; transition: background 0.15s, transform 0.1s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.flip-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.flip-btn-pay { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); margin-top: 0; }
.flip-btn-pay:hover { background: #eff6ff; transform: translateY(-1px); }
.flip-divider { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--ink3); margin: 4px 0; }
.flip-divider::before, .flip-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.flip-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ink3); cursor: pointer; margin-top: 10px; background: none; border: none; font-family: 'Geist', sans-serif; padding: 0; transition: color 0.15s; }
.flip-back-link:hover { color: var(--ink); }

/* ─── LOGIN PAGE ─── */
.login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.login-logo-wrap { margin-bottom: 28px; text-align: center; }
.login-logo-wrap img { height: 32px; width: auto; display: block; margin: 0 auto; }
.login-logo-text { font-family: 'Instrument Serif', serif; font-size: 1.375rem; color: var(--ink); }
.login-logo-text span { color: var(--accent); }
.login-wrap { width: 100%; max-width: 420px; }
.login-card { background: var(--bg2); border-radius: var(--radius-lg); padding: 40px 36px; box-shadow: 0 8px 40px rgba(0,0,0,0.08); border: 1px solid var(--border); }
.login-title { font-family: 'Instrument Serif', serif; font-size: 1.5rem; font-weight: 400; margin-bottom: 2px; color: var(--ink); }
.login-sub { font-size: 0.8125rem; color: var(--ink3); margin-bottom: 28px; }
.login-footer { font-size: 0.75rem; color: var(--ink3); text-align: center; margin-top: 16px; line-height: 1.6; }
.login-footer a { color: var(--accent); text-decoration: none; }
.login-footer a:hover { text-decoration: underline; }

/* ─── RESPONSIVE additions ─── */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .nav-client { display: none; }
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr; }
  .flip-face { padding: 24px 18px; }
  .login-card { padding: 32px 24px; }
}

/* ─── HERO RAIN BACKGROUND ─── */
header { position: relative; overflow: hidden; }
header .hero { position: relative; z-index: 1; }

.hero-rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  --c: rgba(37, 99, 235, 0.9);
  background-color: #ffffff;
  background-image:
    radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;
  animation: heroRain 150s linear infinite;
}

.hero-rain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(0.7em) brightness(1.0);
  background-image: radial-gradient(
    circle at 50% 50%,
    #0000 0,
    #0000 2px,
    rgba(255, 255, 255, 0.5) 2px
  );
  background-size: 8px 8px;
}

@keyframes heroRain {
  0% {
    background-position:
      0px 220px,   3px 220px,   151.5px 337.5px,
      25px 24px,   28px 24px,   176.5px 150px,
      50px 16px,   53px 16px,   201.5px 91px,
      75px 224px,  78px 224px,  226.5px 350.5px,
      100px 19px,  103px 19px,  251.5px 121px,
      125px 120px, 128px 120px, 276.5px 187px,
      150px 31px,  153px 31px,  301.5px 120.5px,
      175px 235px, 178px 235px, 326.5px 384.5px,
      200px 121px, 203px 121px, 351.5px 228.5px,
      225px 224px, 228px 224px, 376.5px 364.5px,
      250px 26px,  253px 26px,  401.5px 105px,
      275px 75px,  278px 75px,  426.5px 180px;
  }
  to {
    background-position:
      0px 6800px,    3px 6800px,    151.5px 6917.5px,
      25px 13632px,  28px 13632px,  176.5px 13758px,
      50px 5416px,   53px 5416px,   201.5px 5491px,
      75px 17175px,  78px 17175px,  226.5px 17301.5px,
      100px 5119px,  103px 5119px,  251.5px 5221px,
      125px 8428px,  128px 8428px,  276.5px 8495px,
      150px 9876px,  153px 9876px,  301.5px 9965.5px,
      175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px,
      225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px,  253px 5082px,  401.5px 5161px,
      275px 6375px,  278px 6375px,  426.5px 6480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rain { animation: none; }
}

/* ─── SKELETON ANIMATION ─── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.skeleton { animation: skeleton-pulse 1.8s ease infinite; background: #e4e2dc; border-radius: 4px; }

/* ─── HERO REFONTE ─── */
.hero-reassurance { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ink3); margin-top: 20px; }
.hero-reassurance svg { color: var(--accent); flex-shrink: 0; }
.hero-stats { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.hero-stat { font-size: 0.8125rem; color: var(--ink2); }
.hero-stats-sep { color: var(--border2); font-size: 0.875rem; }

/* ─── IPHONE MOCKUP ─── */
.hero-col-right { display: flex; align-items: center; justify-content: center; position: relative; padding: 40px 0; }
.iphone-scene { display: flex; align-items: center; gap: 32px; }
.iphone-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; color: #8a8a84; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.iphone-label::before { content: ''; display: block; width: 1px; height: 32px; background: #d4d2cc; }
.iphone-wrap { position: relative; padding-top: 44px; padding-bottom: 24px; }
.iphone-shell { position: relative; width: 218px; height: 426px; border: 5px solid #1a1a18; border-radius: 32px; background: #f8f7f4; box-shadow: 5px 5px 2.5px 6px rgb(209,218,218), -2px -2px 8px rgba(255,255,255,0.8), inset 0 0 0 1px rgba(255,255,255,0.3); overflow: hidden; flex-shrink: 0; }
.iphone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 106px; height: 10px; background: #1a1a18; border-radius: 0 0 14px 14px; z-index: 10; }
.iphone-btn-right { position: absolute; right: -7px; top: 74px; width: 5px; height: 37px; background: #1a1a18; border-radius: 0 4px 4px 0; }
.iphone-btn-vol1 { position: absolute; left: -7px; top: 58px; width: 5px; height: 21px; background: #1a1a18; border-radius: 4px 0 0 4px; }
.iphone-btn-vol2 { position: absolute; left: -7px; top: 90px; width: 5px; height: 37px; background: #1a1a18; border-radius: 4px 0 0 4px; }
.iphone-btn-vol3 { position: absolute; left: -7px; bottom: 117px; width: 5px; height: 53px; background: #1a1a18; border-radius: 4px 0 0 4px; }
.iphone-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 27px; background: #ffffff; display: flex; flex-direction: column; }
.iphone-statusbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 4px; font-size: 8px; font-weight: 700; color: #1a1a18; flex-shrink: 0; }
.iphone-statusbar-icons { display: flex; gap: 3px; align-items: center; }
.iphone-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; font-family: 'Geist', sans-serif; }
.m-nav { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid #f0eee8; flex-shrink: 0; }
.m-nav-logo { font-family: 'Instrument Serif', serif; font-size: 9px; font-weight: 400; color: #1a1a18; }
.m-nav-logo span { color: #2563eb; }
.m-nav-btn { background: #2563eb; color: #fff; font-size: 6px; font-weight: 600; padding: 3px 7px; border-radius: 3px; }
.m-hero { padding: 10px 10px 8px; background: #f8f7f4; border-bottom: 1px solid #f0eee8; flex-shrink: 0; }
.m-hero h1 { font-family: 'Instrument Serif', serif; font-size: 11px; line-height: 1.25; color: #1a1a18; margin-bottom: 5px; font-weight: 400; }
.m-hero h1 em { color: #2563eb; font-style: italic; }
.m-hero p { font-size: 6.5px; color: #6a6a64; line-height: 1.5; margin-bottom: 8px; font-weight: 300; }
.m-hero-cta { background: #2563eb; color: #fff; font-size: 7px; font-weight: 600; padding: 5px 10px; border-radius: 3px; display: inline-block; }
.m-stats { display: flex; background: #1a1a18; padding: 6px 10px; flex-shrink: 0; }
.m-stat { flex: 1; text-align: center; border-right: 1px solid rgba(255,255,255,0.1); }
.m-stat:last-child { border-right: none; }
.m-stat-num { font-family: 'Instrument Serif', serif; font-size: 10px; color: #fff; display: block; }
.m-stat-label { font-size: 5px; color: rgba(255,255,255,0.45); display: block; margin-top: 1px; }
.m-services { padding: 8px 10px; flex-shrink: 0; }
.m-services-label { font-size: 6px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a84; margin-bottom: 6px; }
.m-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.m-service-card { background: #fff; border: 1px solid #e4e2dc; border-radius: 4px; padding: 6px; }
.m-service-dot { width: 14px; height: 14px; background: #eff6ff; border-radius: 3px; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; }
.m-service-dot svg { width: 8px; height: 8px; color: #2563eb; }
.m-service-name { font-size: 6.5px; font-weight: 600; color: #1a1a18; }
.m-service-desc { font-size: 5.5px; color: #8a8a84; margin-top: 2px; line-height: 1.4; }
.iphone-home { height: 20px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; background: #fff; flex-shrink: 0; }
.iphone-home-bar { width: 50px; height: 3px; background: #1a1a18; border-radius: 2px; opacity: 0.25; }
.iphone-badge { position: absolute; bottom: 0px; right: -20px; background: #fff; border: 1px solid #e4e2dc; border-radius: 8px; padding: 6px 10px; display: flex; align-items: center; gap: 5px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); white-space: nowrap; z-index: 10; }
.iphone-badge svg { width: 12px; height: 12px; color: #16a34a; flex-shrink: 0; }
.iphone-badge span { font-size: 9px; font-weight: 600; color: #1a1a18; }
.iphone-badge-top { position: absolute; top: 8px; left: -8px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 5px 10px; display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(37,99,235,0.12); z-index: 20; }
.iphone-badge-top svg { width: 10px; height: 10px; color: #2563eb; }
.iphone-badge-top span { font-size: 8px; font-weight: 600; color: #2563eb; }

/* ─── ROI CALCULATOR ─── */
.roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
.roi-inputs { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 28px; }
.roi-field > label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--ink); margin-bottom: 12px; }
.roi-field-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.roi-field-header label { font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.roi-field-value { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--ink2); flex-shrink: 0; }
.roi-val-display { font-size: 0.9375rem; font-weight: 600; color: var(--accent); min-width: 36px; text-align: right; }
.roi-slider { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: var(--border); border-radius: 2px; outline: none; cursor: pointer; margin-top: 4px; display: block; }
.roi-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 1px 4px rgba(37,99,235,0.3); transition: transform 0.15s; }
.roi-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.roi-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; box-shadow: 0 1px 4px rgba(37,99,235,0.3); }
.roi-select { width: 100%; padding: 10px 14px; border: 1px solid var(--border2); border-radius: var(--radius); font-size: 0.875rem; font-family: 'Geist', sans-serif; color: var(--ink); background: var(--bg); cursor: pointer; outline: none; }
.roi-select:focus { border-color: var(--accent); }
.roi-toggle { display: flex; gap: 8px; }
.roi-toggle-opt { flex: 1; }
.roi-toggle-opt input[type="radio"] { display: none; }
.roi-toggle-opt span { display: block; text-align: center; padding: 10px 8px; border: 1px solid var(--border2); border-radius: var(--radius); font-size: 0.8125rem; font-weight: 500; color: var(--ink2); cursor: pointer; transition: all 0.15s; line-height: 1.3; }
.roi-toggle-opt span small { font-size: 0.6875rem; font-weight: 400; color: var(--ink3); display: block; }
.roi-toggle-opt input[type="radio"]:checked + span { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.roi-toggle-opt span:hover { border-color: var(--accent); }
.roi-results { background: #1a1a18; color: #fff; border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.roi-main-metric { text-align: center; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.roi-main-value { font-family: 'Instrument Serif', serif; font-size: 3rem; color: #4ade80; line-height: 1; margin-bottom: 8px; }
.roi-main-label { font-size: 0.8125rem; color: rgba(255,255,255,0.5); }
.roi-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.roi-metric { background: rgba(255,255,255,0.05); border-radius: var(--radius); padding: 14px 16px; }
.roi-metric-val { font-family: 'Instrument Serif', serif; font-size: 1.5rem; color: #fff; margin-bottom: 4px; }
.roi-metric-label { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
.roi-progress-label { font-size: 0.6875rem; font-weight: 600; color: rgba(255,255,255,0.4); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.roi-progress-bar-bg { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.roi-progress-bar { height: 100%; border-radius: 3px; width: 0; transition: width 0.4s ease, background-color 0.3s; }
.roi-message { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.5; min-height: 2.5em; }
.roi-cta { display: block; text-align: center; background: #2563eb; color: #fff; padding: 12px; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background 0.15s; }
.roi-cta:hover { background: #1d4ed8; }
.roi-disclaimer { margin-top: 24px; text-align: center; font-size: 0.8125rem; color: var(--ink3); }

/* ─── PRICE ANCHOR ─── */
.price-anchor { background: var(--bg3); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 24px 48px; text-align: center; }
.price-anchor p { font-size: 0.9375rem; color: var(--ink2); max-width: 700px; margin: 0 auto; line-height: 1.6; }
.price-anchor strong { color: var(--ink); }

/* ─── SECTION ENGAGEMENT (POURQUOI MINDWARD) ─── */
.engagement-label { color: rgba(255,255,255,0.45); }
.engagement-h2 { color: #fff; }
.engagement-p { font-size: 0.9375rem; color: rgba(255,255,255,0.55); line-height: 1.7; margin-top: 16px; font-weight: 300; max-width: 380px; }
.engagement-grid { display: grid; grid-template-columns: 40fr 60fr; gap: 64px; align-items: start; }
.engagement-list { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.engagement-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: rgba(255,255,255,0.75); font-weight: 300; }
.engagement-list li svg { width: 14px; height: 14px; color: #4ade80; flex-shrink: 0; margin-top: 3px; }
.engagement-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.engagement-card { background: #2a2a28; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 24px 20px; }
.engagement-card-icon { width: 36px; height: 36px; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.engagement-card-icon svg { width: 36px; height: 36px; }
.engagement-card-title { font-size: 0.9375rem; font-weight: 600; color: #fff; margin-bottom: 8px; }
.engagement-card-text { font-size: 0.8125rem; color: rgba(255,255,255,0.45); line-height: 1.6; font-weight: 300; }

/* ─── SECTION SÉCURITÉ & RGPD ─── */
.secu-header { text-align: center; margin-bottom: 48px; }
.secu-header .section-desc { margin: 12px auto 0; max-width: 560px; }
.secu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.secu-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; }
.secu-icon { width: 32px; height: 32px; margin-bottom: 16px; flex-shrink: 0; }
.secu-icon svg { width: 32px; height: 32px; }
.secu-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.secu-text { font-size: 0.8125rem; color: var(--ink2); line-height: 1.6; font-weight: 300; flex: 1; margin-bottom: 16px; }
.secu-badge { font-size: 0.6875rem; font-weight: 600; padding: 4px 10px; border-radius: 100px; display: inline-block; align-self: flex-start; }
.secu-footer { margin-top: 28px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 24px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.secu-footer-item { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ink2); font-weight: 400; }
.secu-footer-item svg { color: var(--ink3); flex-shrink: 0; }
.secu-footer-sep { color: var(--border2); font-weight: 300; }

/* ─── GARANTIES (sous tarifs) ─── */
.garanties-row { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; padding: 28px 0; border-top: 1px solid var(--border); margin-top: 8px; }
.garantie-item { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ink2); font-weight: 400; }
.garantie-item svg { color: var(--accent); flex-shrink: 0; }

/* ─── QUI EST MINDWARD (À PROPOS) ─── */
.about-grid { display: grid; grid-template-columns: 40fr 60fr; gap: 64px; align-items: start; }
.about-left { display: flex; flex-direction: column; align-items: center; }
.about-photo-placeholder { width: 340px; max-width: 100%; height: 420px; background: var(--bg3); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.about-photo-caption { font-size: 0.8125rem; font-style: italic; color: var(--ink3); margin-top: 12px; text-align: center; }
.about-badges { width: 100%; max-width: 340px; margin-top: 20px; }
.about-badge { display: flex; gap: 6px; align-items: center; font-size: 0.8125rem; color: var(--ink2); padding: 6px 0; border-bottom: 1px solid var(--border); }
.about-badge svg { flex-shrink: 0; color: var(--ink3); }
.about-p { font-size: 0.9375rem; color: var(--ink2); line-height: 1.8; margin-top: 20px; font-weight: 300; }
.about-engagements { margin-top: 28px; }
.about-engagement-title { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 12px; }
.about-engagement-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.about-engagement-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; color: var(--ink2); line-height: 1.5; }
.about-engagement-list li svg { flex-shrink: 0; margin-top: 2px; }
.about-quote { background: var(--bg); border-left: 3px solid var(--accent); padding: 20px 24px; margin-top: 28px; border-radius: 0 6px 6px 0; }
.about-quote p { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1rem; color: var(--ink); line-height: 1.7; }
.about-quote cite { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink3); margin-top: 12px; font-style: normal; }

/* ─── RESPONSIVE (nouvelles sections) ─── */
@media (max-width: 900px) {
  .roi-grid { grid-template-columns: 1fr; }
  .iphone-scene { display: none; }
  .price-anchor { padding: 20px 24px; }
  .hero-stats { gap: 10px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photo-placeholder { width: 100%; height: 280px; }
  .about-badges { max-width: 100%; }
  .engagement-grid { grid-template-columns: 1fr; gap: 32px; }
  .engagement-cards { grid-template-columns: 1fr; }
  .secu-grid { grid-template-columns: 1fr 1fr; }
  .garanties-row { gap: 20px; }
}
@media (max-width: 600px) {
  .secu-grid { grid-template-columns: 1fr; }
  .engagement-cards { grid-template-columns: 1fr; }
  .garanties-row { flex-direction: column; align-items: flex-start; padding-left: 4px; }
}