/* ═══════════════════════════════════════════════
   DESIGN SYSTEM — Liquid Obsidian with Aurora
   ═══════════════════════════════════════════════ */
:root {
  --ink:        #050711;
  --surface:    #0a0c12;
  --panel:      #10131e;
  --rim:        rgba(255,255,255,.06);
  --rim2:       rgba(255,255,255,.1);
  --white:      #f0f2ff;
  --muted:      #dfe4ff;
  --accent:     #6c8eff;
  --accent2:    #a78bfa;
  --glow:       #3b5bff;
  --teal:       #22d3ee;
  --rose:       #fb7185;
  --gold:       #fbbf24;
  --ff-head:    'Syne', sans-serif;
  --ff-body:    'DM Sans', sans-serif;
  --ease-out:   cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  /* Unified dark base shared by .demo-sec, .why-nidai-sec, .pricing-sec.
     Section bg images fade to this same colour at their seams. */
  background: #050711;
  color: var(--white);
  font-family: var(--ff-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--ink); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:2px; }

/* ── NOISE TEXTURE OVERLAY ── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:1000; pointer-events:none;
  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.035'/%3E%3C/svg%3E");
  opacity:.4; mix-blend-mode:overlay;
}

/* ═══════════ CURSOR ═══════════ */
.cursor { position:fixed; width:10px; height:10px; background:var(--accent); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .3s,height .3s,background .3s; mix-blend-mode:difference; }
.cursor-ring { position:fixed; width:36px; height:36px; border:1px solid rgba(108,142,255,.4); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:transform .12s var(--ease-out),width .3s,height .3s; }
.cursor.hovered { width:20px; height:20px; }
.cursor-ring.hovered { width:60px; height:60px; border-color:rgba(108,142,255,.2); }

/* ═══════════ NAVBAR ═══════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:800;
  padding:1.2rem 5vw;
  display:flex; align-items:center;
  transition:background .4s, backdrop-filter .4s;
}
nav.scrolled {
  background:rgba(4,5,8,.82);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--rim);
}
/* PART A — bumped from 28px → 36px (≈1.3×) and the link container is
   given a fixed width so the nav layout can reclaim space when the
   logo collapses to the wave-only mark on scroll. */
.nav-logo {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  line-height: 0;
  overflow: hidden;                /* clips the wordmark out as the container shrinks */
  height: 36px;
  width: 90px;                     /* full lockup width at h=36 (89.5px native) */
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-logo svg {
  height: 36px;
  width: auto;                     /* preserves the 686:276 ≈ 2.485:1 ratio */
  display: block;
  flex-shrink: 0;                  /* SVG stays at intrinsic 89.5px while .nav-logo width shrinks */
}

/* PART B — Absorb into Waveform.
   The NIDAI letters slide LEFT and tuck BEHIND the wave bars while
   fading to zero (negative translateX, no scaleX shrink — they pass
   under the waves rather than crumple into them). Wave bars sit on
   TOP because the SVG paint order in the HTML places .logo-word
   paths FIRST and .logo-wave paths LAST, so waves paint over
   letters as the letters pass beneath them.

   Right-to-left stagger on collapse (ltr-5 leaves first, ltr-1 last).
   On expand, lower-specificity default delays kick in with reversed
   order (ltr-1 returns first) so the wordmark writes itself L→R.

   Once the letters have finished absorbing (~380ms in), each wave
   bar fires a single scaleY bounce — staggered 30ms across the bars
   so it reads as a quick ripple. transform-box: fill-box anchors
   each pulse to its own bar's visual centre, ignoring the parent
   SVG's flipped Y transform. */
.nav-logo .logo-word {
  transform-box: fill-box;
  transform-origin: center center;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 340ms ease-out,
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Default (expanded) delays — used when scrolling BACK to top so the
   wordmark writes itself in left-to-right: ltr-1 (N) returns first. */
.nav-logo .ltr-1 { transition-delay:   0ms,   0ms; }
.nav-logo .ltr-2 { transition-delay:  45ms,  45ms; }
.nav-logo .ltr-3 { transition-delay:  90ms,  90ms; }
.nav-logo .ltr-4 { transition-delay: 135ms, 135ms; }
.nav-logo .ltr-5 { transition-delay: 180ms, 180ms; }

/* Wave bars — base state. transform-box: fill-box puts each pulse
   origin at the bar's visual centre, robust against the parent
   <g>'s scale(0.1, -0.1) Y-flip. */
.nav-logo .logo-wave {
  transform-box: fill-box;
  transform-origin: center center;
}

/* COMPACT STATE — piggybacks on the existing #navbar.scrolled class
   already toggled by script.js at scrollY > 40px. Container shrinks
   to wave-only width, letters slide far left behind the waves and
   fade out, wave bars fire one scaleY ripple after the letters
   absorb. */
#navbar.scrolled .nav-logo {
  width: 32px;                     /* covers the 6 wave bars at h=36 */
}
#navbar.scrolled .nav-logo .logo-word {
  opacity: 0;
  transform: translateX(-65px);    /* slides letters fully behind the wave column */
}
/* Right-to-left stagger on collapse — wins via higher specificity. */
#navbar.scrolled .nav-logo .ltr-5 { transition-delay:   0ms,   0ms; }
#navbar.scrolled .nav-logo .ltr-4 { transition-delay:  45ms,  45ms; }
#navbar.scrolled .nav-logo .ltr-3 { transition-delay:  90ms,  90ms; }
#navbar.scrolled .nav-logo .ltr-2 { transition-delay: 135ms, 135ms; }
#navbar.scrolled .nav-logo .ltr-1 { transition-delay: 180ms, 180ms; }

/* Wave pulse — single bounce per bar, staggered 30ms across.
   Letter-absorb time = 180ms (last delay) + 400ms (transform) = 580ms.
   Pulse begins at 380ms so the bounce overlaps the final fade-out
   rather than waiting in silence afterwards. Fill-mode "both" means
   each bar returns cleanly to scale(1). */
#navbar.scrolled .nav-logo .wave-1 { animation: navWavePulse 380ms cubic-bezier(0.22, 1, 0.36, 1) 380ms 1 both; }
#navbar.scrolled .nav-logo .wave-2 { animation: navWavePulse 380ms cubic-bezier(0.22, 1, 0.36, 1) 410ms 1 both; }
#navbar.scrolled .nav-logo .wave-3 { animation: navWavePulse 380ms cubic-bezier(0.22, 1, 0.36, 1) 440ms 1 both; }
#navbar.scrolled .nav-logo .wave-4 { animation: navWavePulse 380ms cubic-bezier(0.22, 1, 0.36, 1) 470ms 1 both; }
#navbar.scrolled .nav-logo .wave-5 { animation: navWavePulse 380ms cubic-bezier(0.22, 1, 0.36, 1) 500ms 1 both; }
#navbar.scrolled .nav-logo .wave-6 { animation: navWavePulse 380ms cubic-bezier(0.22, 1, 0.36, 1) 530ms 1 both; }
@keyframes navWavePulse {
  0%   { transform: scaleY(1);    }
  45%  { transform: scaleY(1.22); }
  100% { transform: scaleY(1);    }
}

/* Mobile — proportionally smaller. */
@media (max-width: 600px) {
  .nav-logo { height: 30px; width: 75px; }
  .nav-logo svg { height: 30px; }
  #navbar.scrolled .nav-logo { width: 27px; }
  #navbar.scrolled .nav-logo .logo-word { transform: translateX(-55px); }
}

/* Accessibility — honour prefers-reduced-motion. Keep the full
   logo always visible, disable all transitions and the pulse. */
@media (prefers-reduced-motion: reduce) {
  .nav-logo,
  .nav-logo .logo-word,
  .nav-logo .logo-wave {
    transition: none !important;
    animation: none !important;
  }
  #navbar.scrolled .nav-logo { width: 90px; }
  #navbar.scrolled .nav-logo .logo-word {
    opacity: 1;
    transform: none;
  }
  @media (max-width: 600px) {
    #navbar.scrolled .nav-logo { width: 75px; }
  }
}
.nav-links { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:2rem; list-style:none; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:.88rem; font-weight:500; letter-spacing:.02em; transition:color .2s; }
.nav-links a:hover { color:var(--white); }
/* German labels run ~30% longer than English. Two-part fix:
   1) Below 1100px (where the absolutely-centered .nav-links column
      collides with the right-hand controls in DE), switch nav-links
      to flex auto-margin centring so it sits BETWEEN the logo and
      .nav-right rather than overlapping into them.
   2) [lang="de"] tightens gap + font-size to give DE labels more
      breathing room and keep visual rhythm consistent with EN. */
@media (max-width: 1100px) {
  .nav-links {
    position: static;
    transform: none;
    margin: 0 auto;
  }
}
[lang="de"] .nav-links { gap: 1.4rem; }
[lang="de"] .nav-links a { font-size: .82rem; letter-spacing: .015em; }
.nav-right { display:flex; align-items:center; gap:1rem; margin-left:auto; }
.lang-switch {
  display:flex; background:var(--panel); border:1px solid var(--rim);
  border-radius:100px; overflow:hidden;
  min-height: 40px;
}
.lang-btn {
  min-width: 40px;
  min-height: 40px;
  padding:.3rem .8rem; background:none; border:none; color:var(--muted);
  font-family:var(--ff-body); font-size:.78rem; font-weight:600;
  cursor:pointer; transition:all .2s; letter-spacing:.05em;
}
.lang-btn.active { background:var(--accent); color:#fff; border-radius:100px; }
.ambient-toggle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(108, 142, 255, .24);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, rgba(108, 142, 255, .16), transparent 58%),
    rgba(8, 10, 22, .72);
  color: var(--muted);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 10px 26px -20px rgba(108, 142, 255, .65);
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ambient-toggle:hover {
  color: var(--white);
  border-color: rgba(108, 142, 255, .42);
  transform: translateY(-1px);
}
.ambient-toggle.is-playing {
  color: #8ff3ff;
  border-color: rgba(34, 211, 238, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 18px -8px rgba(34, 211, 238, .9);
}
.ambient-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ambient-icon-playing,
.ambient-toggle.is-playing .ambient-icon-muted { display: none; }
.ambient-toggle.is-playing .ambient-icon-playing { display: block; }
.nav-login {
  color:var(--muted);
  text-decoration:none;
  font-size:.88rem;
  font-weight:500;
  letter-spacing:.02em;
  transition:color .2s;
}
.nav-login:hover { color:var(--white); }

.nav-cta {
  padding:.55rem 1.4rem;
  background:linear-gradient(135deg,var(--glow),var(--accent2));
  color:#fff; border:none; border-radius:100px;
  font-family:var(--ff-body); font-size:.85rem; font-weight:600;
  cursor:pointer; transition:transform .2s, box-shadow .2s;
  letter-spacing:.01em;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(59,91,255,.35); }

/* ═══════════ AMBIENT ORBS ═══════════ */
.orb { position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; }
.orb-1 { width:600px; height:600px; background:rgba(59,91,255,.14); top:-200px; left:-100px; animation:drift1 20s ease-in-out infinite; }
.orb-2 { width:500px; height:500px; background:rgba(167,139,250,.10); top:0; right:-100px; animation:drift2 25s ease-in-out infinite; }
.orb-3 { width:700px; height:700px; background:rgba(34,211,238,.06); bottom:-200px; left:30%; animation:drift3 30s ease-in-out infinite; }

@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,80px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-80px,60px)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-60px)} }

/* ═══════════ HERO ═══════════ */
.hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:8rem 5vw 5rem; text-align:center;
  overflow:hidden;
}
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(108,142,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,142,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
}
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(108,142,255,.1);
  border:1px solid rgba(108,142,255,.2);
  border-radius:100px; padding:.35rem 1rem;
  font-size:.78rem; font-weight:600; letter-spacing:.1em;
  color:var(--accent); text-transform:uppercase;
  margin-bottom:2rem;
  animation:fadeUp .8s var(--ease-out) both;
}
.eyebrow-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.hero h1 {
  font-family:var(--ff-head);
  font-size:clamp(3rem, 8vw, 7.5rem);
  font-weight:800; line-height:.93; letter-spacing:-.04em;
  margin-bottom:1.8rem;
  animation:fadeUp .8s .1s var(--ease-out) both;
}
.hero h1 .line-2 { display:block; }
.hero h1 .grad {
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 50%, var(--teal) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-size:200% 200%;
  animation:shimmer 5s ease infinite;
}
@keyframes shimmer { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.hero-sub {
  max-width:580px; margin:0 auto 2.8rem;
  color:var(--muted); font-size:1.08rem; line-height:1.7; font-weight:300;
  animation:fadeUp .8s .2s var(--ease-out) both;
}

.hero-ctas { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:fadeUp .8s .3s var(--ease-out) both; }
.btn-primary {
  padding:.85rem 2.2rem;
  background:linear-gradient(135deg,var(--glow),var(--accent2));
  color:#fff; border:none; border-radius:100px;
  font-family:var(--ff-body); font-size:.95rem; font-weight:600;
  cursor:pointer; transition:transform .25s var(--ease-spring), box-shadow .25s;
  position:relative; overflow:hidden;
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(rgba(255,255,255,.15),transparent);
  border-radius:100px;
}
.btn-primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 20px 50px rgba(59,91,255,.45); }

.btn-ghost {
  padding:.85rem 2.2rem;
  background:transparent; color:var(--white);
  border:1px solid var(--rim2); border-radius:100px;
  font-family:var(--ff-body); font-size:.95rem; font-weight:500;
  cursor:pointer; transition:all .25s;
  display:flex; align-items:center; gap:.5rem;
}
.btn-ghost:hover { background:var(--rim); border-color:rgba(255,255,255,.2); }

/* ── VOICE WAVE VISUALIZER ── */
.wave-wrap { margin:4rem 0 2rem; text-align:center; animation:fadeUp .8s .4s var(--ease-out) both; }
.wave-phone {
  position:relative; display:inline-flex;
  width:260px; height:260px;
  align-items:center; justify-content:center;
}
.wave-ring {
  position:absolute; border-radius:50%; border:1px solid;
  animation:expand 3s ease-out infinite; opacity:0;
}
.wave-ring:nth-child(1) { width:100%; height:100%; border-color:rgba(108,142,255,.4); animation-delay:0s; }
.wave-ring:nth-child(2) { width:75%; height:75%; border-color:rgba(108,142,255,.5); animation-delay:.7s; }
.wave-ring:nth-child(3) { width:50%; height:50%; border-color:rgba(108,142,255,.6); animation-delay:1.4s; }
@keyframes expand { 0%{opacity:.7;transform:scale(.5)} 100%{opacity:0;transform:scale(1.4)} }

.wave-core {
  width:110px; height:110px; border-radius:50%;
  background:linear-gradient(135deg,var(--glow),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 60px rgba(59,91,255,.6),0 0 120px rgba(59,91,255,.2);
  position:relative; z-index:2;
  animation:breath 3s ease-in-out infinite;
}
@keyframes breath { 0%,100%{transform:scale(1);box-shadow:0 0 60px rgba(59,91,255,.6),0 0 120px rgba(59,91,255,.2)} 50%{transform:scale(1.06);box-shadow:0 0 80px rgba(59,91,255,.8),0 0 160px rgba(59,91,255,.3)} }

.wave-bars { display:flex; align-items:center; gap:3px; }
.wave-bar { width:3px; border-radius:3px; background:#fff; animation:wavebar 1.2s ease-in-out infinite; }
.wave-bar:nth-child(1) { height:16px; animation-delay:0s; }
.wave-bar:nth-child(2) { height:28px; animation-delay:.15s; }
.wave-bar:nth-child(3) { height:40px; animation-delay:.3s; }
.wave-bar:nth-child(4) { height:28px; animation-delay:.45s; }
.wave-bar:nth-child(5) { height:16px; animation-delay:.6s; }
@keyframes wavebar { 0%,100%{transform:scaleY(1);opacity:.8} 50%{transform:scaleY(1.7);opacity:1} }

.live-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(34,211,238,.15); border:1px solid rgba(34,211,238,.3);
  color:var(--teal); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; padding:.28rem .7rem; border-radius:100px;
  white-space:nowrap;
}
/* `.live-dot` only appears inside `.live-tag` (grep-verified) — flex `gap`
   now owns the dot-to-text spacing on BOTH sides, so the previous
   `margin-left: .4rem` (which only fired on the right dot) is dropped to
   restore symmetric flanking. */
.live-dot { display:inline-block; width:5px; height:5px; background:var(--teal); border-radius:50%; animation:pulse-dot 1.5s infinite; vertical-align:middle; }

.orb-hint {
  color:var(--muted); font-size:.82rem; font-weight:500;
  letter-spacing:.04em; margin-top:.8rem; text-align:center;
  animation:orb-hint-pulse 2.5s ease-in-out infinite;
  cursor:pointer;
}
.orb-hint:hover { color:var(--teal); }
@keyframes orb-hint-pulse {
  0%,100% { opacity:.45; }
  50% { opacity:1; }
}

.trust-bar {
  display:flex; align-items:center; gap:2rem; justify-content:center;
  flex-wrap:wrap; margin-top:4rem; color:var(--muted); font-size:.8rem;
  animation:fadeUp .8s .5s var(--ease-out) both;
}
.trust-bar span { display:flex; align-items:center; gap:.4rem; }
.trust-icon { width:16px; height:16px; fill:var(--accent); flex-shrink:0; }

/* ═══════════ SECTION SHARED ═══════════ */
section { padding:7rem 5vw; position:relative; }
.sec-label {
  font-family:var(--ff-head); font-size:.72rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
  margin-bottom:1rem;
}
.sec-title {
  font-family:var(--ff-head); font-size:clamp(2rem,4vw,3.5rem);
  font-weight:800; line-height:1.06; letter-spacing:-.03em;
  margin-bottom:1.4rem;
}
.sec-sub { color:var(--muted); font-size:1rem; line-height:1.75; max-width:560px; }

.reveal { opacity:0; transform:translateY(32px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }
.reveal-d4 { transition-delay:.4s; }

/* ═══════════ PROBLEM SECTION ═══════════ */
.problem-sec { background:var(--surface); }
.problem-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; max-width:1200px; margin:0 auto; }
.problem-items { display:flex; flex-direction:column; gap:1.2rem; margin-top:2rem; }
.problem-item {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.4rem;
  background:rgba(251,113,133,.06); border:1px solid rgba(251,113,133,.14);
  border-radius:12px; transition:transform .2s;
}
.problem-item:hover { transform:translateX(6px); }
.p-icon {
  width:38px; height:38px; flex-shrink:0;
  background:rgba(251,113,133,.1); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.p-icon svg { width:18px; height:18px; stroke:var(--rose); fill:none; stroke-width:2; }
.p-text { font-size:.9rem; font-weight:500; }
.p-sub { font-size:.78rem; color:var(--muted); margin-top:.2rem; }

.solution-card {
  background:linear-gradient(135deg,rgba(59,91,255,.12),rgba(167,139,250,.08));
  border:1px solid rgba(108,142,255,.2);
  border-radius:24px; padding:2.5rem;
  position:relative; overflow:hidden;
}
.solution-card::before {
  content:''; position:absolute; top:-50%; right:-30%;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(108,142,255,.15) 0%, transparent 70%);
}
.sol-check { display:flex; flex-direction:column; gap:.9rem; margin-top:1.8rem; }
.sol-item { display:flex; align-items:center; gap:.9rem; font-size:.92rem; }
.sol-icon { width:26px; height:26px; background:rgba(108,142,255,.15); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sol-icon svg { width:14px; height:14px; stroke:var(--accent); fill:none; stroke-width:2.5; }

/* ═══════════ HOW IT WORKS ═══════════ */
.how-sec { background:var(--ink); }
.how-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3.5rem; position:relative; }
.how-steps::before {
  content:''; position:absolute; top:2.5rem; left:calc(12.5% + 20px); right:calc(12.5% + 20px);
  height:1px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);
  z-index:0;
}
.step-card {
  background:var(--panel); border:1px solid var(--rim);
  border-radius:20px; padding:2rem 1.5rem;
  position:relative; z-index:1;
  transition:transform .3s var(--ease-spring), border-color .3s, box-shadow .3s;
  cursor:default;
}
/* Drop the off-brand `0 20px 60px rgba(0,0,0,.3)` drop shadow — produced a
   greyish bloom on the dark backdrop. Also drop the `border-color:rgba(108,142,255,.3)`
   brighten — it bumped the resting `var(--rim)` line into a harsh blue edge on hover
   ("bright edge on hover" artifact). Lift alone reads as the hover affordance, and on
   the receptionist page `.how-sec .step-card:hover` adds a matching purple neon glow. */
.step-card:hover { transform:translateY(-8px); }
.step-num {
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-head); font-weight:800; font-size:.9rem;
  margin-bottom:1.4rem;
}
.step-card:nth-child(1) .step-num { background:rgba(108,142,255,.15); color:var(--accent); }
.step-card:nth-child(2) .step-num { background:rgba(167,139,250,.15); color:var(--accent2); }
.step-card:nth-child(3) .step-num { background:rgba(34,211,238,.12); color:var(--teal); }
.step-card:nth-child(4) .step-num { background:rgba(251,191,36,.1); color:var(--gold); }
.step-title { font-family:var(--ff-head); font-size:1.05rem; font-weight:700; margin-bottom:.6rem; }
.step-desc { color:var(--muted); font-size:.85rem; line-height:1.65; }

/* ═══════════ DEMO / CONVERSATION ═══════════ */
/* Premium voice-demo stage: the bg image fills the section, a dim
   gradient floor softens it into the surrounding dark theme, and a
   glowing animated ring sits under the phone mockup. */
.demo-sec {
  position: relative;
  overflow: hidden;
  background: #050711;
}

.demo-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      180deg,
      rgba(5, 7, 17, 0.30) 0%,
      rgba(5, 7, 17, 0.10) 42%,
      rgba(5, 7, 17, 0.38) 100%
    ),
    url("assets/voice-demo-bg.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  /* Fade the bg image at BOTH edges: in from transparent across the top
     15% (seam with .solution-howworks-wrapper above) and out across the
     bottom 15% (seam with .why-nidai-sec below). Section base #050711
     shows through the faded edges — continuous dark expanse. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
}

.demo-sec > * {
  position: relative;
  z-index: 2;
}

/* Phone stage — holds the glow ring + the real phone mockup. */
.phone-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iphone-shell {
  position: relative;
  z-index: 2;
}

/* Phone-ring — 4 concentric SVG ellipses forming a holographic platform
   under the phone. Each ring opacity-pulses on a staggered delay. */
.phone-ring {
  position: absolute;
  left: 50%;
  bottom: -24px;
  width: 720px;
  height: 220px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

.phone-ring-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  /* Outer ambient glow on top of the SVG's own internal blur filter */
  filter:
    drop-shadow(0 0 24px rgba(128, 80, 240, 0.35))
    drop-shadow(0 0 40px rgba(64, 128, 255, 0.20));
}

.pr-ring {
  transform-origin: 400px 210px;
  animation: phoneRingPulse 4.2s ease-in-out infinite;
}
.pr-ring.pr-r1 { animation-delay: 0s; }
.pr-ring.pr-r2 { animation-delay: 0.5s; }
.pr-ring.pr-r3 { animation-delay: 1.0s; }
.pr-ring.pr-r4 { animation-delay: 1.5s; }

@keyframes phoneRingPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ─── Voice demo: compact header ─── */
.demo-sec .demo-header h2.sec-title,
.demo-sec .demo-header h2 {
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.06em;
  margin-bottom: 20px;
  max-width: none;
}
.demo-sec .demo-header .sec-sub {
  max-width: 640px;
  margin: 0 auto;
}

/* ─── LEFT column: REAL AI VOICE card ─── */
.real-ai-voice-card {
  background: linear-gradient(180deg, rgba(40, 20, 60, 0.6), rgba(20, 10, 40, 0.4));
  border: 1px solid rgba(224, 64, 166, 0.25);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: inset 0 0 40px rgba(224, 64, 166, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.raiv-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(224, 64, 166, 0.4);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #E040A6;
}
.raiv-text {
  color: #fff;
  font-size: 15px;
  line-height: 1.55;
  margin: 20px 0 24px;
}
.raiv-waveform {
  display: block;
  width: 100%;
  height: 28px;
}

/* ─── RIGHT column: NIDAI is handling it — status panel ─── */
.ai-status-panel {
  background: linear-gradient(180deg, rgba(30, 30, 60, 0.6), rgba(15, 15, 40, 0.5));
  border: 1px solid rgba(124, 77, 255, 0.25);
  border-radius: 20px;
  padding: 24px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.asp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.asp-title {
  font-family: var(--ff-head);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  margin: 0;
}
.asp-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 230, 118, 0.4);
  border-radius: 999px;
  font-size: 11px;
  color: #00E676;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.asp-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 8px #00E676;
  animation: pulse 1.6s ease-in-out infinite;
}
.asp-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.asp-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.asp-item-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--c);
  background: color-mix(in srgb, var(--c) 8%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c);
}
.asp-item-icon svg { stroke: var(--c); }
.asp-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.asp-item-title { color: #fff; font-size: 14px; font-weight: 500; }
.asp-item-sub   { color: rgba(255, 255, 255, 0.5); font-size: 12px; }
.asp-item-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.asp-item-check svg { stroke: #fff; }
.asp-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid rgba(124, 77, 255, 0.2);
  border-radius: 12px;
  background: rgba(124, 77, 255, 0.06);
}
.asp-footer-icon { display: inline-flex; color: #8050F0; }
.asp-footer-icon svg { stroke: #8050F0; }
.asp-footer-text { color: #fff; font-size: 13px; flex: 1; }
.asp-footer-dots {
  color: #8050F0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  animation: typingDots 1.4s ease-in-out infinite;
}

/* ─── BOTTOM: 4-up feature row ─── */
.demo-features-row {
  max-width: 1200px;
  margin: 60px auto 0;
  padding: 28px 32px;
  border: 1px solid rgba(124, 77, 255, 0.15);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 20, 50, 0.4), rgba(10, 10, 30, 0.3));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.dfeat {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: flex-start;
}
.dfeat-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1.5px solid var(--c);
  border-radius: 12px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c);
}
.dfeat-icon svg { stroke: var(--c); width: 100%; height: 100%; }
.dfeat-text { display: flex; flex-direction: column; min-width: 0; }
.dfeat-title { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.dfeat-desc  { color: rgba(255, 255, 255, 0.55); font-size: 13px; line-height: 1.5; }

/* ─── Demo animations ─── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes typingDots {
  0%, 60%, 100% { opacity: 0.3; }
  30%           { opacity: 1; }
}

/* ─── 3-column middle layout: REAL AI VOICE | phone | NIDAI status ─── */
/* (kept here, just before the responsive block, so the @media overrides
   below win the cascade against the legacy `.audio-demo-wrap` slot.) */
.audio-demo-wrap {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(280px, 1.4fr);
  gap: 40px;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 3.5rem auto 0;
}

/* ─── Voice demo responsive ─── */
@media (max-width: 1100px) {
  .audio-demo-wrap { grid-template-columns: 1fr; gap: 32px; justify-items: center; }
  .real-ai-voice-card,
  .ai-status-panel { max-width: 480px; width: 100%; margin: 0 auto; }
  .demo-features-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .phone-ring { width: 560px; height: 170px; bottom: -18px; }
}
@media (max-width: 560px) {
  .phone-ring { width: 380px; height: 130px; bottom: -14px; }
  .demo-features-row { grid-template-columns: 1fr; padding: 20px; }
}

.demo-wrap { max-width:820px; margin:3rem auto 0; }
.call-interface { background:var(--panel); border:1px solid var(--rim); border-radius:28px; overflow:hidden; }
.call-hdr {
  background:rgba(108,142,255,.06); border-bottom:1px solid var(--rim);
  padding:1.2rem 1.8rem;
  display:flex; align-items:center; justify-content:space-between;
}
.call-status { display:flex; align-items:center; gap:.6rem; }
.call-dot { width:8px; height:8px; background:#22c55e; border-radius:50%; animation:pulse-dot 1.5s infinite; }
.call-hdr-title { font-family:var(--ff-head); font-size:.92rem; font-weight:700; }
.call-time { color:var(--muted); font-size:.82rem; font-variant-numeric:tabular-nums; }
.call-body { padding:2rem 1.8rem; display:flex; flex-direction:column; gap:1.2rem; min-height:320px; }

.msg { display:flex; gap:.9rem; animation:msgIn .4s var(--ease-out) both; }
@keyframes msgIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.msg.ai { flex-direction:row; }
.msg.user { flex-direction:row-reverse; }
.msg-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700;
}
.msg.ai .msg-avatar { background:linear-gradient(135deg,var(--glow),var(--accent2)); color:#fff; }
.msg.user .msg-avatar { background:var(--panel); border:1px solid var(--rim); color:var(--muted); }
.msg-bubble { padding:.9rem 1.2rem; border-radius:18px; font-size:.88rem; line-height:1.6; max-width:72%; }
.msg.ai .msg-bubble { background:rgba(108,142,255,.1); border:1px solid rgba(108,142,255,.15); border-top-left-radius:4px; }
.msg.user .msg-bubble { background:var(--panel); border:1px solid var(--rim); border-top-right-radius:4px; color:var(--muted); }
.msg-name { font-size:.7rem; color:var(--muted); margin-bottom:.3rem; }
.typing { display:flex; gap:4px; align-items:center; padding:.6rem 1rem; }
.typing-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; opacity:.3; animation:typing-bounce 1.4s infinite; }
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes typing-bounce { 0%,80%,100%{transform:translateY(0);opacity:.3} 40%{transform:translateY(-6px);opacity:1} }

/* ═══════════ BENEFITS BENTO ═══════════ */
.benefits-sec { background:var(--ink); }
.bento { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; gap:1.2rem; margin-top:3rem; max-width:1200px; margin-left:auto; margin-right:auto; }
.bcard {
  background:var(--panel); border:1px solid var(--rim);
  border-radius:22px; padding:2rem;
  transition:transform .3s var(--ease-spring), border-color .3s;
  cursor:default; position:relative; overflow:hidden;
}
/* Border-color kept at the resting `var(--rim)` value — bumping it to .25 on
   hover read as a harsh blue edge ("bright edge on hover" artifact). Lift +
   the radial blue ::after glow (revealed by `.bcard:hover::after`) are the
   hover affordance now — no edge brightening. */
.bcard:hover { transform:translateY(-6px); }
.bcard.span-2 { grid-column:span 2; }
.bcard.tall { grid-row:span 2; }
.bcard::after { content:''; position:absolute; inset:0; border-radius:22px; opacity:0; transition:opacity .3s; background:radial-gradient(ellipse at var(--mx,50%) var(--my,50%), rgba(108,142,255,.06) 0%, transparent 60%); }
.bcard:hover::after { opacity:1; }
.bcard-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:1.4rem; }
.bcard-title { font-family:var(--ff-head); font-size:1.15rem; font-weight:700; margin-bottom:.6rem; }
.bcard-desc { color:var(--muted); font-size:.86rem; line-height:1.65; }
.bcard-stat { font-family:var(--ff-head); font-size:3rem; font-weight:800; letter-spacing:-.04em; margin-top:1.2rem; }

/* ═══════════ INDUSTRIES ═══════════ */
.industries-sec { background:var(--surface); text-align:center; }
.industry-grid { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:2.5rem; }
.industry-pill {
  display:flex; align-items:center; gap:.55rem;
  background:var(--panel); border:1px solid var(--rim);
  border-radius:100px; padding:.65rem 1.3rem;
  font-size:.86rem; font-weight:500;
  transition:all .25s var(--ease-spring); cursor:default;
}
.industry-pill svg { width:16px; height:16px; stroke:var(--accent); fill:none; stroke-width:2; }
.industry-pill:hover { background:rgba(108,142,255,.1); border-color:rgba(108,142,255,.3); transform:translateY(-4px) scale(1.04); }

/* ═══════════ STATS MARQUEE ═══════════ */
.marquee-sec { background:linear-gradient(135deg,rgba(59,91,255,.08),rgba(167,139,250,.05)); border-top:1px solid var(--rim); border-bottom:1px solid var(--rim); padding:3rem 0; overflow:hidden; }
.marquee-track { display:flex; width:max-content; animation:marquee 28s linear infinite; }
.marquee-item { padding:0 3rem; display:flex; align-items:center; gap:1.5rem; white-space:nowrap; }
.marquee-num { font-family:var(--ff-head); font-size:2rem; font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.marquee-label { font-size:.82rem; color:var(--muted); }
.marquee-sep { width:1px; height:32px; background:var(--rim2); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══════════ FAQ ═══════════ */
.faq-sec {
  position: relative;
  overflow: hidden;
  /* Section is transparent — body's #050711 is the unified base
     so the FAQ and CTA images fading to transparent at their seams
     reveal one continuous dark field underneath. */
  background: transparent;
  z-index: 2;
  /* Bottom padding tightened (was 5rem=80px) so the constellation
     artwork extends close to the seam with the CTA section. */
  padding: 5rem 2rem 1.5rem;
}
/* Section atmosphere — constellation/network artwork. Same approach
   as the Pricing section: full-bleed image with vertical fade at top
   and bottom for seam blending, and a side vignette so the bright
   right-side constellation doesn't pop brighter than the section
   above (Pricing) at the seam. */
.faq-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Asymmetric horizontal — left half dimmed for headline
       readability, right half mostly transparent so the constellation
       nodes stay visible behind the cards. */
    linear-gradient(90deg,
      rgba(5,7,17,0.92) 0%,
      rgba(5,7,17,0.75) 22%,
      rgba(5,7,17,0.45) 38%,
      rgba(5,7,17,0.18) 50%,
      rgba(5,7,17,0.10) 70%,
      rgba(5,7,17,0.35) 92%,
      rgba(5,7,17,0.75) 100%),
    url('assets/faq-bg.webp') center / cover no-repeat;
  /* Edge mask fades the image+overlay layer to TRANSPARENT at top
     and bottom — exposing body's #050711 directly so the seam is
     a continuous shared base, not a hard-cut color band. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* Soft purple ambient glow behind the headline column's bottom-left.
   Peak positioned INSIDE the section (not at 105%) so the glow
   reaches its max alpha around FAQ y=80% and then falls off via
   the radial's natural taper. An additional mask-image fades the
   glow to fully transparent before reaching the FAQ section's
   bottom edge — this eliminates the hard cut where the pseudo
   stops painting and lets CTA's matching top-left glow continue
   the purple wash across the seam without a brightness cliff. */
.faq-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 42% 55% at 10% 85%,
    rgba(167,139,250,0.20) 0%,
    rgba(140,90,240,0.13) 22%,
    rgba(108,142,255,0.07) 45%,
    rgba(108,142,255,0.03) 70%,
    transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.faq-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.faq-cta {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem 1rem 1rem;
  background: rgba(108,142,255,0.06);
  border: 1px solid rgba(167,139,250,0.35);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, background .2s, transform .2s var(--ease-out);
}
.faq-cta:hover {
  border-color: rgba(167,139,250,0.6);
  background: rgba(108,142,255,0.10);
  transform: translateY(-2px);
}
.faq-cta-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(167,139,250,0.25), rgba(108,142,255,0.25));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.faq-cta-icon svg { width: 22px; height: 22px; stroke: var(--accent2); fill: none; stroke-width: 1.8; }
.faq-cta-text { display: flex; flex-direction: column; gap: 2px; }
.faq-cta-title { font-family: var(--ff-head); font-size: 1rem; font-weight: 700; color: var(--white); }
.faq-cta-title-arrow { display: inline-block; margin-left: 6px; transition: transform .2s; }
.faq-cta:hover .faq-cta-title-arrow { transform: translateX(4px); }
.faq-cta-sub { font-size: .8rem; color: var(--muted); }
.faq-list { margin-top: 0; display: flex; flex-direction: column; gap: .8rem; }
.faq-item {
  position: relative;
  /* Closed: dark translucent fill + clearly-visible violet border. */
  background: rgba(18,16,38,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(150,130,230,0.30);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
/* Neon accent bar on the LEFT inner edge — hidden on closed cards,
   3px violet gradient on the open card (brighter middle, glowing). */
.faq-item::before {
  content: "";
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 3px;
  background: linear-gradient(180deg,
    rgba(199,160,255,0) 0%,
    rgba(199,160,255,1) 30%,
    rgba(140,90,240,1) 50%,
    rgba(108,142,255,1) 70%,
    rgba(108,142,255,0) 100%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(167,139,250,0.85);
}
.faq-item:hover {
  border-color: rgba(167,139,250,0.5);
}
.faq-item.open {
  border-color: rgba(167,139,250,0.9);
  box-shadow: 0 0 30px rgba(140,90,240,0.35);
}
.faq-item.open::before {
  opacity: 1;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.3rem;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  gap: 1rem;
  color: var(--white);
}
.faq-q-inner {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex: 1;
  min-width: 0;
}
.faq-q-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(167,139,250,0.08);
  border: 1px solid rgba(167,139,250,0.30);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 8px rgba(167,139,250,0.10);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.faq-q-icon svg {
  width: 16px; height: 16px;
  stroke: #b9a3ff;
  fill: none;
  stroke-width: 1.75;
  filter: drop-shadow(0 0 4px rgba(185,163,255,0.55));
}
.faq-item.open .faq-q-icon {
  background: rgba(167,139,250,0.15);
  border-color: rgba(199,160,255,0.7);
  box-shadow:
    inset 0 0 12px rgba(167,139,250,0.25),
    0 0 14px rgba(167,139,250,0.30);
}
.faq-arrow {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid rgba(167,139,250,0.35);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s, background .2s, border-color .2s;
}
.faq-arrow svg {
  width: 12px; height: 12px;
  stroke: #b9a3ff;
  fill: none;
  stroke-width: 2.5;
}
.faq-item.open .faq-arrow {
  transform: rotate(180deg);
  background: rgba(167,139,250,0.18);
  border-color: rgba(199,160,255,0.7);
}
/* Answer text: muted lavender-grey, comfortable line-height. */
.faq-a {
  color: rgba(195,185,225,0.85);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease-out), padding .3s;
  color: rgba(200,205,230,0.72);
  font-size: .88rem;
  line-height: 1.7;
  padding: 0 1.3rem 0 4rem;
}
.faq-item.open .faq-a { max-height: 320px; padding: .2rem 1.3rem 1.2rem 4rem; }

/* ═══════════ CTA HERO ═══════════ */
.cta-sec {
  /* Transparent — body's #050711 is the unified base shared with
     the FAQ section above. */
  background: transparent;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* Pull the section UP 180px so the CTA artwork's top extends INTO
     the FAQ section's faded-out bottom zone — the two image fades
     cross over a shared transparent base instead of leaving a flat
     dark patch between them. The padding-top is increased by the
     same 180px so the visible content (badge, headline, buttons,
     fine print) stays at its original vertical position. */
  margin-top: -180px;
  padding: calc(2rem + 180px) 5vw 7rem;
  border-top: 0;
  /* border-bottom removed — created a 1px hairline at the seam
     with the footer below. Both sections now share #050711 base. */
  border-bottom: 0;
}
/* Section atmosphere — purple swoosh lower-left + blue node-swoosh
   lower-right, dark top centre.  Same approach as Pricing/FAQ:
   full-bleed image + vertical seam-fade + soft dim over the text
   column for headline/badge/button readability. */
.cta-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url('assets/for-businesses.webp') center 70% / cover no-repeat;
  /* Edge mask:
       - Top: fades from transparent → opaque over 0–12% so the
         image emerges inside the FAQ overlap zone (crosses the
         FAQ→CTA seam without a cliff).
       - Bottom: STRENGTHENED — opaque only through 68%, then long
         fade to fully transparent by 100%. This kills BOTH corner
         glows (purple lower-left, blue lower-right) well before the
         section's bottom edge so the footer begins on pure #050711
         with no residual brightness. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 68%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 68%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* Two stacked radials:
   1. Centre dark wash for headline/buttons readability (unchanged).
   2. Top-left purple ambient that peaks AT the visual seam zone
      (~y=18% of CTA = exactly 180px below CTA's top, which is the
      visual seam after margin-top:-180px). From there it fades both
      upward — into FAQ section's faded-out ::after — and downward
      into CTA's main artwork. Combined with FAQ::after's mask-fade
      bottom, the two glows hand off across the seam with no
      brightness cliff. */
.cta-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 50% 45%,
      rgba(5,7,17,0.55) 0%,
      rgba(5,7,17,0.30) 40%,
      transparent 70%),
    radial-gradient(ellipse 42% 55% at 10% 18%,
      rgba(167,139,250,0.20) 0%,
      rgba(140,90,240,0.13) 22%,
      rgba(108,142,255,0.07) 45%,
      rgba(108,142,255,0.03) 70%,
      transparent 95%);
  pointer-events: none;
  z-index: 0;
}
/* Old decorative orbs removed — the image's purple/blue glows
   already provide the colour, doubling them would look cluttered. */
.cta-orb { display: none; }
.cta-sec-inner { position: relative; z-index: 1; }
.cta-sec h2 { font-family:var(--ff-head); font-size:clamp(2rem,5vw,4rem); font-weight:800; letter-spacing:-.04em; margin-bottom:1.2rem; line-height:1.05; }
.cta-sec p { color:var(--muted); max-width:520px; margin:0 auto 2.5rem; line-height:1.7; }
.cta-group { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.input-cta {
  display:flex; background:rgba(255,255,255,.05); border:1px solid var(--rim2);
  border-radius:100px; overflow:hidden; padding:.2rem; width:min(380px,90vw);
}
.input-cta input { flex:1; background:none; border:none; color:var(--white); padding:.6rem 1rem; font-family:var(--ff-body); font-size:.9rem; outline:none; }
.input-cta input::placeholder { color:rgba(200,205,230,.35); }
.input-cta button { padding:.55rem 1.3rem; background:linear-gradient(135deg,var(--glow),var(--accent2)); color:#fff; border:none; border-radius:100px; font-weight:600; font-size:.85rem; cursor:pointer; transition:box-shadow .2s; }
.input-cta button:hover { box-shadow:0 8px 28px rgba(59,91,255,.4); }

/* ═══════════ PROVIDER BADGE (inside CTA section) ═══════════ */
.provider-cta-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.15);
  border-radius:100px; padding:.45rem 1.2rem;
  font-size:.78rem; font-weight:600; color:var(--teal);
}

/* ═══════════ FOOTER ═══════════ */
footer {
  /* Unified base — was var(--surface)=#0a0c12 which is a different
     dark value than #050711 used by body/sections. That mismatch
     created a visible step at the CTA→footer seam. */
  background: #050711;
  /* border-top removed — created a 1px hairline against the CTA's
     fading-out glow background. Seam now blends purely on color. */
  border-top: 0;
  /* Overlap a few px to kill any subpixel rounding hairline. */
  margin-top: -3px;
  position: relative;
  z-index: 2;
  padding: 4rem 5vw 2rem;
}
.ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
/* Footer logo — full nav-style lockup, STATIC (no scroll-collapse, no letter-split).
   Bigger than the nav's 36px since the footer mark is a more prominent end-page anchor. */
.ft-brand { display:block; color:#fff; line-height:0; margin-bottom:.8rem; }
.ft-brand svg { display:block; height:48px; width:auto; }
@media (max-width:600px) { .ft-brand svg { height:40px; } }
.ft-desc { color:var(--muted); font-size:.84rem; line-height:1.7; max-width:240px; }
.ft-col-title { font-family:var(--ff-head); font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:1.2rem; }
.ft-links { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.ft-links a { color:var(--muted); text-decoration:none; font-size:.86rem; transition:color .2s; }
.ft-links a:hover { color:var(--white); }
.ft-bot { border-top:1px solid var(--rim); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.78rem; flex-wrap:wrap; gap:.8rem; }
.ft-bot-badge { display:flex; align-items:center; gap:.4rem; font-size:.72rem; }
.ft-bot-dot { width:6px; height:6px; background:#22c55e; border-radius:50%; animation:pulse-dot 2s infinite; }

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

/* Color tokens */
.accent-blue { background:rgba(108,142,255,.12); }
.accent-purple { background:rgba(167,139,250,.12); }
.accent-teal { background:rgba(34,211,238,.1); }
.accent-gold { background:rgba(251,191,36,.1); }
.accent-rose { background:rgba(251,113,133,.1); }
.c-blue { color:var(--accent); }
.c-purple { color:var(--accent2); }
.c-teal { color:var(--teal); }
.c-gold { color:var(--gold); }
.c-rose { color:var(--rose); }
.grad-text { background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.glass { background:rgba(16,19,30,.7); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:900px) {
  .how-steps { grid-template-columns:1fr 1fr; }
  .how-steps::before { display:none; }
  .problem-grid { grid-template-columns:1fr; }
  .bento { grid-template-columns:1fr 1fr; }
  .bcard.span-2 { grid-column:span 2; }
  .bcard.tall { grid-row:auto; }
  .faq-grid { grid-template-columns:1fr; }
  .ft-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
  .how-steps { grid-template-columns:1fr; }
  .bento { grid-template-columns:1fr; }
  .bcard.span-2,.bcard.tall { grid-column:span 1; grid-row:auto; }
  .nav-links { display:none; }
  .ft-grid { grid-template-columns:1fr; gap:2rem; }
  .hero h1 { font-size:clamp(2.5rem,12vw,5rem); }
  .cursor,.cursor-ring { display:none; }
}

/* Hide custom cursor on any touch/stylus device — tablets, phones of all sizes */
@media(pointer:coarse) {
  .cursor,.cursor-ring { display:none !important; }
}

/* ═══════════ ITEM 1 — HAMBURGER & MOBILE MENU ═══════════ */
/* Hamburger button — hidden on desktop, visible ≤600px */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--rim2);
  border-radius: 8px;
  cursor: pointer;
  padding: 7px;
  flex-shrink: 0;
  transition: border-color .2s;
}
.hamburger:hover { border-color: rgba(255,255,255,.2); }
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .3s;
}
/* Animated X state when active */
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel */
.mobile-menu {
  position: fixed;
  top: 60px; /* below nav */
  left: 0; right: 0;
  background: rgba(4,5,8,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--rim);
  z-index: 799;
  padding: 1.5rem 5vw 2rem;
  /* Use flex always + visibility so CSS transitions work (display:none blocks them) */
  display: flex;
  flex-direction: column;
  gap: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out),
              visibility 0s linear .25s; /* delay visibility so fade-out completes */
}
.mobile-menu.open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out),
              visibility 0s linear 0s; /* no delay on open */
}
.mobile-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--rim);
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
}
.mobile-menu ul a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rim);
  transition: color .2s;
}
.mobile-menu ul li:last-child a { border-bottom: none; }
.mobile-menu ul a:hover { color: var(--white); }
.mobile-menu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.6rem;
  background: linear-gradient(135deg,var(--glow),var(--accent2));
  color: #fff;
  border-radius: 100px;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: box-shadow .2s;
}
.mobile-menu-login {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  text-align: center;
  padding: .6rem 0;
  margin-bottom: .6rem;
  transition: color .2s;
}
.mobile-menu-login:hover { color: var(--white); }

.mobile-menu-cta:hover { box-shadow: 0 12px 32px rgba(59,91,255,.4); }

/* Show hamburger only on mobile */
@media(max-width:600px) {
  .nav-right { gap: .55rem; }
  .nav-logo { height: 40px; }
  .ambient-toggle { width: 40px; height: 40px; }
  .hamburger { display: flex; }
  .nav-login { display: none; } /* hide desktop login on mobile — mobile menu has its own */
  .nav-cta { display: none; } /* hide desktop CTA on mobile — mobile menu has its own */
}

/* ═══════════ ITEM 3 — EMAIL FORM STATES ═══════════ */
/* Success message shown after form submission */
#emailSuccess {
  text-align: center;
  padding: .75rem 1.4rem;
  border-radius: 100px;
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.3);
  color: #34d399;
  font-size: .88rem;
  font-weight: 600;
  animation: fadeUp .4s var(--ease-out) both;
}
/* Loading state for submit button */
#emailSubmitBtn[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* ═══════════ ITEM 6 — COOKIE CONSENT BANNER ═══════════ */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: min(640px, calc(100vw - 2rem));
  background: var(--panel);
  border: 1px solid var(--rim2);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  animation: slideUpBanner .4s var(--ease-out) both;
}
@keyframes slideUpBanner {
  from { opacity:0; transform:translateX(-50%) translateY(16px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
.cookie-inner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.cookie-text { flex: 1; min-width: 200px; }
.cookie-title {
  font-family: var(--ff-head);
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .3rem;
}
.cookie-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.55;
}
.cookie-desc a {
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: -11px 0;
}
.cookie-desc a:hover { text-decoration: underline; }
.cookie-actions {
  display: flex;
  gap: .6rem;
  flex-shrink: 0;
}
.cookie-btn {
  padding: .5rem 1.1rem;
  border-radius: 100px;
  font-family: var(--ff-body);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.cookie-btn-reject {
  background: none;
  border: 1px solid var(--rim2);
  color: var(--muted);
}
.cookie-btn-reject:hover {
  border-color: rgba(255,255,255,.2);
  color: var(--white);
}
.cookie-btn-accept {
  background: linear-gradient(135deg,var(--glow),var(--accent2));
  border: none;
  color: #fff;
}
.cookie-btn-accept:hover {
  box-shadow: 0 8px 24px rgba(59,91,255,.4);
  transform: translateY(-1px);
}
@media(max-width:480px) {
  .cookie-inner { flex-direction: column; align-items: flex-start; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
}

/* ═══════════════════════════════════════════════
   AUDIO DEMO — PHONE CALL PLAYER
   ═══════════════════════════════════════════════ */

/* ── Outer layout — see the consolidated .audio-demo-wrap block earlier
   (kept upstream of the responsive @media queries so the cascade is
   predictable). ── */

/* ── Phone device frame ── */
/* ═══════════ IPHONE SHELL — real photo frame ═══════════ */
.iphone-shell {
  position: relative;
  width: 300px;
  height: 611px;
  flex-shrink: 0;
  background: url('iphone-frame.webp') no-repeat center / 100% 100%;
  /* Round the shell so the playing-state box-shadow traces the
     iPhone's silhouette instead of a rectangle — kills the dark
     corner patches the rectangular shadow used to leave behind. */
  border-radius: 56px;
  transition: box-shadow 0.6s ease, opacity 0.6s ease, filter 0.4s ease;
}
/* Playing state — refined split halo behind the phone: neon violet LEFT,
   neon cyan RIGHT. The phone itself stays solid (opacity 1, no animation)
   so the bezel reads cleanly; the halo fades in/out via the box-shadow
   transition on the base .iphone-shell rule above when .playing toggles. */
.iphone-shell:has(#phoneFrame.playing) {
  opacity: 1;
  border-radius: 56px;
  box-shadow:
    -30px 0 60px 0 rgba(168,  85, 247, 0.30),  /* neon violet  — LEFT  */
     30px 0 60px 0 rgba(  0, 229, 255, 0.28);  /* neon cyan    — RIGHT */
}

/* Side buttons hidden — the photo provides the frame */
.iphone-btn-silent,
.iphone-btn-vol-up,
.iphone-btn-vol-down,
.iphone-btn-power { display: none; }

/* Screen — floats over the photo's screen area */
.phone-frame {
  position: absolute;
  top: 6px; left: 5px; right: 5px; bottom: 8px;
  background: transparent;
  border-radius: 38px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Dynamic Island — pill overlaid at top of screen */
.iphone-dynamic-island {
  width: 92px;
  height: 28px;
  background: #000;
  border-radius: 14px;
  margin: 8px auto 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 9px;
  gap: 5px;
}

/* Green call dot inside the Dynamic Island — visible when playing */
.island-call-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34C759;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .4s;
}
#phoneFrame.playing .island-call-dot {
  opacity: 1;
  animation: island-pulse 1.6s ease-in-out infinite;
}
@keyframes island-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,199,89,.5); }
  50%       { opacity: .7; box-shadow: 0 0 6px 3px rgba(52,199,89,.0); }
}

/* ── Status bar ── */
.phone-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 22px 6px;
  color: #fff;
}
.phone-time-label {
  font-family: var(--ff-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.phone-statusbar-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
}

/* ── iOS centered call layout ── */
.ios-call-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 10px;
  text-align: center;
  flex-shrink: 0;
}
.phone-caller-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--glow), var(--accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  margin-bottom: 14px;
  box-shadow: 0 8px 32px rgba(108,142,255,.35);
}
.ios-incoming-tag {
  font-size: .68rem;
  color: #34C759;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 500;
}
.phone-caller-name {
  font-family: var(--ff-head);
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 6px;
}
.phone-timer {
  font-size: .78rem;
  font-weight: 500;
  color: #34C759;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

/* ── Transcript area (waveform bars removed) ── */
.phone-waveform {
  flex: 1;
  min-height: 0;
  padding: 4px 20px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.waveform-idle { width: 100%; }
.waveform-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 44px;
}
.wbar {
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
  transition: height .12s ease, opacity .12s ease;
  will-change: height;
}
/* Idle state — subtle heartbeat */
.demo-idle .wbar { opacity: .25; animation: wbar-idle 2.4s ease-in-out infinite; }
.demo-idle .wbar:nth-child(odd)  { animation-delay: .15s; }
.demo-idle .wbar:nth-child(3n)   { animation-delay: .3s; }
@keyframes wbar-idle {
  0%,100% { height: 4px; }
  50%      { height: 8px; }
}
/* NIDAI speaking — energetic */
.demo-nidai .wbar { opacity: 1; animation: wbar-speak var(--wbar-dur, .5s) ease-in-out infinite alternate; }
/* Caller speaking — gentler */
.demo-caller .wbar { opacity: .7; animation: wbar-caller .7s ease-in-out infinite alternate; }
@keyframes wbar-speak  { from { height: 6px; } to { height: var(--wbar-h, 32px); } }
@keyframes wbar-caller { from { height: 4px; } to { height: var(--wbar-h, 18px); } }

/* Transcript */
.demo-transcript {
  font-size: .76rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  max-width: 220px;
  transition: opacity .3s;
  font-style: italic;
  overflow: hidden;
}

/* ══ iOS controls wrapper ══ */
.ios-controls {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 16px;
}

/* 3-column grid — each column centres its button, exactly like iPhone */
.ios-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  width: 100%;
  padding: 0 6px;
  margin-bottom: 28px;
}
.ios-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.ios-action-item span {
  font-size: .58rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .02em;
}
.ios-action-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .15s;
  font-family: var(--ff-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.ios-action-btn:hover { background: rgba(255,255,255,.22); transform: scale(1.05); }
.ios-action-btn:active { transform: scale(.94); }
.ios-action-static { cursor: default; opacity: .55; }
.ios-action-static:hover { background: rgba(255,255,255,.14); transform: none; }

/* End call — centred large button, replay floats to its left */
.ios-end-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
}
.ios-end-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #34C759;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(52,199,89,.45);
  transition: transform .2s var(--ease-spring), box-shadow .2s, background .3s;
  flex-shrink: 0;
}
.phone-frame.playing .ios-end-btn {
  background: #FF3B30;
  box-shadow: 0 8px 28px rgba(255,59,48,.45);
}
.ios-end-btn:hover { transform: scale(1.08); }
.ios-end-btn:active { transform: scale(.95); }

/* Replay — centred in the space to the RIGHT of the end button */
.ios-replay-btn {
  position: absolute;
  left: calc(50% + 68px); /* end-btn half (35px) + gap + centres the 44px btn in right space */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, opacity .3s, transform .15s;
}
.ios-replay-btn:hover { background: rgba(255,255,255,.2); transform: scale(1.05); }

/* Spacer no longer needed */
.ios-end-spacer { display: none; }

/* ── Progress ── */
.phone-progress-wrap { padding: 0 20px; }
.phone-progress-bar {
  height: 3px;
  background: rgba(255,255,255,.15);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.phone-progress-fill {
  height: 100%;
  background: #34C759;
  border-radius: 3px;
  transition: width .25s linear;
}
.phone-progress-times {
  display: flex;
  justify-content: space-between;
  font-size: .62rem;
  color: rgba(255,255,255,.4);
  font-variant-numeric: tabular-nums;
  font-family: var(--ff-head);
}

/* ── Side info panel removed — replaced by .ai-status-panel + .demo-features-row ── */

/* ── Fallback: no audio loaded yet ── */
.demo-no-audio-note {
  text-align: center;
  color: var(--muted);
  font-size: .78rem;
  margin-top: 1.2rem;
  line-height: 1.6;
}
.demo-no-audio-note a { color: var(--accent); text-decoration: none; }
.demo-no-audio-note a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media(max-width: 700px) {
  .audio-demo-wrap { gap: 2rem; }
}
@media(max-width: 480px) {
  .iphone-shell { width: 264px; height: 538px; border-radius: 48px; }
}

/* ── Remove old demo styles that are no longer needed ── */
.demo-wrap, .call-interface, .call-hdr, .call-body,
.msg, .msg-avatar, .msg-bubble, .msg-name,
.typing, .typing-dot { display: none !important; }

/* ═══════════════════════════════════════════════
   PRICING SECTION
   ═══════════════════════════════════════════════ */
.pricing-sec {
  position: relative;
  /* Tightened top padding (was 5rem = 80px) so the headline + wave
     artwork come up close to the WNY seam, reducing the dark gap. */
  padding: 2.25rem 2rem 4rem;
  overflow: hidden;
  background: #050711;
}
/* Pricing section atmosphere — neon wave + grid floor.
   Same "section IS the artwork" approach as WNY: image full-bleed
   behind content, top + bottom faded to the section bg so seams
   blend into the WNY section above and the FAQ section below. */
.pricing-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Top of pricing is FULLY OPAQUE dark for the first ~15% so the
       immediate seam with WNY shows the same #050711 colour WNY
       uses at its edges — no colour cast from the wave artwork
       bleeding through. Image emerges by ~30%. */
    linear-gradient(180deg,
      rgba(5,7,17,1)    0%,
      rgba(5,7,17,1)   12%,
      rgba(5,7,17,0.55) 22%,
      rgba(5,7,17,0.35) 38%,
      rgba(5,7,17,0.35) 75%,
      rgba(5,7,17,1)   100%),
    /* Side vignette — left + right edges fully opaque so the
       bright wave doesn't reach the viewport edges (WNY's edges
       are pure dark; this matches them). */
    linear-gradient(90deg,
      rgba(5,7,17,1)    0%,
      rgba(5,7,17,0.55) 14%,
      rgba(5,7,17,0.00) 32%,
      rgba(5,7,17,0.00) 68%,
      rgba(5,7,17,0.55) 86%,
      rgba(5,7,17,1)   100%),
    /* Wave + grid floor artwork, positioned so the wave band sits
       high in the section (just below the dim-top zone). */
    url('assets/pricing.webp') center 25% / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}
/* Pricing decorative orbs hidden — they previously added soft
   blue/purple halos at the corners, but the new pricing.png
   artwork already provides plenty of colour and the orb-1 in
   particular was bleeding a bluish tint across the WNY seam
   (measured: +6,+8,+14 RGB lift in the bottom-left after the
   seam vs the WNY edge). */
.pricing-orb { display: none; }
.pricing-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
  align-items: stretch;
  perspective: 1400px;
}
.price-card {
  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 50%;
  --glow-rgb: 108,142,255;
  position: relative;
  isolation: isolate;
  text-align: left;
  padding: 2rem 1.75rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%);
  border: 1px solid var(--rim);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: border-color .3s, box-shadow .4s;
  will-change: transform;
}
/* Override .reveal transform so 3D tilt works (fade in with opacity only) */
.price-card.reveal {
  opacity: 0;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: opacity .7s var(--ease-out), border-color .3s, box-shadow .4s;
}
.price-card.reveal.visible {
  opacity: 1;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
.price-card.is-hover {
  border-color: var(--rim2);
  box-shadow:
    0 16px 28px -18px rgba(var(--glow-rgb),.22),
    0 6px 14px -10px rgba(0,0,0,.45);
}
/* Mouse-follow radial glow overlay */
.price-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--gx) var(--gy),
    rgba(var(--glow-rgb), .14),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.price-card.is-hover::after { opacity: 1; }
/* Stack card contents above the radial glow overlay */
.price-card > * { position: relative; z-index: 1; }
/* Per-tier glow tint */
.price-card:nth-of-type(1) { --glow-rgb: 34,211,238; }     /* Starter — teal */
.price-card-popular        { --glow-rgb: 108,142,255; }    /* Professional — accent blue */
.price-card:nth-of-type(3) { --glow-rgb: 167,139,250; }    /* Enterprise — purple */

.price-card-popular {
  background: linear-gradient(180deg, rgba(108,142,255,.08) 0%, rgba(167,139,250,.04) 100%);
  border: 1px solid transparent;
}
/* Animated conic gradient border for Popular card */
@property --price-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.price-card-popular::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  padding: 1px;
  background: conic-gradient(
    from var(--price-angle) at 50% 50%,
    transparent 0deg,
    var(--accent) 90deg,
    var(--accent2) 180deg,
    var(--teal) 270deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .75;
  animation: price-border-spin 6s linear infinite;
  z-index: 2;
}
/* Fallback for browsers without @property support: static gradient */
@supports not (background: conic-gradient(from 0deg, red 0%, red 100%)) {
  .price-card-popular::before {
    background: linear-gradient(135deg, var(--accent), var(--accent2), var(--teal));
    animation: none;
  }
}
@keyframes price-border-spin {
  to { --price-angle: 360deg; }
}
.price-card-popular.is-hover { box-shadow: 0 12px 22px -16px rgba(108,142,255,.25); }
.price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: .35rem 1rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(108,142,255,.4);
}
/* Muted badge for Coming Soon cards */
.price-badge-muted {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.45);
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.08);
}
/* Locked CTA for Coming Soon cards */
.price-cta-locked {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  text-align: center;
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35);
}
.price-card-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.4rem;
}
.price-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.price-icon svg { width: 20px; height: 20px; }
.price-icon-teal { background: rgba(34,211,238,.12); color: var(--teal); border: 1px solid rgba(34,211,238,.2); }
.price-icon-accent { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.price-icon-purple { background: rgba(167,139,250,.12); color: var(--accent2); border: 1px solid rgba(167,139,250,.25); }
.price-name {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--white);
  line-height: 1.2;
}
.price-tagline {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .15rem;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  margin-bottom: .3rem;
}
.price-currency {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--white);
  line-height: 1;
}
.price-num {
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.02em;
}
.price-card:not(.price-card-popular) .price-num {
  background: none;
  -webkit-text-fill-color: var(--white);
  color: var(--white);
}
.price-per {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
  margin-left: .25rem;
}
.price-yearly {
  font-size: .72rem;
  color: rgba(200,205,230,.4);
  margin-bottom: 1.2rem;
}
.price-highlight {
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--rim);
  margin-bottom: 1.3rem;
  background: rgba(255,255,255,.02);
}
.price-highlight-teal { border-color: rgba(34,211,238,.18); background: rgba(34,211,238,.04); }
.price-highlight-accent { border-color: rgba(108,142,255,.25); background: rgba(108,142,255,.06); }
.price-highlight-purple { border-color: rgba(167,139,250,.2); background: rgba(167,139,250,.05); }
.ph-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  font-weight: 500;
  color: rgba(240,242,255,.88);
  line-height: 1.4;
}
.ph-row:first-child { margin-bottom: .45rem; }
.ph-row svg { width: 14px; height: 14px; flex-shrink: 0; }
.price-highlight-teal .ph-row svg { color: var(--teal); }
.price-highlight-accent .ph-row svg { color: var(--accent); }
.price-highlight-purple .ph-row svg { color: var(--accent2); }
.ph-over {
  font-size: .68rem;
  color: rgba(200,205,230,.42);
  margin-top: .5rem;
  padding-left: 1.25rem;
}
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  flex: 1;
}
.price-features li {
  position: relative;
  padding: .45rem 0 .45rem 1.4rem;
  font-size: .82rem;
  color: rgba(240,242,255,.78);
  line-height: 1.45;
}
.price-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(108,142,255,.15);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c8eff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 9px;
  background-repeat: no-repeat;
  background-position: center;
}
.price-card-popular .price-features li::before {
  background-color: rgba(108,142,255,.25);
}
.price-cta {
  display: block;
  padding: .85rem 1.25rem;
  text-align: center;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: var(--white);
  border: 1px solid var(--rim2);
  transition: all .3s var(--ease-out);
}
.price-cta:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(108,142,255,.4);
  transform: translateY(-1px);
}
.price-cta-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(108,142,255,.25);
}
.price-cta-primary:hover {
  box-shadow: 0 12px 32px rgba(108,142,255,.4);
  transform: translateY(-2px);
}
.pricing-footnote {
  margin-top: 2.5rem;
  font-size: .72rem;
  color: rgba(200,205,230,.4);
  letter-spacing: .03em;
}

/* Pricing responsive */
@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 1rem auto 0; }
  .price-card-popular { order: -1; }
}
@media (max-width: 520px) {
  .pricing-sec { padding: 5rem 1.25rem 4rem; }
  .price-card { padding: 1.5rem 1.25rem; }
  .price-num { font-size: 2.2rem; }
}

/* ═══════════════════════════════════════════════
   MOBILE FIXES — Responsive polish for all phones
   ═══════════════════════════════════════════════ */

/* ── 1. Prevent text overflow globally ── */
p, li, h1, h2, h3, h4,
.sec-sub, .sec-title, .hero h1,
.step-desc, .bcard-desc, .p-text, .p-sub,
.hero-sub, .faq-a, .sol-item,
.demo-side-point, .price-features li {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 2. Section padding: enforce a safe minimum on narrow phones ── */
section { padding: 7rem max(5vw, 1rem); }
.hero   { padding: 8rem max(5vw, 1rem) 5rem; }

/* ── 3. Hero text: tighten further on very narrow phones (< 380px) ── */
@media(max-width: 380px) {
  .hero h1  { font-size: clamp(2rem, 11vw, 3.5rem); letter-spacing: -.02em; }
  .hero-sub { font-size: .92rem; }
  section   { padding: 5rem 1rem 4rem; }
  .hero     { padding: 6rem 1rem 4rem; }
}

/* ── 4. Hamburger shows on tablets too (≤ 768px) ── */
@media(max-width: 768px) {
  .nav-links  { display: none; }
  .hamburger  { display: flex; }
  .nav-login  { display: none; }
  .nav-cta    { display: none; }
}

/* ── 5. Audio demo — explicitly stack phone above side info on mobile ── */
@media(max-width: 700px) {
  .audio-demo-wrap {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .iphone-shell { align-self: center; }
}

/* ── 6. iPhone shell: one more step down for very small phones ── */
@media(max-width: 320px) {
  .iphone-shell { width: 240px; height: 489px; border-radius: 44px; }
}

/* ── 7. Problem section — tighten gap and card padding on mobile ── */
@media(max-width: 600px) {
  .problem-grid { gap: 2.5rem; }
  .solution-card { padding: 1.8rem 1.4rem; }
  .problem-item  { padding: .85rem 1rem; }
}

/* ── 8. Bento cards — reduce padding on mobile ── */
@media(max-width: 600px) {
  .bcard      { padding: 1.5rem 1.2rem; }
  .bcard-stat { font-size: 2.2rem; }
}

/* ── 9. FAQ — reduce gap on mobile ── */
@media(max-width: 600px) {
  .faq-grid { gap: 1.5rem; }
  .faq-q    { padding: 1rem 1.2rem; font-size: .88rem; }
  .faq-a    { padding: 0 1.2rem; }
  .faq-item.open .faq-a { padding: .4rem 1.2rem 1rem; }
}

/* ── 10. CTA input form — stack on small screens ── */
@media(max-width: 480px) {
  .input-cta {
    flex-direction: column;
    border-radius: 16px;
    padding: .5rem;
    gap: .5rem;
    height: auto;
  }
  .input-cta input  { width: 100%; padding: .6rem .8rem; }
  .input-cta button { width: 100%; padding: .7rem; border-radius: 12px; text-align: center; }
}

/* ── 11. Cookie banner buttons — ensure 44px touch target ── */
.cookie-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ── 12. Footer — stack bottom bar on small phones ── */
@media(max-width: 600px) {
  .ft-bot { flex-direction: column; align-items: flex-start; gap: .6rem; font-size: .74rem; }
}

/* ── 13. Wave phone orb: shrink on small phones ── */
@media(max-width: 380px) {
  .wave-phone { width: 200px; height: 200px; }
  .wave-core  { width: 86px; height: 86px; }
}

/* ── 14. Marquee: reduce font size on mobile ── */
@media(max-width: 600px) {
  .marquee-num  { font-size: 1.5rem; }
  .marquee-item { padding: 0 1.5rem; gap: 1rem; }
}

/* ── 15. Trust bar: tighten gap on mobile ── */
@media(max-width: 600px) {
  .trust-bar { gap: 1rem; font-size: .74rem; }
}

/* ── 16. Step cards: tighten padding on mobile ── */
@media(max-width: 600px) {
  .step-card { padding: 1.5rem 1.2rem; }
}

/* ── 17. Sec-sub: prevent overflow ── */
.sec-sub  { max-width: min(560px, 100%); }
.hero-sub { max-width: min(580px, 100%); }

/* ── 18. Pricing grid: full width on very small phones ── */
@media(max-width: 460px) {
  .pricing-grid { max-width: 100%; }
  .price-card   { padding: 1.25rem 1rem; }
}

/* ── 19. Hero layout fix on mobile — prevent content hiding behind navbar ── */
/* On mobile the centered flex pushes content above the navbar.
   Switch to flex-start so content flows down from the top padding. */
@media(max-width: 768px) {
  .hero {
    justify-content: flex-start;
    padding-top: 6rem;
  }
}
@media(max-width: 480px) {
  .hero {
    padding-top: 5.5rem;
  }
  .hero h1 { font-size: clamp(2rem, 10vw, 3.2rem); }
  .wave-wrap { margin: 2rem 0 1rem; }
}

/* ════════════════════════════════════════════════════════════════
   GERMAN-FIT GUARDS
   ────────────────────────────────────────────────────────────────
   German text runs ~25-30% longer than English. Three layers:
     1. Universal: every heading and text container hyphenates + breaks
        on long compounds and never blows a flex grid via min-width:0.
     2. [lang="de"]: targeted heading shrinks for headlines that still
        overflow under DE even with hyphenation.
     3. Re-activate hyphens specifically on .demo-sec body copy that
        previously used `text-wrap: balance` etc.
   The toggle in script.js writes `document.documentElement.lang = l`
   so the [lang="de"] selectors below engage on DE.
   ════════════════════════════════════════════════════════════════ */

/* — 1a. HEADINGS — never auto-hyphenate. Let them wrap to a new line
   or scale down via clamp(); a mid-word hyphen in a headline reads as
   unprofessional. `text-wrap: balance` gives prettier multi-line
   wraps in modern browsers. — */
h1, h2, h3, h4, h5,
.hero h1, .sec-title, .step-title, .bcard-title, .p-h,
.faq-q, .price-title, .price-desc,
.dfeat-title, .asp-title, .asp-item-title {
  -webkit-hyphens: manual;
      -ms-hyphens: manual;
          hyphens: manual;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

/* — 1b. BODY-TEXT containers — also no auto-hyphens; keep
   `overflow-wrap: break-word` as a safety net for words wider
   than the card (super-long compound words). — */
.step-desc, .bcard-desc, .p-text, .p-sub,
.faq-a, .price-features li,
.dfeat-desc, .asp-item-sub, .asp-footer-text,
.raiv-text, .ft-desc, .ft-bot-text,
.sol-item, .hero-sub, .sec-sub {
  -webkit-hyphens: manual;
      -ms-hyphens: manual;
          hyphens: manual;
  word-break: normal;
  overflow-wrap: break-word;
}

/* — 2. Flex/grid overflow guards: long German words can't widen
   a child past its track. Applies to every card-grid child we have. — */
.dfeat,
.step-card,
.bcard,
.sol-item,
.price-card,
.asp-item,
.real-ai-voice-card,
.ai-status-panel,
.faq-item,
.demo-features-row > * {
  min-width: 0;
}

/* — 3. [lang="de"] targeted heading shrinks for the headlines that
   still overflow even with hyphenation on. ~8-12% size cut each. — */
[lang="de"] .hero h1                     { font-size: clamp(1.75rem, 3.6vw, 3.8rem); }
[lang="de"] .sec-title                   { font-size: clamp(1.6rem,  3.2vw, 3.4rem); }
[lang="de"] .how-sec .sec-title          { font-size: clamp(1.8rem,  3.6vw, 3.8rem); }
[lang="de"] .demo-sec .demo-header h2    { font-size: clamp(1.8rem,  3.6vw, 3.4rem); letter-spacing: -0.05em; }
[lang="de"] .price-title                 { font-size: clamp(1.1rem,  2.0vw, 1.4rem); }
[lang="de"] .faq-q                       { font-size: clamp(1rem,    1.5vw, 1.2rem); }
[lang="de"] .step-title,
[lang="de"] .bcard-title                 { font-size: clamp(0.95rem, 1.4vw, 1.05rem); }

/* — 4. Demo card-row & status-panel item titles get a touch smaller
   in DE so things like "Verfügbarkeit prüfen" don't push the layout. — */
[lang="de"] .dfeat-title                 { font-size: 14px; }
[lang="de"] .asp-item-title              { font-size: 13px; }
[lang="de"] .asp-item-sub                { font-size: 11.5px; }

/* — 5. DE body-copy reduction (~7%) inside dense cards so longer
   German sentences settle into the card height English used. Px
   values rather than `em` because `em` on font-size resolves against
   the PARENT, not the element's own base size — that gave a 14.88 px
   result instead of the 13 px we want. Selectors mirror the base
   rules' specificity so they win the cascade. — */
[lang="de"] .how-sec .step-card .step-desc,
[lang="de"] .how-sec .how-card p,
[lang="de"] .how-sec .how-step p {
  font-size: 13px;
  line-height: 1.55;
}
[lang="de"] .real-ai-voice-card .raiv-text {
  font-size: 14px;
  line-height: 1.55;
}
[lang="de"] .bcard .bcard-desc {
  font-size: 0.8rem;
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════════
   WHY NIDAI — image carries globe / rings / connector lines / dots.
   CSS only renders the NIDAI text overlay + 6 satellite cards
   aligned to the baked-in dots. Stage locked to the image's native
   1535:1024 aspect so the dot positions stay at fixed %s.
   ════════════════════════════════════════════════════════════════ */
.why-nidai-sec {
  position: relative;
  overflow: hidden;
  background: #050711;
  /* Tightened bottom padding (was 80px) so the section ends close
     to its content, leaving less dark gap before the Pricing
     section's atmosphere begins. */
  padding: 80px 0 20px;
}

/* Stage — aspect-locked to the artwork (1535:1024). Since width 100%
   + this exact aspect = no cropping under object-fit:cover, the
   baked-in dots stay at fixed %s across every desktop width. */
.wny-inner {
  position: relative;
  width: 100%;
  max-width: 1500px;
  aspect-ratio: 1535 / 1024;
  margin: 0 auto;
}
/* BG image lives on ::before so the mask can fade only the bg, not
   the cards / header / globe-text overlay sitting inside .wny-inner. */
.wny-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(5,7,17,0.30) 0%,
      rgba(5,7,17,0.05) 50%,
      rgba(5,7,17,0.30) 100%),
    url('assets/why-nidai.webp') center / cover no-repeat;
  pointer-events: none;
  /* Fade top + bottom 14% to transparent so the artwork melts into
     the unified #050711 base shared with .demo-sec above and
     .pricing-sec below. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* Header — absolute overlay on the artwork's top-left wave area. */
.wny-header {
  position: absolute;
  top: 5%;
  left: 3%;
  max-width: 28%;
  z-index: 4;
}
.wny-header .wny-label,
.wny-header .wny-headline,
.wny-header .wny-desc { max-width: 360px; }
.wny-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #6080FF;
}
.wny-headline {
  font-family: var(--ff-head);
  font-size: clamp(1.6rem, 2.4vw, 2.6rem);
  line-height: 1.10;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 14px 0 16px;
  font-weight: 600;
}
.wny-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.55;
}

/* NIDAI text overlay sitting on the image's baked-in globe (~62%/50%) */
.wny-globe-text {
  position: absolute;
  left: 62%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  pointer-events: none;
}
.wny-globe-title {
  font-family: var(--ff-head);
  font-size: clamp(1.4rem, 1.9vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 0 24px rgba(168, 85, 247, 0.60);
}
.wny-globe-sub {
  display: block;
  margin-top: 6px;
  font-size: clamp(8px, 0.6vw, 11px);
  letter-spacing: 0.20em;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
}

/* Cards — absolute %-anchored against the stage. Each card's edge
   nearest the dot is the transform anchor, so the image's line
   visibly meets the card edge. */
.wny-card {
  position: absolute;
  width: 185px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 20, 40, 0.70), rgba(10, 10, 30, 0.55));
  border: 1px solid rgba(var(--cr), 0.30);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  /* Contained drop-bloom only — the previous `0 0 24px rgba(--cr,.12)`
     was an omnidirectional 24 px halo that extended outside the card and,
     in the stacked 2-col layout (16 px gap), bled into the neighbour's
     `backdrop-filter` area. The contained directional version stays
     under the card (effective spread ≪ gap). */
  box-shadow: 0 10px 24px -14px rgba(var(--cr), 0.45);
  z-index: 3;
}

/* Dot map — measured precisely from the bg image by brightness-centroid.
   Numbering flows CLOCKWISE around the globe from upper-left:
   B upper-left   43.7% / 31.4% → c1 LEFT    right-centre at dot
   A top-centre   61.5% / 18.1% → c2 ABOVE   bottom-centre at dot
   C upper-right  79.1% / 31.6% → c3 RIGHT   left-centre at dot
   E lower-right  79.2% / 65.7% → c4 RIGHT   left-centre at dot
   F bottom-ctr   61.5% / 76.3% → c5 BELOW   top-centre at dot
   D lower-left   43.9% / 65.3% → c6 LEFT    right-centre at dot */
.wny-c1 { left: 43.7%; top: 31.4%; transform: translate(-100%, -50%); }
.wny-c2 { left: 61.5%; top: 18.1%; transform: translate( -50%, -100%); }
.wny-c3 { left: 79.1%; top: 31.6%; transform: translate(   0%,  -50%); }
.wny-c4 { left: 79.2%; top: 65.7%; transform: translate(   0%,  -50%); }
.wny-c5 { left: 61.5%; top: 76.3%; transform: translate( -50%,    0%); }
.wny-c6 { left: 43.9%; top: 65.3%; transform: translate(-100%, -50%); }

.wny-card-num {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--c);
  margin-bottom: 6px;
}
.wny-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1.5px solid var(--c);
  background: rgba(var(--cr), 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  margin-bottom: 8px;
}
.wny-card-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--c);
}
.wny-card-title {
  font-family: var(--ff-head);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}
.wny-card-desc {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  line-height: 1.50;
  margin: 0;
}

/* ── Big screens (2040–2299px, tall): harmonised with the unified ≥1700
   full-bleed treatment. why-nidai-big2.webp reaches all four edges, so the old
   contained-box + side-vignette workaround for this window is dropped — the
   ≥1700 rule (full-viewport .wny-inner + big2 art) governs here too. We only
   neutralise the leftover overrides so nothing reintroduces a side seam. ── */
@media (min-width: 2040px) and (max-width: 2299px) and (min-height: 1100px) {
  /* Drop the dimmed second art copy — big2 already fills the section. */
  .why-nidai-sec::before { display: none; }
  /* Let the stage go full-bleed (≥1700 sets aspect-ratio + max-width:none). */
  .wny-inner { width: 100%; }
  /* Drop the side vignettes — they reintroduced the seam we're removing. */
  .wny-inner::after { display: none; }
}

/* ─── Responsive ───
   Below 1180px the absolute-over-stage layout gets cramped (header
   body copy crashes into card 01 between ~1000–1100). Drop the
   aspect lock, show the image as a centered banner at the top with
   its native aspect ratio, header above, cards in a 2-col grid
   (1-col under 640). */
@media (max-width: 1240px) {
  /* At narrow widths the image stops being a top-of-section "banner"
     (orphan dots, framed box) and becomes the SECTION'S OWN
     ATMOSPHERE — dimmed full-bleed background with header + cards
     stacked on top. The artwork unifies with the section because
     it IS the section, not a block inside it. */
  .why-nidai-sec {
    position: relative;
    overflow: hidden;
    background: #050711;
    padding: 80px 0 80px;
  }
  .why-nidai-sec::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(5,7,17,1)    0%,
        rgba(5,7,17,0.55) 18%,
        rgba(5,7,17,0.55) 82%,
        rgba(5,7,17,1)   100%),
      url('assets/why-nidai.webp') center / cover no-repeat;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
  }
  .wny-inner {
    aspect-ratio: auto;
    /* Cap the content column for readable line lengths over the
       atmospheric background. */
    max-width: 960px;
    background: none;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    position: relative;
    z-index: 1;
  }
  /* The inline banner ::before is no longer needed — image is now
     the section atmosphere. Hide it. */
  .wny-inner::before {
    display: none;
  }
  .wny-header {
    position: static;
    max-width: 100%;
    text-align: center;
    grid-column: 1 / -1;
  }
  .wny-header .wny-label,
  .wny-header .wny-headline,
  .wny-header .wny-desc { margin-inline: auto; }
  .wny-globe-text { display: none; }
  .wny-card {
    position: static;
    transform: none;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }
}
@media (max-width: 640px) {
  .wny-inner { grid-template-columns: 1fr; gap: 14px; }
}

/* DE size guards */
[lang="de"] .wny-headline   { font-size: clamp(1.4rem, 2.2vw, 2.3rem); }
[lang="de"] .wny-card-title { font-size: 13.5px; }
[lang="de"] .wny-card-desc  { font-size: 11.5px; line-height: 1.55; }

/* Presentation contrast pass: avoid low-opacity gray on primary nav/footer text. */
nav .nav-links a,
nav .nav-login,
.mobile-menu ul a,
.mobile-menu-login {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
  transition: color .2s ease, text-shadow .2s ease;
}

nav .nav-links a:hover,
nav .nav-login:hover,
.mobile-menu ul a:hover,
.mobile-menu-login:hover {
  color: #fff;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.72),
    0 0 24px rgba(108, 142, 255, 0.42);
}

footer,
footer .ft-desc,
footer .ft-col-title,
footer .ft-links a,
footer .ft-bot,
footer .ft-bot-text,
footer .ft-bot-badge,
footer .ft-mg-tag,
footer .ft-mg-hud,
footer .ft-mg-card-label,
footer .ft-mod-tagline {
  color: #f7f9ff;
  font-weight: 700;
}

footer .ft-links a,
footer a {
  transition: color .2s ease, text-shadow .2s ease;
}

footer .ft-links a:hover,
footer a:hover {
  color: #fff;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.68),
    0 0 24px rgba(34, 211, 238, 0.30);
}