/* ═══════════════════════════════════════════════════════════════════════════════
   Paylnz · cover.css — Landing Page
   Warm gold system. Zero blue. Apple-refined editorial aesthetic.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* ── Tokens ──────────────────────────────────────────────────────────────────── */
:root {
  --gold:         #c9a227;
  --gold-dark:    #9c7a0d;
  --gold-light:   #f0c030;
  --gold-glow:    rgba(201,162,39,.22);
  --gold-faint:   rgba(201,162,39,.08);
  --gold-ring:    rgba(201,162,39,.20);

  --ink:          #111008;
  --ink-mid:      #3a3830;
  --ink-soft:     #6e6b60;
  --ink-muted:    #a09c90;

  --cream:        #fdfbf5;
  --cream-warm:   #f5f0e0;
  --dark-bg:      #0f0e08;
  --dark-surface: #1a1910;
  --dark-border:  rgba(255,255,255,.06);
  --dark-text:    rgba(255,255,255,.50);

  --glass:        rgba(255,255,255,.55);
  --glass-hi:     rgba(255,255,255,.80);
  --glass-border: rgba(255,255,255,.60);

  --green:        #22c55e;
  --red:          #ef4444;

  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --ease:         cubic-bezier(.22,1,.36,1);
  --spring:       cubic-bezier(.34,1.56,.64,1);
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:   var(--font-body);
  background:    var(--cream);
  color:         var(--ink);
  line-height:   1.5;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:    hidden;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════════════════════════ */
nav {
  position:       fixed; top:0; left:0; right:0; z-index:1000;
  padding:        22px 64px;
  display:        flex; align-items:center; justify-content:space-between;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  background:     rgba(253,251,245,.70);
  border-bottom:  1px solid rgba(0,0,0,.05);
  transition:     padding .3s var(--ease), background .3s;
}
nav.scrolled {
  background: rgba(253,251,245,.88);
  padding:    14px 64px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.nav-logo {
  font-family:   var(--font-display);
  font-size:     1.5rem;
  color:         var(--ink);
  letter-spacing:-.01em;
  text-decoration:none;
}
.nav-logo span { color:var(--gold); }

.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a {
  font-size:   .875rem;
  font-weight: 400;
  color:       var(--ink-soft);
  text-decoration:none;
  transition:  color .18s;
}
.nav-links a:hover { color:var(--ink); }

.nav-cta {
  background:      var(--ink);
  color:           var(--cream);
  padding:         10px 26px;
  border-radius:   40px;
  font-size:       .875rem;
  font-weight:     500;
  text-decoration: none;
  transition:      background .2s, transform .2s var(--spring), box-shadow .2s;
}
.nav-cta:hover {
  background:  var(--gold);
  color:       #1a1000;
  transform:   translateY(-2px);
  box-shadow:  0 6px 16px var(--gold-glow);
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════════ */
#hero {
  min-height: 100vh;
  display:    flex;
  align-items:center;
  padding:    130px 64px 90px;
  position:   relative;
  overflow:   hidden;
  background: var(--cream);
}

/* warm radial behind dashboard */
#hero::before {
  content:  '';
  position: absolute;
  right:    -100px; top: 50%;
  transform:translateY(-50%);
  width:    700px; height:700px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201,162,39,.10) 0%, transparent 72%);
  pointer-events:none;
}

.hero-inner {
  max-width:  1360px;
  margin:     0 auto;
  width:      100%;
  display:    grid;
  grid-template-columns: 1fr 1fr;
  gap:        80px;
  align-items:center;
}

.hero-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    var(--gold-faint);
  border:        1px solid var(--gold-ring);
  padding:       6px 16px;
  border-radius: 40px;
  font-size:     .78rem;
  font-weight:   500;
  color:         var(--gold-dark);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom: 28px;
  opacity:0; animation: fadeUp .6s .2s var(--ease) forwards;
}
.hero-badge-dot {
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }

.hero-h1 {
  font-family:   var(--font-display);
  font-size:     clamp(3rem, 5.2vw, 5.2rem);
  font-weight:   400;
  line-height:   1.06;
  letter-spacing:-.02em;
  color:         var(--ink);
  margin-bottom: 22px;
  opacity:0; animation: fadeUp .7s .35s var(--ease) forwards;
}
.hero-h1 em {
  font-style:normal;
  color:      var(--gold);
}

.hero-sub {
  font-size:   1.18rem;
  font-weight: 300;
  color:       var(--ink-soft);
  line-height: 1.6;
  max-width:   480px;
  margin-bottom:40px;
  opacity:0; animation: fadeUp .7s .5s var(--ease) forwards;
}

.hero-buttons {
  display:      flex;
  gap:          14px;
  flex-wrap:    wrap;
  margin-bottom:32px;
  opacity:0; animation: fadeUp .7s .65s var(--ease) forwards;
}

.btn-primary {
  background:      linear-gradient(135deg, var(--gold-light), var(--gold));
  color:           #1a1000;
  padding:         16px 40px;
  border-radius:   40px;
  font-family:     var(--font-body);
  font-size:       1rem;
  font-weight:     600;
  text-decoration: none;
  transition:      transform .2s var(--spring), box-shadow .2s, filter .18s;
  box-shadow:      0 4px 18px var(--gold-glow);
}
.btn-primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 28px var(--gold-glow);
  filter:     brightness(1.04);
}
.btn-primary:active { transform:scale(.97); }

.btn-secondary {
  background:      var(--glass-hi);
  color:           var(--ink-mid);
  border:          1px solid rgba(0,0,0,.08);
  padding:         16px 36px;
  border-radius:   40px;
  font-family:     var(--font-body);
  font-size:       1rem;
  font-weight:     500;
  text-decoration: none;
  backdrop-filter: blur(10px);
  display:         flex;
  align-items:     center;
  gap:             10px;
  transition:      background .2s, transform .2s var(--spring), box-shadow .2s;
}
.btn-secondary:hover {
  background:  #fff;
  transform:   translateY(-2px);
  box-shadow:  0 6px 18px rgba(0,0,0,.06);
}
.btn-secondary:active { transform:scale(.97); }

.play-icon {
  width:28px; height:28px;
  border-radius:50%;
  background: var(--gold);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:transform .2s var(--spring);
}
.btn-secondary:hover .play-icon { transform:scale(1.12); }
.play-icon svg { width:10px; margin-left:2px; fill:#1a1000; }

.hero-trust {
  font-size:  .85rem;
  color:      var(--ink-muted);
  display:    flex;
  gap:        20px;
  flex-wrap:  wrap;
  opacity:0; animation: fadeUp .7s .8s var(--ease) forwards;
}
.hero-trust span { display:flex; align-items:center; gap:6px; }
.hero-trust span::before {
  content:'✓';
  color:var(--gold);
  font-weight:600;
}

/* ── Dashboard mockup ────────────────────────────────────────────────────────── */
.hero-visual {
  position:relative;
  opacity:0; animation: fadeIn 1s .5s var(--ease) forwards;
}

.dashboard-wrap {
  position:       relative;
  transform-style:preserve-3d;
  animation:      floatY 4.5s ease-in-out infinite;
}
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.dashboard-glow {
  position:     absolute;
  inset:        -50px;
  background:   radial-gradient(ellipse, var(--gold-glow) 0%, transparent 68%);
  filter:       blur(40px);
  z-index:      0;
  animation:    glowP 3.5s ease-in-out infinite;
}
@keyframes glowP { 0%,100%{opacity:.6} 50%{opacity:1} }

.dashboard-card {
  position:       relative; z-index:1;
  background:     rgba(255,255,255,.82);
  backdrop-filter:blur(28px);
  border:         1px solid rgba(255,255,255,.92);
  border-radius:  28px;
  padding:        26px;
  box-shadow:     0 24px 60px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.04);
}

.db-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   22px;
  padding-bottom:  16px;
  border-bottom:   1px solid rgba(0,0,0,.05);
}
.db-logo-row { display:flex; align-items:center; gap:9px; }
.db-logo-dot {
  width:9px; height:9px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow:0 0 6px var(--gold-glow);
}
.db-title  { font-weight:500; font-size:.88rem; color:var(--ink); }
.db-date   { font-size:.72rem; color:var(--ink-muted); font-family:monospace; }

.db-stats {
  display:       grid;
  grid-template-columns:repeat(3,1fr);
  gap:           12px;
  margin-bottom: 20px;
}
.db-stat {
  background:    #fff;
  border:        1px solid rgba(0,0,0,.04);
  border-radius: 16px;
  padding:       12px 14px;
}
.db-stat-label { font-size:.68rem; color:var(--ink-muted); font-weight:500; text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.db-stat-val   { font-family:monospace; font-size:1.1rem; font-weight:600; color:var(--ink); }
.db-stat-trend { font-size:.68rem; color:var(--green); margin-top:3px; font-weight:500; }

.db-chart-label { font-size:.68rem; color:var(--ink-muted); font-weight:500; margin-bottom:9px; text-transform:uppercase; letter-spacing:.04em; }
.chart-bars {
  display:       flex;
  gap:           5px;
  align-items:   flex-end;
  height:        66px;
  margin-bottom: 18px;
}
.bar {
  flex:1; border-radius:6px 6px 0 0;
  background:    linear-gradient(180deg, var(--gold-light) 0%, rgba(201,162,39,.25) 100%);
  opacity:.85;
  transform:     scaleY(0);
  transform-origin:bottom;
  animation:     growBar .6s var(--ease) forwards;
}
.bar:nth-child(1){animation-delay:.9s;height:50%}  .bar:nth-child(2){animation-delay:1s;height:68%}
.bar:nth-child(3){animation-delay:1.1s;height:42%} .bar:nth-child(4){animation-delay:1.2s;height:82%}
.bar:nth-child(5){animation-delay:1.3s;height:58%} .bar:nth-child(6){animation-delay:1.4s;height:88%}
.bar:nth-child(7){animation-delay:1.5s;height:74%;opacity:1}
@keyframes growBar { to{transform:scaleY(1)} }

.db-transactions { display:flex; flex-direction:column; gap:7px; }
.db-tx {
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  padding:        9px 12px;
  background:     #fff;
  border-radius:  12px;
  border:         1px solid rgba(0,0,0,.04);
}
.db-tx-left { display:flex; align-items:center; gap:9px; }
.db-tx-dot  { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.db-tx-name { font-size:.83rem; font-weight:500; color:var(--ink); }
.db-tx-time { font-size:.68rem; color:var(--ink-muted); font-family:monospace; }
.db-tx-amt  { font-size:.83rem; font-weight:500; font-family:monospace; }

.float-badge {
  position:       absolute; z-index:2;
  background:     rgba(255,255,255,.90);
  backdrop-filter:blur(16px);
  border:         1px solid rgba(255,255,255,.90);
  border-radius:  40px;
  padding:        9px 16px;
  box-shadow:     0 8px 24px rgba(0,0,0,.07);
  font-size:      .78rem;
  font-weight:    500;
  color:          var(--ink);
  white-space:    nowrap;
}
.float-badge.tl { top:-18px; left:-28px; animation:fb1 3.2s ease-in-out infinite; }
.float-badge.br { bottom:18px; right:-22px; animation:fb2 3.8s ease-in-out infinite; }
@keyframes fb1  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes fb2  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
.live-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--green);
  display:inline-block; margin-right:4px;
  animation:pulse 1.8s infinite;
}

.scroll-indicator {
  position:   absolute; bottom:40px; left:50%; transform:translateX(-50%);
  display:    flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; animation: fadeIn 1s 1.6s var(--ease) forwards;
}
.scroll-text  { font-size:.68rem; color:var(--ink-muted); letter-spacing:.12em; text-transform:uppercase; }
.scroll-mouse { width:22px; height:36px; border:1.5px solid var(--gold-ring); border-radius:11px; display:flex; justify-content:center; padding-top:6px; }
.scroll-wheel { width:2.5px; height:7px; background:var(--gold); border-radius:2px; animation:sw 1.6s ease-in-out infinite; }
@keyframes sw { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(11px);opacity:0} }

/* ══════════════════════════════════════════════════════════════════════════════
   PROBLEM
   ══════════════════════════════════════════════════════════════════════════════ */
#problem { background:var(--cream-warm); padding:160px 64px; }
.problem-inner { max-width:860px; margin:0 auto; text-align:center; }

.problem-h {
  font-family:   var(--font-display);
  font-size:     clamp(2.4rem,4vw,3.8rem);
  font-weight:   400;
  line-height:   1.1;
  color:         var(--ink);
  letter-spacing:-.01em;
  margin-bottom: 16px;
}
.problem-h .soft { opacity:.28; }
.problem-h2 {
  font-family:   var(--font-display);
  font-size:     clamp(1.8rem,3vw,2.6rem);
  font-weight:   400;
  font-style:    italic;
  color:         var(--ink-soft);
  margin-bottom: 70px;
}

.problem-stats {
  display:       grid;
  grid-template-columns:repeat(3,1fr);
  gap:           2px;
  margin:        60px auto;
  max-width:     680px;
  background:    rgba(0,0,0,.04);
  border-radius: 22px;
  overflow:      hidden;
}
.p-stat {
  padding:    38px 22px;
  background: #fff;
  text-align: center;
  transition: background .2s;
}
.p-stat:hover { background:var(--gold-faint); }
.p-stat-num   {
  font-family:   var(--font-display);
  font-size:     2.8rem;
  color:         var(--gold);
  line-height:   1;
  margin-bottom: 10px;
}
.p-stat-desc {
  font-size:  .84rem;
  color:      var(--ink-soft);
  line-height:1.55;
  max-width:  180px;
  margin:     0 auto;
}

.problem-fix {
  font-family:   var(--font-display);
  font-size:     clamp(2.2rem,3.8vw,3.4rem);
  font-weight:   400;
  color:         var(--ink);
  margin-top:    70px;
  letter-spacing:-.01em;
}
.problem-fix em { font-style:normal; color:var(--gold); }

/* ══════════════════════════════════════════════════════════════════════════════
   FEATURES
   ══════════════════════════════════════════════════════════════════════════════ */
#features { background:var(--cream); padding:140px 64px; }
.features-title {
  text-align:    center;
  font-family:   var(--font-display);
  font-size:     clamp(2.2rem,3.5vw,3rem);
  font-weight:   400;
  letter-spacing:-.01em;
  color:         var(--ink);
  margin-bottom: 70px;
  line-height:   1.2;
}

.features-grid {
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   22px;
  max-width:             1200px;
  margin:                0 auto;
}
.feat-card {
  background:      #fff;
  border:          1px solid rgba(0,0,0,.05);
  border-radius:   26px;
  padding:         34px 26px;
  transition:      transform .25s var(--ease), box-shadow .25s, border-color .2s;
  cursor:          default;
  transform-style: preserve-3d;
  opacity:         0; transform:translateY(36px);
  box-shadow:      0 2px 12px rgba(0,0,0,.03);
}
.feat-card.visible { opacity:1; transform:translateY(0); }
.feat-card:hover {
  transform:    translateY(-8px);
  box-shadow:   0 20px 40px rgba(0,0,0,.06);
  border-color: var(--gold-ring);
}
.feat-icon {
  width:54px; height:54px;
  border-radius:16px;
  background:  var(--gold-faint);
  border:      1px solid var(--gold-ring);
  display:     flex; align-items:center; justify-content:center;
  font-size:   1.5rem;
  margin-bottom:20px;
  transition:  transform .2s var(--spring);
}
.feat-card:hover .feat-icon { transform:scale(1.06) rotate(-4deg); }
.feat-name { font-size:1.12rem; font-weight:600; color:var(--ink); margin-bottom:9px; }
.feat-desc { font-size:.88rem; color:var(--ink-soft); line-height:1.62; }

/* ══════════════════════════════════════════════════════════════════════════════
   PRODUCT SPLIT
   ══════════════════════════════════════════════════════════════════════════════ */
#product { background:#fff; padding:140px 64px; }
.split-section {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   90px;
  align-items:           center;
  max-width:             1200px;
  margin:                0 auto 110px;
}
.split-kicker {
  font-size:      .78rem;
  font-weight:    600;
  color:          var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom:  12px;
  display:        block;
}
.split-h {
  font-family:   var(--font-display);
  font-size:     clamp(1.8rem,2.8vw,2.8rem);
  font-weight:   400;
  line-height:   1.1;
  letter-spacing:-.01em;
  margin-bottom: 18px;
  color:         var(--ink);
}
.split-p { font-size:1.05rem; color:var(--ink-soft); line-height:1.6; margin-bottom:28px; }

.split-features { display:flex; flex-direction:column; gap:10px; }
.split-feat {
  display:     flex;
  align-items: center;
  gap:         11px;
  font-size:   .93rem;
  font-weight: 400;
  color:       var(--ink-mid);
  padding:     10px 14px;
  background:  #fff;
  border-radius:13px;
  border:      1px solid rgba(0,0,0,.04);
  transition:  background .18s, border-color .18s;
}
.split-feat::before { content:'✓'; color:var(--gold); font-weight:600; flex-shrink:0; }
.split-feat:hover   { background:var(--gold-faint); border-color:var(--gold-ring); }

.dashboard-preview {
  background:   #fff;
  border:       1px solid rgba(0,0,0,.05);
  border-radius:26px;
  padding:      26px;
  box-shadow:   0 16px 40px rgba(0,0,0,.05);
  transition:   transform .25s var(--ease);
}
.dashboard-preview:hover { transform:translateY(-6px); }
.preview-topbar { display:flex; gap:5px; margin-bottom:18px; }
.preview-dot { width:9px; height:9px; border-radius:50%; background:#e0ddd8; }
.preview-dot:nth-child(1){background:#ff5f57} .preview-dot:nth-child(2){background:#ffbd2e} .preview-dot:nth-child(3){background:#27c840}

.mini-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
.mini-stat  { background:var(--cream); border:1px solid rgba(0,0,0,.04); border-radius:14px; padding:14px; }
.mini-stat-l{ font-size:.68rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.mini-stat-v{ font-size:1.35rem; font-weight:600; font-family:monospace; color:var(--ink); }

.mini-chart { height:68px; display:flex; align-items:flex-end; gap:4px; margin-bottom:14px; }
.mini-bar   { flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg, var(--gold-light), rgba(201,162,39,.20)); }

.branch-list { display:flex; flex-direction:column; gap:7px; }
.branch-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         11px 14px;
  background:      #fff;
  border-radius:   13px;
  border:          1px solid rgba(0,0,0,.04);
}
.branch-name   { font-size:.88rem; font-weight:500; color:var(--ink); }
.branch-status {
  font-size:  .73rem;
  font-weight:600;
  color:      var(--green);
  display:    flex; align-items:center; gap:4px;
}
.branch-status::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--green); }

/* ══════════════════════════════════════════════════════════════════════════════
   BRANCHES DARK
   ══════════════════════════════════════════════════════════════════════════════ */
#branches { background:var(--dark-bg); padding:140px 64px; }
.branches-inner {
  max-width:  1100px;
  margin:     0 auto;
  display:    grid;
  grid-template-columns:1fr 1fr;
  gap:        80px;
  align-items:center;
}
.branch-network { position:relative; height:300px; }
.branch-node {
  position:       absolute;
  width:          64px; height:64px;
  border-radius:  22px;
  background:     rgba(255,255,255,.03);
  border:         1px solid rgba(255,255,255,.07);
  display:        flex; align-items:center; justify-content:center;
  font-size:      1.3rem;
  animation:      nodeGlow 3s ease-in-out infinite;
  backdrop-filter:blur(4px);
}
.branch-node.center {
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:     rgba(201,162,39,.12);
  border-color:   rgba(201,162,39,.24);
  width:76px; height:76px; font-size:1.5rem;
  box-shadow:     0 0 28px rgba(201,162,39,.14);
}
.branch-node.tl{top:16px;left:16px;animation-delay:.5s}
.branch-node.tr{top:16px;right:16px;animation-delay:1s}
.branch-node.bl{bottom:16px;left:16px;animation-delay:1.5s}
.branch-node.br{bottom:16px;right:16px;animation-delay:2s}
@keyframes nodeGlow { 0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.03)} 50%{box-shadow:0 0 0 2px rgba(201,162,39,.12)} }

.branches-text .split-h { color:#fff; }
.branches-text .split-p { color:var(--dark-text); }
.branches-text .split-feat {
  background:   rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
  color:        rgba(255,255,255,.70);
}
.branches-text .split-feat:hover { background:rgba(201,162,39,.08); border-color:rgba(201,162,39,.20); }

/* ══════════════════════════════════════════════════════════════════════════════
   COMPARISON
   ══════════════════════════════════════════════════════════════════════════════ */
#comparison { background:var(--cream-warm); padding:140px 64px; }
.comparison-inner { max-width:860px; margin:0 auto; }
.comparison-title {
  font-family:   var(--font-display);
  font-size:     clamp(2.2rem,3.5vw,2.8rem);
  font-weight:   400;
  text-align:    center;
  margin-bottom: 60px;
  letter-spacing:-.01em;
  color:         var(--ink);
}

.comp-table { width:100%; border-collapse:separate; border-spacing:0; }
.comp-table thead th {
  padding:        18px 26px;
  font-size:      .78rem;
  font-weight:    600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align:     center;
}
.comp-table thead th.paylnz-col {
  background:    linear-gradient(135deg, var(--gold-light), var(--gold));
  color:         #1a1000;
  border-radius: 16px 16px 0 0;
}
.comp-table thead th.trad-col {
  background:    rgba(0,0,0,.03);
  color:         var(--ink-soft);
  border-radius: 16px 16px 0 0;
}
.comp-table thead th.feat-col { text-align:left; color:var(--ink-muted); font-size:.7rem; font-weight:400; }

.comp-table tbody tr { opacity:0; transform:translateX(-16px); transition:all .38s var(--ease); }
.comp-table tbody tr.visible { opacity:1; transform:translateX(0); }
.comp-table tbody td {
  padding:    15px 26px;
  text-align: center;
  border-bottom:1px solid rgba(0,0,0,.03);
  font-size:  .88rem;
}
.comp-table tbody td:first-child { text-align:left; color:var(--ink-mid); font-weight:400; }
.comp-table tbody td.paylnz-col {
  background:   rgba(201,162,39,.05);
  border-left:  1px solid var(--gold-ring);
  border-right: 1px solid var(--gold-ring);
  font-weight:  600; color:var(--gold-dark);
  font-size:    1.05rem;
}
.comp-table tbody td.trad-col { color:var(--red); font-size:1.05rem; }
.comp-table tbody tr:last-child td.paylnz-col { border-radius:0 0 16px 16px; border-bottom:1px solid var(--gold-ring); }
.comp-table tbody tr:last-child td.trad-col   { border-radius:0 0 16px 16px; }

/* ══════════════════════════════════════════════════════════════════════════════
   LAUNCH — replaces fake proof section
   ══════════════════════════════════════════════════════════════════════════════ */
#launch { background:var(--cream); padding:120px 64px; }
.launch-inner { max-width:1100px; margin:0 auto; }

.launch-eyebrow {
  font-size:      .78rem;
  font-weight:    600;
  color:          var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom:  18px;
  display:        block;
  text-align:     center;
}
.launch-h {
  font-family:   var(--font-display);
  font-size:     clamp(2.2rem,3.5vw,3rem);
  font-weight:   400;
  text-align:    center;
  letter-spacing:-.01em;
  color:         var(--ink);
  margin-bottom: 16px;
  line-height:   1.15;
}
.launch-sub {
  text-align:   center;
  font-size:    1.05rem;
  color:        var(--ink-soft);
  max-width:    560px;
  margin:       0 auto 70px;
  line-height:  1.6;
}

.launch-grid {
  display:               grid;
  grid-template-columns: repeat(3,1fr);
  gap:                   20px;
}
.launch-card {
  background:    #fff;
  border:        1px solid rgba(0,0,0,.05);
  border-radius: 24px;
  padding:       32px 28px;
  text-align:    center;
  transition:    transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.launch-card:hover {
  transform:    translateY(-6px);
  box-shadow:   0 16px 36px rgba(0,0,0,.06);
  border-color: var(--gold-ring);
}
.launch-card-icon {
  width:          56px; height:56px;
  margin:         0 auto 18px;
  border-radius:  16px;
  background:     var(--gold-faint);
  border:         1px solid var(--gold-ring);
  display:        flex; align-items:center; justify-content:center;
  font-size:      1.6rem;
  transition:     transform .2s var(--spring);
}
.launch-card:hover .launch-card-icon { transform:scale(1.08) rotate(-4deg); }
.launch-card-title { font-size:1.1rem; font-weight:600; color:var(--ink); margin-bottom:9px; }
.launch-card-desc  { font-size:.88rem; color:var(--ink-soft); line-height:1.62; }

/* ══════════════════════════════════════════════════════════════════════════════
   CTA
   ══════════════════════════════════════════════════════════════════════════════ */
#cta {
  background: var(--dark-bg);
  padding:    160px 64px;
  position:   relative;
  overflow:   hidden;
  text-align: center;
}
#cta::before {
  content:  '';
  position: absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(201,162,39,.14) 0%, transparent 68%);
  animation: ctaG 4.5s ease-in-out infinite;
}
@keyframes ctaG { 0%,100%{opacity:.6} 50%{opacity:1} }

.cta-inner { position:relative; z-index:1; max-width:720px; margin:0 auto; }
.cta-label {
  font-size:      .78rem;
  font-weight:    600;
  color:          rgba(201,162,39,.75);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom:  22px;
  display:        block;
}
.cta-h {
  font-family:   var(--font-display);
  font-size:     clamp(2.8rem,5vw,4.5rem);
  font-weight:   400;
  line-height:   1.08;
  color:         #fff;
  letter-spacing:-.02em;
  margin-bottom: 20px;
}
.cta-sub {
  font-size:   1.15rem;
  color:       rgba(255,255,255,.46);
  margin-bottom:46px;
  line-height: 1.55;
}
.cta-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             12px;
  background:      linear-gradient(135deg, var(--gold-light), var(--gold));
  color:           #1a1000;
  padding:         20px 52px;
  border-radius:   40px;
  font-family:     var(--font-body);
  font-size:       1.1rem;
  font-weight:     600;
  text-decoration: none;
  transition:      transform .25s var(--spring), box-shadow .25s, filter .2s;
  box-shadow:      0 6px 24px var(--gold-glow);
  animation:       ctaBG 3.5s ease-in-out infinite;
}
@keyframes ctaBG { 0%,100%{box-shadow:0 6px 24px var(--gold-glow)} 50%{box-shadow:0 10px 40px rgba(201,162,39,.40)} }
.cta-btn:hover { transform:translateY(-3px) scale(1.02); filter:brightness(1.05); }
.cta-btn:active{ transform:scale(.97); }
.cta-note {
  font-size:  .78rem;
  color:      rgba(255,255,255,.22);
  margin-top: 20px;
  line-height:1.6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */
footer {
  background:   var(--dark-surface);
  padding:      44px 64px;
  display:      flex;
  justify-content:space-between;
  align-items:  center;
  flex-wrap:    wrap;
  gap:          20px;
  border-top:   1px solid var(--dark-border);
}
.footer-logo {
  font-family:   var(--font-display);
  font-size:     1.4rem;
  color:         rgba(255,255,255,.80);
  text-decoration:none;
}
.footer-logo span { color:var(--gold); }
.footer-copy { font-size:.78rem; color:rgba(255,255,255,.28); }
.footer-links { display:flex; gap:26px; }
.footer-links a {
  font-size:.78rem;
  color:rgba(255,255,255,.28);
  text-decoration:none;
  transition:color .18s;
}
.footer-links a:hover { color:var(--gold); }

/* ══════════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════════════════════════════════════ */
.reveal       { opacity:0; transform:translateY(36px); transition:all .7s cubic-bezier(.25,.46,.45,.94); }
.reveal-left  { opacity:0; transform:translateX(-36px);transition:all .7s cubic-bezier(.25,.46,.45,.94); }
.reveal-right { opacity:0; transform:translateX(36px); transition:all .7s cubic-bezier(.25,.46,.45,.94); }
.reveal.visible,.reveal-left.visible,.reveal-right.visible { opacity:1; transform:none; }

/* ══════════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  nav,nav.scrolled         { padding:16px 28px; }
  .nav-links               { display:none; }
  #hero                    { padding:110px 28px 70px; }
  .hero-inner              { grid-template-columns:1fr; gap:50px; }
  #problem,#features,#product,#branches,#comparison,#launch,#cta { padding-left:28px; padding-right:28px; }
  .features-grid           { grid-template-columns:repeat(2,1fr); }
  .split-section           { grid-template-columns:1fr; gap:44px; }
  .branches-inner          { grid-template-columns:1fr; }
  .branch-network          { height:240px; }
  .launch-grid             { grid-template-columns:1fr; gap:14px; }
  footer                   { flex-direction:column; text-align:center; padding:36px 28px; }
  .problem-stats           { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  #hero         { padding:100px 20px 60px; }
  .hero-h1      { font-size:clamp(2.4rem,8vw,3.2rem); }
  .hero-buttons { flex-direction:column; gap:12px; }
  .btn-primary,.btn-secondary { width:100%; justify-content:center; padding:14px 28px; }
  .hero-trust   { justify-content:center; font-size:.8rem; }
  #problem,#features,#product,#branches,#comparison,#launch,#cta { padding-left:20px; padding-right:20px; }
  .features-grid { grid-template-columns:1fr; gap:14px; }
  .db-stats      { grid-template-columns:repeat(2,1fr); }
  .mini-stats    { grid-template-columns:1fr; }
  .float-badge.tl{ top:-10px; left:-8px; font-size:.7rem; padding:6px 12px; }
  .float-badge.br{ bottom:10px; right:-8px; font-size:.7rem; padding:6px 12px; }
  .launch-grid   { grid-template-columns:1fr; }
  .problem-h2    { margin-bottom:40px; }
  footer         { padding:28px 20px; gap:14px; }
  .footer-links  { justify-content:center; flex-wrap:wrap; gap:18px; }
  .scroll-indicator { display:none; }
  #cta { padding-top:100px; padding-bottom:100px; }
  .cta-btn { padding:16px 36px; font-size:1rem; }
}

@media (max-width:375px) {
  .hero-h1    { font-size:clamp(2rem,7vw,2.6rem); }
  .hero-sub   { font-size:1rem; }
  .problem-h  { font-size:clamp(2rem,7vw,2.8rem); }
  .p-stat-num { font-size:2.4rem; }
  .feat-card  { padding:26px 18px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODULES SECTION
   ══════════════════════════════════════════════════════════════════════════════ */
#modules { background: var(--dark-bg); padding: 140px 64px; }
.modules-inner { max-width: 1200px; margin: 0 auto; }

.modules-header { text-align: center; margin-bottom: 60px; }
.modules-eyebrow {
  font-size: .78rem; font-weight: 600; color: rgba(201,162,39,.70);
  letter-spacing: .10em; text-transform: uppercase; display: block; margin-bottom: 16px;
}
.modules-h {
  font-family: var(--font-display);
  font-size: clamp(2.2rem,3.5vw,3rem); font-weight: 400;
  color: #fff; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 14px;
}
.modules-sub { font-size: 1.05rem; color: var(--dark-text); max-width: 520px; margin: 0 auto; line-height: 1.6; }

.modules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.module-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 28px; padding: 36px 32px;
  transition: background .2s, border-color .2s, transform .2s var(--ease);
  position: relative; overflow: hidden;
}
.module-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .3s;
}
.module-card:hover { background: rgba(255,255,255,.055); border-color: rgba(201,162,39,.20); transform: translateY(-4px); }
.module-card:hover::before { opacity: .8; }

.module-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(201,162,39,.10); border: 1px solid rgba(201,162,39,.22);
  border-radius: 40px; padding: 5px 14px;
  font-size: .72rem; font-weight: 600; color: var(--gold-light);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 22px;
}
.module-tag-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

.module-title { font-size: 1.6rem; font-weight: 600; color: #fff; margin-bottom: 10px; letter-spacing: -.02em; }
.module-desc  { font-size: .95rem; color: var(--dark-text); line-height: 1.65; margin-bottom: 28px; }

.module-features { display: flex; flex-direction: column; gap: 8px; }
.module-feat {
  display: flex; align-items: center; gap: 10px;
  font-size: .88rem; color: rgba(255,255,255,.65); padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.module-feat:last-child { border-bottom: none; }
.module-feat-icon {
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(201,162,39,.10); border: 1px solid rgba(201,162,39,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ROLES STRIP
   ══════════════════════════════════════════════════════════════════════════════ */
#roles { background: var(--cream-warm); padding: 100px 64px; }
.roles-inner { max-width: 1100px; margin: 0 auto; }

.roles-header { text-align: center; margin-bottom: 50px; }
.roles-h {
  font-family: var(--font-display);
  font-size: clamp(2rem,3.2vw,2.6rem); font-weight: 400;
  color: var(--ink); margin-bottom: 12px; letter-spacing: -.01em;
}
.roles-sub { font-size: 1rem; color: var(--ink-soft); max-width: 500px; margin: 0 auto; line-height: 1.6; }

.roles-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }

.role-card {
  background: #fff; border: 1px solid rgba(0,0,0,.05);
  border-radius: 20px; padding: 22px 16px; text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.role-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0,0,0,.06); border-color: var(--gold-ring); }
.role-icon {
  width: 48px; height: 48px; margin: 0 auto 14px;
  border-radius: 14px; background: var(--gold-faint); border: 1px solid var(--gold-ring);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.role-name { font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.role-desc { font-size: .78rem; color: var(--ink-soft); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════════════
   ENHANCED COMPARISON TABLE
   ══════════════════════════════════════════════════════════════════════════════ */
.comp-category {
  padding: 10px 26px 6px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .10em; color: var(--ink-muted); background: rgba(0,0,0,.015);
}
.comp-category td { padding: 10px 26px 6px !important; }

.comp-table tbody td.check  { color: var(--gold-dark); font-size: 1.05rem; font-weight: 700; }
.comp-table tbody td.cross  { color: var(--red); font-size: 1.05rem; }
.comp-table tbody td.partial{ color: var(--ink-muted); font-size: .82rem; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════════════
   HERO DASHBOARD ENHANCED
   ══════════════════════════════════════════════════════════════════════════════ */
.db-module-tabs {
  display: flex; gap: 6px; margin-bottom: 16px;
}
.db-tab {
  padding: 4px 12px; border-radius: 40px; font-size: .68rem; font-weight: 600;
  cursor: default; letter-spacing: .02em;
}
.db-tab.active {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #1a1000;
}
.db-tab.inactive {
  background: rgba(0,0,0,.04); color: var(--ink-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADDITIONS
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #modules,#roles { padding-left: 28px; padding-right: 28px; }
  .modules-grid   { grid-template-columns: 1fr; gap: 16px; }
  .roles-grid     { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 640px) {
  #modules,#roles { padding-left: 20px; padding-right: 20px; }
  .roles-grid     { grid-template-columns: repeat(2, 1fr); }
  .modules-grid   { gap: 12px; }
  .module-card    { padding: 26px 22px; }
  #modules        { padding-top: 100px; padding-bottom: 100px; }
  #roles          { padding-top: 80px; padding-bottom: 80px; }
}
@media (max-width: 375px) {
  .roles-grid { grid-template-columns: 1fr 1fr; }
  .module-title { font-size: 1.4rem; }
}