/* ============================================================
   Vorana — Marketing site styles  (Light theme · Navy + Teal)
   Brand: navy #1B2E4A · teal #2EBFAE
   ============================================================ */

:root {
  /* Surfaces */
  --bg:           #FFFFFF;
  --bg-elev:      #F7F9FB;
  --bg-elev-2:    #EEF2F6;
  --bg-deep:      #1B2E4A;          /* dark hero / footer / code surfaces */
  --bg-deep-2:    #142340;
  --border:       #E1E6EB;
  --border-soft:  #EEF1F4;
  --border-strong:#CFD6DE;

  /* Text */
  --text:         #1B2E4A;          /* navy — primary text */
  --text-muted:   #5C6E84;
  --text-dim:     #8896A8;
  --text-on-deep: #F4F7FA;          /* on navy/dark surfaces */
  --text-on-deep-muted: #9DB0CC;

  /* Brand */
  --navy:         #1B2E4A;
  --navy-deep:    #102540;
  --teal:         #2EBFAE;
  --teal-deep:    #1F9E91;
  --teal-light:   #6DD8C9;
  --teal-soft:    #E2F7F4;

  /* Aliases (kept for component CSS that previously referenced them) */
  --accent:       var(--teal);
  --accent-2:     var(--navy);
  --accent-3:     var(--teal-deep);

  /* Status */
  --success:      #16A34A;
  --warning:      #D97706;
  --danger:       #DC2626;

  /* Geometry */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(27, 46, 74, 0.05);
  --shadow:    0 4px 16px rgba(27, 46, 74, 0.06), 0 1px 2px rgba(27, 46, 74, 0.04);
  --shadow-lg: 0 12px 32px rgba(27, 46, 74, 0.1), 0 4px 8px rgba(27, 46, 74, 0.04);
  --shadow-glow: 0 0 0 1px rgba(46, 191, 174, 0.3), 0 8px 24px rgba(46, 191, 174, 0.18);

  --max-w: 1200px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--teal); color: #fff; }

/* ----------- Layout ----------- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 96px 0; position: relative; }

@media (max-width: 768px) {
  section { padding: 64px 0; }
}

/* ----------- Typography ----------- */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 16px;
}

.lead {
  font-size: 1.25rem;
  color: var(--text-muted);
  max-width: 720px;
  line-height: 1.55;
}

.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); }

.gradient-text {
  background: linear-gradient(120deg, var(--navy) 0%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* ----------- Header / Nav ----------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.site-header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Brand lockup */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-name {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.logo-tag {
  font-size: 0.6875rem;
  color: var(--text-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 2px;
}
/* The footer brand area already shows the tagline as a separate paragraph,
   so suppress the inline tagline there to avoid duplication. */
.site-footer .logo-tag { display: none; }
@media (max-width: 720px) {
  .logo-tag { display: none; }   /* keep mobile nav tight */
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 450;
  transition: color 150ms;
}
.nav-links a:hover, .nav-links a.active { color: var(--navy); }

.nav-cta { display: flex; gap: 12px; align-items: center; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text);
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-secondary { display: none; }
  .site-header.menu-open .nav-links {
    display: flex;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 16px 24px;
    gap: 4px;
  }
  .site-header.menu-open .nav-links a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
  }
}

/* ----------- Buttons ----------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: all 150ms ease;
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 1px 2px rgba(27, 46, 74, 0.2);
}
.btn-primary:hover {
  background: var(--navy-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(27, 46, 74, 0.25);
}

.btn-accent {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 1px 2px rgba(46, 191, 174, 0.3);
}
.btn-accent:hover {
  background: var(--teal-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(46, 191, 174, 0.3);
}

.btn-secondary {
  background: var(--bg);
  border-color: var(--border);
  color: var(--navy);
}
.btn-secondary:hover {
  background: var(--bg-elev);
  border-color: var(--border-strong);
}

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

.btn-lg { padding: 14px 24px; font-size: 1rem; }

/* ----------- Hero ----------- */
.hero {
  padding: 100px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(46, 191, 174, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(27, 46, 74, 0.04), transparent 60%);
  z-index: 0;
}
.hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(27, 46, 74, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 46, 74, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 30%, transparent 75%);
}

.hero-inner { position: relative; z-index: 1; text-align: center; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--teal-soft);
  border: 1px solid rgba(46, 191, 174, 0.25);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--teal-deep);
  margin-bottom: 24px;
  font-weight: 500;
}
.hero-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}

.hero h1 {
  margin-bottom: 24px;
  color: var(--navy);
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
}

.hero .lead {
  margin: 0 auto 36px;
  font-size: 1.1875rem;
}

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

.hero-meta {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.hero-meta-item {
  display: flex; align-items: center; gap: 8px;
}
.hero-meta-item svg { width: 14px; height: 14px; color: var(--teal); }

/* ----------- Hero terminal (kept dark for "tool" feel) ----------- */
.hero-terminal {
  margin: 48px auto 0;
  max-width: 880px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #1B2E4A 0%, #0E1F35 100%);
  border: 1px solid #102540;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(46, 191, 174, 0.10);
  overflow: hidden;
  text-align: left;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}
.terminal-bar .dots { display: flex; gap: 6px; }
.terminal-bar .dots span {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
.terminal-bar .title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 12px;
}
.terminal-body {
  padding: 20px 24px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  overflow-x: auto;
  color: var(--text-on-deep);
}
.terminal-body .prompt { color: var(--teal-light); user-select: none; }
.terminal-body .cmd    { color: #E6ECF5; }
.terminal-body .out    { color: var(--text-on-deep-muted); }
.terminal-body .ok     { color: #6EE7C7; }
.terminal-body .key    { color: var(--teal-light); }
.terminal-body .str    { color: #FCD34D; }
.terminal-body .num    { color: #F472B6; }
.terminal-body .com    { color: rgba(255, 255, 255, 0.4); }

/* ----------- Logos strip ----------- */
.logos {
  padding: 48px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-elev);
}
.logos-label {
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 24px;
  font-weight: 500;
}
.logos-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}
.logo-item {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ----------- Section heading ----------- */
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.section-head .lead { margin: 16px auto 0; }

/* ----------- Pipeline diagram ----------- */
.pipeline {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-top: 48px;
  position: relative;
}
.pipeline-step {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  position: relative;
  transition: all 200ms;
}
.pipeline-step:hover {
  background: var(--bg-elev);
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.pipeline-step .icon {
  width: 28px; height: 28px;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-soft);
  border-radius: 8px;
  color: var(--teal-deep);
}
.pipeline-step .icon svg { width: 16px; height: 16px; }
.pipeline-step .name { color: var(--navy); display: block; }
.pipeline-step .sub  { color: var(--text-dim); font-size: 0.6875rem; font-weight: 400; }

@media (max-width: 1000px) {
  .pipeline { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .pipeline { grid-template-columns: repeat(2, 1fr); }
}

/* ----------- Feature grid ----------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }

.feature {
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 200ms;
  position: relative;
  overflow: hidden;
}
.feature:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity: 0;
  transition: opacity 200ms;
}
.feature:hover::before { opacity: 1; }

.feature-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--teal-soft);
  border: 1px solid rgba(46, 191, 174, 0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-deep);
  margin-bottom: 20px;
}
.feature-icon svg { width: 20px; height: 20px; }
.feature h3 { margin-bottom: 8px; font-size: 1.125rem; }
.feature p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; }

/* ----------- Two-column "split" ----------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split.reverse > :first-child { order: 2; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.reverse > :first-child { order: 0; }
}
.split h2 { margin-bottom: 20px; }
.split p  { color: var(--text-muted); margin-bottom: 16px; font-size: 1.0625rem; }

.checks { list-style: none; margin-top: 24px; }
.checks li {
  display: flex; gap: 12px;
  padding: 8px 0;
  color: var(--text);
  font-size: 0.9375rem;
}
.checks li::before {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ----------- Code card (dark surface, kept for contrast) ----------- */
.code-card {
  background: var(--bg-deep);
  border: 1px solid var(--bg-deep-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  color: var(--text-on-deep);
}
.code-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-on-deep-muted);
  background: rgba(0, 0, 0, 0.18);
}
.code-card-tabs { display: flex; gap: 4px; }
.code-card-tabs .tab {
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-on-deep-muted);
  cursor: pointer;
}
.code-card-tabs .tab.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-deep);
}
.code-card pre {
  padding: 20px 24px;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.7;
}
.code-card pre code { background: none; padding: 0; }
.code-pane { display: none; }
.code-pane.active { display: block; }

/* Syntax tokens inside code-card */
.tok-key { color: var(--teal-light); }
.tok-str { color: #FCD34D; }
.tok-num { color: #F472B6; }
.tok-com { color: rgba(255, 255, 255, 0.4); font-style: italic; }
.tok-fn  { color: var(--teal-light); }
.tok-kw  { color: #FB7185; }
.tok-ty  { color: #C4B5FD; }

/* ----------- Stats ----------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 48px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
@media (max-width: 768px) {
  .stats { grid-template-columns: repeat(2, 1fr); padding: 32px 24px; gap: 32px; }
}
.stat-num {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 4px;
}
.stat-label { color: var(--text-muted); font-size: 0.875rem; }

/* ----------- Architecture diagram (HTML/CSS) ----------- */
.architecture {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px;
  margin-top: 48px;
}
.arch-grid {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 24px;
}
.arch-row {
  display: grid;
  gap: 12px;
  align-items: center;
}
.arch-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: left;
  font-weight: 600;
}
.arch-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.875rem;
  font-family: var(--font-mono);
  text-align: center;
  color: var(--navy);
  transition: all 200ms;
}
.arch-box.accent {
  background: linear-gradient(135deg, rgba(46, 191, 174, 0.10), rgba(27, 46, 74, 0.05));
  border-color: rgba(46, 191, 174, 0.4);
  color: var(--teal-deep);
  font-weight: 500;
}
.arch-box.muted {
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.arch-row.row-1 { grid-template-columns: 120px 1fr; }
.arch-row.row-2 { grid-template-columns: 120px 1fr 1fr 1fr; }
.arch-row.row-3 { grid-template-columns: 120px repeat(8, 1fr); }
.arch-row.row-4 { grid-template-columns: 120px repeat(4, 1fr); }
@media (max-width: 880px) {
  .architecture { padding: 24px; }
  .arch-row.row-1, .arch-row.row-2, .arch-row.row-3, .arch-row.row-4 {
    grid-template-columns: 1fr;
  }
  .arch-label { margin-bottom: 4px; }
  .arch-row.row-3 { display: grid; grid-template-columns: 1fr 1fr; }
  .arch-row.row-3 .arch-label { grid-column: 1 / -1; }
  .arch-row.row-4 { display: grid; grid-template-columns: 1fr 1fr; }
  .arch-row.row-4 .arch-label { grid-column: 1 / -1; }
}

/* ----------- Use cases ----------- */
.usecases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 768px) { .usecases { grid-template-columns: 1fr; } }
.usecase {
  padding: 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 200ms;
}
.usecase:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
}
.usecase-tag {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--teal-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
  font-weight: 600;
}
.usecase h3 { margin-bottom: 12px; }
.usecase p  { color: var(--text-muted); margin-bottom: 16px; }
.usecase ul { list-style: none; }
.usecase ul li {
  padding: 6px 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex; gap: 8px;
}
.usecase ul li::before { content: '→'; color: var(--teal); font-weight: 700; }

/* ----------- Pricing ----------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; } }
.plan {
  padding: 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  transition: all 200ms;
}
.plan:hover { box-shadow: var(--shadow); }
.plan.featured {
  background: linear-gradient(180deg, rgba(46, 191, 174, 0.05), rgba(27, 46, 74, 0.02));
  border-color: var(--teal);
  border-width: 2px;
  position: relative;
}
.plan.featured::before {
  content: 'Most popular';
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.plan h3 { margin-bottom: 8px; color: var(--navy); }
.plan-price { margin: 16px 0 24px; }
.plan-price .amount {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.plan-price .period { color: var(--text-muted); font-size: 0.9375rem; }
.plan-desc { color: var(--text-muted); font-size: 0.9375rem; margin-bottom: 24px; }
.plan ul { list-style: none; flex: 1; margin-bottom: 28px; }
.plan ul li {
  padding: 8px 0;
  font-size: 0.9375rem;
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--text);
}
.plan ul li::before {
  content: '';
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 4px;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan .btn { width: 100%; justify-content: center; }

/* ----------- FAQ ----------- */
.faq { max-width: 760px; margin: 48px auto 0; }
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.faq details[open] { padding-bottom: 24px; }
.faq summary {
  font-weight: 500;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--teal-deep);
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 200ms;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--text-muted); margin-top: 12px; }

/* ----------- CTA banner ----------- */
.cta-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 1px solid var(--navy-deep);
  border-radius: var(--radius-xl);
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: var(--text-on-deep);
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(46, 191, 174, 0.18), transparent 60%);
  pointer-events: none;
}
.cta-banner h2 { margin-bottom: 16px; color: #fff; }
.cta-banner p { color: var(--text-on-deep-muted); margin-bottom: 28px; font-size: 1.0625rem; }
.cta-banner .hero-actions { margin-bottom: 0; }
.cta-banner .btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.cta-banner .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ----------- Footer (dark) ----------- */
.site-footer {
  border-top: 1px solid var(--bg-deep-2);
  padding: 64px 0 32px;
  background: var(--bg-deep);
  color: var(--text-on-deep-muted);
}
.site-footer .logo {
  color: #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
.footer-brand p {
  color: var(--text-on-deep-muted);
  font-size: 0.9375rem;
  max-width: 360px;
  margin-top: 16px;
  line-height: 1.5;
}
.footer-col h5 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-col ul { list-style: none; }
.footer-col li { padding: 6px 0; }
.footer-col a {
  color: var(--text-on-deep-muted);
  font-size: 0.9375rem;
  transition: color 150ms;
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.875rem;
  flex-wrap: wrap;
}

/* ----------- Docs / sub-page styles ----------- */
.subhero {
  padding: 80px 0 48px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(46, 191, 174, 0.08), transparent 70%),
    var(--bg-elev);
}
.subhero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 16px;
  color: var(--navy);
}
.subhero .lead { font-size: 1.125rem; }

.docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 48px 0 96px;
}
@media (max-width: 880px) {
  .docs-layout { grid-template-columns: 1fr; gap: 24px; }
}

.docs-side {
  position: sticky;
  top: 88px;
  align-self: start;
  font-size: 0.9375rem;
}
@media (max-width: 880px) { .docs-side { position: static; } }
.docs-side h5 {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 24px 0 8px;
  font-weight: 600;
}
.docs-side ul { list-style: none; }
.docs-side a {
  display: block;
  padding: 6px 12px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all 150ms;
  border-left: 2px solid transparent;
}
.docs-side a:hover { color: var(--navy); }
.docs-side a.active {
  color: var(--teal-deep);
  border-left-color: var(--teal);
  background: var(--teal-soft);
}

.docs-content { max-width: 760px; }
.docs-content h2 {
  margin: 48px 0 16px;
  font-size: 1.75rem;
  scroll-margin-top: 88px;
  color: var(--navy);
}
.docs-content h2:first-child { margin-top: 0; }
.docs-content h3 {
  margin: 32px 0 12px;
  font-size: 1.25rem;
  scroll-margin-top: 88px;
  color: var(--navy);
}
.docs-content p, .docs-content ul, .docs-content ol {
  color: var(--text-muted);
  margin-bottom: 16px;
}
.docs-content ul, .docs-content ol { padding-left: 24px; }
.docs-content li { margin: 4px 0; }
.docs-content a {
  color: var(--teal-deep);
  border-bottom: 1px solid rgba(46, 191, 174, 0.3);
  transition: border-color 150ms;
}
.docs-content a:hover { border-color: var(--teal); }
.docs-content code {
  background: var(--bg-elev);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--teal-deep);
  border: 1px solid var(--border);
}
.docs-content pre {
  margin: 16px 0;
}
.docs-content pre code { background: none; border: none; color: inherit; padding: 0; }

.note {
  border-left: 3px solid var(--teal);
  background: var(--teal-soft);
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 16px 0;
  font-size: 0.9375rem;
  color: var(--navy);
}
.note strong { color: var(--navy); }

table.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.9375rem;
}
table.spec th, table.spec td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
table.spec th {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  font-weight: 600;
}
table.spec td { color: var(--text-muted); }
table.spec td:first-child { color: var(--navy); font-family: var(--font-mono); font-size: 0.875rem; }

/* ----------- Reveal animation ----------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Visual / graphic-heavy components
   ============================================================ */

/* ----------- Hero illustration ----------- */
.hero-art {
  margin: 56px auto 0;
  max-width: 960px;
  position: relative;
}
.hero-art svg { width: 100%; height: auto; display: block; }
.hero-art .glow {
  position: absolute;
  inset: 10% 5%;
  background: radial-gradient(ellipse at center, rgba(46, 191, 174, 0.12), transparent 60%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

/* ----------- Outcome strip ----------- */
.outcome-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 40px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
@media (max-width: 880px) {
  .outcome-strip { grid-template-columns: repeat(2, 1fr); padding: 28px 20px; gap: 28px; }
}
.outcome-item { text-align: center; }
.outcome-item .ic {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: var(--teal-soft);
  border: 1px solid rgba(46, 191, 174, 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-deep);
}
.outcome-item .ic svg { width: 22px; height: 22px; }
.outcome-item .num {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.1;
}
.outcome-item .lbl { color: var(--text-muted); font-size: 0.9375rem; margin-top: 6px; }

/* Colored bar variant — used on product.html for Reliable/Fast/Safe/Audited */
.outcome-bars {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-left: 44px;
}
.outcome-bar {
  --bar-bg: var(--teal);
  position: relative;
  display: flex;
  align-items: center;
  min-height: 104px;
  padding: 18px 64px 18px 88px;
  color: #fff;
  text-align: left;
}
.outcome-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bar-bg);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
  box-shadow: 0 6px 18px rgba(16, 37, 64, 0.10);
  z-index: 0;
  transition: box-shadow 220ms ease;
}
.outcome-bar > * { position: relative; z-index: 1; }
.outcome-bar .ic {
  position: absolute;
  left: -44px;
  top: 50%;
  transform: translateY(-50%);
  width: 96px;
  height: 96px;
  background: rgba(255, 255, 255, 0.18);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(16, 37, 64, 0.18);
}
.outcome-bar .ic svg { width: 38px; height: 38px; }
.outcome-bar .outcome-text { max-width: 760px; }
.outcome-bar .num {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.1;
}
.outcome-bar .lbl {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-top: 6px;
}
.outcome-bar--reliable { --bar-bg: var(--teal); }
.outcome-bar--fast     { --bar-bg: #E0A422; }
.outcome-bar--safe     { --bar-bg: var(--danger); }
.outcome-bar--audited  { --bar-bg: var(--navy); }

@media (max-width: 880px) {
  .outcome-bars { margin-left: 32px; gap: 14px; }
  .outcome-bar { min-height: 84px; padding: 14px 36px 14px 56px; }
  .outcome-bar .ic { width: 76px; height: 76px; left: -32px; }
  .outcome-bar .ic svg { width: 30px; height: 30px; }
  .outcome-bar .num { font-size: 1.125rem; }
  .outcome-bar .lbl { font-size: 0.875rem; }
}

/* ----------- 4-step flow ----------- */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 56px;
}
.flow-steps::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%; top: 36px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal) 20%, var(--navy) 80%, transparent);
  opacity: 0.35;
  z-index: 0;
}
@media (max-width: 880px) {
  .flow-steps { grid-template-columns: 1fr 1fr; gap: 32px; }
  .flow-steps::before { display: none; }
}
@media (max-width: 540px) {
  .flow-steps { grid-template-columns: 1fr; }
}
.flow-step { text-align: center; position: relative; z-index: 1; }
.flow-step .circle {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-deep);
  position: relative;
  transition: all 250ms;
  box-shadow: 0 0 0 6px var(--bg);
}
.flow-step:hover .circle {
  border-color: var(--teal);
  background: var(--teal-soft);
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px var(--bg), 0 8px 16px rgba(46, 191, 174, 0.15);
}
.flow-step .circle svg { width: 28px; height: 28px; }
.flow-step .circle .step-num {
  position: absolute;
  top: -8px; right: -8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--bg);
}
.flow-step h4 { font-size: 1.0625rem; margin-bottom: 6px; color: var(--navy); }
.flow-step p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }

/* ----------- Compare visual (Before / After) ----------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}
@media (max-width: 880px) { .compare { grid-template-columns: 1fr; } }
.compare-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
}
.compare-card.bad { border-color: rgba(220, 38, 38, 0.25); }
.compare-card.good {
  border-color: var(--teal);
  background: linear-gradient(180deg, var(--teal-soft), var(--bg));
}
.compare-tag {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.compare-card.bad  .compare-tag { background: rgba(220, 38, 38, 0.08); color: #B91C1C; }
.compare-card.good .compare-tag { background: var(--teal); color: #fff; }
.compare-card h3 { margin-bottom: 10px; font-size: 1.25rem; color: var(--navy); }
.compare-card .compare-lead {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border);
}
.compare-card ul { list-style: none; padding: 0; margin: 0; }
.compare-card ul li {
  padding: 6px 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
  display: flex; gap: 10px; align-items: flex-start;
}
.compare-card.bad  ul li::before { content: '\2715'; color: #DC2626; flex-shrink: 0; font-weight: 700; }
.compare-card.good ul li::before { content: '\2713'; color: var(--teal-deep); flex-shrink: 0; font-weight: 700; }

/* ----------- Industry / solution cards ----------- */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .industry-grid { grid-template-columns: 1fr; } }

.industry-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 200ms;
  display: flex; flex-direction: column;
}
.industry-card:hover {
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.industry-art {
  height: 160px;
  background: linear-gradient(135deg, var(--teal-soft), rgba(27, 46, 74, 0.04));
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.industry-art svg { width: 80px; height: 80px; color: var(--navy); position: relative; z-index: 1; }
.industry-art::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(46, 191, 174, 0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(27, 46, 74, 0.10), transparent 40%);
}
.industry-art--photo { background: transparent; }
.industry-art--photo::before { display: none; }
.industry-art--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.industry-body { padding: 24px 28px 28px; }
.industry-body h3 { margin-bottom: 8px; font-size: 1.125rem; color: var(--navy); }
.industry-body p  { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }

/* ----------- Provider orbit ----------- */
.provider-orbit {
  position: relative;
  height: 380px;
  display: flex; align-items: center; justify-content: center;
  margin: 56px auto 0;
  max-width: 720px;
}
.provider-orbit svg { width: 100%; height: 100%; }

/* ----------- Trust badges ----------- */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9375rem;
  color: var(--text);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.trust-badge svg {
  width: 18px; height: 18px;
  color: var(--teal);
}

/* ----------- Big visual section header ----------- */
.viz-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}
.viz-section-head .ic {
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  border-radius: 14px;
  background: var(--teal-soft);
  border: 1px solid rgba(46, 191, 174, 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-deep);
}
.viz-section-head .ic svg { width: 26px; height: 26px; }

/* ----------- Outcome cards (big icon, no jargon) ----------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .value-grid { grid-template-columns: 1fr; } }
.value-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  transition: all 200ms;
}
.value-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.value-card .big-ic {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--navy), var(--teal-deep));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 8px 20px rgba(27, 46, 74, 0.18);
}
.value-card .big-ic svg { width: 30px; height: 30px; }
.value-card h3 { margin-bottom: 10px; font-size: 1.125rem; color: var(--navy); }
.value-card p  { color: var(--text-muted); font-size: 0.9375rem; }

/* ----------- Get started cards (Resources page) ----------- */
.start-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 720px) { .start-grid { grid-template-columns: 1fr; } }
.start-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex; flex-direction: column;
  gap: 16px;
  transition: all 200ms;
  text-align: left;
}
.start-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.start-card .big-ic {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navy), var(--teal-deep));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.start-card .big-ic svg { width: 26px; height: 26px; }
.start-card h3 { font-size: 1.25rem; color: var(--navy); }
.start-card p { color: var(--text-muted); font-size: 0.9375rem; flex: 1; }
.start-card .arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* ============== Animation layer ============== */

/* Reveal direction variants — apply alongside .reveal */
.reveal.reveal--left   { transform: translate3d(-28px, 0, 0); }
.reveal.reveal--right  { transform: translate3d( 28px, 0, 0); }
.reveal.reveal--scale  { transform: scale(0.96); }
.reveal.reveal--bar {
  transform: translate3d(-40px, 0, 0);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.reveal--left.in,
.reveal.reveal--right.in,
.reveal.reveal--scale.in,
.reveal.reveal--bar.in { transform: none; }

/* Stagger: parent has .stagger-in; children get a per-index delay.
   Children with their own .reveal cascade naturally; children without
   .reveal still animate, driven by the parent's .in state. */
.stagger-in > * {
  transition-delay: calc(var(--i, 0) * 80ms);
}
.stagger-in > :not(.reveal) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 600ms ease, transform 600ms ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.stagger-in.in > :not(.reveal) {
  opacity: 1;
  transform: none;
}

/* Industry photo cards — gentle zoom on hover */
.industry-art--photo img {
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.industry-card:hover .industry-art--photo img {
  transform: scale(1.05);
}

/* Outcome bars — soft hover lift; the chevron and icon move together */
.outcome-bar {
  transition: transform 220ms ease;
}
.outcome-bar:hover {
  transform: translateX(6px);
}
.outcome-bar:hover::before {
  box-shadow: 0 10px 24px rgba(16, 37, 64, 0.18);
}
.outcome-bar .ic {
  transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.outcome-bar:hover .ic {
  transform: translateY(-50%) rotate(-8deg) scale(1.04);
}

/* Hero badge — pulsing status dot (preserves the static teal glow) */
@keyframes vorana-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--teal), 0 0 0 0   rgba(46, 191, 174, 0.55); }
  70%      { box-shadow: 0 0 8px var(--teal), 0 0 0 10px rgba(46, 191, 174, 0);    }
}
.hero-badge .dot {
  animation: vorana-pulse 2.4s ease-out infinite;
}

/* Logo mark — subtle wiggle on header hover */
.logo .logo-mark {
  transition: transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.logo:hover .logo-mark {
  transform: rotate(-8deg) scale(1.06);
}

/* Hero illustration — animated data flow between apps, the shield, and providers */
@keyframes vorana-flow-dash {
  to { stroke-dashoffset: -60; }
}
.hero-art .hero-flow path {
  stroke-dasharray: 4 8;
  animation: vorana-flow-dash 2.4s linear infinite;
}
.hero-art .hero-flow--out path {
  animation-direction: reverse;
}

/* Provider orbit — animate the dashed orbit rings without rotating chip labels */
@keyframes vorana-orbit-dash {
  to { stroke-dashoffset: -200; }
}
.provider-orbit svg ellipse {
  animation: vorana-orbit-dash 16s linear infinite;
}
.provider-orbit:hover svg ellipse { animation-play-state: paused; }

/* Scroll progress bar (thin teal line at top of viewport) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal));
  z-index: 1000;
  pointer-events: none;
  transition: width 80ms linear;
}

/* ============== Feature showcase (use case + live mock screen) ============== */
.feature-showcase {
  display: flex;
  flex-direction: column;
  gap: 96px;
  margin-top: 32px;
}
.showcase-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.showcase-row--reverse .showcase-text,
.showcase-row--reverse .showcase-screen { order: initial; }

.showcase-text {
  max-width: 720px;
  text-align: center;
}
.showcase-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--teal-soft);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.showcase-text h3 {
  font-size: 1.875rem;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 14px;
}
.showcase-text > p {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 18px;
}
.showcase-text strong { color: var(--navy); font-weight: 600; }
.showcase-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 22px;
}
.showcase-bullets li {
  position: relative;
  padding: 4px 0 4px 22px;
  font-size: 0.9375rem;
  color: var(--text);
}
.showcase-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 14px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
}

/* ---------- Scene state (typing + sequential reveal) ---------- */
.scene-pending {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms ease, transform 380ms ease;
}
.scene-pending.scene-revealed {
  opacity: 1;
  transform: none;
}
.scene-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: scene-cursor-blink 1s steps(2) infinite;
}
@keyframes scene-cursor-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.model-bar > span {
  width: 0;
  transition: width 750ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.model-row.scene-revealed .model-bar > span {
  width: var(--bar-w, 0);
}

/* ---------- Mock screen shell ---------- */

/* Outer 3D-fold wrapper added at runtime by JS. The screen hinges at its
   bottom edge so it rolls forward into view from below, lays flat at the
   centre, and rolls back away as it leaves the top — like a diary page
   turning. A gradient pseudo-overlay fakes the curl shadow at the top
   edge, intensifying as the page rolls. */
.screen-fold {
  width: 100%;
  display: flex;
  justify-content: center;
  perspective: 1800px;
  perspective-origin: 50% 100%;
}
.screen-fold-inner {
  position: relative;
  width: 100%;
  max-width: 920px;          /* match .showcase-screen so the curl shadow lines up */
  transform-origin: 50% 100%;
  transform: rotateX(var(--fold, 0deg)) translateZ(var(--fold-z, 0px));
  will-change: transform;
  border-radius: var(--radius-xl);
}
.screen-fold-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(16, 37, 64, 0.55) 0%,
    rgba(16, 37, 64, 0.30) 14%,
    rgba(16, 37, 64, 0.12) 26%,
    rgba(16, 37, 64, 0.04) 38%,
    transparent              52%);
  opacity: var(--fold-shade, 0);
  transition: opacity 80ms linear;
}

.showcase-screen {
  width: 100%;
  max-width: 920px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(16, 37, 64, 0.12);
  overflow: hidden;
  font-size: 0.9375rem;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 320ms ease;
}
.showcase-screen:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 70px rgba(16, 37, 64, 0.16);
}
.screen-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.screen-titlebar .tb-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--border);
}
.screen-titlebar .tb-label {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78125rem;
  color: var(--text-muted);
}
.screen-body { padding: 28px 30px; }
.showcase-screen .muted { color: var(--text-muted); }

/* ---------- Screen 1: consensus ---------- */
.screen-question {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg-elev);
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 0.9375rem;
  color: var(--navy);
}
.screen-question .qmark {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.screen-models { display: flex; flex-direction: column; gap: 10px; }
.model-row {
  display: grid;
  grid-template-columns: 150px 1fr 44px;
  gap: 12px;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78125rem;
}
.model-name { color: var(--navy); }
.model-bar {
  height: 8px;
  background: var(--bg-elev);
  border-radius: 4px;
  overflow: hidden;
}
.model-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal));
  border-radius: 4px;
}
.model-pct { color: var(--teal-deep); font-weight: 600; text-align: right; }
.screen-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.875rem;
  background: var(--teal-soft);
  color: var(--teal-deep);
  border: 1px solid rgba(46, 191, 174, 0.3);
}
.screen-verdict svg { width: 18px; height: 18px; flex-shrink: 0; }
.screen-verdict strong { color: var(--navy); font-weight: 600; }

/* ---------- Screen 2: cost ledger ---------- */
.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78125rem;
}
.ledger-table th {
  text-align: left;
  padding: 0 0 10px;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ledger-table th.num { text-align: right; }
.ledger-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--navy);
}
.ledger-table tbody tr:last-child td { border-bottom: 0; }
.ledger-table td.lq { font-family: 'Inter', sans-serif; font-size: 0.875rem; }
.ledger-table td.num { text-align: right; color: var(--navy); }
.pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.pill-cache { background: rgba(46, 191, 174, 0.12); color: var(--teal-deep); }
.pill-cheap { background: rgba(16, 163, 74, 0.12); color: #15803D; }
.pill-prem  { background: rgba(217, 119, 6, 0.14); color: #B45309; }
.pill-policy {
  background: rgba(27, 46, 74, 0.08);
  color: var(--navy);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
}
.ledger-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.ledger-footer .small { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ledger-total {
  font-size: 1.25rem;
  color: var(--navy);
  letter-spacing: -0.01em;
  font-weight: 700;
}
.ledger-savings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--teal-soft);
  color: var(--teal-deep);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.ledger-savings svg { width: 14px; height: 14px; }

/* ---------- Screen 3: runs / replay ---------- */
.runs-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.run-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78125rem;
}
.run-row:last-child { border-bottom: 0; }
.run-row--active {
  background: var(--teal-soft);
  position: relative;
}
.run-row--active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--teal);
}
.run-id { color: var(--navy); font-weight: 600; }
.run-status {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.status-ok   { background: rgba(46, 191, 174, 0.14); color: var(--teal-deep); }
.status-warn { background: rgba(217, 119, 6, 0.14);  color: #B45309; }
.run-time { color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 0.8125rem; }
.run-action {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--teal-deep);
  font-weight: 600;
  cursor: pointer;
}
.run-detail {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.run-detail-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 8px;
}
.run-trace {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78125rem;
  color: var(--navy);
}
.trace-ok   { color: var(--teal-deep); margin-right: 6px; font-weight: 700; }
.trace-warn { color: #B45309;          margin-right: 6px; font-weight: 700; }

/* ---------- Architecture step screens ---------- */

/* Step number pill that prefixes the eyebrow on architecture showcases */
.step-num-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--teal-deep);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 8px;
  vertical-align: middle;
}

/* --- Step 1: Connect (code diff) --- */
.diff-block {
  margin: 0;
  padding: 16px 0;
  background: var(--bg-deep);
  color: var(--text-on-deep);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  overflow-x: auto;
}
.diff-block code { display: block; }
.diff-block code > span {
  display: block;
  padding: 0 18px;
}
.diff-mark {
  display: inline-block;
  width: 14px;
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
}
.diff-ctx { color: var(--text-on-deep-muted); }
.diff-rem {
  background: rgba(220, 38, 38, 0.18);
  color: #FCA5A5;
}
.diff-rem .diff-mark { color: #F87171; }
.diff-add {
  background: rgba(46, 191, 174, 0.18);
  color: #A7F3D0;
}
.diff-add .diff-mark { color: var(--teal-light); }
.connect-result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--teal-soft);
  border: 1px solid rgba(46, 191, 174, 0.3);
  border-radius: 10px;
  font-size: 0.875rem;
}
.connect-result .trace-result-pill {
  background: var(--teal);
  color: #FFFFFF;
  font-weight: 600;
}

/* --- Step 2: Configure (admin panel) --- */
.cfg-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cfg-row:last-of-type { border-bottom: 0; }
.cfg-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
}
.cfg-value {
  font-size: 0.9375rem;
  color: var(--text);
}
.cfg-value strong { color: var(--navy); font-weight: 700; }
.cfg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cfg-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.cfg-chip--on {
  background: var(--teal-soft);
  border-color: rgba(46, 191, 174, 0.4);
  color: var(--teal-deep);
  font-weight: 600;
}
.cfg-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--navy);
  margin-right: 8px;
}
.cfg-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 14px;
  background: var(--teal);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.cfg-save svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .cfg-row { grid-template-columns: 1fr; gap: 6px; }
}

/* --- Step 3: Govern (live trace) --- */
.trace-flow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.trace-node {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--navy);
}
.trace-node:last-child { border-bottom: 0; }
.trace-node strong { font-weight: 700; }
.trace-node .muted {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  text-align: right;
  font-weight: 400;
}
.trace-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal-deep);
  font-weight: 800;
  font-size: 0.75rem;
}
.trace-result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--teal-soft);
  border: 1px solid rgba(46, 191, 174, 0.3);
  border-radius: 10px;
  font-size: 0.875rem;
}
.trace-result-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--teal);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* --- Step 4: Improve (dashboard) --- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 600px) { .kpi-row { grid-template-columns: 1fr; } }
.kpi-tile {
  padding: 16px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.kpi-label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.1;
}
.kpi-delta {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}
.kpi-delta.delta-up   { color: var(--teal-deep); }
.kpi-delta.delta-down { color: var(--teal-deep); }

.flagged-list {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.flagged-head {
  padding: 10px 14px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 600;
}
.flagged-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78125rem;
}
.flagged-row:last-child { border-bottom: 0; }
.flagged-row .muted {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
}
.flagged-row .run-action {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--teal-deep);
  font-weight: 600;
}

/* ---------- Screen 5: skill registry ---------- */
.screen-skills .skills-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.875rem;
  color: var(--navy);
}
.screen-skills .skills-search svg { width: 16px; height: 16px; color: var(--text-muted); }
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.skill-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skill-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.skill-card-ic {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-soft);
  color: var(--teal-deep);
  font-size: 16px;
  font-weight: 700;
}
.skill-ic-shield::before { content: '\1F512'; }   /* lock */
.skill-ic-spark::before  { content: '\26A1'; }    /* lightning */
.skill-ic-doc::before    { content: '\1F4C4'; }   /* page */
.skill-ic-bolt::before   { content: '\2728'; }    /* sparkles */
.skill-card-title { min-width: 0; }
.skill-card-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.skill-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.75rem;
}
.skill-card-meta .muted { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.ver-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal-deep);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
}
.skill-card-desc {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.skill-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.stat-pill strong { color: var(--navy); font-weight: 700; }

.skill-detail {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
}
.skill-detail-head {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.skill-detail-head strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--navy);
  font-weight: 700;
}
.skill-usage {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.usage-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--navy);
}
.usage-chip--more { background: var(--teal-soft); border-color: rgba(46, 191, 174, 0.3); color: var(--teal-deep); font-weight: 600; }

@media (max-width: 600px) {
  .skills-grid { grid-template-columns: 1fr; }
}

/* ---------- Screen 4: PII redaction ---------- */
.screen-redact .screen-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
}
@media (max-width: 540px) {
  .screen-redact .screen-body {
    grid-template-columns: 1fr;
  }
  .redact-arrow { transform: rotate(90deg); justify-self: center; }
}
.redact-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--bg-elev);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.redact-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.redact-icon {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.redact-icon--in  { background: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
.redact-icon--out { background: var(--teal); box-shadow: 0 0 0 3px rgba(46, 191, 174, 0.18); }
.redact-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--navy);
}
.redact-pii {
  background: rgba(220, 38, 38, 0.14);
  color: #B91C1C;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
}
.redacted {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--navy);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.redact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.redact-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  align-self: center;
}
.redact-arrow svg { width: 28px; height: 28px; }

/* ============== Industry flip card (home page) ============== */
.industry-flip {
  max-width: 1040px;
  margin: 24px auto 0;
}
.industry-flip-stage {
  position: relative;
}

/* Glassy floating buttons overlaid on the card edges */
.ind-flip-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  color: var(--navy);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), background 200ms ease, box-shadow 220ms ease;
}
.ind-flip-prev { left: 18px; }
.ind-flip-next { right: 18px; }
.ind-flip-btn:hover {
  background: #FFFFFF;
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}
.ind-flip-prev:hover { transform: translate(-3px, -50%) scale(1.04); }
.ind-flip-next:hover { transform: translate( 3px, -50%) scale(1.04); }
.ind-flip-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.ind-flip-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--teal-deep);
  transition: transform 200ms ease;
}
.ind-flip-prev:hover svg { transform: translateX(-3px); }
.ind-flip-next:hover svg { transform: translateX( 3px); }
.ind-flip-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
  min-width: 0;
}
.ind-flip-btn-text-right { text-align: right; }
.ind-flip-btn-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.ind-flip-btn-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* Progress chip floats top-center on the card */
.ind-flip-progress {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.90);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  pointer-events: none;
}
.ind-flip-progress [data-current-idx] { color: var(--navy); font-weight: 700; }
.ind-flip-progress-sep { opacity: 0.5; margin: 0 4px; }

/* The 3D card */
.industry-flip-card {
  position: relative;
  width: 100%;
  height: 480px;
  perspective: 1800px;
  perspective-origin: 50% 50%;
}
.ind-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(0.7, 0, 0.3, 1);
  will-change: transform;
}
.ind-flip-face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 50px rgba(16, 37, 64, 0.18);
}
.ind-flip-back { transform: rotateY(180deg); }

.ind-flip-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 37, 64, 0.10) 0%,
    rgba(16, 37, 64, 0.55) 55%,
    rgba(16, 37, 64, 0.95) 100%);
}
.ind-flip-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 36px 40px 36px;
  color: #FFFFFF;
}
.ind-flip-content h3 {
  font-size: 1.875rem;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin-bottom: 10px;
  line-height: 1.15;
}
.ind-flip-content p {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 18px;
  max-width: 640px;
}
.ind-flip-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
}
.ind-flip-content li {
  position: relative;
  padding-left: 22px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.92);
}
.ind-flip-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 2px;
}

@media (max-width: 720px) {
  .industry-flip             { margin: 18px 0 0; }
  .industry-flip-card        { height: 460px; }
  .ind-flip-content          { padding: 22px 22px 26px; }
  .ind-flip-content h3       { font-size: 1.5rem; }
  .ind-flip-content p        { font-size: 0.9375rem; max-width: 100%; }
  .ind-flip-btn              { padding: 10px 12px; gap: 8px; border-radius: 12px; }
  .ind-flip-prev             { left: 10px; }
  .ind-flip-next             { right: 10px; }
  .ind-flip-btn-name         { max-width: 90px; font-size: 0.78125rem; }
  .ind-flip-btn-eyebrow      { font-size: 0.5625rem; }
  .ind-flip-progress         { top: 12px; padding: 4px 12px; font-size: 0.75rem; }
}

/* ============== Developers page ============== */
.dev-quickbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.dev-quick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  background: #FFFFFF;
  border: 1px solid var(--border);
  transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.dev-quick:hover {
  border-color: var(--teal);
  color: var(--teal-deep);
  transform: translateY(-1px);
}
.dev-quick-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--teal-soft);
  color: var(--teal-deep);
  font-size: 0.875rem;
}

.dev-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
@media (max-width: 880px) {
  .dev-steps { grid-template-columns: 1fr; }
}
.dev-step {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.dev-step:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.dev-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 14px;
  box-shadow: 0 4px 10px rgba(46, 191, 174, 0.30);
}
.dev-step h4 {
  font-size: 1.0625rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.dev-step p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}
.dev-step code {
  background: var(--teal-soft);
  color: var(--teal-deep);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.8125rem;
}

.dev-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 880px) {
  .dev-twocol { grid-template-columns: 1fr; gap: 28px; }
}
.dev-twocol code {
  background: var(--teal-soft);
  color: var(--teal-deep);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.8125rem;
}

/* ============== Page rails (forward & backward navigators) ============== */
.page-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  pointer-events: auto;
}
.page-rail--right { right: 0; }
.page-rail--left  { left:  0; }

.page-rail-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 10px;
  background: var(--navy);
  color: #FFFFFF;
  text-decoration: none;
  transition: padding 220ms ease, background 200ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.page-rail--right .page-rail-link {
  border-radius: 14px 0 0 14px;
  box-shadow: -10px 0 28px rgba(16, 37, 64, 0.22);
}
.page-rail--left .page-rail-link {
  border-radius: 0 14px 14px 0;
  box-shadow: 10px 0 28px rgba(16, 37, 64, 0.22);
}
.page-rail-link:hover {
  background: var(--navy-deep);
}
.page-rail--right .page-rail-link:hover {
  transform: translateX(-3px);
  box-shadow: -14px 0 36px rgba(16, 37, 64, 0.30);
}
.page-rail--left .page-rail-link:hover {
  transform: translateX(3px);
  box-shadow: 14px 0 36px rgba(16, 37, 64, 0.30);
}
.page-rail-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Vertical text running along the spine of the rail. The right rail uses
   vertical-rl (characters rotated 90° CW, head-tilt-right reading); the
   left rail rotates 180° on top of that so its characters read with a
   head-tilt-left, and the arrow stays at the visually-outer end. */
.page-rail-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  writing-mode: vertical-rl;
  line-height: 1;
}
.page-rail--left .page-rail-text {
  transform: rotate(180deg);
}
.page-rail-eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}
.page-rail-name {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

.page-rail-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 220ms ease;
}
.page-rail--right .page-rail-link:hover .page-rail-arrow { transform: translateX(4px); }
.page-rail--left  .page-rail-link:hover .page-rail-arrow { transform: translateX(-4px); }

@media (max-width: 720px) {
  .page-rail-link  { padding: 16px 8px; gap: 10px; }
  .page-rail--right .page-rail-link { border-radius: 10px 0 0 10px; }
  .page-rail--left  .page-rail-link { border-radius: 0 10px 10px 0; }
  .page-rail-text  { gap: 8px; }
  .page-rail-eyebrow { font-size: 0.5625rem; letter-spacing: 0.14em; }
  .page-rail-name    { font-size: 0.78125rem; }
  .page-rail-arrow   { width: 16px; height: 16px; }
}

/* Page-transition keyframes. Direction-aware: clicking "Next" slides the
   current page off to the LEFT and the destination slides in from the
   RIGHT; clicking "Back" reverses both. Direct children of body animate
   together; the rails, scroll-progress bar, and script tags are excluded
   so they stay put during the transition. */
@keyframes vorana-page-out-left {
  from { transform: translate3d(0, 0, 0);    opacity: 1; }
  to   { transform: translate3d(-12vw, 0, 0); opacity: 0; }
}
@keyframes vorana-page-out-right {
  from { transform: translate3d(0, 0, 0);   opacity: 1; }
  to   { transform: translate3d(12vw, 0, 0); opacity: 0; }
}
@keyframes vorana-page-in-from-right {
  from { transform: translate3d(12vw, 0, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0);    opacity: 1; }
}
@keyframes vorana-page-in-from-left {
  from { transform: translate3d(-12vw, 0, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0);     opacity: 1; }
}

body.page-leaving--forward  > *:not(.page-rail):not(.scroll-progress):not(script) {
  animation: vorana-page-out-left  380ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
body.page-leaving--backward > *:not(.page-rail):not(.scroll-progress):not(script) {
  animation: vorana-page-out-right 380ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
body.page-entering--forward  > *:not(.page-rail):not(.scroll-progress):not(script) {
  animation: vorana-page-in-from-right 540ms cubic-bezier(0.16, 0.84, 0.44, 1) backwards;
}
body.page-entering--backward > *:not(.page-rail):not(.scroll-progress):not(script) {
  animation: vorana-page-in-from-left  540ms cubic-bezier(0.16, 0.84, 0.44, 1) backwards;
}
body.page-leaving { overflow: hidden; }

/* ----------- How-it-works: sticky scroll reveal (active + top stack) -----------
   The .flow-scroll-track is taller than the viewport. While it's in view
   the .flow-scroll-stage stays pinned and JS sets each step's data-role
   based on scroll progress:
     - "upcoming"  → off-stage right, hidden
     - "active"    → big card centered below the pill row
     - "stacked"   → compact pill in the horizontal row above active.
                     Per-step --stack-slot is set by JS; the parent's
                     --stack-count is set on the container so the row
                     can stay centered as more pills join.
*/
.flow-scroll-section { position: relative; }
.flow-scroll-track   { position: relative; height: 320vh; }
.flow-scroll-stage   {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 32px;
  box-sizing: border-box;
}

.flow-steps--scroll {
  position: relative;
  height: 440px;
  margin-top: 32px;
  display: block;          /* override .flow-steps grid */
  --stack-count: 0;
  --stack-pitch: 220px;    /* horizontal distance between adjacent pill centers — sized so 4 pills fit at the 980px breakpoint */
}
.flow-steps--scroll::before { display: none; }

/* Base / "upcoming" state: lives at the active position but translated
   off-stage to the right and faded out. The next step slides in from
   this position when its turn arrives. */
.flow-steps--scroll .flow-step {
  position: absolute;
  top: 140px;              /* active sits below the pill row */
  left: 50%;
  width: 380px;
  padding: 0 12px;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 16px;
  display: block;
  opacity: 0;
  transform: translate(-50%, 0) translateX(40vw);
  transition:
    transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
    top       720ms cubic-bezier(0.22, 0.61, 0.36, 1),
    left      720ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width     720ms cubic-bezier(0.22, 0.61, 0.36, 1),
    padding   400ms ease,
    background 400ms ease,
    border-color 400ms ease,
    opacity   500ms ease;
  z-index: 1;
}
.flow-steps--scroll .flow-step h4 { margin-top: 0; }
.flow-steps--scroll .flow-step p  { margin-bottom: 0; }

/* Active: prominent card, centered horizontally below the pill row */
.flow-steps--scroll .flow-step[data-role="active"] {
  opacity: 1;
  transform: translate(-50%, 0);
  z-index: 3;
}

/* Stacked: compact horizontal pill at the top of the stage. Slots fan out
   left-and-right from horizontal center using --stack-slot and the parent's
   --stack-count, so the row stays centered as more pills join.

   Internally the pill uses a 2x2 grid (icon + title on row 1, description
   spanning row 2). The description starts collapsed (max-height: 0) and
   expands when the parent gets data-all-stacked="true" — i.e., the user
   scrolled past every step and the active card is now empty. */
.flow-steps--scroll .flow-step[data-role="stacked"] {
  opacity: 1;
  top: 20px;
  left: 50%;
  width: 200px;
  padding: 10px 14px 12px;
  background: var(--bg);
  border-color: var(--border);
  text-align: left;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas:
    "icon title"
    "desc desc";
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  transform: translate(
    calc(
      -50%
      + (var(--stack-slot, 0) - (var(--stack-count, 1) - 1) / 2)
      * var(--stack-pitch)
    ),
    0
  );
  z-index: 2;
}
.flow-steps--scroll .flow-step[data-role="stacked"] .circle {
  grid-area: icon;
  width: 40px;
  height: 40px;
  margin: 0;
  box-shadow: none;
  flex-shrink: 0;
}
.flow-steps--scroll .flow-step[data-role="stacked"] .circle svg {
  width: 18px;
  height: 18px;
}
.flow-steps--scroll .flow-step[data-role="stacked"] .circle .step-num {
  width: 18px;
  height: 18px;
  top: -6px;
  right: -6px;
  font-size: 0.625rem;
  border-width: 2px;
}
.flow-steps--scroll .flow-step[data-role="stacked"] h4 {
  grid-area: title;
  margin: 0;
  font-size: 0.9375rem;
}
.flow-steps--scroll .flow-step[data-role="stacked"] p {
  grid-area: desc;
  display: block;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
  /* Fixed (not max-) height in both states so every pill ends up the
     same total size regardless of how long its description text is. */
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    height     540ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity    420ms ease 80ms,
    margin-top 420ms ease;
}

/* Final state: every step is stacked, the active slot is empty.
   Expand each pill's description so the user gets all four boxes
   side-by-side at the same height. */
.flow-steps--scroll[data-all-stacked="true"] .flow-step[data-role="stacked"] p {
  height: 96px;        /* fits 4 lines of 0.8125rem text at 1.45 line-height */
  opacity: 1;
  margin-top: 10px;
}

@media (max-width: 979px) {
  /* On narrow viewports, fall back to a normal stacked grid — no pinning,
     no role machinery. */
  .flow-scroll-track { height: auto; }
  .flow-scroll-stage {
    position: static;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }
  .flow-steps--scroll {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 0 8px;
  }
  .flow-steps--scroll .flow-step {
    position: static;
    width: auto;
    padding: 0;
    transform: none;
    opacity: 1;
    background: transparent;
    border-color: transparent;
    text-align: center;
    display: block;
  }
  .flow-steps--scroll .flow-step .circle {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    box-shadow: 0 0 0 6px var(--bg);
  }
  .flow-steps--scroll .flow-step .circle svg { width: 28px; height: 28px; }
  .flow-steps--scroll .flow-step .circle .step-num {
    width: 26px; height: 26px; top: -8px; right: -8px;
    font-size: 0.75rem; border-width: 3px;
  }
  .flow-steps--scroll .flow-step h4 { font-size: 1.0625rem; }
  .flow-steps--scroll .flow-step p  { display: block; }
}
@media (max-width: 540px) {
  .flow-steps--scroll { grid-template-columns: 1fr; }
}

/* ----------- Splash screen -----------
   Brief brand splash shown by script.js on the first page load of each
   browser session. Logo sits in a pulsing teal-bordered circle on a soft
   gradient background; fades out after ~1.5s. */
html.splash-active { overflow: hidden; }
html.splash-active body { overflow: hidden; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background:
    radial-gradient(circle at 30% 20%, rgba(46, 191, 174, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 75% 80%, rgba(27, 46, 74, 0.06) 0%, transparent 55%),
    #FBFCFD;
  opacity: 1;
  transition: opacity 480ms ease;
}
.splash--leaving { opacity: 0; pointer-events: none; }

.splash-circle {
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 48px rgba(46, 191, 174, 0.20);
  animation: splashPulse 1.4s ease-in-out infinite;
  position: relative;
}
.splash-circle::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(46, 191, 174, 0.35);
  animation: splashRing 1.8s ease-out infinite;
}
.splash-mark {
  width: 76px;
  height: 76px;
}
.splash-name {
  margin-top: 8px;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.splash-tag {
  font-size: 0.6875rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
}
@keyframes splashPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes splashRing {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0;   }
}

/* ----------- Contact form ----------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 56px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
.contact-aside h3 {
  font-size: 1rem;
  color: var(--navy);
  margin: 0 0 12px;
  font-weight: 600;
}
.contact-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-bullets li {
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.contact-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal-soft);
  border: 2px solid var(--teal);
}
.contact-direct {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
.contact-direct a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.contact-note {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 24px;
}
.contact-note a { color: var(--teal-deep); }

.contact-form {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(16, 37, 64, 0.04);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-field span {
  font-size: 0.8125rem;
  color: var(--navy);
  font-weight: 500;
}
.contact-field span em {
  color: var(--teal-deep);
  font-style: normal;
  margin-left: 2px;
}
.contact-field input,
.contact-field textarea {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #FFFFFF;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  width: 100%;
  box-sizing: border-box;
}
.contact-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.contact-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}
.contact-hint a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.contact-status {
  font-size: 0.875rem;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
}
.contact-status--ok {
  background: var(--teal-soft);
  color: var(--teal-deep);
  border: 1px solid var(--teal);
}

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-row  { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
}

/* ----------- Pillar card (Reliable / Fast / Safe / Audited) -----------
   A single rounded white container with an internal grid of pillars.
   Each pillar = small accent-coloured icon, title, paragraph. */
.pillar-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px 44px;
  box-shadow: 0 8px 32px rgba(16, 37, 64, 0.04);
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
}
.pillar { padding: 0; }
.pillar-ic {
  width: 28px;
  height: 28px;
  color: var(--teal-deep);
  margin-bottom: 18px;
}
.pillar-ic svg { width: 100%; height: 100%; display: block; }
.pillar h3 {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  color: var(--navy);
  font-weight: 600;
}
.pillar p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (min-width: 1100px) {
  .pillar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 40px; }
}
@media (max-width: 700px) {
  .pillar-card { padding: 32px 24px; }
  .pillar-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ----------- Legal documents (privacy, terms, dpa) ----------- */
.legal-doc {
  max-width: 760px;
  margin: 0 auto;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
}
.legal-doc h2 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 1.25rem;
  color: var(--navy);
}
.legal-doc h2:first-of-type { margin-top: 24px; }
.legal-doc p { margin: 0 0 16px; }
.legal-doc ul { margin: 0 0 16px; padding-left: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc a:hover { color: var(--teal); }
.legal-doc .legal-note {
  background: var(--teal-soft);
  border-left: 3px solid var(--teal);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-bottom: 32px;
}

/* ----------- Cookie consent banner -----------
   Injected by script.js on first visit; persists choice in localStorage
   under key "vorana-cookie-consent" (value "accepted" or "declined"). */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  width: min(720px, calc(100% - 32px));
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(16, 37, 64, 0.18);
  padding: 18px 22px;
  z-index: 1000;
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0;
  transition:
    transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity   320ms ease;
}
.cookie-banner.cookie-banner--visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-banner-text { flex: 1 1 320px; min-width: 0; }
.cookie-banner-text strong {
  display: block;
  color: var(--navy);
  font-size: 0.9375rem;
  margin-bottom: 4px;
}
.cookie-banner-text p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.cookie-banner-text a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-banner-actions .btn { padding: 9px 18px; font-size: 0.875rem; }
@media (max-width: 600px) {
  .cookie-banner { padding: 16px 18px; bottom: 12px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1; }
}

/* ----------- Reduced motion ----------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  /* Show all steps in their natural layout when motion is reduced */
  .flow-scroll-track { height: auto; }
  .flow-scroll-stage { position: static; height: auto; padding: 0; }
  .flow-steps--scroll {
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .flow-steps--scroll .flow-step {
    position: static;
    width: auto;
    padding: 0;
    transform: none;
    opacity: 1;
    background: transparent;
    border-color: transparent;
    text-align: center;
    display: block;
  }
  .flow-steps--scroll .flow-step .circle {
    width: 72px; height: 72px;
    margin: 0 auto 20px;
    box-shadow: 0 0 0 6px var(--bg);
  }
  .flow-steps--scroll .flow-step .circle svg { width: 28px; height: 28px; }
  .flow-steps--scroll .flow-step .circle .step-num {
    width: 26px; height: 26px; top: -8px; right: -8px;
    font-size: 0.75rem; border-width: 3px;
  }
  .flow-steps--scroll .flow-step h4 { font-size: 1.0625rem; }
  .flow-steps--scroll .flow-step p  { display: block; }
}