/* ============================================================
   Nordic Expense — Marketing Site
   Premium Nordic Design System
   ============================================================ */

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
  /* Brand palette — Nordic tones */
  --ne-ink: #101214;
  --ne-surface: #F6F7F4;
  --ne-surface-raised: #FFFFFF;
  --ne-border: #DDE3DF;
  --ne-border-subtle: #EAEFED;
  --ne-text: #101918;
  --ne-text-secondary: #53615D;
  --ne-text-muted: #71807B;
  --ne-accent: #178D6A;
  --ne-accent-light: #35B98F;
  --ne-accent-subtle: rgba(53, 185, 143, 0.11);
  --ne-gold: #178D6A;
  --ne-gold-light: #35B98F;
  --ne-gold-subtle: rgba(53, 185, 143, 0.10);
  --ne-teal: #178D6A;
  --ne-teal-subtle: rgba(53, 185, 143, 0.10);
  --ne-telegram: #229ED9;
  --ne-whatsapp: #25D366;
  --ne-warm: #E8590C;
  --ne-warm-subtle: rgba(232, 89, 12, 0.08);
  --ne-navbar-bg: rgba(250, 250, 250, 0.88);
  --ne-navbar-border: rgba(228, 228, 231, 0.7);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.06);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.10), 0 0 1px rgba(0,0,0,0.06);
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ne-ink: #F5F7F8;
    --ne-surface: #101214;
    --ne-surface-raised: #1C2125;
    --ne-border: #30383D;
    --ne-border-subtle: #262D31;
    --ne-text: #F5F7F8;
    --ne-text-secondary: #A6B0B6;
    --ne-text-muted: #89959B;
    --ne-accent: #35B98F;
    --ne-accent-light: #4DCAA0;
    --ne-accent-subtle: rgba(53, 185, 143, 0.14);
    --ne-gold: #4DCAA0;
    --ne-gold-light: #70D9B7;
    --ne-gold-subtle: rgba(53, 185, 143, 0.14);
    --ne-teal: #4DCAA0;
    --ne-teal-subtle: rgba(53, 185, 143, 0.14);
    --ne-warm-subtle: rgba(232, 89, 12, 0.10);
    --ne-navbar-bg: rgba(21, 25, 28, 0.92);
    --ne-navbar-border: rgba(48, 56, 61, 0.9);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.25), 0 0 1px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.35), 0 0 1px rgba(0,0,0,0.25);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.3);
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --ne-ink: #FAFAFA;
  --ne-surface: #101214;
  --ne-surface-raised: #1C2125;
  --ne-border: #30383D;
  --ne-border-subtle: #262D31;
  --ne-text: #F5F7F8;
  --ne-text-secondary: #A6B0B6;
  --ne-text-muted: #89959B;
  --ne-accent: #35B98F;
  --ne-accent-light: #4DCAA0;
  --ne-accent-subtle: rgba(53, 185, 143, 0.14);
  --ne-gold: #4DCAA0;
  --ne-gold-light: #70D9B7;
  --ne-gold-subtle: rgba(53, 185, 143, 0.14);
  --ne-teal: #4DCAA0;
  --ne-teal-subtle: rgba(53, 185, 143, 0.14);
  --ne-warm-subtle: rgba(232, 89, 12, 0.10);
  --ne-navbar-bg: rgba(21, 25, 28, 0.92);
  --ne-navbar-border: rgba(48, 56, 61, 0.9);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.25), 0 0 1px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35), 0 0 1px rgba(0,0,0,0.25);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.3);
  color-scheme: dark;
}

/* Public V3 marketing surfaces. These selectors are intentionally scoped so
   the authenticated portal can evolve independently from the public site. */
.public-home { background: var(--ne-surface); color: var(--ne-text); }
.public-hero { padding: 9rem 0 5rem; background: radial-gradient(circle at 72% 18%, var(--ne-accent-subtle), transparent 34%), var(--ne-surface); }
.public-hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:4rem; }
.public-hero-copy h1 { max-width: 650px; margin:.75rem 0 1.25rem; font-size:clamp(2.75rem,5vw,4.75rem); line-height:1.03; letter-spacing:-.055em; font-weight:800; }
.public-accent-text { color:var(--ne-accent); }
.public-eyebrow { color:var(--ne-accent); font-size:.75rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.public-eyebrow-dot { display:inline-block; width:.45rem; height:.45rem; border-radius:99px; background:var(--ne-accent); margin-right:.35rem; vertical-align:middle; }
.public-hero-lede { max-width:540px; color:var(--ne-text-secondary); font-size:1.1rem; line-height:1.7; }
.public-hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.public-hero-note { display:flex; align-items:center; gap:.4rem; margin-top:1rem; color:var(--ne-text-muted); font-size:.8rem; }
.public-preview { border:1px solid var(--ne-border); border-radius:1.25rem; overflow:hidden; background:var(--ne-surface-raised); box-shadow:0 24px 70px rgba(16,25,24,.12); transform:rotate(1deg); }
.public-window-bar { display:flex; align-items:center; gap:.4rem; padding:.8rem 1rem; border-bottom:1px solid var(--ne-border); background:var(--ne-surface-raised); }
.public-window-bar>span { width:.55rem; height:.55rem; border-radius:50%; background:var(--ne-border); }
.public-window-search { flex:1; margin-left:1rem; border:1px solid var(--ne-border); border-radius:.5rem; padding:.35rem .65rem; color:var(--ne-text-muted); font-size:.65rem; }
.public-preview-body { display:flex; min-height:330px; }
.public-preview-sidebar { width:145px; padding:1rem .7rem; border-right:1px solid var(--ne-border); background:color-mix(in srgb,var(--ne-surface) 70%,var(--ne-surface-raised)); }
.public-preview-brand { display:flex; gap:.35rem; align-items:center; font-size:.7rem; font-weight:700; margin-bottom:1.2rem; }
.public-leaf { color:var(--ne-accent); font-size:1.1rem; }
.public-preview-nav { display:flex; gap:.45rem; align-items:center; padding:.55rem .5rem; margin:.15rem 0; color:var(--ne-text-muted); font-size:.68rem; border-radius:.45rem; }
.public-preview-nav.is-active { color:var(--ne-accent); background:var(--ne-accent-subtle); font-weight:700; }
.public-preview-main { flex:1; min-width:0; padding:1.25rem; }
.public-preview-heading,.public-panel-title,.public-activity { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.public-preview-heading h2 { margin:.2rem 0 0; font-size:1.35rem; letter-spacing:-.035em; }
.public-kicker { color:var(--ne-text-muted); font-size:.65rem; }
.public-avatar { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--ne-accent-subtle); color:var(--ne-accent); font-size:.75rem; font-weight:700; }
.public-balance-row { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:.6rem; margin-top:1rem; }
.public-balance-card,.public-mini-card,.public-preview-panel { border:1px solid var(--ne-border); border-radius:.8rem; background:var(--ne-surface-raised); padding:.85rem; }
.public-balance-card { position:relative; overflow:hidden; background:linear-gradient(120deg,var(--ne-surface-raised),var(--ne-accent-subtle)); }
.public-balance-card strong { display:block; margin:.25rem 0; font-size:1.7rem; letter-spacing:-.045em; }
.public-positive { color:var(--ne-accent); font-size:.68rem; font-weight:700; }
.public-positive small { color:var(--ne-text-muted); font-weight:500; }
.public-bars { position:absolute; right:.8rem; bottom:.8rem; display:flex; align-items:end; gap:.18rem; height:2.2rem; }
.public-bars b { display:block; width:.35rem; border-radius:.25rem; background:var(--ne-accent-light); opacity:.65; } .public-bars b:nth-child(1){height:35%}.public-bars b:nth-child(2){height:52%}.public-bars b:nth-child(3){height:68%}.public-bars b:nth-child(4){height:82%}.public-bars b:nth-child(5){height:100%}
.public-mini-card span,.public-mini-card em { display:block; color:var(--ne-text-muted); font-size:.62rem; font-style:normal; }.public-mini-card strong { display:block; margin:.55rem 0 .2rem; font-size:1.1rem; }
.public-mini-card em { color:var(--ne-accent); font-weight:700; }
.public-preview-columns { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.6rem; }
.public-panel-title { margin-bottom:.7rem; font-size:.7rem; }.public-panel-title span { color:var(--ne-accent); font-size:.62rem; font-weight:700; }
.public-category { display:grid; grid-template-columns:.5rem 1fr auto; align-items:center; gap:.45rem; font-size:.65rem; margin:.65rem 0; }.public-category i { width:.5rem;height:.5rem;border-radius:50%; }.cat-green{background:#4DCAA0}.cat-coral{background:#FF777E}.cat-blue{background:#63B3ED}.public-category b{font-size:.62rem}.public-category>div{grid-column:2/4;height:.22rem;background:var(--ne-border);border-radius:1rem}.public-category hr{height:100%;margin:0;border:0;background:var(--ne-accent);border-radius:1rem}
.public-activity { justify-content:flex-start; border-top:1px solid var(--ne-border-subtle); padding:.55rem 0; font-size:.65rem; }.public-activity>span:nth-child(2){flex:1}.public-activity b,.public-activity small{display:block}.public-activity small{color:var(--ne-text-muted);font-size:.58rem}.activity-icon{display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:.4rem;background:#E8B94E;color:#fff;font-size:.6rem;font-weight:700}.activity-teal{background:#35B98F}.activity-orange{background:#F58A4B}.public-activity>strong{font-size:.62rem;color:#FF777E}.public-activity>strong.public-positive{color:var(--ne-accent)}
.public-trust { border-top:1px solid var(--ne-border); border-bottom:1px solid var(--ne-border); }.public-trust-row { display:flex; justify-content:space-between; gap:1rem; padding:1.1rem 0; color:var(--ne-text-muted); font-size:.78rem; }.public-trust-row span{display:flex;align-items:center;gap:.35rem}.public-trust-row svg{color:var(--ne-accent)}
.public-section { padding:6rem 0; }.public-section-soft { background:var(--ne-surface-raised); border-top:1px solid var(--ne-border-subtle); border-bottom:1px solid var(--ne-border-subtle); }.public-section-intro { max-width:580px; margin-bottom:2rem; }.public-section h2,.public-cta h2 { margin:.45rem 0 .75rem; font-size:clamp(2rem,4vw,3rem); line-height:1.08; letter-spacing:-.045em; }.public-section-intro>p:last-child,.public-channel-grid>div>p:not(.public-eyebrow),.public-cta p:not(.public-eyebrow){color:var(--ne-text-secondary);line-height:1.7}.public-value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.public-value-card { border:1px solid var(--ne-border); border-radius:1rem; padding:1.5rem; background:var(--ne-surface-raised); }.public-icon-tile { display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.75rem;color:var(--ne-accent);background:var(--ne-accent-subtle); }.public-value-card h3{margin:1rem 0 .4rem;font-size:1.05rem}.public-value-card p{color:var(--ne-text-secondary);font-size:.9rem;line-height:1.6}.public-value-card a{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;color:var(--ne-accent);font-size:.82rem;font-weight:700}.public-channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}.public-channel-list{display:grid;gap:.6rem}.public-channel-list a{display:flex;align-items:center;gap:.8rem;padding:1rem;border:1px solid var(--ne-border);border-radius:.8rem;color:var(--ne-text);background:var(--ne-surface)}.public-channel-list a>span:nth-child(2){flex:1}.public-channel-list b,.public-channel-list small{display:block}.public-channel-list small{color:var(--ne-text-muted);font-size:.75rem;margin-top:.15rem}.public-channel-list>a>svg{color:var(--ne-accent)}.public-channel-icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.7rem;color:var(--ne-accent);background:var(--ne-accent-subtle)}.channel-blue{color:#229ED9;background:rgba(34,158,217,.12)}.channel-green{color:#25D366;background:rgba(37,211,102,.12)}.public-cta{padding:1rem 0 6rem}.public-cta-card{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2.5rem;border:1px solid var(--ne-border);border-radius:1.25rem;background:linear-gradient(120deg,var(--ne-accent-subtle),var(--ne-surface-raised))}.public-cta-card h2{font-size:clamp(1.8rem,3vw,2.5rem)}
@media (max-width: 900px){.public-hero-grid,.public-channel-grid{grid-template-columns:1fr;gap:2rem}.public-preview{transform:none}.public-channel-grid{gap:2rem}}
@media (max-width: 640px){.public-hero{padding:7rem 0 3rem}.public-hero-copy h1{font-size:2.75rem}.public-hero-lede{font-size:1rem}.public-preview-sidebar{display:none}.public-preview-main{padding:.8rem}.public-balance-row{grid-template-columns:1fr 1fr}.public-balance-card{grid-column:1/-1}.public-preview-columns,.public-value-grid{grid-template-columns:1fr}.public-trust-row{flex-wrap:wrap;font-size:.7rem}.public-trust-row>span:first-child{width:100%}.public-section{padding:4rem 0}.public-cta-card{align-items:flex-start;flex-direction:column;padding:1.5rem}}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

[x-cloak] { display: none !important; }

/* Theme toggle icons — CSS-driven, no Alpine dependency */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: inline-block; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}
[data-theme="dark"] .theme-icon-sun { display: inline-block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--ne-surface);
  color: var(--ne-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
}

/* ── Custom Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ne-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ne-text-muted); }

/* ── Layout ──────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container { padding: 0 1.5rem; }
}

.container-lg {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container-lg { padding: 0 1.5rem; }
}

/* ── Navbar ──────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition);
}

.navbar.scrolled {
  background: var(--ne-navbar-bg);
  border-bottom: 1px solid var(--ne-navbar-border);
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
}

/* ── Nav Links ──────────────────────────────────────────── */
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ne-text-secondary);
  transition: color var(--transition-fast), background var(--transition-fast);
  text-decoration: none;
}

.nav-link:hover {
  color: var(--ne-text);
  background: var(--ne-accent-subtle);
}

.nav-link.active {
  color: var(--ne-gold);
}

/* ── Theme Toggle Button ────────────────────────────────── */
.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--ne-text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.theme-toggle:hover {
  color: var(--ne-text);
  background: var(--ne-accent-subtle);
}

/* ── Mobile Nav Link ────────────────────────────────────── */
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ne-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.mobile-nav-link:hover {
  color: var(--ne-text);
  background: var(--ne-accent-subtle);
}

/* ── Footer ─────────────────────────────────────────────── */
.footer-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ne-text);
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}

.footer-link {
  display: block;
  font-size: 0.8125rem;
  color: var(--ne-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--ne-accent);
}

/* ── Cookie Banner Inner ────────────────────────────────── */
.cookie-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius-xl);
  background: var(--ne-surface-raised);
  border: 1px solid var(--ne-border);
  box-shadow: var(--shadow-xl);
}

@media (min-width: 640px) {
  .cookie-banner-inner {
    flex-direction: row;
    align-items: center;
  }
}

/* ── Hero Section ────────────────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg-dark {
  background: var(--ne-surface);
}

.hero-bg-light {
  background: var(--ne-surface);
}

/* Subtle grid pattern instead of gradient orbs */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ne-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--ne-border-subtle) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
  opacity: 0.7;
  pointer-events: none;
}

[data-theme="dark"] .hero-grid {
  opacity: 0.4;
}

/* Accent gradient wash — very subtle */
.hero-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 50% at 30% 20%, var(--ne-accent-subtle), transparent 70%),
              radial-gradient(ellipse 40% 40% at 70% 70%, var(--ne-teal-subtle), transparent 70%);
  pointer-events: none;
}

/* ── Typography ──────────────────────────────────────────── */
.heading-xl {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ne-text);
}

.heading-lg {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ne-text);
}

.heading-md {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ne-text);
}

.body-lg {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ne-text-secondary);
}

.body-sm {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ne-text-muted);
}

.label-sm {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ne-text-muted);
}

/* ── Gradient text — restrained usage ────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--ne-accent) 0%, var(--ne-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--ne-accent);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary:hover {
  background: #141722;
  box-shadow: 0 4px 16px rgba(28, 31, 46, 0.35);
  transform: translateY(-1px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary {
    background: var(--ne-gold);
    color: #1C1F2E;
  }
  :root:not([data-theme="light"]) .btn-primary:hover {
    background: var(--ne-gold-light);
    box-shadow: 0 4px 16px rgba(156, 139, 110, 0.3);
  }
}
[data-theme="dark"] .btn-primary {
  background: var(--ne-gold);
  color: #1C1F2E;
}
[data-theme="dark"] .btn-primary:hover {
  background: var(--ne-gold-light);
  box-shadow: 0 4px 16px rgba(156, 139, 110, 0.3);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--ne-text);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--ne-border);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn-outline:hover {
  border-color: var(--ne-accent);
  color: var(--ne-accent);
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--ne-text-secondary);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn-ghost:hover {
  color: var(--ne-text);
  background: var(--ne-accent-subtle);
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge-primary {
  background: var(--ne-accent-subtle);
  color: var(--ne-accent);
  border: 1px solid rgba(28, 31, 46, 0.15);
}

.badge-success {
  background: var(--ne-gold-subtle);
  color: var(--ne-gold);
  border: 1px solid rgba(156, 139, 110, 0.2);
}

.badge-accent {
  background: var(--ne-gold-subtle);
  color: var(--ne-gold);
  border: 1px solid rgba(156, 139, 110, 0.2);
}

.badge-warning {
  background: var(--ne-warm-subtle);
  color: var(--ne-warm);
  border: 1px solid rgba(232, 89, 12, 0.15);
}

.badge-muted {
  background: var(--ne-border-subtle);
  color: var(--ne-text-muted);
  border: 1px solid var(--ne-border);
}

/* ── Sections ────────────────────────────────────────────── */
.section {
  padding: 5rem 0;
}

.section-sm {
  padding: 3rem 0;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: var(--ne-text);
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--ne-text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .section { padding: 3rem 0; }
  .section-title { font-size: 1.75rem; }
}

/* ── Cards ───────────────────────────────────────────────── */
.mkt-card {
  background: var(--ne-surface-raised);
  border: 1px solid var(--ne-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.mkt-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.feature-card {
  background: var(--ne-surface-raised);
  border: 1px solid var(--ne-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all var(--transition);
}

.feature-card:hover {
  border-color: var(--ne-accent);
  box-shadow: 0 0 0 1px var(--ne-accent), var(--shadow-lg);
  transform: translateY(-2px);
}

/* ── Pricing Cards ───────────────────────────────────────── */
.pricing-card {
  background: var(--ne-surface-raised);
  border: 1px solid var(--ne-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

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

.pricing-card.featured::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ne-accent), var(--ne-teal));
}

/* ── Icon Containers ─────────────────────────────────────── */
.icon-container {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-primary {
  background: var(--ne-accent-subtle);
  color: var(--ne-accent);
}

.icon-accent {
  background: var(--ne-teal-subtle);
  color: var(--ne-teal);
}

.icon-success {
  background: var(--ne-teal-subtle);
  color: var(--ne-teal);
}

.icon-warning {
  background: var(--ne-warm-subtle);
  color: var(--ne-warm);
}

/* ── Product Mockup ──────────────────────────────────────── */
.product-mockup {
  background: var(--ne-surface-raised);
  border: 1px solid var(--ne-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.mockup-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ne-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mockup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ne-border);
  transition: background var(--transition-fast);
}

.mockup-row:hover {
  background: var(--ne-accent-subtle);
}

/* ── Device Frame — iPhone ───────────────────────────────── */
.device-iphone {
  position: relative;
  width: 280px;
  background: var(--ne-surface-raised);
  border: 1px solid var(--ne-border);
  border-radius: 2.5rem;
  padding: 0.75rem;
  box-shadow: var(--shadow-xl);
}

.device-iphone-screen {
  border-radius: 2rem;
  overflow: hidden;
  background: var(--ne-surface);
  aspect-ratio: 9 / 19.5;
}

.device-iphone .notch {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: var(--ne-surface-raised);
  border-radius: 0 0 1rem 1rem;
  z-index: 2;
}

/* ── Device Frame — Desktop ──────────────────────────────── */
.device-desktop {
  background: var(--ne-surface-raised);
  border: 1px solid var(--ne-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.device-desktop-toolbar {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--ne-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ne-surface);
}

.device-desktop-content {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

/* ── Chat Mockups ────────────────────────────────────────── */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem;
  background: var(--ne-surface-raised);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ne-border);
}

.chat-bubble {
  max-width: 80%;
  padding: 0.625rem 0.875rem;
  border-radius: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.chat-bubble-user {
  background: var(--ne-accent);
  color: var(--ne-surface);
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
}

.chat-bubble-bot {
  background: var(--ne-border);
  color: var(--ne-text);
  align-self: flex-start;
  border-bottom-left-radius: 0.25rem;
}

.chat-bubble-tg-user {
  background: #2AABEE;
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
}

.chat-bubble-tg-bot {
  background: #1e2c3a;
  color: #e5e5e5;
  align-self: flex-start;
  border-bottom-left-radius: 0.25rem;
}

.chat-bubble-wa-user {
  background: #005c4b;
  color: #e9fde4;
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
}

.chat-bubble-wa-bot {
  background: #1f2c34;
  color: #d1d7db;
  align-self: flex-start;
  border-bottom-left-radius: 0.25rem;
}

.chat-meta {
  font-size: 0.65rem;
  opacity: 0.6;
  margin-top: 0.125rem;
  text-align: right;
}

.chat-inline-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.chat-inline-btn {
  padding: 0.25rem 0.625rem;
  background: rgba(42, 171, 238, 0.12);
  border: 1px solid rgba(42, 171, 238, 0.25);
  color: #2AABEE;
  border-radius: 0.375rem;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.chat-inline-btn:hover {
  background: rgba(42, 171, 238, 0.2);
}

/* ── Telegram mockup ─────────────────────────────────────── */
.tg-mockup {
  background: #17212b;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid #1e2c3a;
}

.tg-header {
  background: #242f3d;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.tg-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--ne-accent), var(--ne-teal));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

/* ── WhatsApp mockup ─────────────────────────────────────── */
.wa-mockup {
  background: #0b141a;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid #1d2a32;
}

.wa-header {
  background: #1f2c33;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.wa-avatar {
  width: 32px;
  height: 32px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

/* ── Platform Selector (Interactive) ─────────────────────── */
.platform-selector {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--ne-surface);
  border: 1px solid var(--ne-border);
  border-radius: var(--radius-lg);
}

.platform-tab {
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: transparent;
  color: var(--ne-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.platform-tab:hover {
  color: var(--ne-text);
  background: var(--ne-accent-subtle);
}

.platform-tab.active {
  background: var(--ne-accent);
  color: var(--ne-surface);
  box-shadow: var(--shadow-sm);
}

/* ── Scrollytelling ──────────────────────────────────────── */
.story-section {
  position: relative;
}

.story-visual {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
}

.story-step {
  min-height: 60vh;
  display: flex;
  align-items: center;
  opacity: 0.3;
  transition: opacity var(--transition-slow);
}

.story-step.active {
  opacity: 1;
}

/* ── Animated transaction flow ───────────────────────────── */
.flow-step {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.flow-step.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Section separator — subtle line ─────────────────────── */
.section-sep {
  height: 1px;
  background: var(--ne-border);
  max-width: 120px;
  margin: 0 auto;
}

/* ── Stats bar ───────────────────────────────────────────── */
.stat-number {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ne-text);
}

/* ── Feature Grid ────────────────────────────────────────── */
.grid-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

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

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

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid var(--ne-border);
}

.faq-question {
  padding: 1.25rem 0;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color var(--transition-fast);
  color: var(--ne-text);
}

.faq-question:hover {
  color: var(--ne-accent);
}

.faq-answer {
  color: var(--ne-text-secondary);
  padding-bottom: 1.25rem;
  line-height: 1.7;
}

/* ── Testimonial ─────────────────────────────────────────── */
.testimonial-card {
  background: var(--ne-surface-raised);
  border: 1px solid var(--ne-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 0.5rem;
  left: 1.25rem;
  font-size: 4rem;
  color: var(--ne-accent);
  opacity: 0.15;
  font-family: Georgia, serif;
  line-height: 1;
}

/* ── Avatar ──────────────────────────────────────────────── */
.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: white;
  flex-shrink: 0;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--ne-border);
  background: var(--ne-surface-raised);
}

/* ── CTA ─────────────────────────────────────────────────── */
.cta-gradient {
  background: linear-gradient(135deg, #1C1F2E 0%, #252838 50%, #1C1F2E 100%);
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .cta-gradient,
:root:not([data-theme="dark"]) .cta-gradient {
  background: linear-gradient(135deg, #EBF5F0 0%, #F0F7F4 50%, #EDF4F1 100%);
}

.cta-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 20% 80%, rgba(23, 141, 106, 0.15), transparent 60%),
              radial-gradient(ellipse 50% 60% at 80% 20%, rgba(16, 185, 129, 0.08), transparent 60%);
  pointer-events: none;
}

/* ── Comparison Table ────────────────────────────────────── */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.comparison-table th,
.comparison-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ne-border);
  text-align: center;
}

.comparison-table th {
  background: var(--ne-surface-raised);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}

.comparison-table td:first-child,
.comparison-table th:first-child {
  text-align: left;
  font-weight: 500;
}

.comparison-table tr:hover td {
  background: var(--ne-accent-subtle);
}

/* ── Timeline / Roadmap ──────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--ne-accent), transparent);
}

.timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.65rem;
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ne-accent);
  border: 2px solid var(--ne-surface);
}

/* ── Roadmap ─────────────────────────────────────────────── */
.roadmap-section {
  border-left: 3px solid var(--ne-border);
  padding-left: 1.5rem;
  margin-bottom: 2.5rem;
}

.roadmap-section.done { border-color: var(--ne-teal); }
.roadmap-section.progress { border-color: var(--ne-accent); }
.roadmap-section.planned { border-color: var(--ne-warm); }
.roadmap-section.future { border-color: var(--ne-text-muted); }

/* ── Mobile Nav ──────────────────────────────────────────── */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--ne-surface);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-nav-overlay.open {
  transform: translateX(0);
}

/* ── Code Block ──────────────────────────────────────────── */
.code-block {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: var(--radius);
  padding: 1rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  overflow-x: auto;
  color: #c9d1d9;
}

.code-block .cmd { color: #79c0ff; font-weight: 600; }
.code-block .comment { color: #8b949e; }
.code-block .string { color: #a5d6ff; }
.code-block .keyword { color: #ff7b72; }

/* ── Forms ───────────────────────────────────────────────── */
.mkt-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--ne-surface);
  border: 1px solid var(--ne-border);
  border-radius: var(--radius);
  color: var(--ne-text);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.mkt-input:focus {
  border-color: var(--ne-accent);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.1);
}

.mkt-input::placeholder {
  color: var(--ne-text-muted);
}

.mkt-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--ne-surface);
  border: 1px solid var(--ne-border);
  border-radius: var(--radius);
  color: var(--ne-text);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

.mkt-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ne-text);
  margin-bottom: 0.5rem;
}

/* ── Auth Split ──────────────────────────────────────────── */
.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-split .auth-left { display: none; }
}

.auth-left {
  position: relative;
  background: linear-gradient(150deg, #0d1a14 0%, #0f2419 40%, #122b1f 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

.auth-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--ne-surface);
  overflow-y: auto;
}

/* ── Error Pages ─────────────────────────────────────────── */
.error-illustration {
  font-size: 8rem;
  line-height: 1;
  text-align: center;
}

/* ── Blog Cards ──────────────────────────────────────────── */
.blog-card {
  background: var(--ne-surface-raised);
  border: 1px solid var(--ne-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.blog-image-placeholder {
  height: 180px;
  background: linear-gradient(135deg, var(--ne-accent), var(--ne-teal));
  opacity: 0.85;
}

/* ── Utilities ───────────────────────────────────────────── */
.text-muted { color: var(--ne-text-muted); }
.text-primary { color: var(--ne-accent); }
.text-accent { color: var(--ne-teal); }
.text-success { color: var(--ne-teal); }

.divider {
  height: 1px;
  background: var(--ne-border);
  margin: 2rem 0;
}

/* ── Glassmorphism — for floating elements ───────────────── */
.glass {
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .glass,
:root:not([data-theme="dark"]) .glass {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Floating animation — subtle, used sparingly ─────────── */
@keyframes floatSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.float-animation {
  animation: floatSubtle 5s ease-in-out infinite;
}

.float-animation-slow {
  animation: floatSubtle 7s ease-in-out infinite;
  animation-delay: -2s;
}

/* ── Scroll reveal (via IntersectionObserver in JS) ──────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* ── Waitlist ────────────────────────────────────────────── */
.waitlist-input-group {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
}

@media (max-width: 480px) {
  .waitlist-input-group { flex-direction: column; }
}

/* ── Shimmer ─────────────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(90deg, var(--ne-border) 25%, var(--ne-surface) 50%, var(--ne-border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Wireframe (web platform page) ───────────────────────── */
.wireframe-card {
  background: var(--ne-surface-raised);
  border: 1px solid var(--ne-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  min-height: 200px;
}

.wireframe-bar {
  height: 8px;
  border-radius: 9999px;
  background: var(--ne-border);
  margin-bottom: 0.5rem;
}

.wireframe-bar.primary { background: var(--ne-accent-subtle); }
.wireframe-bar.accent { background: var(--ne-teal-subtle); }
.wireframe-bar.success { background: var(--ne-teal-subtle); }

.wireframe-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
}

.wireframe-chart-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--ne-border);
}

/* ── Social icons ────────────────────────────────────────── */
.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  background: var(--ne-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: var(--ne-text-muted);
}

.social-icon:hover {
  background: var(--ne-accent);
  color: var(--ne-surface);
}

/* ── Checkbox ────────────────────────────────────────────── */
.mkt-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--ne-accent);
  cursor: pointer;
}

/* ── Stagger children animation ──────────────────────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(12px);
}

.stagger-children.visible > *:nth-child(1) { animation: fadeUp 0.5s 0.05s forwards; }
.stagger-children.visible > *:nth-child(2) { animation: fadeUp 0.5s 0.1s forwards; }
.stagger-children.visible > *:nth-child(3) { animation: fadeUp 0.5s 0.15s forwards; }
.stagger-children.visible > *:nth-child(4) { animation: fadeUp 0.5s 0.2s forwards; }
.stagger-children.visible > *:nth-child(5) { animation: fadeUp 0.5s 0.25s forwards; }
.stagger-children.visible > *:nth-child(6) { animation: fadeUp 0.5s 0.3s forwards; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Step card ───────────────────────────────────────────── */
.step-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ne-accent);
  color: var(--ne-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .navbar, footer { display: none; }
  .section { padding: 1rem 0; }
}