/* ============================================================
   FlightBook Landing — CSS
   Light / Dark theme via [data-theme] on <html>
   Font family via [data-font] on <html>
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --transition: 0.2s ease;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
}

[data-theme="light"] {
  --bg: #f7f8fa;
  --bg-alt: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f2f5;
  --bg-nav: rgba(247, 248, 250, 0.85);
  --border: #e2e5ea;
  --border-subtle: #eef0f3;
  --text: #0f1923;
  --text-2: #3d4d5c;
  --text-3: #7a8898;
  --text-inv: #ffffff;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-glow: rgba(37, 99, 235, 0.15);
  --accent-alt: #f59e0b;
  --green: #16a34a;
  --green-bg: #dcfce7;
  --warn: #d97706;
  --warn-bg: #fef3c7;
  --red: #dc2626;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
  --mockup-bg: #1e293b;
  --mockup-sidebar: #0f172a;
  --mockup-border: #334155;
  --mockup-text: #94a3b8;
  --mockup-text-2: #e2e8f0;
}

[data-theme="dark"] {
  --bg: #0b0f17;
  --bg-alt: #111827;
  --bg-card: #151d2b;
  --bg-card-hover: #1c2738;
  --bg-nav: rgba(11, 15, 23, 0.85);
  --border: #1f2d40;
  --border-subtle: #192333;
  --text: #f0f4f8;
  --text-2: #94a3b8;
  --text-3: #4d6278;
  --text-inv: #ffffff;
  --accent: #3b82f6;
  --accent-2: #2563eb;
  --accent-glow: rgba(59, 130, 246, 0.2);
  --accent-alt: #f59e0b;
  --green: #22c55e;
  --green-bg: rgba(34, 197, 94, 0.12);
  --warn: #f59e0b;
  --warn-bg: rgba(245, 158, 11, 0.12);
  --red: #ef4444;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
  --mockup-bg: #0f172a;
  --mockup-sidebar: #080d14;
  --mockup-border: #1e2d3d;
  --mockup-text: #64748b;
  --mockup-text-2: #cbd5e1;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}

img, svg { display: block; max-width: 100%; }

a { text-decoration: none; color: inherit; }

/* ---------- Layout ---------- */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 100px 0;
}

.section--alt {
  background: var(--bg-alt);
}

/* ---------- Typography ---------- */
.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 64px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 20px;
}

.section-title-sm {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 20px;
}

.section-sub {
  font-size: 1.1rem;
  color: var(--text-2);
  line-height: 1.7;
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--accent-glow);
}

.btn-ghost {
  color: var(--text-2);
}
.btn-ghost:hover { color: var(--text); }

.btn-outline {
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
  border-radius: var(--radius);
}

.btn.full { width: 100%; justify-content: center; }

/* ---------- Theme Toggle ---------- */
.theme-toggle {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.theme-toggle svg { width: 18px; height: 18px; }

[data-theme="light"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }

/* ---------- Navbar ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  flex-shrink: 0;
}
.logo-icon { width: 28px; height: 28px; color: var(--accent); }
.logo-text { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; }

.nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
}
.nav-links a {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  transition: all var(--transition);
}
.nav-links a:hover { color: var(--text); background: var(--border-subtle); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-3);
}
.lang-switch a {
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  color: var(--text-3);
  transition: color var(--transition), background var(--transition);
}
.lang-switch a:hover { color: var(--text); background: var(--border-subtle); }
.lang-switch a.active { color: var(--accent); }
.lang-switch .sep { color: var(--border); }

.nav-mobile .lang-switch {
  padding: 10px 12px;
  font-size: 0.9rem;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all var(--transition);
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 16px;
  border-top: 1px solid var(--border-subtle);
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-weight: 500;
}
.nav-mobile a:hover { color: var(--text); background: var(--border-subtle); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 80%);
  opacity: 0.5;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
}
.glow-1 {
  width: 600px; height: 400px;
  background: var(--accent);
  top: -100px; left: 50%;
  transform: translateX(-70%);
}
.glow-2 {
  width: 400px; height: 300px;
  background: #8b5cf6;
  top: -60px; left: 50%;
  transform: translateX(10%);
}

.hero-content {
  position: relative;
  text-align: center;
  padding-top: 20px;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 99px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-bg);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--text-2);
  max-width: 600px;
  margin: 0 auto 36px;
  line-height: 1.75;
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-stats {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0 4px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
  justify-content: center;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 28px;
}
.stat strong { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.stat span { font-size: 0.75rem; color: var(--text-3); margin-top: 2px; }
.stat-divider { width: 1px; height: 36px; background: var(--border); }

/* ---------- Hero Mockup ---------- */
.hero-mockup-wrap {
  margin-top: 60px;
  padding: 0 0;
  display: flex;
  justify-content: center;
}

.hero-mockup {
  width: 100%;
  max-width: 900px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--mockup-bg);
  border: 1px solid var(--mockup-border);
  border-bottom: none;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--mockup-sidebar);
  border-bottom: 1px solid var(--mockup-border);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #22c55e; }
.mockup-url {
  flex: 1;
  text-align: center;
  font-size: 0.78rem;
  color: var(--mockup-text);
  font-family: monospace;
}

.mockup-body {
  display: flex;
  height: 340px;
}

.mockup-sidebar {
  width: 180px;
  background: var(--mockup-sidebar);
  border-right: 1px solid var(--mockup-border);
  padding: 16px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mockup-logo-small {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent);
  opacity: 0.7;
  margin-bottom: 16px;
}

.mock-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--mockup-text);
  cursor: pointer;
}
.mock-nav-item.active {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
}
.mock-icon { font-size: 1rem; }

.mockup-main {
  flex: 1;
  padding: 16px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mockup-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mock-title { font-size: 0.9rem; font-weight: 600; color: var(--mockup-text-2); }
.mock-actions { display: flex; gap: 6px; }
.mock-btn-sm {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--accent);
  color: white;
  cursor: pointer;
}
.mock-btn-sm.outline {
  background: transparent;
  border: 1px solid var(--mockup-border);
  color: var(--mockup-text);
}

.mock-stats-row {
  display: flex;
  gap: 8px;
}
.mock-stat-card {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--mockup-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.mock-stat-card.highlight { border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.05); }
.mock-stat-label { font-size: 0.65rem; color: var(--mockup-text); }
.mock-stat-value { font-size: 1rem; font-weight: 700; color: var(--mockup-text-2); margin-top: 2px; }
.mock-stat-value.green { color: #22c55e; }

.mock-flights { flex: 1; }
.mock-flight-row {
  display: grid;
  grid-template-columns: 70px 60px 60px 50px 60px 1fr;
  gap: 4px;
  padding: 7px 0;
  border-bottom: 1px solid var(--mockup-border);
  font-size: 0.72rem;
  color: var(--mockup-text-2);
  align-items: center;
}
.mock-flight-row.header { color: var(--mockup-text); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; }
.mock-flight-row.faded { opacity: 0.4; }
.mock-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 600;
}
.mock-badge.signed { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.mock-badge.pending { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

/* ---------- Trust Bar ---------- */
.trust-bar {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 20px 0;
  background: var(--bg-alt);
}

.trust-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.trust-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

.trust-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.trust-tags span {
  padding: 5px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-2);
  background: var(--bg-card);
}

/* ---------- Features Grid ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature-card--large {
  grid-column: 1 / 3;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all var(--transition);
}
.feature-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
  transform: translateY(-2px);
}

.feature-icon {
  width: 44px; height: 44px;
  background: var(--accent-glow);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--accent);
}
.feature-icon svg { width: 22px; height: 22px; }

.feature-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 16px;
}

.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feature-list li {
  font-size: 0.85rem;
  color: var(--text-2);
  padding-left: 18px;
  position: relative;
}
.feature-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.8rem;
}

.feature-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
}
.feature-tag.highlight {
  background: var(--green-bg);
  color: var(--green);
}

/* ---------- Profile Tabs ---------- */
.profiles-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.profile-tab {
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.profile-tab:hover { border-color: var(--accent); color: var(--accent); }
.profile-tab.active {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.profile-panel { display: none; }
.profile-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.profile-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 16px;
}

.profile-text h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
}

.profile-text p {
  color: var(--text-2);
  line-height: 1.75;
  margin-bottom: 28px;
}

.profile-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.profile-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-2);
}
.profile-features li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--green); margin-top: 2px; }

/* ---------- Profile Visual Cards ---------- */
.profile-visual {
  display: flex;
  justify-content: center;
}

.pv-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow);
}

.pv-header {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
}

.pv-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
.pv-stat { text-align: center; }
.pv-stat-val { font-size: 1.5rem; font-weight: 800; color: var(--text); }
.pv-stat-lbl { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }

.pv-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
  margin-bottom: 16px;
}
.pv-bar {
  flex: 1;
  background: var(--border);
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: background var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.pv-bar.active { background: var(--accent); }
.pv-bar span { font-size: 0.62rem; color: var(--text-3); padding-bottom: 4px; }

.pv-footer {
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.pv-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-3);
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
}
.pv-tag.ok { background: var(--green-bg); color: var(--green); border-color: transparent; }
.pv-tag.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }

.pv-sign-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pv-sign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border-subtle);
}
.pv-sign-row.signed { opacity: 0.6; }
.pv-sign-info strong { display: block; font-size: 0.85rem; color: var(--text); }
.pv-sign-info span { font-size: 0.72rem; color: var(--text-3); }
.pv-sign-btn {
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  font-size: 0.72rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.pv-signed-label { font-size: 0.72rem; font-weight: 600; color: var(--green); white-space: nowrap; }

.pv-school-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.pv-school-stat { text-align: center; }
.pv-school-val { display: block; font-size: 1.6rem; font-weight: 800; color: var(--text); }
.pv-school-lbl { font-size: 0.72rem; color: var(--text-3); }

.pv-member-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pv-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.pv-member span:last-child { font-size: 0.85rem; color: var(--text); }
.pv-role {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.pv-role.admin { background: var(--accent-glow); color: var(--accent); }
.pv-role.instructor { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.pv-role.student { background: var(--green-bg); color: var(--green); }

.pv-validation-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pv-val-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 0.85rem;
  color: var(--text);
}

/* ---------- Security Section ---------- */
.security-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.security-points {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}
.security-point {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.sp-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.security-point strong { display: block; font-size: 0.95rem; margin-bottom: 4px; color: var(--text); }
.security-point p { font-size: 0.875rem; color: var(--text-2); line-height: 1.6; }

.sig-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
  max-width: 380px;
  margin: 0 auto;
}

.sig-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 24px;
  color: var(--text);
}
.sig-header svg { width: 20px; height: 20px; color: var(--accent); }

.sig-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.sig-field:last-of-type { border-bottom: none; }

.sig-lbl { font-size: 0.7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.sig-val { font-size: 0.875rem; color: var(--text); font-weight: 500; }
.sig-val.mono { font-family: monospace; font-size: 0.8rem; }
.sig-val.mono.small { font-size: 0.72rem; word-break: break-all; color: var(--text-2); }

.sig-status {
  text-align: center;
  margin-top: 16px;
}
.sig-ok {
  display: inline-block;
  padding: 6px 20px;
  border-radius: 99px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 700;
}

/* ---------- Pricing ---------- */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}

.pt-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--transition);
}
.pt-label.active { color: var(--text); }
.pt-save {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 700;
}

.pt-switch {
  width: 44px;
  height: 24px;
  border-radius: 99px;
  background: var(--border);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background var(--transition);
}
.pt-switch.on { background: var(--accent); }
.pt-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: transform var(--transition);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.pt-switch.on .pt-knob { transform: translateX(20px); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.pricing-grid--4 {
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

.pricing-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.pricing-badge-alt {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 99px;
  white-space: nowrap;
}

.pricing-card--assoc {
  border-color: #7c3aed;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.pricing-card:hover { border-color: var(--accent); }

.pricing-card--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg);
  transform: translateY(-8px);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 99px;
  white-space: nowrap;
}

.pricing-card--structure { border-style: dashed; }

.pricing-header { margin-bottom: 24px; }
.pricing-plan { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; color: var(--text); }
.pricing-target { font-size: 0.8rem; color: var(--text-3); margin-top: 4px; }

.pricing-price { margin-bottom: 28px; }
.price-amount { font-size: 2rem; font-weight: 800; color: var(--text); }
.price-period { font-size: 0.85rem; color: var(--text-3); margin-left: 4px; }

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  flex: 1;
}
.pricing-features li {
  font-size: 0.875rem;
  color: var(--text-2);
  padding-left: 22px;
  position: relative;
}
.pricing-features li::before {
  position: absolute;
  left: 0;
  font-size: 0.8rem;
}
.pricing-features li.ok::before { content: '✓'; color: var(--green); }
.pricing-features li.no { color: var(--text-3); text-decoration: line-through; }
.pricing-features li.no::before { content: '×'; color: var(--text-3); }

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

/* ---------- CTA Section ---------- */
.cta-section {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-inner { position: relative; }

.cta-glow {
  position: absolute;
  width: 600px;
  height: 300px;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(100px);
  opacity: 0.08;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cta-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 16px;
}

.cta-sub {
  color: var(--text-2);
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-subtle);
  padding: 60px 0 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-subtle);
}

.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p { font-size: 0.875rem; color: var(--text-3); line-height: 1.7; }

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col strong { font-size: 0.85rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.footer-col a { font-size: 0.85rem; color: var(--text-3); transition: color var(--transition); }
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-size: 0.8rem;
  color: var(--text-3);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .menu-toggle { display: flex; }

  .features-grid {
    grid-template-columns: 1fr;
  }
  .feature-card--large { grid-column: 1; }

  .profile-panel.active { grid-template-columns: 1fr; gap: 32px; }
  .profile-visual { display: none; }

  .security-split { grid-template-columns: 1fr; gap: 48px; }

  .pricing-grid,
  .pricing-grid--4,
  .pricing-grid--3 { grid-template-columns: 1fr; }
  .pricing-card--featured { transform: none; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .hero { padding: 48px 0 0; }

  .hero-stats { padding: 0; }
  .stat { padding: 12px 16px; }
  .stat-divider { display: none; }

  .mockup-sidebar { display: none; }

  .trust-inner { justify-content: center; }

  .footer-inner { grid-template-columns: 1fr; }

  .pricing-toggle { gap: 8px; }
  .profiles-tabs { gap: 6px; }
  .profile-tab { padding: 8px 14px; font-size: 0.82rem; }
}


/* ── Sièges (cartes structure) ───────────────────────────────────────────────
   Une ligne sous le prix : l'encadré multi-lignes qui la précédait pesait plus
   lourd que l'information qu'il portait, à côté de cartes annonçant un chiffre. */
.seat-summary {
  margin: -0.5rem 0 1rem;
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.75;
}

.pricing-note {
  margin: -0.4rem 0 0.9rem;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* ── Avantage adhérent (carte Solo Pro) ──────────────────────────────────────
   Une ligne suffit : la remise ne justifiait pas une colonne entière, qui
   restait aux trois quarts vide à côté des autres offres. */
.pricing-perk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 1rem;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.35);
  font-size: 0.86rem;
  line-height: 1.4;
}

.pricing-perk .perk-star {
  color: #a78bfa;
  font-size: 1rem;
  line-height: 1.2;
}

/* Sous le bouton des cartes structure : comment ça se passe après le clic.
   Un « Nous contacter » cachait un parcours self-service ; on le dit. */
.pricing-note {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  opacity: 0.7;
  text-align: center;
}


/* --- Ruban « ouverture prochaine » -----------------------------------------
   Ancré en bas à droite, et non en haut.

   En haut, la place manquait : le conteneur du site fait 1180 px de large et le
   ruban occupe environ 150 px dans le coin. En dessous de 1480 px il se serait
   posé sur le bouton « Commencer gratuitement » à droite, ou sur le logo à
   gauche — les marges sont symétriques, changer de côté n'y changeait rien. Et
   sous 900 px la navigation se replie sur le logo et le menu, qui occupent
   toujours les deux coins hauts.

   Les coins du bas sont libres à toutes les largeurs : c'est le seul endroit où
   ce ruban ne recouvre jamais rien. Il y reste par ailleurs visible pendant
   tout le défilement, là où une barre en tête de page disparaît au premier
   mouvement. */
.launch-ribbon {
  position: fixed;
  bottom: 0;
  right: 0;
  /* Carré de 150 px : sa diagonale, seule partie visible du ruban, mesure
     150 × √2 ≈ 212 px. C'est cette valeur que doit faire la bande — ni plus,
     sinon ses extrémités sont rognées, ni moins, sinon elle ne touche pas les
     bords. */
  width: 150px;
  height: 150px;
  overflow: hidden;
  /* Au-dessus du contenu ; la barre de navigation est en 100. */
  z-index: 120;
  /* Le carré englobant ne doit pas intercepter les clics : seul le ruban
     lui-même est cliquable. */
  pointer-events: none;
}

.launch-ribbon a,
.launch-ribbon span {
  position: absolute;
  display: block;

  /* La bande doit occuper EXACTEMENT la diagonale du carré, et son centre
     coïncider avec le centre du carré. Toute autre position raccourcit la corde
     visible et décentre le texte : c'est ce qui rognait le « O » d'OUVERTURE.

       largeur = 150 × √2       ≈ 212
       right   = (212 − 150) / 2 =  31   → centre horizontal à 75
       bottom  = (150 −  32) / 2 =  59   → centre vertical   à 75

     La hauteur est fixée explicitement plutôt que déduite du remplissage :
     sans elle, le calcul du centrage vertical dépendrait de la police. */
  width: 212px;
  height: 32px;
  line-height: 32px;
  right: -31px;
  bottom: 59px;
  padding: 0;

  /* Coin bas droit : la diagonale monte de la gauche vers la droite. */
  transform: rotate(-45deg);
  text-align: center;
  white-space: nowrap;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.launch-ribbon a:hover { background: var(--accent-2, var(--accent)); }

/* Écran étroit : on resserre pour que le ruban reste une mention et n'occupe
   pas un coin entier du champ de vision. */
@media (max-width: 520px) {
  .launch-ribbon { width: 120px; height: 120px; }
  .launch-ribbon a,
  .launch-ribbon span {
    /* Mêmes règles : 120 × √2 ≈ 170 ; (170−120)/2 = 25 ; (120−28)/2 = 46. */
    width: 170px;
    height: 28px;
    line-height: 28px;
    right: -25px;
    bottom: 46px;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }
}

/* --- FAQ --------------------------------------------------------------------
   Accordéon en <details>/<summary> natifs : pas de JavaScript, et les réponses
   restent dans le HTML servi — donc lisibles par un moteur de recherche même
   repliées, et par un lecteur d'écran. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--text);
  /* Retire le triangle par défaut, remplacé par le chevron ci-dessous. */
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  margin-left: auto;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}
.faq-item[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.faq-item summary:hover { background: var(--bg-card-hover); }

/* Le focus clavier doit se voir : ces blocs se parcourent à la tabulation. */
.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.faq-answer {
  padding: 0 22px 20px;
  color: var(--text-2);
  line-height: 1.65;
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

@media (max-width: 520px) {
  .faq-item summary { padding: 16px 18px; font-size: 0.97rem; }
  .faq-answer { padding: 0 18px 18px; }
}