/* ============================================================================
   EasyVisit Marketing — DIRECTION C (Dark Premium)
   Complete stylesheet. Replaces the contents of landing.css.

   Conventions:
   - All custom props prefixed --ev-
   - Section / component classes prefixed .ev- (e.g. .ev-hero, .ev-pricing-card)
   - Utility classes prefixed .ev-u-
   - Dark surfaces, glowing navy accents, sharp typography
   ============================================================================ */

/* ─── Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --ev-brand:        #3b82f6;       /* lighter, glowy navy */
  --ev-brand-deep:   #003597;       /* original brand for surfaces */
  --ev-brand-700:    #002b7d;

  /* Semantic */
  --ev-success:      #10b981;
  --ev-success-fg:   #34d399;
  --ev-warning:      #f59e0b;
  --ev-danger:       #ef4444;

  /* Dark surfaces */
  --ev-ink:          #06080f;
  --ev-ink-2:        #0d1322;
  --ev-ink-3:        #161e36;
  --ev-paper:        #fff;

  /* Text on dark */
  --ev-text:         #ffffff;
  --ev-text-2:       rgba(255,255,255,0.85);
  --ev-text-muted:   rgba(255,255,255,0.65);
  --ev-text-soft:    rgba(255,255,255,0.55);
  --ev-text-faint:   rgba(255,255,255,0.4);

  /* Borders */
  --ev-border:       rgba(255,255,255,0.06);
  --ev-border-md:    rgba(255,255,255,0.08);
  --ev-border-strong:rgba(255,255,255,0.12);

  /* Radii */
  --ev-radius-sm:    8px;
  --ev-radius:       12px;
  --ev-radius-lg:    18px;
  --ev-radius-xl:    22px;
  --ev-radius-pill:  999px;

  /* Shadow */
  --ev-shadow:       0 30px 60px rgba(0,0,0,0.5);
  --ev-shadow-glow:  0 40px 80px rgba(0,30,80,0.4), 0 0 0 1px rgba(255,255,255,0.08);

  /* Type */
  --ev-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ev-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --ev-container: 1240px;
}

/* ─── Reset / base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ev-font);
  background: var(--ev-ink);
  color: var(--ev-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }

/* ─── Container ───────────────────────────────────────────────────────── */
.ev-container {
  max-width: var(--ev-container);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
}

/* ─── Headings ────────────────────────────────────────────────────────── */
.ev-h1 {
  font-size: 84px;
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.ev-h2 {
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.ev-h3 {
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.ev-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ev-text-muted);
}
.ev-gradient-text {
  background: linear-gradient(120deg, #fff 0%, #9ec0ff 50%, #6d96ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ev-gradient-text-2 {
  background: linear-gradient(120deg, #fff 0%, #9ec0ff 60%, var(--ev-brand) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Eyebrow ─────────────────────────────────────────────────────────── */
.ev-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ev-brand);
}
.ev-eyebrow .ev-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.ev-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--ev-radius-pill);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  background: var(--ev-paper);
  color: var(--ev-ink);
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
  white-space: nowrap;
  cursor: pointer;
}
.ev-btn:hover { transform: translateY(-1px); }
.ev-btn.ev-btn-lg { padding: 14px 24px; font-size: 14.5px; }
.ev-btn.ev-btn-primary { background: var(--ev-brand); color: #fff; box-shadow: 0 6px 20px rgba(59,130,246,0.35); }
.ev-btn.ev-btn-primary:hover { background: #2563eb; }
.ev-btn.ev-btn-white { background: #fff; color: var(--ev-ink); }
.ev-btn.ev-btn-ghost { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.18); }
.ev-btn.ev-btn-ghost:hover { background: rgba(255,255,255,0.1); }

/* ─── Top nav ─────────────────────────────────────────────────────────── */
.ev-nav {
  background: rgba(6,8,15,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ev-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.ev-nav-inner {
  display: flex;
  align-items: center;
  height: 72px;
  gap: 32px;
  position: relative;
}
.ev-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.ev-logo-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ev-brand-deep) 0%, var(--ev-brand-700) 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,53,151,0.4);
}
.ev-nav-links {
  display: flex;
  gap: 28px;
  margin-left: 12px;
}
.ev-nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ev-text-muted);
  transition: color 140ms;
}
.ev-nav-links a:hover { color: #fff; }
.ev-nav-spacer { flex: 1; }
.ev-nav-signin {
  font-size: 14px;
  font-weight: 500;
  color: var(--ev-text-muted);
}
.ev-nav-mobile-toggle {
  display: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--ev-border-md);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: var(--ev-radius-sm);
  align-items: center; justify-content: center;
  cursor: pointer;
}

/* ─── Section primitives ──────────────────────────────────────────────── */
.ev-section { padding: 120px 0; position: relative; overflow: hidden; }
.ev-section-compact { padding: 80px 0; }
.ev-section-tight { padding: 60px 0; }
.ev-section-ink   { background: var(--ev-ink); }
.ev-section-ink-2 { background: var(--ev-ink-2); }

.ev-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}
.ev-section-head .ev-eyebrow { margin-bottom: 18px; justify-content: center; }
.ev-section-head .ev-h2 { margin-bottom: 18px; }
.ev-section-head .ev-lead { margin: 0 auto; }

/* Radial glow utility */
.ev-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(59,130,246,0.24) 0%, transparent 70%);
  pointer-events: none;
}
.ev-glow-right {
  position: absolute;
  top: 40%;
  right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,130,246,0.24) 0%, transparent 70%);
  pointer-events: none;
}
.ev-glow-left {
  position: absolute;
  top: 30%;
  left: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,130,246,0.24) 0%, transparent 70%);
  pointer-events: none;
}

/* Grid background pattern */
.ev-grid-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ─── Hero ────────────────────────────────────────────────────────────── */
.ev-hero {
  padding: 80px 0 120px;
  background: var(--ev-ink);
  position: relative;
  overflow: hidden;
}
.ev-hero-text {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 56px;
  position: relative;
}
.ev-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(59,130,246,0.10);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: var(--ev-radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: #9ec0ff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.ev-hero-eyebrow .ev-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ev-brand); box-shadow: 0 0 12px var(--ev-brand); }
.ev-hero h1 { margin-bottom: 28px; }
.ev-hero p {
  font-size: 19px;
  color: var(--ev-text-muted);
  max-width: 700px;
  margin: 0 auto 36px;
  line-height: 1.55;
}
.ev-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.ev-hero-proof {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.ev-hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  color: var(--ev-text-soft);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-pill);
  font-size: 12.5px;
  font-weight: 600;
}
.ev-hero-proof i {
  color: var(--ev-success);
}
/* Hero visual frame */
.ev-hero-visual {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
.ev-hero-visual::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at top, rgba(59,130,246,0.4) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* ─── Browser chrome (used to frame screenshots) ──────────────────────── */
.ev-chrome {
  background: var(--ev-ink-2);
  border: 1px solid var(--ev-border-md);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--ev-shadow-glow);
  position: relative;
}
.ev-chrome-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ev-ink-3);
  border-bottom: 1px solid var(--ev-border);
}
.ev-chrome-dots { display: flex; gap: 6px; }
.ev-chrome-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.ev-chrome-dot.r { background: #ff5f57; }
.ev-chrome-dot.y { background: #febc2e; }
.ev-chrome-dot.g { background: #28c840; }
.ev-chrome-url {
  flex: 1;
  text-align: center;
  font-size: 11.5px;
  color: var(--ev-text-soft);
  font-family: var(--ev-font-mono);
  padding: 4px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
}
.ev-chrome-body {
  background: var(--ev-ink-2);
  position: relative;
  overflow: hidden;
}

.ev-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.ev-hero-visual .ev-chrome-body {
  height: clamp(280px, 44vw, 620px);
}

.ev-dashboard-grid .ev-chrome-body {
  height: clamp(280px, 30vw, 380px);
}

.ev-dashboard-grid .ev-shot-dashboard {
  object-fit: contain;
}

.ev-tour-screen .ev-chrome-body {
  height: clamp(300px, 40vw, 560px);
}

.ev-chrome[data-host-pane] .ev-chrome-body {
  height: clamp(280px, 38vw, 500px);
}

.ev-chrome[data-host-pane="book"] .ev-chrome-body {
  height: clamp(360px, 50vw, 520px);
}

.ev-shot-book {
  object-fit: cover;
  object-position: left top;
}

.ev-portal-split .ev-chrome-body {
  height: clamp(240px, 24vw, 360px);
}

/* Floating annotation card on hero */
.ev-hero-toast {
  position: absolute;
  top: 60px;
  right: -36px;
  transform: rotate(3deg);
  background: var(--ev-ink-2);
  border: 1px solid var(--ev-border-md);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  z-index: 2;
}
.ev-hero-toast-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ev-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(59,130,246,0.5);
}
.ev-hero-toast-title { font-size: 13px; font-weight: 600; color: #fff; }
.ev-hero-toast-sub   { font-size: 11.5px; color: var(--ev-text-soft); margin-top: 2px; }

/* ─── Stats bar ───────────────────────────────────────────────────────── */
.ev-stats {
  background: var(--ev-ink);
  padding: 100px 0 60px;
  border-top: 1px solid var(--ev-border);
}
.ev-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.ev-stats-cell {
  padding: 0 24px;
  border-left: 1px solid var(--ev-border-md);
  text-align: center;
}
.ev-stats-cell:first-child { border-left: none; }
.ev-stats-value {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #fff 0%, var(--ev-brand) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ev-stats-label {
  font-size: 13px;
  color: var(--ev-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ─── Trust strip ─────────────────────────────────────────────────────── */
.ev-trust {
  background: var(--ev-ink);
  padding: 60px 0 100px;
  border-bottom: 1px solid var(--ev-border);
}
.ev-trust-eyebrow {
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ev-text-faint);
  text-transform: uppercase;
  margin-bottom: 32px;
}
.ev-trust-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.ev-trust-logo {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ev-text-faint);
}

/* ─── How it works ────────────────────────────────────────────────────── */
.ev-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}
.ev-how-grid::before {
  content: '';
  position: absolute;
  top: 70px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.5), transparent);
  pointer-events: none;
}
.ev-how-card {
  background: var(--ev-ink-2);
  border: 1px solid var(--ev-border-md);
  border-radius: var(--ev-radius-lg);
  padding: 26px;
  position: relative;
}
.ev-how-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ev-brand-deep), var(--ev-brand));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(59,130,246,0.25);
}
.ev-how-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.ev-how-step-no {
  font-size: 12px; font-weight: 700;
  color: var(--ev-brand);
  font-family: var(--ev-font-mono);
}
.ev-how-step-time {
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px;
  background: rgba(255,255,255,0.06);
  color: var(--ev-text-muted);
  border-radius: var(--ev-radius-pill);
  letter-spacing: 0.06em;
}
.ev-how-card h3 { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 6px; letter-spacing: -0.01em; }
.ev-how-card p  { font-size: 13px; color: var(--ev-text-soft); line-height: 1.55; }

/* ─── Dashboard showcase ──────────────────────────────────────────────── */
.ev-dashboard {
  padding: 120px 0;
  background: var(--ev-ink);
  position: relative;
  overflow: hidden;
}
.ev-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 64px;
  position: relative;
}
.ev-dashboard-text h2 { margin-bottom: 22px; }
.ev-dashboard-text p  { font-size: 17px; color: var(--ev-text-muted); line-height: 1.6; margin-bottom: 28px; }
.ev-dashboard-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ev-feature-mini {
  padding: 18px;
  background: var(--ev-ink-2);
  border: 1px solid var(--ev-border-md);
  border-radius: 14px;
}
.ev-feature-mini-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(59,130,246,0.13);
  color: var(--ev-brand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.ev-feature-mini h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.ev-feature-mini p  { font-size: 12px; color: var(--ev-text-soft); line-height: 1.55; }

/* ─── Platform tour (tabbed) ──────────────────────────────────────────── */
.ev-tour-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--ev-ink-2);
  border: 1px solid var(--ev-border-md);
  border-radius: 12px;
  margin-bottom: 22px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.ev-tour-tab {
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  color: var(--ev-text-muted);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: all 140ms;
}
.ev-tour-tab.active {
  background: linear-gradient(180deg, var(--ev-brand-deep), var(--ev-ink-3));
  color: #fff;
  box-shadow: 0 4px 12px rgba(59,130,246,0.2), 0 0 0 1px rgba(59,130,246,0.3);
}
.ev-tour-caption {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  margin-top: 28px;
  align-items: baseline;
}
.ev-tour-caption-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.ev-tour-caption-desc  { font-size: 15px; color: var(--ev-text-muted); line-height: 1.6; }
.ev-tour-screen { position: relative; }

.ev-slide-deck-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: end;
  margin-top: 52px;
  margin-bottom: 22px;
}
.ev-slide-deck-head h3 {
  margin-top: 10px;
  color: #fff;
}
.ev-slide-deck-head p {
  margin: 0;
  font-size: 14px;
  color: var(--ev-text-muted);
  line-height: 1.65;
}
.ev-slide-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.ev-slide-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(22,30,54,0.78) 0%, rgba(13,19,34,0.98) 100%);
  border: 1px solid var(--ev-border-md);
  border-radius: 22px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.24);
  overflow: hidden;
}
.ev-slide-copy h3 {
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 8px;
}
.ev-slide-copy p {
  font-size: 14px;
  color: var(--ev-text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.ev-slide-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ec0ff;
}
.ev-slide-points {
  display: grid;
  gap: 8px;
}
.ev-slide-points li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ev-text-2);
}
.ev-slide-points li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ev-brand);
  box-shadow: 0 0 14px rgba(59,130,246,0.6);
  flex-shrink: 0;
  margin-top: 7px;
}
.ev-slide-chrome {
  margin-top: auto;
}
.ev-slide-card .ev-chrome-body {
  height: clamp(220px, 24vw, 310px);
}
.ev-slide-card .ev-shot-book {
  object-fit: contain;
  object-position: center top;
  background: #eef3fb;
}

/* ─── Portal showcase ─────────────────────────────────────────────────── */
.ev-portal-surfaces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}
.ev-portal-surface-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.ev-portal-surface-tag {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 8px;
}
.ev-portal-surface h3 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: -0.015em; }
.ev-portal-surface p  { font-size: 13.5px; color: var(--ev-text-soft); line-height: 1.55; }

.ev-portal-surface.is-host    { --tone: var(--ev-brand); --tone-bg: rgba(59,130,246,0.13); }
.ev-portal-surface.is-visitor { --tone: var(--ev-success); --tone-bg: rgba(16,185,129,0.18); }
.ev-portal-surface.is-guard   { --tone: #a78bfa; --tone-bg: rgba(139,92,246,0.18); }
.ev-portal-surface .ev-portal-surface-icon { background: var(--tone-bg); color: var(--tone); }
.ev-portal-surface .ev-portal-surface-tag  { color: var(--tone); }

/* Host portal tabs */
.ev-host-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--ev-ink-3);
  border: 1px solid var(--ev-border-md);
  border-radius: 10px;
  margin-bottom: 14px;
  width: fit-content;
}
.ev-host-tab {
  padding: 8px 14px;
  background: transparent;
  color: var(--ev-text-muted);
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.ev-host-tab.active {
  background: rgba(59,130,246,0.13);
  color: #fff;
  border-color: rgba(59,130,246,0.3);
}

.ev-portal-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
}
.ev-slide-deck-portal {
  margin-top: 34px;
}
.ev-slide-deck-head-portal {
  margin-top: 42px;
}

/* ─── Features bento ──────────────────────────────────────────────────── */
.ev-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.ev-bento-card {
  padding: 24px;
  background: var(--ev-ink-2);
  border: 1px solid var(--ev-border-md);
  border-radius: var(--ev-radius-lg);
  position: relative;
  overflow: hidden;
  min-height: 210px;
  grid-column: span 1;
  display: flex;
  flex-direction: column;
}
.ev-bento-card.span-2,
.ev-bento-card.span-3,
.ev-bento-card.span-4 { grid-column: span 1; }
.ev-bento-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.ev-bento-card h3 { font-size: 16.5px; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: -0.01em; }
.ev-bento-card p  { font-size: 13px; color: var(--ev-text-soft); line-height: 1.6; }

/* ─── Use cases ───────────────────────────────────────────────────────── */
.ev-usecases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ev-usecase {
  background: var(--ev-ink-3);
  border: 1px solid var(--ev-border);
  border-radius: 20px;
  padding: 28px;
}
.ev-usecase-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(59,130,246,0.13);
  color: var(--ev-brand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.ev-usecase-tag {
  font-size: 11px; font-weight: 700;
  color: var(--ev-brand);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ev-usecase h3 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.015em; }
.ev-usecase p  { font-size: 13.5px; color: var(--ev-text-soft); margin-bottom: 18px; line-height: 1.6; }
.ev-usecase ul { border-top: 1px solid var(--ev-border); padding-top: 14px; }
.ev-usecase ul li {
  display: flex; gap: 9px;
  font-size: 13px;
  color: var(--ev-text-2);
  margin-bottom: 8px;
}
.ev-usecase ul li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ev-brand);
  flex-shrink: 0;
  margin-top: 8px;
}

/* ─── Principles ──────────────────────────────────────────────────────── */
.ev-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ev-principle {
  padding: 28px;
  background: var(--ev-ink-2);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
}
.ev-principle-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: rgba(59,130,246,0.13);
  color: var(--ev-brand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.ev-principle h3 { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: -0.015em; }
.ev-principle p  { font-size: 14px; color: var(--ev-text-muted); line-height: 1.6; }

/* ─── Pricing ─────────────────────────────────────────────────────────── */
.ev-pricing {
  background: var(--ev-ink-2);
  position: relative;
  overflow: hidden;
}
/* Billing toggle */
.ev-billing-toggle-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}
.ev-billing-toggle {
  display: flex;
  background: var(--ev-ink-3);
  border: 1px solid var(--ev-border-md);
  border-radius: var(--ev-radius-pill);
  padding: 4px;
}
.ev-billing-toggle button {
  padding: 8px 18px;
  background: transparent;
  color: var(--ev-text-muted);
  border: 1px solid transparent;
  border-radius: var(--ev-radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.ev-billing-toggle button.active {
  background: rgba(59,130,246,0.18);
  color: #fff;
  border-color: rgba(59,130,246,0.3);
}
.ev-save-pill {
  font-size: 10px;
  padding: 1px 6px;
  background: rgba(16,185,129,0.18);
  color: var(--ev-success);
  border-radius: var(--ev-radius-pill);
}

/* Features ribbon */
.ev-features-ribbon {
  background: var(--ev-ink-3);
  border: 1px solid var(--ev-border-md);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 28px;
}
.ev-features-ribbon-head {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ev-text-soft);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ev-features-ribbon-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.ev-features-ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--ev-text-2);
  border-radius: var(--ev-radius-pill);
  font-size: 12px;
}
.ev-features-ribbon-item i { color: var(--ev-success); font-size: 11px; }

/* Pricing cards grid */
.ev-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.ev-pricing-card {
  background: var(--ev-ink-3);
  border: 1px solid var(--ev-border-md);
  border-radius: var(--ev-radius-lg);
  padding: 26px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.ev-pricing-card.is-featured {
  background: linear-gradient(180deg, var(--ev-brand-deep) 0%, var(--ev-ink-3) 100%);
  border-color: rgba(59,130,246,0.5);
  box-shadow: 0 30px 60px rgba(59,130,246,0.18);
}
.ev-pricing-card.is-featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  right: 22px;
  background: var(--ev-brand);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--ev-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ev-pricing-tier {
  font-size: 13px;
  font-weight: 700;
  color: var(--ev-brand);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ev-pricing-card.is-featured .ev-pricing-tier { color: #9ec0ff; }
.ev-pricing-units {
  font-size: 12.5px;
  color: var(--ev-text-soft);
  margin-bottom: 16px;
}
.ev-pricing-divider {
  height: 1px;
  background: var(--ev-border-md);
  margin-bottom: 16px;
}
.ev-pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.ev-pricing-price .ev-currency { font-size: 14px; font-weight: 600; color: var(--ev-text-2); }
.ev-pricing-price .ev-amount   { font-size: 36px; font-weight: 800; letter-spacing: -0.025em; color: #fff; }
.ev-pricing-price .ev-per      { font-size: 13px; color: var(--ev-text-faint); }
.ev-pricing-billing-hint {
  font-size: 11.5px;
  color: var(--ev-text-faint);
  margin-bottom: 12px;
}
.ev-pricing-sms {
  font-size: 11.5px;
  color: var(--ev-brand);
  font-weight: 600;
  margin-bottom: 18px;
}
.ev-pricing-card ul {
  flex: 1;
  margin-bottom: 18px;
}
.ev-pricing-card ul li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--ev-text-2);
  margin-bottom: 8px;
}
.ev-pricing-card ul li::before {
  content: '✓';
  color: var(--ev-brand);
  font-weight: 700;
}
.ev-pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--ev-radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms;
}
.ev-pricing-cta:hover { background: rgba(255,255,255,0.1); }
.ev-pricing-card.is-featured .ev-pricing-cta {
  background: #fff;
  color: var(--ev-ink);
  border-color: transparent;
}
.ev-pricing-card.is-featured .ev-pricing-cta:hover { background: #e8eaf3; }

/* Portfolio chips */
.ev-portfolio-chips {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.ev-portfolio-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--ev-ink-3);
  border: 1px solid var(--ev-border-md);
  border-radius: var(--ev-radius-pill);
}
.ev-portfolio-chip-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(59,130,246,0.13);
  color: var(--ev-brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.ev-portfolio-chip-label { font-size: 12.5px; color: var(--ev-text-muted); }
.ev-portfolio-chip-off {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ev-success);
  padding: 2px 10px;
  background: rgba(16,185,129,0.12);
  border-radius: var(--ev-radius-pill);
}

/* Campus strip */
.ev-campus {
  background: var(--ev-ink-3);
  border: 1px solid var(--ev-border-md);
  border-radius: 14px;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 40px;
}
.ev-campus-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(59,130,246,0.13);
  color: var(--ev-brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ev-campus-text { flex: 1; }
.ev-campus-text strong { display: block; font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.ev-campus-text span   { font-size: 13px; color: var(--ev-text-muted); }
.ev-campus-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  background: var(--ev-brand);
  color: #fff;
  border: none;
  border-radius: var(--ev-radius-pill);
  font-size: 13px;
  font-weight: 600;
}

/* ─── Interactive pricing calculator ──────────────────────────────────── */
.ev-calc {
  background: var(--ev-ink-3);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: var(--ev-radius-xl);
  padding: 32px;
}
.ev-calc-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
.ev-calc-head-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(59,130,246,0.13);
  color: var(--ev-brand);
  display: flex; align-items: center; justify-content: center;
}
.ev-calc-head h3 { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.015em; }
.ev-calc-head p  { font-size: 13px; color: var(--ev-text-soft); }
.ev-calc-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.ev-calc-field { margin-bottom: 22px; }
.ev-calc-field-head {
  display: flex; justify-content: space-between;
  margin-bottom: 10px;
}
.ev-calc-field-head label { font-size: 13px; font-weight: 600; color: var(--ev-text-2); }
.ev-calc-badge {
  font-size: 12.5px; font-weight: 700;
  color: var(--ev-brand);
  padding: 2px 10px;
  background: rgba(59,130,246,0.13);
  border-radius: var(--ev-radius-pill);
}
.ev-calc-range {
  width: 100%; height: 6px;
  border-radius: var(--ev-radius-pill);
  appearance: none; -webkit-appearance: none;
  outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--ev-brand) 0%, var(--ev-brand) var(--ev-slider-pct, 50%), rgba(255,255,255,0.1) var(--ev-slider-pct, 50%), rgba(255,255,255,0.1) 100%);
}
.ev-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.4);
}
.ev-calc-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.4);
}
.ev-calc-pips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 10px;
  gap: 4px;
}
.ev-calc-pip { height: 3px; border-radius: var(--ev-radius-pill); background: rgba(255,255,255,0.08); }
.ev-calc-pip.active { background: var(--ev-brand); }
.ev-calc-pip-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 6px;
  gap: 4px;
  font-size: 9.5px;
  color: var(--ev-text-faint);
  text-align: center;
}
.ev-calc-pip-labels span.active { color: var(--ev-brand); font-weight: 700; }
.ev-calc-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
}
.ev-calc-stepper {
  display: flex; align-items: center; gap: 0;
  background: var(--ev-ink);
  border: 1px solid var(--ev-border-md);
  border-radius: 8px;
  padding: 4px;
}
.ev-calc-stepper button {
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
}
.ev-calc-stepper-val {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.ev-calc-billing-toggle {
  display: flex;
  background: var(--ev-ink);
  border: 1px solid var(--ev-border-md);
  border-radius: 8px;
  padding: 4px;
}
.ev-calc-billing-toggle button {
  flex: 1;
  padding: 7px 10px;
  background: transparent;
  color: var(--ev-text-muted);
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.ev-calc-billing-toggle button.active {
  background: rgba(59,130,246,0.18);
  color: #fff;
}
.ev-calc-result {
  background: linear-gradient(180deg, rgba(0,53,151,0.25) 0%, var(--ev-ink) 100%);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.ev-calc-result-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ev-brand);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ev-calc-result-plan { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.015em; }
.ev-calc-result-units { font-size: 12.5px; color: var(--ev-text-soft); margin-bottom: 16px; }
.ev-calc-result-divider { height: 1px; background: var(--ev-border-md); margin-bottom: 14px; }
.ev-calc-result-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ev-text-muted);
  margin-bottom: 8px;
}
.ev-calc-result-row strong { color: #fff; font-weight: 600; }
.ev-calc-result-row.saving strong { color: var(--ev-success); }
.ev-calc-result-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
}
.ev-calc-result-total-label { font-size: 13.5px; color: var(--ev-text-muted); }
.ev-calc-result-total-value { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.ev-calc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 16px;
  background: var(--ev-brand);
  color: #fff;
  border: none;
  border-radius: var(--ev-radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 18px;
}

/* ─── FAQ ─────────────────────────────────────────────────────────────── */
.ev-faq {
  background: var(--ev-ink);
  padding: 120px 0;
}
.ev-faq-item {
  border-top: 1px solid var(--ev-border-strong);
}
.ev-faq-item:last-child { border-bottom: 1px solid var(--ev-border-strong); }
.ev-faq-trigger {
  width: 100%;
  padding: 22px 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  color: #fff;
}
.ev-faq-trigger span:first-child {
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.ev-faq-toggle-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  color: var(--ev-text-muted);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.ev-faq-body {
  padding: 0 0 24px;
  font-size: 14.5px;
  color: var(--ev-text-muted);
  line-height: 1.7;
  max-width: 720px;
  display: none;
}
.ev-faq-item.open .ev-faq-body { display: block; }

/* ─── Newsletter ──────────────────────────────────────────────────────── */
.ev-newsletter {
  background: var(--ev-ink);
  padding: 80px 0;
  border-top: 1px solid var(--ev-border);
}
.ev-newsletter-card {
  background: var(--ev-ink-2);
  border: 1px solid var(--ev-border-md);
  border-radius: var(--ev-radius-xl);
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.ev-newsletter-card h3 { font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 10px; }
.ev-newsletter-card p  { font-size: 14.5px; color: var(--ev-text-muted); line-height: 1.6; }
.ev-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ev-newsletter-row {
  display: flex; gap: 8px;
}
.ev-newsletter-input {
  flex: 1;
  padding: 12px 16px;
  background: var(--ev-ink-3);
  border: 1px solid var(--ev-border-strong);
  color: #fff;
  border-radius: var(--ev-radius-pill);
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.ev-newsletter-input::placeholder { color: var(--ev-text-soft); }
.ev-newsletter-btn {
  padding: 12px 20px;
  background: var(--ev-brand);
  color: #fff;
  border: none;
  border-radius: var(--ev-radius-pill);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ev-newsletter-disclaimer { font-size: 11.5px; color: var(--ev-text-faint); }
.ev-newsletter-disclaimer a { color: var(--ev-brand); }
.ev-newsletter-success {
  padding: 18px 22px;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 12px;
  color: var(--ev-success);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ─── CTA section ─────────────────────────────────────────────────────── */
.ev-cta {
  padding: 140px 0;
  background: var(--ev-ink);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.ev-cta-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px; height: 1200px;
  background: radial-gradient(circle, rgba(0,53,151,0.31) 0%, transparent 50%);
  filter: blur(60px);
  pointer-events: none;
}
.ev-cta h2 {
  font-size: 80px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #fff;
  margin-bottom: 24px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.ev-cta-lead {
  font-size: 18px;
  color: var(--ev-text-muted);
  margin: 0 auto 36px;
  max-width: 600px;
  line-height: 1.55;
}
.ev-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.ev-cta-checks {
  display: flex;
  gap: 28px;
  font-size: 13px;
  color: var(--ev-text-faint);
  justify-content: center;
  flex-wrap: wrap;
}
.ev-cta-checks span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ev-cta-checks i { color: var(--ev-success); }

/* ─── Footer ──────────────────────────────────────────────────────────── */
.ev-footer {
  background: var(--ev-ink);
  border-top: 1px solid var(--ev-border);
  padding: 72px 0 36px;
  position: relative;
}
.ev-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--ev-border);
}
.ev-footer-brand p {
  font-size: 14px;
  color: var(--ev-text-soft);
  margin-top: 14px;
  margin-bottom: 16px;
  line-height: 1.6;
  max-width: 320px;
}
.ev-footer-popia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ev-success-fg);
  background: rgba(16,185,129,0.1);
  padding: 6px 12px;
  border-radius: var(--ev-radius-pill);
}
.ev-footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}
.ev-footer-col ul li { margin-bottom: 10px; }
.ev-footer-col a {
  font-size: 13.5px;
  color: var(--ev-text-soft);
  transition: color 140ms;
}
.ev-footer-col a:hover { color: #fff; }
.ev-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--ev-text-soft);
}
.ev-footer-social {
  display: flex; gap: 16px;
}

/* ─── Demo modal ──────────────────────────────────────────────────────── */
.ev-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,8,15,0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ev-modal-overlay.open {
  display: flex;
  animation: evFade 200ms ease;
}
.ev-modal {
  width: 100%;
  max-width: 520px;
  background: var(--ev-ink-2);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: var(--ev-radius-xl);
  padding: 36px;
  position: relative;
  box-shadow: var(--ev-shadow-glow);
  animation: evRise 240ms ease;
}
.ev-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--ev-border-md);
  color: var(--ev-text-2);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}
.ev-modal-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(59,130,246,0.13);
  color: var(--ev-brand);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.ev-modal h3 { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.015em; margin-bottom: 6px; }
.ev-modal-lead { font-size: 13.5px; color: var(--ev-text-muted); margin-bottom: 24px; }
.ev-modal-form { display: flex; flex-direction: column; gap: 14px; }
.ev-modal-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ev-text-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.ev-modal-field label .req { color: var(--ev-brand); }
.ev-modal-field input {
  width: 100%;
  padding: 11px 14px;
  background: var(--ev-ink-3);
  border: 1px solid var(--ev-border-strong);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.ev-modal-field input::placeholder { color: var(--ev-text-soft); }
.ev-modal-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  background: var(--ev-brand);
  color: #fff;
  border: none;
  border-radius: var(--ev-radius-pill);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 6px;
}
.ev-modal-disclaimer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ev-text-faint);
  margin-top: 4px;
}
.ev-modal-error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 12px;
  padding: 10px 12px;
}
.ev-modal-success { text-align: center; padding: 20px 0; display: none; }
.ev-modal-success.show { display: block; }
.ev-modal-success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(16,185,129,0.12);
  color: var(--ev-success);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-size: 30px;
}
.ev-modal-success h3 { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: -0.015em; }
.ev-modal-success p  { font-size: 14.5px; color: var(--ev-text-muted); line-height: 1.6; }

@keyframes evFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes evRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Secondary page chrome ───────────────────────────────────────────── */
.ev-page-hero {
  background: var(--ev-ink);
  padding: 100px 0 60px;
  position: relative;
  overflow: hidden;
}
.ev-page-hero-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(59,130,246,0.13) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.ev-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ev-text-faint);
  margin-bottom: 22px;
}
.ev-page-hero h1 {
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
}
.ev-page-hero-lead {
  font-size: 18px;
  color: var(--ev-text-muted);
  line-height: 1.55;
  max-width: 680px;
}
.ev-page-hero-updated {
  font-size: 12.5px;
  color: var(--ev-text-faint);
  margin-top: 18px;
  font-family: var(--ev-font-mono);
}
.ev-page-prose {
  background: var(--ev-ink);
  padding: 0 0 100px;
}
.ev-page-prose-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  max-width: 1100px;
  margin: 0 auto;
}
.ev-page-prose-grid.no-sidebar { grid-template-columns: 1fr; }
.ev-prose-sidebar { position: sticky; top: 96px; align-self: start; }
.ev-prose-sidebar-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--ev-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.ev-prose-sidebar a {
  display: block;
  padding: 7px 0 7px 14px;
  font-size: 13.5px;
  color: var(--ev-text-muted);
  border-left: 2px solid var(--ev-border-md);
  margin-bottom: 2px;
}
.ev-prose-sidebar a:hover { color: #fff; border-left-color: var(--ev-brand); }
.ev-prose { max-width: 720px; }
.ev-prose p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ev-text-2);
  margin-bottom: 16px;
}
.ev-prose h2 {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-top: 56px;
  margin-bottom: 14px;
  scroll-margin-top: 100px;
}
.ev-prose h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  margin-top: 28px;
  margin-bottom: 10px;
}
.ev-prose ul li {
  display: flex; gap: 12px;
  font-size: 15px;
  color: var(--ev-text-2);
  margin-bottom: 9px;
  line-height: 1.6;
}
.ev-prose ul li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ev-brand);
  margin-top: 10px;
  flex-shrink: 0;
}
.ev-prose code {
  background: var(--ev-ink-3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13.5px;
  font-family: var(--ev-font-mono);
}
.ev-prose strong { color: #fff; font-weight: 600; }
.ev-prose a { color: var(--ev-brand); }

/* ─── Page-specific helpers ───────────────────────────────────────────── */

/* About — stats sidebar */
.ev-about-stats {
  background: var(--ev-ink-2);
  border: 1px solid var(--ev-border-md);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.ev-about-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ev-border-md);
  padding-bottom: 16px;
}
.ev-about-stat:last-child { border-bottom: none; padding-bottom: 0; }
.ev-about-stat-label { font-size: 13px; color: var(--ev-text-soft); }
.ev-about-stat-value { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }

/* Contact cards */
.ev-contact-card {
  background: var(--ev-ink-2);
  border: 1px solid var(--ev-border);
  border-radius: 14px;
  padding: 22px;
  display: block;
  color: inherit;
}
.ev-contact-card-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(59,130,246,0.13);
  color: var(--ev-brand);
  display: flex; align-items: center; justify-content: center;
}
.ev-contact-card-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ev-text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ev-contact-card-value { font-size: 16px; font-weight: 600; color: #fff; }

/* Retention table */
.ev-table {
  background: var(--ev-ink-2);
  border: 1px solid var(--ev-border-md);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}
.ev-table-head {
  display: grid;
  padding: 12px 20px;
  background: var(--ev-ink-3);
  border-bottom: 1px solid var(--ev-border);
  font-size: 11px;
  font-weight: 700;
  color: var(--ev-text-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ev-table-row {
  display: grid;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ev-border);
  align-items: center;
  font-size: 14px;
  color: var(--ev-text-2);
}
.ev-table-row:last-child { border-bottom: none; }
.ev-table-row .ev-table-strong { font-weight: 700; color: var(--ev-brand); font-family: var(--ev-font-mono); font-size: 13px; }

/* ─── Animations ──────────────────────────────────────────────────────── */
@keyframes evReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.ev-reveal { animation: evReveal 600ms ease both; }

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ev-h1 { font-size: 56px; }
  .ev-h2 { font-size: 40px; }
  .ev-cta h2 { font-size: 56px; }
  .ev-bento { grid-template-columns: repeat(4, 1fr); }
  .ev-bento-card { grid-column: span 2 !important; }
  .ev-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .ev-how-grid { grid-template-columns: repeat(2, 1fr); }
  .ev-how-grid::before { display: none; }
  .ev-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .ev-footer-inner { grid-template-columns: 1fr 1fr; }
  .ev-calc-body { grid-template-columns: 1fr; }
  .ev-portal-split { grid-template-columns: 1fr; }
  .ev-dashboard-grid { grid-template-columns: 1fr; }
  .ev-newsletter-card { grid-template-columns: 1fr; }
  .ev-page-prose-grid { grid-template-columns: 1fr; }
  .ev-prose-sidebar { position: static; }
  .ev-slide-deck-head { grid-template-columns: 1fr; gap: 14px; }
  .ev-slide-deck { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ev-container { padding: 0 18px; }
  .ev-h1 {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .ev-h2 { font-size: 28px; }
  .ev-cta h2 { font-size: 36px; }
  .ev-section { padding: 72px 0; }
  .ev-hero { padding: 54px 0 80px; }
  .ev-hero-text { max-width: 100%; margin-bottom: 44px; }
  .ev-hero-eyebrow {
    max-width: min(100%, 320px);
    justify-content: center;
    white-space: normal;
    text-align: center;
    font-size: 10.5px;
    line-height: 1.25;
    letter-spacing: 0.05em;
    padding: 8px 12px;
  }
  .ev-hero p {
    max-width: 335px;
    font-size: 15.5px;
    line-height: 1.5;
  }
  .ev-hero-actions {
    align-items: stretch;
    max-width: 100%;
  }
  .ev-hero-actions .ev-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  .ev-hero-proof {
    gap: 8px;
  }
  .ev-hero-proof span {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    min-width: 0;
    font-size: 11px;
    text-align: center;
    padding: 7px 8px;
  }
  .ev-chrome-url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ev-nav-inner { gap: 12px; }
  .ev-nav-inner > .ev-btn { display: none; }
  .ev-nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 18px;
    right: 18px;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    padding: 10px;
    background: rgba(8, 13, 27, 0.98);
    border: 1px solid var(--ev-border);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  }
  .ev-nav-links li { list-style: none; }
  .ev-nav-links a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
  }
  .ev-nav-links a:hover { background: rgba(255,255,255,0.06); }
  .ev-nav-signin { display: none; }
  .ev-nav-mobile-toggle { display: inline-flex; }
  .ev-pricing-grid { grid-template-columns: 1fr; }
  .ev-bento { grid-template-columns: 1fr; }
  .ev-bento-card { grid-column: span 1 !important; }
  .ev-how-grid { grid-template-columns: 1fr; }
  .ev-portal-surfaces { grid-template-columns: 1fr; }
  .ev-usecases { grid-template-columns: 1fr; }
  .ev-principles { grid-template-columns: 1fr; }
  .ev-stats-grid { grid-template-columns: 1fr 1fr; }
  .ev-footer-inner { grid-template-columns: 1fr; }
  .ev-trust-logos { justify-content: center; }
  .ev-tour-caption { grid-template-columns: 1fr; gap: 12px; }
  .ev-campus { flex-direction: column; align-items: flex-start; }
  .ev-billing-toggle-wrap { flex-wrap: wrap; justify-content: center; }
  .ev-slide-card {
    padding: 18px;
    border-radius: 18px;
  }
  .ev-slide-copy h3 {
    font-size: 21px;
  }
  .ev-slide-card .ev-chrome-body {
    height: 240px;
  }
  .ev-host-tabs {
    width: 100%;
    flex-wrap: wrap;
  }
  .ev-host-tab {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
  }
  .ev-hero-visual {
    width: 100%;
    max-width: 100%;
  }
  .ev-hero-visual .ev-chrome-body {
    height: 280px;
  }
  .ev-dashboard-grid .ev-chrome-body,
  .ev-tour-screen .ev-chrome-body,
  .ev-chrome[data-host-pane] .ev-chrome-body {
    height: 300px;
  }
  .ev-chrome[data-host-pane="book"] .ev-chrome-body {
    height: 360px;
  }
  .ev-portal-split .ev-chrome-body {
    height: 250px;
  }
}