/* Typography & Reset */
:root{
  /* Futuristic palette: neon blue + electric purple + magenta */
  --bg:#F9FAFB;
  --bg-2:#FFFFFF;
  --card:#FFFFFF;
  --muted:#6B7280;
  --text:#334155;        /* body text */
  --text-heading:#1E293B;/* headings */
  --brand:#2563EB;        /* electric purple */
  --brand-600:#1D4ED8;
  --neon:#8B5CF6;         /* neon cyan */
  --magenta:#F97316;      /* neon magenta */
  --accent:#22c55e;
  --header-height:64px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:'Inter',system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size-adjust:.5; background:linear-gradient(180deg, #F9FAFB 0%, #EEF2FF 100%); color:var(--text); width:100%; overflow-x:hidden; min-height:100vh; min-height:100dvh; }
/* Enable sticky footer layout */
body{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
main{ flex:1 0 auto; }

/* Animated gradient backdrop */
body::before{
  content:"";
  position:fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh;
  background: radial-gradient(50% 35% at 20% 30%, rgba(37,99,235,.06), transparent 60%),
              radial-gradient(40% 30% at 80% 20%, rgba(139,92,246,.05), transparent 60%),
              radial-gradient(60% 40% at 50% 80%, rgba(249,115,22,.05), transparent 60%);
  filter: blur(40px) saturate(110%);
  animation: none;
  z-index:-1;
}
@keyframes backdropShift{
  0%{ transform: scale(1); opacity:.9; }
  100%{ transform: scale(1.05); opacity:1; }
}

/* Extra lively animated orbs layer */
body::after{
  content:"";
  position:fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(120px 120px at var(--o1x,15%) var(--o1y,70%), rgba(37,99,235,.10), transparent 60%),
    radial-gradient(160px 160px at var(--o2x,85%) var(--o2y,25%), rgba(139,92,246,.08), transparent 60%),
    radial-gradient(140px 140px at var(--o3x,55%) var(--o3y,10%), rgba(249,115,22,.08), transparent 60%),
    radial-gradient(200px 200px at var(--o4x,35%) var(--o4y,40%), rgba(34,197,94,.08), transparent 60%);
  filter: blur(50px) saturate(110%);
  animation: none;
}
@keyframes orbFloat{
  0%{
    --o1x: 12%; --o1y: 72%;
    --o2x: 82%; --o2y: 22%;
    --o3x: 58%; --o3y: 12%;
    --o4x: 30%; --o4y: 42%;
    transform: scale(1);
  }
  50%{
    --o1x: 18%; --o1y: 68%;
    --o2x: 86%; --o2y: 28%;
    --o3x: 52%; --o3y: 16%;
    --o4x: 38%; --o4y: 38%;
    transform: scale(1.03);
  }
  100%{
    --o1x: 10%; --o1y: 74%;
    --o2x: 88%; --o2y: 20%;
    --o3x: 60%; --o3y: 14%;
    --o4x: 32%; --o4y: 44%;
    transform: scale(1.05);
  }
}
img{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color: var(--neon); }
p a, li a, .subtle a{ text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; }
.subtle{ color: var(--muted); }
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }

/* Full-bleed header & footer (no side margins) */
header.header.container, footer.footer.container{ max-width:100% !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left: 20px; padding-right:20px; }

/* Brand logo */
.brand img{ height:auto; width:auto; }

/* Explicit heading sizes to avoid UA defaults/deprecations */
h1,h2,h3,h4,h5,h6{ margin:0 0 8px; line-height:1.2; font-weight:700; font-family:'Inter',system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--text-heading); }
h1{ font-size:2rem; }
h2{ font-size:1.5rem; }
h3{ font-size:1.25rem; }
h4{ font-size:1.125rem; }
h5{ font-size:1rem; }
h6{ font-size:.875rem; }

/* Focus-visible accessibility */
:focus-visible{ outline: 2px solid rgba(37,99,235,.7); outline-offset: 2px; border-radius: 6px; }

/* Header */
.header{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; position:sticky; top:0; background:rgba(249,250,251,.95); backdrop-filter: saturate(120%) blur(8px); z-index:10; border-bottom:1px solid #E5E7EB; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; }
.header .brand img{ height:36px; width:auto; }
.nav{ display:flex; gap:14px; align-items:center; }
.nav a{ color:var(--muted); font-weight:500; transition:.2s; }
.nav a:hover{ color:var(--text); }
 .nav-link{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; color:var(--muted); font-weight:500; transition:color .2s ease, background .2s ease, box-shadow .2s ease; }
 .nav-link:hover{ color:var(--text); }
 .nav-link--pill{ background:rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.26); color:#1D4ED8; padding:8px 14px; border-radius:999px; box-shadow:0 6px 18px rgba(37,99,235,.10); }
 .nav-link--pill:hover{ background:linear-gradient(135deg, var(--brand), var(--neon)); color:white; box-shadow:0 10px 26px rgba(37,99,235,.25); }

 .nav-social{ display:flex; align-items:center; gap:10px; padding:0 6px; }
 .nav-social__link{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#ffffff; border:1px solid #E5E7EB; transition:transform .15s ease, border .2s ease, background .2s ease; }
 .nav-social__link:hover{ transform:translateY(-1px); background:linear-gradient(135deg, var(--brand), var(--neon)); border-color:transparent; }
 .nav-social__icon{ width:18px; height:18px; fill:#111827; }
 .nav-social__link:hover .nav-social__icon{ fill:white; }
 .nav-social--mobile{ gap:12px; padding:6px 0; justify-content:center; }

/* Hide hamburger by default (desktop); show only on mobile mq below */
#btnMenu{ display:none; }
.btn-nav-translate{
  padding:10px 16px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(37,99,235,0.12), rgba(139,92,246,0.12));
  color:#1D4ED8;
  border:1px solid rgba(37,99,235,0.26);
  box-shadow:0 6px 20px rgba(37,99,235,0.10);
  position:relative;
  overflow:hidden;
}
.btn-nav-translate::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,0.35), transparent 55%);
  opacity:0.6;
  pointer-events:none;
  mix-blend-mode:screen;
  transition:opacity .2s ease;
}
.btn-nav-translate:hover{
  color:white;
  background:linear-gradient(135deg,var(--brand),var(--neon));
  box-shadow:0 10px 28px rgba(37,99,235,0.25),0 0 20px rgba(139,92,246,0.25);
}
.btn-nav-translate:hover::after{ opacity:1; }
.btn-nav-translate:active{ transform:translateY(0); }

#mobileMenu{
  top:var(--header-height,64px);
}

#mobileMenu .btn-nav-translate{
  background:linear-gradient(135deg,var(--brand),var(--neon));
  border:none;
  box-shadow:0 12px 30px rgba(37,99,235,0.25);
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s, color .2s; font-weight:600; will-change:transform; }
.btn-text{ background:transparent; color:var(--text); }
.btn-primary{ background:#2563EB; color:white; box-shadow: 0 8px 24px rgba(37,99,235,.22), 0 2px 8px rgba(139,92,246,.12); }
.btn-primary:hover{ background:#1D4ED8; transform: translateY(-1px); box-shadow: 0 14px 36px rgba(37,99,235,.28), 0 6px 16px rgba(139,92,246,.18); }
.btn-secondary{ background:#ffffff; color:var(--text); border-color:#E5E7EB; box-shadow:0 4px 12px rgba(17,24,39,.06); }
.btn-sm{ padding:8px 12px; font-size:13px; }
.btn-secondary:hover{ background:#F3F4F6; }
.w-100{ width:100%; }

/* keep high contrast for primary buttons inside nav */
.nav .btn-primary,
.nav a.btn-primary,
.nav .btn-primary:hover,
.nav a.btn-primary:hover,
a.btn-primary:visited{ color:#fff; }

/* CTA special glow */
#btnStart.btn-primary, #mmStart.btn-primary{
  box-shadow: 0 0 0 2px rgba(37,99,235,.20), 0 10px 26px rgba(37,99,235,.28), 0 6px 16px rgba(139,92,246,.18);
}
#btnStart.btn-primary:hover, #mmStart.btn-primary:hover{
  box-shadow: 0 0 0 3px rgba(37,99,235,.25), 0 16px 40px rgba(37,99,235,.32), 0 10px 20px rgba(139,92,246,.22);
}

/* Hero */
.hero{ display:grid; grid-template-columns:1.2fr 1fr; gap:34px; padding:52px 0 28px; background-image: linear-gradient(180deg, rgba(37,99,235,.04), rgba(139,92,246,.04)); border-radius:16px; box-shadow: 0 10px 24px rgba(17,24,39,.06); }
.hero__content{ max-width:660px; }
.hero__headline{ font-size:40px; line-height:1.15; margin:0 0 16px; letter-spacing:.2px; }
.hero__subtitle{ color:var(--muted); margin:0 0 22px; font-size:18px; line-height:1.55; max-width:600px; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; background:rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.26); color:#1D4ED8; border-radius:999px; margin-bottom:18px; }
.hero__cta{ display:flex; gap:10px; margin:16px 0 8px; }
.hero__bullets{ margin:0 0 24px; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; color:var(--muted); }
.hero__bullets li{ position:relative; padding-left:28px; font-size:16px; line-height:1.5; }
.hero__bullets li::before{ content:""; position:absolute; left:0; top:8px; width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg, var(--brand), var(--neon)); box-shadow:0 0 8px rgba(37,99,235,.25); transform:rotate(45deg); }
.hero__trust{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; color:#aab4c3; font-size:14px; }
.hero__stats .pill{ background:#F3F4F6; border-color:#E5E7EB; color:#1F2937; }
.hero__visual{ display:flex; align-items:center; justify-content:center; }
.hero__demo{ min-height:280px; display:flex; align-items:center; justify-content:center; padding:20px; }
.hero__demo-content{ position:relative; z-index:1; width:100%; display:flex; }
.hero__demo-media{ width:100%; border-radius:18px; border:1px solid #E5E7EB; box-shadow:0 14px 26px rgba(17,24,39,.10); overflow:hidden; position:relative; background:#ffffff; }
.hero__demo-media--full{ max-width:100%; position:relative; aspect-ratio:16/9; }
.hero__demo-overlay{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:flex-start; padding:18px; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 60%); }
.hero__demo-pill{ background:rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.26); border-radius:999px; padding:8px 14px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#1D4ED8; }
.hero__demo-controls{ position:absolute; left:18px; bottom:18px; display:flex; gap:10px; pointer-events:auto; }
.hero__demo-btn{ width:44px; height:44px; border-radius:14px; border:1px solid #E5E7EB; background:#ffffff; color:#111827; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s ease; backdrop-filter: blur(8px); }
.hero__demo-btn:hover{ transform:translateY(-1px); background:linear-gradient(135deg, var(--brand), var(--neon)); color:white; box-shadow:0 8px 24px rgba(37,99,235,.25); }
.hero__demo-btn:active{ transform:scale(.96); }
.hero__demo-volume{ display:flex; align-items:center; background:#ffffff; border:1px solid #E5E7EB; border-radius:999px; padding:8px 12px; backdrop-filter: blur(8px); }
.hero__demo-volume input[type="range"]{ -webkit-appearance:none; appearance:none; width:110px; height:4px; background:#E5E7EB; border-radius:999px; outline:none; transition:background .2s ease; }
.hero__demo-volume input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%; background:var(--neon); box-shadow:0 0 0 2px rgba(14,20,48,.8); cursor:pointer; transition:transform .1s ease; }
.hero__demo-volume input[type="range"]::-moz-range-thumb{ width:12px; height:12px; border:none; border-radius:50%; background:var(--neon); box-shadow:0 0 0 2px rgba(14,20,48,.8); cursor:pointer; transition:transform .1s ease; }
.hero__demo-volume input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.1); }
.hero__demo-volume input[type="range"]:active::-moz-range-thumb{ transform:scale(1.1); }
.hero__demo-volume input[type="range"]::-moz-range-track{ background:transparent; }
.hero__demo-icon{ width:20px; height:20px; fill:currentColor; transition:opacity .2s ease; }
.hero__demo-icon .shape-pause{ opacity:0; transition:opacity .2s ease; }
.hero__demo-btn.is-playing .hero__demo-icon .shape-play{ opacity:0; }
.hero__demo-btn.is-playing .hero__demo-icon .shape-pause{ opacity:1; }
.hero__demo-icon .shape-mute{ opacity:0; transition:opacity .2s ease; }
.hero__demo-btn.is-muted .hero__demo-icon .shape-wave{ opacity:0; }
.hero__demo-btn.is-muted .hero__demo-icon .shape-mute{ opacity:1; }
.hero__demo-media video,
.hero__demo-media iframe,
.hero__demo-media img{ width:100%; height:100%; display:block; border:0; object-fit:cover; }

.hero__visual{ display:flex; align-items:center; justify-content:center; }
.card{ background:#ffffff; border:1px solid #E5E7EB; border-radius:14px; padding:18px; box-shadow: 0 8px 20px rgba(17,24,39,.06); }
.card:hover{ box-shadow: 0 12px 28px rgba(17,24,39,.10); }
.demo-card{ width:100%; max-width:460px; min-height:200px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.demo-card canvas#botViz{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.demo-wave{ position:absolute; inset:-20%; background:
    radial-gradient(120px 40px at 30% 50%, rgba(124,58,237,.35), transparent),
    radial-gradient(160px 60px at 70% 60%, rgba(0,209,255,.30), transparent),
    radial-gradient(180px 50px at 50% 80%, rgba(255,45,149,.25), transparent);
  filter: blur(32px) saturate(120%);
  opacity:.95;
  animation: waveFloat 8s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes waveFloat{
  0%{ transform: translate3d(-2%,0,0) scale(1); }
  100%{ transform: translate3d(2%,-2%,0) scale(1.05); }
}
.demo-text{ position:relative; font-weight:700; text-shadow: 0 2px 14px rgba(124,58,237,.25); }

/* Features */
.insight{ padding:22px 0 22px; }
.insight__panel{ position:relative; overflow:hidden; border-radius:18px; padding:40px 42px; background:linear-gradient(140deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 55%, rgba(37,99,235,.08) 100%); border:1px solid #E5E7EB; box-shadow:0 12px 32px rgba(17,24,39,.08); isolation:isolate; }
.insight__badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:.3px; background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.26); color:#1D4ED8; text-transform:uppercase; }
.insight__headline{ font-size:32px; line-height:1.15; margin:18px 0 14px; max-width:620px; }
.insight__headline span{ color:var(--neon); }
.insight__subtitle{ color:var(--muted); max-width:560px; font-size:17px; line-height:1.5; margin:0; }
.insight__glow{ position:absolute; inset:auto; width:360px; height:360px; right:-120px; top:-140px; background:radial-gradient(circle at center, rgba(37,99,235,.16), rgba(139,92,246,.10) 55%, transparent 80%); filter: blur(10px); opacity:.8; z-index:-1; animation: insightPulse 12s ease-in-out infinite alternate; }
@keyframes insightPulse{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:.45; }
  100%{ transform:translate3d(-16px,12px,0) scale(1.1); opacity:.7; }
}

.benefits{ padding:34px 0 22px; }
.benefits__header{ display:flex; flex-direction:column; gap:10px; max-width:720px; margin:0 auto 32px; text-align:center; }
.benefits__eyebrow{ font-size:13px; text-transform:uppercase; letter-spacing:.26em; color:#1D4ED8; font-weight:600; }
.benefits__header h2{ font-size:30px; margin:0; }
.benefits__header p{ margin:0; color:var(--muted); font-size:16px; }
.benefits__grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.benefit-card{ position:relative; padding:24px 22px; border-radius:16px; border:1px solid #E5E7EB; background:#FFFFFF; box-shadow:0 10px 24px rgba(17,24,39,.06); transition:transform .18s ease, box-shadow .18s ease; }
.benefit-card:hover{ transform: translateY(-4px); box-shadow:0 12px 28px rgba(17,24,39,.10); }
.benefit-card__icon{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(139,92,246,.10); border:1px solid rgba(139,92,246,.26); margin-bottom:16px; color:var(--neon); }
.benefit-card__icon svg{ width:24px; height:24px; fill:currentColor; }
.benefit-card h3{ margin:0 0 10px; font-size:19px; }
.benefit-card p{ margin:0; color:var(--muted); line-height:1.5; }

.features{ padding:44px 0 10px; background: linear-gradient(180deg, rgba(37,99,235,.03), rgba(139,92,246,.03)); border-radius:16px; }
.features h2, .pricing h2{ margin:0 0 16px; }
/* Heading accent lines */
.benefits__header h2::after,
.features h2::after,
.pricing h2::after,
.insight__headline::after{
  content:""; display:block; width:56px; height:3px; border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--neon));
  margin-top:6px;
}
.grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns:repeat(3, 1fr); }

/* Pricing */
.pricing{ padding:14px 0 32px; background: linear-gradient(180deg, rgba(37,99,235,.03), rgba(139,92,246,.03)); border-radius:16px; }
.price-card{ position:relative; display:flex; flex-direction:column; }
.price-card{ background:#FFFFFF; border:1px solid #E5E7EB; box-shadow:0 10px 24px rgba(17,24,39,.06); border-radius:14px; }
.price-card .btn{ margin-top:auto; }
.price-badge{ position:absolute; top:-10px; right:16px; background:linear-gradient(135deg, var(--brand), #22c55e); color:white; font-size:12px; padding:4px 8px; border-radius:999px; }
.pill{ font-size:12px; color:#1F2937; padding:4px 8px; border:1px solid #E5E7EB; border-radius:999px; background:#F3F4F6; }
.price-tier{ color:var(--text); font-weight:700; margin-bottom:8px; }
.price-value{ font-size:28px; font-weight:700; margin-bottom:8px; }
.price-was{ display:inline-block; color:#8a93a8; text-decoration: line-through; font-weight:600; margin-right:8px; }
.price-promo{ display:inline-flex; align-items:center; gap:6px; color:#1D4ED8; font-weight:700; font-size:12px; padding:4px 8px; border:1px solid #E5E7EB; border-radius:999px; background:#F3F4F6; margin-bottom:8px; }
.price-badge-limited{ display:inline-block; padding:2px 6px; font-size:12px; border-radius:999px; border:1px solid #E5E7EB; color:#1F2937; margin-left:8px; background:#F3F4F6; }
.price-features{ list-style:none; padding:0; margin:0 0 12px; color:var(--muted); }
.price-features li{ margin:6px 0; }
.price-card.featured{ border-color:rgba(37,99,235,.35); box-shadow: 0 12px 40px rgba(37,99,235,.15); animation: pulse 1.2s ease-out; }
/* Subtle lift on hover for all cards */
.price-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 42px rgba(17,24,39,.10), 0 10px 30px rgba(0,0,0,.06); }
/* Make featured badge stand out a bit more */
.price-badge{ box-shadow: 0 6px 18px rgba(34,197,94,.2); }

/* Free/Economy rozetlerini Pro ile hizala (üst‑sağ) */
.pricing .price-card .price-badge-limited,
.pricing .price-card .price-promo{
  position: absolute;
  top: -10px;
  right: 16px;
  background: linear-gradient(135deg, var(--brand), #22c55e);
  color: #fff;
  border: none;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  margin: 0;
  z-index: 1;
  box-shadow: 0 6px 18px rgba(34,197,94,.2);
} 
/* Desktop breathing room */
@media (min-width: 960px){
  .features .grid{ gap:20px; }
  .pricing .grid{ gap:20px !important; }
}

/* Pricing highlight pulse */
.pulse{ animation: pulse 1.2s ease-out; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(37,99,235,.6); }
  100%{ box-shadow: 0 0 0 18px rgba(37,99,235,0); }
}

/* Small verify badge dot */
.dot{ display:none; }

/* CTA */
.cta{ padding:0 0 50px; background: linear-gradient(180deg, rgba(37,99,235,.03), rgba(139,92,246,.03)); border-radius:16px; }
.cta-card{ text-align:center; }
/* Slightly increase top spacing before CTA on desktop */
@media (min-width: 960px){
  .cta{ padding:10px 0 64px; }
}

/* Scroll reveal (no movement to avoid CLS) */
[data-reveal]{ opacity:0; transition: opacity .5s ease; }
[data-reveal].reveal-in{ opacity:1; }

/* Mic highlight when active */
.mic-on .card.demo-card{ box-shadow: 0 0 0 2px rgba(34,197,94,.35), 0 10px 30px rgba(34,197,94,.15); }
.mic-on #btnToggleMic{ box-shadow: 0 0 0 2px rgba(34,197,94,.35) inset; }

/* Simple tooltip base (title browsers default sufficient; kept for future) */
.tooltip{ position:relative; }
.tooltip:hover::after{ content: attr(data-tip); position:absolute; bottom: calc(100% + 6px); left:0; white-space:nowrap; background:#111827; border:1px solid #111827; color:#FFFFFF; padding:6px 8px; border-radius:8px; font-size:12px; }

/* Footer */
.footer{ display:flex; align-items:flex-start; justify-content:space-between; padding:22px 0 32px; color:var(--muted); margin-top:auto; }
.footer .nav.small a{ color:var(--muted); }
.footer .nav.small a:hover{ color: var(--text); }
/* Slightly soften footer divider illusion by adding subtle top border */
.footer{ border-top:1px solid #E5E7EB; background: linear-gradient(180deg, rgba(37,99,235,.04), rgba(139,92,246,.04)); backdrop-filter: none; }
/* Footer top bar */
.footer-topbar{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:20%; padding:14px 0; border-bottom:1px solid #E5E7EB; background:transparent; }
.footer-topbar .item{ display:flex; align-items:center; gap:10px; color:var(--text); flex:0 0 auto; width:auto; }
.footer-topbar .item .title{ font-weight:700; line-height:1; }
.footer-topbar .item .sub{ font-size:12px; color:var(--muted); }

/* Footer main block */
.footer-main{ display:flex; justify-content:space-between; gap:24px; width:100%; padding-top:16px; background:transparent; }
.footer-main .brand{ min-width:220px; display:flex; flex-direction:column; gap:8px; }
.footer-main .brand img{ height:36px; width:auto; }
.footer-main .brand .year{ color:var(--muted); }
.footer-main .brand .social{ display:flex; gap:8px; }
.footer-main .brand .social .ic{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid #E5E7EB; border-radius:999px; color:#111827; background:#ffffff; }
.footer-main .brand .social .ic:hover{ color:#fff; border-color:transparent; background: linear-gradient(135deg, var(--brand), var(--neon)); }

/* Footer grid columns */
.footer .links{ display:grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap:24px; align-items:start; }
.footer .links .col{ display:flex; flex-direction:column; gap:6px; }
.footer .links .col h4{ margin:0 0 6px; font-size:13px; color:var(--text); letter-spacing:.2px; text-transform:uppercase; }
.footer .links .col a{ color:var(--muted); text-decoration:none; }
.footer .links .col a:hover{ color:var(--text); }
/* Footer grid columns */
.footer .links{ display:grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap:16px; }
.footer .links .col{ display:flex; flex-direction:column; gap:6px; }
.footer .links .col h4{ margin:0 0 6px; font-size:13px; color:var(--text); letter-spacing:.2px; }
.footer .links .col a{ color:var(--muted); text-decoration:none; }
.footer .links .col a:hover{ color:var(--text); }

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; }
}

/* ===== Mobile-first polish (<640px) ===== */
@media (max-width: 640px){
  .container{ padding-left: 24px;padding-right: 24px;padding-bottom: 16px; width:90%; max-width:100%; box-sizing:border-box; }
  /* Header compaction */
  .header{ padding:12px 0; gap:8px; min-height:56px; }
  .brand{ gap:12px; min-width:0; flex:1 1 auto; }
  .brand img{ height:26px !important; flex:0 0 auto; aspect-ratio: 1/1 !important; }
  .brand span{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; max-width: calc(100vw - 110px); }
  .nav{ gap:8px; flex-wrap:nowrap; justify-content:flex-end; flex:0 0 auto; }
  .header .nav > *:not(#btnMenu){ display:none !important; }
  #btnMenu{ display:inline-flex !important; margin-left:0; width:36px; height:36px; padding:0; align-items:center; justify-content:center; }
  /* Explicitly hide header CTAs by id in case of cache */
  #btnLogin, #btnAccount, #btnStart{ display:none !important; }
  .btn{ padding:10px 12px; font-size:14px; border-radius:12px; }
  .btn.btn-primary{ font-weight:700; }

  /* Hero */
  .hero{ padding:28px 0 20px; gap:18px; grid-template-columns:1fr !important; }
  .hero__content h1{ font-size:28px; line-height:1.2; }
  .hero__content p{ font-size:15px; }
  .hero__cta{ flex-direction:column; gap:12px; }
  .hero__cta .btn{ width:100%; }
  .hero__visual{ display:none; }
  .marquee{ display:none; }
  /* Move demo text slightly away from right/bottom edges */
  .demo-card{ max-width:100%; min-height:140px !important; }
  .demo-text{ font-size:14px; }
  .demo-card .demo-text{ padding-right: 32px !important; padding-bottom: 6px; }

  /* Realtime grid to single column */
  .grid-rt{ grid-template-columns: 1fr !important; gap:14px !important; padding-left:0; padding-right:0; }
  /* Realtime top card content compaction */
  .grid-rt .card{ padding:8px !important; }
  .grid-rt .card h3{ font-size:15px; margin:0 0 6px; }
  .grid-rt .card p{ font-size:12px; }
  .grid-rt .card .row{ margin:6px 0 !important; gap:8px !important; }
  /* Realtime cards: flush to both sides on mobile */
  .grid-rt .card, .grid-rt .demo-card{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #btnStartTalk, #btnStopTalk, #btnToggleMic, #btnReplay{ padding:10px 12px !important; font-size:14px !important; }
  main.container h1{ font-size:24px; line-height:1.25; }

  /* Place demo text to bottom-center on mobile */
  .demo-card{ position: relative; }
  .demo-card .demo-text{ position: absolute !important; bottom: 10px; left: 50%; transform: translateX(-50%); padding-right: 0 !important; width: 100%; text-align: center; z-index: 2; color: var(--text); }

  /* Grids to single column */
  .grid-3{ grid-template-columns:1fr; }
  .grid{ gap:16px; }

  /* Homepage stats: 2 columns on mobile (override inline style) */
  .stats .grid{ grid-template-columns: 1fr 1fr !important; gap:10px !important; }
  .stat{ width:100%; box-sizing:border-box; }

  /* Pricing grid: 1 column on mobile (override inline style) */
  .pricing .grid{ grid-template-columns: 1fr !important; gap:12px !important; }
  .price-card{ width:100%; box-sizing:border-box; }

  .insight{ padding:20px 0 16px; }
  .insight__panel{ padding:28px 24px; }
  .insight__headline{ font-size:24px; }
  .insight__subtitle{ font-size:15px; }
  .insight__glow{ width:240px; height:240px; right:-90px; top:-120px; }

  .benefits{ padding:16px 24px; }
  .benefits__header{ margin-bottom:24px; }
  .benefits__header h2{ font-size:24px; }
  .benefits__header p{ font-size:14px; }
  .benefits__grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .benefit-card{ padding:20px 18px; }
  .benefit-card__icon{ width:38px; height:38px; border-radius:10px; margin-bottom:12px; }
  .benefit-card h3{ font-size:18px; }
  .benefit-card p{ font-size:14px; }

  /* Cards tighter padding and full width */
  .card{ padding:14px; border-radius:12px; width:100%; max-width:100%; box-sizing:border-box; }
  .demo-card{ width:100%; max-width:100%; box-sizing:border-box; }
  /* Realtime top cards override inline paddings */
  .grid-rt .card{ padding:14px !important; }

  /* Section headings extra top padding on mobile */
  .features h2,
  .pricing h2,
  .timeline h2,
  .testimonials h2{ padding-top: 12px; }

  /* Pricing scale */
  .price-value{ font-size:24px; }
  .price-features li{ margin:4px 0; }
  .price-card .btn{ width:100%; }

  /* Stats */
  .stat__value{ font-size:24px; }
  .stat__label{ font-size:13px; }

  /* Pills & rows on realtime */
  .row{ gap:12px; }
  .pill{ font-size:11px; padding:3px 6px; }

  /* Footer to column */
  .footer{ flex-direction:column; gap:16px; align-items:flex-start; }
  .footer-topbar{ grid-template-columns: 1fr; gap:10px; padding:12px 0; }
  .footer-main{ flex-direction:column; gap:14px; }
  .footer .links{ grid-template-columns: 1fr; gap:10px; }
  /* Ensure full-width and wrapping on very small screens */
  .footer-topbar{ width:100% !important; }
  .footer .links .col{ min-width:0; }
  .footer .links .col a{ overflow-wrap:anywhere; word-break:break-word; }
  /* Disable animations/transitions on mobile to prevent jank */
  body::before,
  body::after,
  .demo-wave,
  .price-card.featured,
  .pulse,
  .slide.active,
  #mobileMenu{
    animation: none !important;
  }
  [data-reveal]{ transition: none !important; transform: none !important; opacity: 1 !important; }
  /* Disable marquee animation for users who prefer reduced motion */
  .marquee__track{ animation: none !important; }
}

/* Ultra-small phones (<390px) */
@media (max-width: 390px){
  .hero__content h1{ font-size:24px; }
  .btn{ padding:9px 11px; font-size:13px; }
  .price-value{ font-size:22px; }
  /* Extra right padding for demo text on very small screens */
  .demo-card .demo-text{ padding-right: 40px !important; }
}

/* Ultra-narrow landscape phones (<=380px) */
@media (max-width: 380px){
  /* Tighten realtime layout further */

  .grid-rt .card{ padding:8px !important; }
  .grid-rt .card h3{ font-size:14px; }
  .grid-rt .card p{ font-size:12px; }
  .grid-rt .card .row{ gap:6px !important; }
  .grid-rt .card, .grid-rt .demo-card{
    width:100% !important;
    max-width:520px !important;
  }
  /* Bottom-center on ultra-narrow as well */
  .demo-card .demo-text{ left: 50%; transform: translateX(-50%); padding-right: 0 !important; width: 100%; text-align: center; z-index: 1; }
  #btnStartTalk, #btnStopTalk, #btnToggleMic, #btnReplay{ padding:8px 10px !important; font-size:13px !important; }
  .pill{ font-size:10px; padding:2px 6px; }
}

/* Micro-interactions */
.btn:active{ transform: translateY(0); filter: brightness(0.98); }
.btn:focus{ outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,.35); }

input, select, textarea{ background:#FFFFFF; border:1px solid #E5E7EB; color:var(--text); border-radius:10px; }
input, select{ padding:10px 12px; }
textarea{ padding:10px 12px; }
input::placeholder, textarea::placeholder{ color:#6B7280; }
input:focus, select:focus, textarea:focus{ outline:none; box-shadow: 0 0 0 2px rgba(37,99,235,.35); border-color: var(--brand); }

/* Auth Modal */
#authModal{ backdrop-filter: blur(8px); background: radial-gradient(60% 40% at 20% 20%, rgba(124,58,237,.18), transparent 60%), radial-gradient(40% 30% at 80% 20%, rgba(0,209,255,.15), transparent 60%), rgba(0,0,0,.45); animation: authFade .18s ease-out; }
@keyframes authFade{ from{ opacity:0 } to{ opacity:1 } }
#authModal .card{ background: linear-gradient(180deg, rgba(14,20,48,.92), rgba(14,20,48,.86)); border: 1px solid rgba(124,58,237,.35); border-radius: 16px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.40), 0 0 0 1px rgba(0,0,0,.25) inset; }
#authModal h3{ margin: 0; letter-spacing:.2px; }
#authClose{ color: var(--muted); }
#authClose:hover{ color: var(--text); }

/* Auth tabs */
#authModal .btn-tab{ background:#0f1533; color:#e5e7eb; border:1px solid #243055; border-radius: 10px; padding:8px 12px; font-weight:600; }
#authModal .btn-tab.active{ background:#eef2ff; color:#0e1430; border-color:#eef2ff; box-shadow: 0 6px 16px rgba(124,58,237,.28); }
#authModal .btn-tab:not(.active):hover{ background:#141a34; }

/* Auth inputs */
#authModal input{ width:100%; padding:12px 14px; border-radius: 12px; border:1px solid #243055; background:#0b1022; color:#E5E7EB; caret-color:#E5E7EB; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
#authModal input::placeholder{ color:#9CA3AF; }
#authModal input:focus{ border-color:#5b21b6; box-shadow: 0 0 0 2px rgba(124,58,237,.40); }

/* Auth rows */
#authModal .row{ align-items:center; }
#authModal .stack{ gap:12px; }
#authModal .form-actions{ margin-top:10px; }

/* Auth primary button full width on mobile */
@media (max-width: 520px){
  #authModal .btn-primary{ width:100%; }
}

/* Tabs bar + sliding indicator */
#authModal .tabbar{ position:relative; display:flex; gap:10px; align-items:center; }
#authModal .tabbar .tab-indicator{ position:absolute; bottom:-2px; height:3px; background:linear-gradient(90deg, var(--brand), var(--neon)); border-radius:999px; transition: transform .2s ease, width .2s ease; will-change:transform,width; }

/* Input icon wrapper */
#authModal .input-icon{ position:relative; }
#authModal .input-icon .icon{ position:absolute; left:12px; top:50%; transform: translateY(-50%); width:18px; height:18px; color:#8da0c6; opacity:.9; pointer-events:none; display:block; }
#authModal svg.icon{ width:18px !important; height:18px !important; display:block; }
#authModal .input-icon input{ padding-left:40px; }

/* Ensure inputs expand properly inside modal */
#authModal form input{ width:100% !important; box-sizing:border-box; }

/* Alerts */
.alert{ padding:10px 12px; border-radius:10px; border:1px solid transparent; font-size:14px; }
.alert-success{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.35); color:#166534; }
.alert-error{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.35); color:#B91C1C; }
.step-message{ margin-bottom:18px; }
.alert-info{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.35); color:#1D4ED8; }

/* Streak toast */
.toast{ position: fixed; top: 20px; left:50%; transform: translateX(-50%); background: #FFFFFF; border:1px solid #E5E7EB; color:var(--text); padding:12px 14px; border-radius:12px; box-shadow: 0 10px 30px rgba(17,24,39,.10); z-index:60; display:none; }
.toast.show{ display:block; animation: fadeIn .2s ease-out; }

/* ===== Homepage Enhancements ===== */
/* Marquee (light) */
.marquee{
  overflow: hidden;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  padding: 12px 0;
  margin-bottom: 12px;
  background: #FFFFFF;
  position: relative;
}
.marquee__inner{
  display: flex;
  width: auto;
  justify-content: flex-start; /* override previous center */
  gap: 40px;
  /* Fade edges for nicer look */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee__track{
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  white-space: nowrap;
  color: #374151;
  font-weight: 600;
  letter-spacing: .2px;
  padding-right: 40px;
  will-change: transform;
  animation: marqueeSlide 28s linear infinite;
}
.marquee__track:nth-child(2){ animation-delay: -14s; }
.marquee .marquee__track[aria-hidden="true"]{ display:flex; }
.marquee__track span{
  opacity: .95;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  padding: 6px 10px;
  border-radius: 999px;
}
/* Pause marquee on hover for readability */
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marqueeSlide{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}

/* Logos band */
.logos__row{ display:flex; gap:28px; align-items:center; justify-content:center; opacity:.85; padding:18px 0; }
.logos__row img{ width:32px; height:32px; filter: grayscale(100%) contrast(110%); opacity:.7; }

/* Stats */
.stats{ padding: 10px 0 4px; }
.stat{ text-align:center; min-height:72px; }
.stat__value{ font-size:28px; font-weight:800; background: linear-gradient(135deg, var(--neon), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label{ color: var(--muted); font-size:14px; }

/* Timeline */
.timeline{ padding: 24px 0; }
.timeline h2{ margin-bottom: 12px; }
.timeline__list{ list-style:none; margin:0; padding:0; position:relative; }
.timeline__list li{ display:grid; grid-template-columns: 22px 1fr; gap:12px; align-items:start; padding:10px 0; }
.timeline .dot{ width:12px; height:12px; border-radius:999px; background:linear-gradient(135deg, var(--brand), var(--neon)); box-shadow: 0 0 0 3px rgba(124,58,237,.18); margin-top:6px; }
.timeline .tl__content h4{ margin:0 0 4px; }
.timeline .tl__content p{ margin:0; }

/* Testimonials slider */
.testimonials{ padding: 10px 0 28px; }
.testimonials h2{ margin:0 0 14px; }
.slider{ position:relative; overflow:hidden; }
.slide{ display:none; }
.slide.active{ display:block; animation: fadeIn .3s ease-out; }
.slider__dots{ display:flex; gap:8px; justify-content:center; margin-top:10px; }
.slider__dots .dot{ width:8px; height:8px; border-radius:999px; background:#26335c; border:1px solid #3a4a7a; cursor:pointer; transition: background .2s ease; }
.slider__dots .dot.active{ background: linear-gradient(135deg, var(--brand), var(--neon)); border-color: transparent; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform: translateY(0); } }

/* Mobile menu small fade */
#mobileMenu{ animation: mmFade .18s ease-out; }
@keyframes mmFade{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform: translateY(0); } }

/* Daily challenge card */
.challenge-card{ background:#FFFFFF; border:1px solid #E5E7EB; }

.challenge-card h2{ letter-spacing:.2px; }

/* Reduce motion for users who prefer less animation */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
  body::before,
  body::after,
  .demo-wave,
  .price-card.featured,
  .pulse,
  .slide.active,
  #mobileMenu{
    animation: none !important;
  }
  .demo-wave{ animation: none !important; }
  [data-reveal]{ transition: none !important; transform: none !important; opacity: 1 !important; }
  /* Disable marquee animation for users who prefer reduced motion */
  .marquee__track{ animation: none !important; }
}