/* ============================================================
   Aphelion — shared marketing-site stylesheet
   Single source of truth for the public website (home, AI
   agent, integrate, services, data enrichment, events, blog,
   about). Light theme: grey page, white panels, blue buttons.

   Link this file in every page:
     <link rel="stylesheet" href="aphelion.css" />

   Page-specific one-off rules can still live in a small inline
   <style> block on each page, but everything shared lives here.
   ============================================================ */

/* ── DESIGN TOKENS ───────────────────────────────────────────
   Edit these to restyle the whole site at once. */
:root {
  /* surfaces */
  --bg:            #ededee;   /* page background (light grey) */
  --surface:       #375072;   /* panels / cards old ffffff */
  --surface-2:     #f6f6f7;   /* subtle alt surface */
  --surface-3:     #375072;   /* hover / nested surface old fafafa*/

  /* lines */
  --border:        rgba(0,0,0,0.10);
  --border-hi:     rgba(0,0,0,0.17);

  /* brand blues (from the related app) */
  --btn:           #827d44;   /* primary button */
  --btn-hover:     #b9b661;   /* primary button hover */
  --accent:        #446182;   /* accent — links, eyebrows, emphasis */
  --accent-dark:   #375072;   /* accent hover / deeper */
  --accent-glow:   rgba(68,97,130,0.10);
  --accent-a08:    rgba(68,97,130,0.08);
  --accent-a12:    rgba(68,97,130,0.12);
  --accent-a18:    rgba(68,97,130,0.18);
  --accent-a20:    rgba(68,97,130,0.20);
  --accent-a30:    rgba(68,97,130,0.30);
  --accent-a50:    rgba(68,97,130,0.50);

  /* button label colour (text on the blue buttons) */
  --btn-text:      #ffffff;

  /* type */
  --text-hi:       #1d1d1f;   /* headings / primary */
  --text-mid:      #5f6066;   /* body / secondary */
  --text-lo:       #446182;   /* muted accent text */
  --text-faint:    rgba(29,29,31,0.42);  /* optional / muted rows */

  --error:         #b03030;
  --success:       #2a7a3a;

  /* fonts — system stack, matching the app */
  --font-display:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:     'Menlo', 'Consolas', 'SF Mono', 'Roboto Mono', monospace;

  /* radii */
  --radius-sm:     8px;
  --radius-md:     10px;
  --radius-lg:     12px;

  --max-w:         1200px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BASE TYPOGRAPHY ── */
body {
  background: var(--bg);
  color: var(--text-hi);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── NOISE OVERLAY (subtle texture) ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
  z-index: 0;
}

/* ── LAYOUT ── */
.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── NAV ── */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 100;
}

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  width: 130px;
  height: auto;
  position: relative;
  z-index: 101;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--text-hi); }
.nav-links a.active { color: var(--accent); }

/* ── BURGER BUTTON ── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  position: relative;
  z-index: 101;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-hi);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE FULL-SCREEN MENU ── */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  flex-direction: column;
  padding: 100px 24px 48px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.open { transform: translateY(0); }

.mobile-menu::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}

.mobile-menu a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--text-mid);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(16px);
  transition: background 0.2s, border-color 0.2s, color 0.2s,
              opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu.open a { opacity: 1; transform: translateY(0); }

.mobile-menu.open a:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.10s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open a:nth-child(4) { transition-delay: 0.20s; }
.mobile-menu.open a:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.open a:nth-child(6) { transition-delay: 0.30s; }
.mobile-menu.open a:nth-child(7) { transition-delay: 0.35s; }
.mobile-menu.open a:nth-child(8) { transition-delay: 0.40s; }

.mobile-menu a:hover {
  background: var(--surface-2);
  border-color: var(--accent-a20);
  color: var(--text-faint);
}

.mobile-menu a.active {
  color: var(--accent);
  border-color: var(--accent-a30);
}

.mobile-menu a::after {
  content: '\2192';
  margin-left: auto;
  font-size: 16px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s, transform 0.2s;
}

.mobile-menu a:hover::after { opacity: 1; transform: translateX(0); }

@media (max-width: 768px) {
  .nav-links   { display: none; }
  .nav-burger  { display: flex; }
  .mobile-menu { display: flex; }
  body.menu-open { overflow: hidden; }
}

/* ── BADGE ── */
.badge-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-a12);
  border: 1px solid var(--accent-a20);
  padding: 4px 12px;
  border-radius: 100px;
}

/* ── HERO ── */
.hero {
  padding: 180px 0 60px;
  text-align: left;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(58px, 8vw, 78px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  margin-bottom: -20px;
  max-width: 880px;
}

h1 em {
  color: var(--accent);
  margin-bottom: 24px;
}

.hero-sub {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-mid);
  text-align: left;
  margin: 0 auto 38px;
  line-height: 1.6;
}

.hero-image {
  position: absolute;
  top: 120px;
  right: 20px;
  z-index: 1;
}

h2 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
}

h2 em {
  color: var(--accent);
}

/* ── SPLIT SECTIONS ── */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 64px;
}

.split-section.reverse { direction: rtl; }
.split-section.reverse > * { direction: ltr; }

.split-text .eyebrow {
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: block;
}

.split-text h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  margin-bottom: 18px;
}

.split-text h2 em {
  color: var(--accent);
}

.split-text p {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 14px;
}

.split-text p:last-child { margin-bottom: 0; }

.split-text .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent-a30);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  transition: background 0.2s, border-color 0.2s;
}

.split-text .btn-secondary:hover {
  background: var(--accent-a08);
  border-color: var(--accent-a50);
}

/* graphic panel */
.split-graphic {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.split-graphic::before {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(ellipse, var(--accent-a12) 0%, transparent 70%);
  pointer-events: none;
}

.graphic-placeholder {
  text-align: center;
  color: var(--text-mid);
  position: relative;
  z-index: 1;
}

.graphic-placeholder .big-icon {
  font-size: 56px;
  display: block;
  margin-bottom: 16px;
  opacity: 0.5;
}

.graphic-placeholder p {
  font-size: 13px;
  color: var(--text-lo);
}

.graphic-image {
  width: 545px;
  height: 343px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: block;
}

/* ── EMAIL / CONTACT FORM ── */
.form-row {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto 16px;
}

.form-row input[type="email"] {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text-hi);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-row input[type="email"]::placeholder { color: var(--text-mid); }
.form-row input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-a12);
}

/* primary button */
.btn-primary {
  background: var(--btn);
  color: var(--btn-text);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}

.btn-primary:hover  { background: var(--btn-hover); }
.btn-primary:active { transform: scale(0.97); }

/* learn-more button */
.btn-learn {
  display: block;
  margin: 0 auto;
  background: var(--btn);
  color: var(--btn-text);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}

.btn-learn:hover  { background: var(--btn-hover); }
.btn-learn:active { transform: scale(0.97); }

.form-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-align: center;
}

.success-msg {
  display: none;
  font-size: 14px;
  color: var(--accent);
  text-align: center;
  margin-top: 12px;
}

/* ── DIVIDER ── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 64px 0;
}

/* ── SECTION LABELS ── */
.section-label {
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-lo);
  margin-bottom: 10px;
  text-align: left;
}

.section-intro {
  font-size: 18px;
  color: var(--text-mid);
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: left;
  line-height: 1.7;
}

/* ── FEATURES GRID ── */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 64px;
}

@media (max-width: 1024px) {
  .features { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}

.feature {
  background: var(--surface);
  padding: 32px 32px;
  transition: background 0.2s;
}

.feature-icon {
  font-size: 24px;
  margin-bottom: 16px;
  display: block;
}

.feature-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--bg);
  margin-bottom: 8px;
}

.feature-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
}

/* ── STATS ── */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 22px;
  text-align: center;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  color: var(--text-hi);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-num span { color: var(--accent); }

.stat-label {
  font-size: 15px;
  color: var(--text-mid);
}

.stat-footer {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-mid);
  margin-bottom: 30px;
  text-align: center;
}

/* ── FAQ ── */
.faq { margin-bottom: 64px; }

.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text-hi);
  text-align: left;
}

.faq-arrow {
  font-size: 18px;
  color: var(--text-lo);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.faq-item.open .faq-arrow { transform: rotate(45deg); color: var(--accent); }

.faq-a {
  display: none;
  padding: 0 0 20px;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.65;
  max-width: 780px;
}

.faq-item.open .faq-a { display: block; }

/* ── CTA STRIP ── */
.cta-strip {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
  background: var(--surface);
  margin-bottom: 64px;
  position: relative;
  overflow: hidden;
}

.cta-strip::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 300px; height: 200px;
  background: radial-gradient(ellipse, var(--accent-a12) 0%, transparent 70%);
  pointer-events: none;
}

.cta-strip h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--bg);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  position: relative;
}

.cta-strip p {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 32px;
  position: relative;
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-lo);
}

footer a { color: var(--text-lo); text-decoration: none; }
footer a:hover { color: var(--text-mid); }

.footer-links { display: flex; gap: 24px; }

/* ── MIDDLE LOGO ── */
.middle-logo {
  display: flex; align-items: center; gap: 10px;
  margin: 0 auto;
  padding: 0 0 10px;
  width: 140px;
  height: auto;
}

/* ── FADE IN ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero > * { animation: fadeUp 1.0s ease both; }
.hero > *:nth-child(1) { animation-delay: 0.15s; }
.hero > *:nth-child(2) { animation-delay: 0.35s; }
.hero > *:nth-child(3) { animation-delay: 0.45s; }
.hero > *:nth-child(4) { animation-delay: 0.55s; }
.hero > *:nth-child(5) { animation-delay: 0.55s; }
.hero > *:nth-child(6) { animation-delay: 0.75s; }

/* Fade in the rest of the page after the hero */
@keyframes pageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.wrap > *:not(nav):not(.mobile-menu):not(.hero):not(.hero-sm) {
  animation: pageFade 1.0s ease both;
  animation-delay: 0.35s;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .split-section { grid-template-columns: 1fr; gap: 32px; }
  .graphic-image { width: 100%; height: auto; }
}

@media (max-width: 500px) {
  .form-row { flex-direction: column; }
  .stats    { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  footer    { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   INNER-PAGE COMPONENTS
   Shared by the deeper marketing pages (AI agent, integrate,
   services, data enrichment, events, about). Recoloured to the
   light theme; all values read from the tokens above.
   ============================================================ */

/* ── SMALL HERO + BREADCRUMB ── */
.hero-sm {
  padding: 147px 0 56px;
  text-align: left;
  justify-content: left;
}

.hero-sm .breadcrumb {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
}

.hero-sm .breadcrumb a {
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.2s;
}

.hero-sm .breadcrumb a:hover { color: var(--accent); }
.hero-sm .breadcrumb span { color: var(--accent); opacity: 0.5; }

.hero-sm h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  max-width: 830px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  margin-bottom: 18px;
}

.hero-sm h1 em {
  color: var(--accent);
}

.hero-sm .hero-sub {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-mid);
  max-width: 650px;
  margin: 0 auto 0 0;
  line-height: 1.65;
}

.hero-sm > * { animation: fadeUp 0.5s ease both; }
.hero-sm > *:nth-child(1) { animation-delay: 0.05s; }
.hero-sm > *:nth-child(2) { animation-delay: 0.12s; }
.hero-sm > *:nth-child(3) { animation-delay: 0.20s; }
.hero-sm > *:nth-child(4) { animation-delay: 0.28s; }

/* ── SMALL DIVIDER ── */
.divider-sm {
  border: none;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}

/* ── CHECK LIST (inside split text) ── */
.check-list {
  list-style: none;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.5;
}

.check-list li::before {
  content: '→';
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── WIDE PROSE SECTION ── */
.prose-section { margin-bottom: 64px; }

.prose-section .prose-inner {
  max-width: 760px;
  margin: 0 auto;
}

.prose-section h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  margin-bottom: 24px;
  text-align: center;
}

.prose-section h2 em { color: var(--accent); }

.prose-section p {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 18px;
  text-align: left;
}

.prose-section p:last-child { margin-bottom: 0; }

.prose-section .pull-quote {
  border-left: 2px solid var(--accent);
  padding: 12px 0 12px 24px;
  margin: 28px 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 500;
  color: var(--text-hi);
  line-height: 1.3;
}

/* ── HORIZONTAL STATS BAND ── */
.stats-band {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
  margin-bottom: 64px;
  position: relative;
  overflow: hidden;
}

.stats-band::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 400px; height: 200px;
  background: radial-gradient(ellipse, var(--accent-a08) 0%, transparent 70%);
  pointer-events: none;
}

.stats-band .stat-item { position: relative; z-index: 1; }

.stats-band .stat-num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  color: var(--text-hi);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}

.stats-band .stat-num span { color: var(--accent); }

.stats-band .stat-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mid);
}

@media (max-width: 768px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .stats-band { grid-template-columns: 1fr; } }

/* ── STEPPED / NUMBERED PROCESS ── */
.process-section { margin-bottom: 64px; }

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.process-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: background 0.2s;
}

.process-step:first-child { border-top: 1px solid var(--border); }

.step-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.45;
  line-height: 1;
  padding-top: 2px;
}

.step-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 8px;
}

.step-content p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.65;
}

.step-tag {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-a08);
  border: 1px solid var(--accent-a18);
  padding: 3px 10px;
  border-radius: 100px;
}

/* ── ACCENT BAND (full-bleed feel) ── */
.accent-band {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 -24px 64px;
  padding: 56px 24px;
}

.accent-band-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.accent-band h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  margin-bottom: 18px;
}

.accent-band h2 em { color: var(--accent); }

.accent-band p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 12px;
}

.accent-band-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.accent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: border-color 0.2s;
}

.accent-card:hover { border-color: var(--accent-a30); }

.accent-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 4px;
}

.accent-card p {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .accent-band { margin: 0 -24px 48px; }
  .accent-band-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ── TESTIMONIAL / QUOTE ── */
.testimonial-section {
  margin-bottom: 64px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: border-color 0.2s;
}

.testimonial-card:hover { border-color: var(--accent-a20); }

.testimonial-card .quote-mark {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: 12px;
  display: block;
}

.testimonial-card blockquote {
  font-size: 18px;
  font-weight: 400;
  color: var(--bg);
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-card .attrib {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
}

.testimonial-card .attrib strong {
  color: var(--bg);
  display: block;
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 2px;
}

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

/* ============================================================
   PAGE-SPECIFIC COMPONENTS
   Used by individual inner pages. Light-themed, token-driven.
   ============================================================ */

/* ── PARTNER / FEATURE LOGOS (integrate, data enrichment) ── */
.feature-partnerlogo,
.feature-image {
  height: 38px; width: auto;
  margin-bottom: 14px;
  display: block;
  opacity: 1;
}

/* ── EVENTS PAGE ─────────────────────────────────────────── */

/* event hero */
.event-hero {
  padding: 72px 0 56px;
  text-align: center;
  position: relative;
}

.event-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, var(--accent-a08) 0%, transparent 70%);
  pointer-events: none;
}

.event-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-a08);
  border: 1px solid var(--accent-a20);
  padding: 5px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}

.event-badge .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

.event-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  margin-bottom: 20px;
}

.event-hero h1 em { color: var(--accent); }

.event-hero .hero-sub {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-mid);
  max-width: 560px;
  margin: 0 auto 16px;
  line-height: 1.65;
}

.event-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.event-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-mid);
  letter-spacing: 0.04em;
}

.event-meta-item svg { width: 15px; height: 15px; opacity: 0.6; flex-shrink: 0; }
.event-meta-item strong { color: var(--text-hi); font-weight: 600; }

.event-hero > * { animation: fadeUp 0.6s ease both; position: relative; }
.event-hero > *:nth-child(1) { animation-delay: 0.05s; }
.event-hero > *:nth-child(2) { animation-delay: 0.15s; }
.event-hero > *:nth-child(3) { animation-delay: 0.25s; }
.event-hero > *:nth-child(4) { animation-delay: 0.35s; }
.event-hero > *:nth-child(5) { animation-delay: 0.45s; }

/* video embed */
.video-section { margin-bottom: 0; }

.video-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
  text-align: center;
  margin-bottom: 18px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.10);
}

.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--text-mid);
  background: linear-gradient(135deg, #e9e9eb 0%, #f3f3f5 100%);
}

.video-placeholder .play-ring {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 1px solid var(--accent-a30);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-a08);
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}

.video-placeholder .play-ring:hover {
  background: var(--accent-a12);
  border-color: var(--accent-a50);
}

.video-placeholder .play-ring svg {
  width: 26px; height: 26px;
  fill: var(--accent);
  margin-left: 4px;
}

.video-placeholder p { font-size: 13px; letter-spacing: 0.05em; }

/* announcement cards */
.announcements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 64px;
}

.ann-card {
  background: var(--surface);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.2s;
}

.ann-card:hover { background: var(--surface-3); }

.ann-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-a20);
  background: var(--accent-a08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ann-icon svg {
  width: 20px; height: 20px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ann-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.2;
}

.ann-card h3 em { color: var(--accent); }

.ann-card p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.65;
}

/* highlight banner */
.highlight-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 52px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
  position: relative;
  overflow: hidden;
}

.highlight-banner::before {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(ellipse, var(--accent-a08) 0%, transparent 70%);
  pointer-events: none;
}

.highlight-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  margin-bottom: 12px;
}

.highlight-banner h2 em { color: var(--accent); }

.highlight-banner p {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 560px;
}

.highlight-stat { text-align: center; flex-shrink: 0; }

.highlight-stat .big-num {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1;
  display: block;
}

.highlight-stat .big-num span { color: var(--accent); }

.highlight-stat p {
  font-size: 13px;
  color: var(--text-mid);
  letter-spacing: 0.04em;
  margin-top: 8px;
}

/* pull-quote section */
.pull-quote-section {
  border-left: 2px solid var(--accent-a50);
  padding: 8px 0 8px 32px;
  margin: 48px 0;
}

.pull-quote-section blockquote {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-hi);
  font-style: italic;
}

.pull-quote-section cite {
  display: block;
  font-size: 13px;
  color: var(--text-mid);
  font-style: normal;
  margin-top: 12px;
  letter-spacing: 0.04em;
}

/* timeline */
.timeline {
  position: relative;
  padding-left: 28px;
  margin-bottom: 64px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  padding-bottom: 40px;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: '';
  position: absolute;
  left: -32px; top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent-a30);
}

.timeline-item .tl-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  display: block;
}

.timeline-item h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 8px;
}

.timeline-item p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.65;
  max-width: 620px;
}

@media (max-width: 768px) {
  .announcements   { grid-template-columns: 1fr; }
  .highlight-banner { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG PAGE COMPONENTS
   Article grid, search/controls, pagination, load-more,
   register panel, cache status. Light-themed, token-driven.
   ============================================================ */

/* controls / search */
.controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 40px;
}

.search-wrap { position: relative; flex: 1; min-width: 220px; max-width: 400px; }

.search-wrap svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-lo); pointer-events: none;
}

.search-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px 12px 42px;
  font-size: 14px; font-family: var(--font-body); color: var(--text-hi);
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input::placeholder { color: var(--text-mid); }
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a12); }

.results-count { font-size: 13px; color: var(--text-mid); }

/* section headings */
.section-heading {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}

.section-heading::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-block { margin-bottom: 64px; }

/* cache status */
.cache-status {
  font-size: 11px; color: var(--text-mid);
  display: flex; align-items: center; gap: 6px;
  opacity: 0; transition: opacity 0.4s;
}

.cache-status.visible { opacity: 1; }
.cache-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.cache-dot.scanning { animation: pulse 1s ease-in-out infinite; }

/* blog grid */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 64px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
  text-decoration: none; display: flex; flex-direction: column;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  animation: fadeUp 0.5s ease both;
}

.blog-card:hover {
  border-color: var(--accent-a30);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.card-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--surface-2); display: block; }

.card-thumb-placeholder {
  width: 100%; aspect-ratio: 16/9;
  background: linear-gradient(135deg, #e9e9eb 0%, #f3f3f5 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}

.card-thumb-placeholder::after {
  content: ''; position: absolute; bottom: -30px; right: -30px;
  width: 150px; height: 150px;
  background: radial-gradient(ellipse, var(--accent-a08) 0%, transparent 70%);
}

.card-thumb-placeholder svg { opacity: 0.3; color: var(--accent); }

.card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.card-category {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); background: var(--accent-a12);
  border: 1px solid var(--accent); padding: 3px 10px; border-radius: 100px;
}

.card-date { font-size: 12px; color: rgba(255,255,255,0.5); }

.card-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  line-height: 1.25; color: var(--bg); margin-bottom: 10px; letter-spacing: -0.02em;
}

.card-sub { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.6; flex: 1; }

.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}

.card-author { font-size: 12px; color: rgba(255,255,255,0.5); }
.card-read { font-size: 12px; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 5px; }

/* loading */
.loading-spinner {
  width: 32px; height: 32px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* empty state */
.no-results { grid-column: 1 / -1; text-align: center; padding: 80px 0; color: var(--text-mid); }
.no-results h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--text-hi); margin-bottom: 8px; }

/* pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 64px; }
.pagination.hidden { display: none; }

.page-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 18px; font-size: 13px;
  font-family: var(--font-body); color: var(--text-mid); cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s; text-decoration: none;
}

.page-btn:hover:not(:disabled) { border-color: var(--accent-a30); color: var(--text-hi); background: var(--surface-3); }
.page-btn:disabled { opacity: 0.3; cursor: default; }

.page-numbers { display: flex; align-items: center; gap: 4px; }

.page-num {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font-body);
  color: var(--text-mid); cursor: pointer; border: 1px solid transparent; background: none; transition: all 0.2s;
}

.page-num:hover { color: var(--text-hi); border-color: var(--border); }
.page-num.active { color: var(--accent); border-color: var(--accent-a30); background: var(--accent-a08); }
.page-ellipsis { font-size: 13px; color: var(--text-mid); padding: 0 4px; user-select: none; }

/* load-more button */
.load-more-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin-top: 8px; margin-bottom: 64px;
}

.load-more-wrap.hidden { display: none; }
.load-more-count { font-size: 12px; color: var(--text-mid); letter-spacing: 0.03em; }

.btn-load-more {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  border: 1px solid var(--accent-a30);
  border-radius: var(--radius-sm);
  padding: 14px 32px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  font-family: var(--font-display);
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.15s;
}

.btn-load-more::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accent-a08) 0%, var(--accent-a08) 100%);
  opacity: 0; transition: opacity 0.25s;
}

.btn-load-more:hover { border-color: var(--accent-a50); color: var(--accent-dark); transform: translateY(-2px); }
.btn-load-more:hover::before { opacity: 1; }
.btn-load-more:active { transform: translateY(0); }
.btn-load-more svg { transition: transform 0.3s ease; }
.btn-load-more:hover svg { transform: translateY(3px); }

/* register panel */
.register {
  width: 100%; max-width: 520px; margin: 0 auto 64px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 32px;
  position: relative; overflow: hidden;
}

.register::before {
  content: ''; position: absolute; bottom: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(ellipse, var(--accent-a12) 0%, transparent 70%);
  pointer-events: none;
}

.register-inner { position: relative; z-index: 1; }

.register h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  color: var(--bg); margin-bottom: 8px;
}

.register p.sub { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.5); margin-bottom: 22px; }

/* ============================================================
   BLOG ARTICLE PAGES
   Article hero, body prose, sidebar/TOC, callout, author bio,
   related posts, FAQ. Light-themed, token-driven.
   ============================================================ */

/* article hero */
.article-hero {
  padding: 80px 0 56px;
  max-width: 780px;
  animation: fadeUp 1.0s ease both;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-mid);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.2s;
}
.back-link:hover { color: var(--accent); }

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.article-date { font-size: 13px; color: var(--text-mid); }

.article-read {
  font-size: 13px;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  gap: 5px;
}

.article-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 60px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  margin-bottom: 18px;
}
.article-title em { color: var(--accent); }

.article-subheading {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 8px;
}

.article-hero-image {
  width: 100%;
  max-width: 860px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin: 40px 0 0;
  display: block;
}

.article-hero-placeholder {
  width: 100%;
  max-width: 860px;
  aspect-ratio: 16/6;
  background: linear-gradient(135deg, #e9e9eb 0%, #f3f3f5 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin: 40px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.article-hero-placeholder::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 250px; height: 250px;
  background: radial-gradient(ellipse, var(--accent-a08) 0%, transparent 70%);
}

/* article layout: body + sidebar */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 64px;
  align-items: start;
  margin-bottom: 64px;
}

@media (max-width: 860px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { order: -1; }
}

/* article body prose */
.article-body { max-width: 680px; }

.article-body p {
  font-size: 17px;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 24px;
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  color: var(--text-hi);
  margin: 48px 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.article-body h2 em { color: var(--accent); }

.article-body h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-hi);
  margin: 32px 0 12px;
}

.article-body ul,
.article-body ol { margin: 0 0 24px 24px; }

.article-body li {
  font-size: 17px;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 8px;
}

.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 16px 24px;
  margin: 32px 0;
  background: var(--accent-a08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.article-body blockquote p {
  font-size: 18px;
  font-style: italic;
  color: var(--text-hi);
  margin: 0;
}

.article-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.article-body a:hover { color: var(--accent-dark); }

.article-body img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin: 32px 0;
  display: block;
}

.article-body .caption {
  font-size: 12px;
  color: var(--text-lo);
  text-align: center;
  margin-top: -24px;
  margin-bottom: 24px;
}

/* callout */
.callout {
  background: var(--surface);
  border: 1px solid var(--accent-a20);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin: 32px 0;
}
.callout p {
  margin: 0;
  font-size: 15px !important;
  color: var(--text-hi) !important;
}
.callout-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: block;
}

/* sidebar / TOC */
.article-sidebar {
  position: sticky;
  top: 32px;
}

.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  margin-bottom: 20px;
}

.sidebar-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: block;
}

.toc-list { list-style: none; padding: 0; }
.toc-list li { margin-bottom: 10px; }
.toc-list a {
  font-size: 13px;
  color: var(--text-mid);
  text-decoration: none;
  display: block;
  padding: 4px 0 4px 12px;
  border-left: 2px solid transparent;
  transition: all 0.2s;
}
.toc-list a:hover {
  color: var(--text-hi);
  border-left-color: var(--accent);
}

/* related posts */
.related-post {
  text-decoration: none;
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.related-post-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 4px;
}
.related-post-title {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.45;
  transition: color 0.2s;
}
.related-post:hover .related-post-title { color: var(--text-hi); }

/* author bio */
.author-bio {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 64px;
}
.author-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  color: var(--accent);
}
.author-name { font-size: 15px; font-weight: 600; color: var(--text-hi); margin-bottom: 4px; }
.author-desc { font-size: 13px; color: var(--text-mid); line-height: 1.55; }

/* FAQ section */
.faq-section { margin-top: 48px; }

/* ============================================================
   PRICING PAGE
   Currency toggle + 3-up pricing panels (Team / Pro / Enterprise).
   Namespaced under .pricing-panels so these .panel rules do not
   collide with the home page key-message .panels grid.
   Tokens remapped to the shared accent-alpha ramp:
     a35 -> a30, a15 -> a18, a10 -> a12.
   ============================================================ */

/* ── CURRENCY TOGGLE ── */
.currency-toggle {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 32px auto 8px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: fit-content;
}
.currency-toggle button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--btn-text);
  padding: 8px 18px;
  border-radius: var(--radius-md);
  transition: background 0.15s, color 0.15s;
}
.currency-toggle button:hover { color: var(--text-hi); }
.currency-toggle button.active {
  background: var(--accent);
  color: var(--btn-text);
}

/* ── PRICING PANELS ── */
.pricing-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 28px 0 8px;
  align-items: stretch;          /* equal-height columns */
}
.pricing-panels .panel {
  display: flex;
  flex-direction: column;        /* flex vertically downward */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
/* Highlighted (recommended) tier */
.pricing-panels .panel.featured {
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}
.pricing-panels .panel-badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent-a12);
  border: 1px solid rgba(255,255,255,0.5);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
/* Invisible placeholder keeps the title row aligned across panels */
.pricing-panels .panel-badge.placeholder {
  visibility: hidden;
}
.pricing-panels .panel h3 {
  font-size: 32px;
  font-weight: 600;
  color: var(--bg);
  margin-bottom: 2px;
}
.pricing-panels .tier-tagline {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}

/* ── PRICE ── */
.pricing-panels .price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.pricing-panels .price .amount {
  font-size: 38px;
  font-weight: 600;
  color: var(--bg);
  letter-spacing: -0.02em;
}
.pricing-panels .price .period {
  font-size: 14px;
  color: var(--bg);
}
.pricing-panels .price-note {
  font-size: 12px;
  color: var(--bg);
  margin-bottom: 22px;
}
.pricing-panels .price-custom {
font-size: 38px;
  font-weight: 600;
  color: var(--bg);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

/* ── FEATURE / OPTION LISTS ── */
.pricing-panels .panel-section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bg);
  margin: 18px 0 10px;
}
.pricing-panels .panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* ── FEATURE ROWS ──
   Each <li> is a flex row: feature name on the left, a small status badge
   on the right. Toggle the row's class to set its state per tier:
     class="included"  → blue "Included" badge
     class="optional"  → muted "Optional" badge
   The label text is wrapped so the badge sits hard against the right edge. */
.pricing-panels .panel ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bg);
}
.pricing-panels .panel ul li .feat-name {
  flex: 1;
  color: rgba(255,255,255,0.5);
}
.pricing-panels .panel ul li .feat-badge {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Included — solid accent-tinted pill */
.pricing-panels .panel ul li.included .feat-badge {
  background: rgba(255,255,255,0.25);
  color: var(--bg);
}

/* Optional — muted outline pill, and the label softens slightly */
.pricing-panels .panel ul li.optional {
  color: var(--text-mid);
}
.pricing-panels .panel ul li.optional .feat-badge {
  background: transparent;
  border: 1px solid var(--border);
  color: rgba(255,255,255,0.5);
}

/* ── BUTTON pinned to bottom ── */
.pricing-panels .panel-cta {
  margin-top: auto;            /* pushes button to the bottom so all align */
  padding-top: 26px;
}
.pricing-panels .btn-tier {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 18px;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: rgba(255,255,255,0.3);
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.pricing-panels .btn-tier:hover { background: var(--accent-a12); }
.pricing-panels .btn-tier:active { transform: scale(0.99); }
.pricing-panels .panel.featured .btn-tier {
  background: var(--accent);
  color: var(--btn-text);
}
.pricing-panels .panel.featured .btn-tier:hover { background: var(--accent-dark); }

@media (max-width: 1180px) and (min-width: 861px) {
  .pricing-panels { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .pricing-panels {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── SLIM PANELS CTA ──
   Compact "Get in touch" form sitting directly beneath the pricing panels. */
.panels-cta {
  text-align: center;
  margin: 22px 0 6px;
}
.panels-cta > p {
  font-size: 14px;
  color: var(--text-mid);
  margin: 0 0 14px;
}
.panels-cta .form-row {
  margin-bottom: 0;
}
.panels-cta .success-msg {
  margin-top: 12px;
}

/* ── OPTIONAL ADD-ONS ──
   Modules available on every package. Two labelled groups of chips,
   styled to match the dark pricing panels. */
.addons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0 8px;
  align-items: start;
}
.addon-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
}
.addon-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bg);
  margin: 0 0 14px;
}
.addon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.addon-list li {
  font-size: 13px;
  font-weight: 500;
  color: var(--bg);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 6px 13px;
  line-height: 1.3;
}

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

/* ───────────────────────────────────────────────
   LATEST BLOG POSTS (compact home-page section)
   Used on index.html above the CTA strip.
   ─────────────────────────────────────────────── */
.latest-blog {
  margin: 64px 0 56px;
}
.latest-blog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.latest-blog-head h2 {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-hi);
  margin: 0;
}
.latest-blog-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.latest-blog-link:hover { color: var(--accent-dark); }

.latest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.mini-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.mini-card:hover {
  border-color: var(--accent-a35);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}
.mini-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--border);
}
.mini-thumb-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(68,97,130,0.08), rgba(62,98,117,0.04));
}
.mini-body {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  flex: 1;
}
.mini-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 8px;
}
.mini-category {
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mini-date { 
  color: var(--bg); 
}
.mini-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bg);
  margin: 0;
}

@media (max-width: 1040px) { .latest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .latest-grid { grid-template-columns: repeat(2, 1fr); }
  .latest-blog-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}