/* ===========================================================
   Bharat Voice — design tokens
   Palette: night-indigo base, marigold + peacock-teal accents —
   evokes miniature-painting skies and festival colour rather
   than the generic cream/terracotta AI look.
=========================================================== */
:root {
  --ink-900: #14142c;
  --ink-800: #1b1b3a;
  --ink-700: #24244a;
  --ink-600: #32335f;
  --marigold: #f2a93b;
  --marigold-deep: #d98a1c;
  --peacock: #2aa7a0;
  --peacock-light: #5fd3cb;
  --paper: #f5efe6;
  --paper-dim: #cfc9ba;
  --alert: #e4572e;

  --font-display: "Baloo 2", "Noto Sans Devanagari", sans-serif;
  --font-body: "Manrope", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali",
    "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam",
    "Noto Sans Gujarati", "Noto Sans Gurmukhi", "Noto Sans Oriya", "Noto Nastaliq Urdu",
    sans-serif;

  --radius: 18px;
  --wrap: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-800);
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- ambient backdrop ---------- */
.glyph-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 8%, rgba(242, 169, 59, 0.10), transparent 40%),
    radial-gradient(circle at 88% 20%, rgba(42, 167, 160, 0.14), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(242, 169, 59, 0.06), transparent 50%),
    var(--ink-800);
}

/* ---------- header ---------- */
.site-header { padding: 28px 0 8px; }
.header-inner { display: flex; flex-direction: column; gap: 6px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(145deg, var(--marigold), var(--marigold-deep));
  color: var(--ink-900); font-weight: 700; font-size: 17px;
}
.brand-word { font-size: 22px; font-weight: 600; color: var(--paper); }
.brand-word strong { color: var(--peacock-light); font-weight: 800; }
.tagline { margin: 0; color: var(--paper-dim); font-size: 14px; }

/* ---------- ad slots ---------- */
.ad-slot {
  margin: 18px auto;
  border: 1px dashed rgba(245, 239, 230, 0.25);
  border-radius: 12px;
  min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  color: var(--paper-dim); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ad-slot--banner { max-width: var(--wrap); }
.ad-slot--inline { max-width: var(--wrap); margin-left: 24px; margin-right: 24px; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: center;
  padding: 32px 0 48px;
}
.hero-ring { position: relative; width: 320px; height: 320px; justify-self: center; }
.ring-svg { width: 100%; height: 100%; }
.ring-track { fill: none; stroke: rgba(245, 239, 230, 0.12); stroke-width: 1.5; }
.ring-glyphs {
  font-family: var(--font-body);
  font-size: 26px;
  fill: var(--marigold);
  text-anchor: middle;
  animation: spin 48s linear infinite;
  transform-origin: 160px 160px;
}
.ring-glyphs text { fill: var(--marigold); }
.ring-glyphs text:nth-child(2n) { fill: var(--peacock-light); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring-glyphs { animation: none; } }

.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 2px;
}
.ring-center__eyebrow { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); }
.ring-center__word { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--paper); }
.ring-center__sub { font-size: 13px; color: var(--peacock-light); }

.hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  margin: 0 0 14px;
  font-weight: 700;
}
.hero-copy p { color: var(--paper-dim); font-size: 16px; max-width: 52ch; margin: 0 0 18px; }
.hero-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.hero-badges li {
  background: var(--ink-700); border: 1px solid var(--ink-600);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--peacock-light);
}

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 16px; }
  .hero-ring { width: 220px; height: 220px; }
  .ring-svg { width: 220px; height: 220px; }
  .hero-badges { justify-content: center; }
  .hero-copy p { margin-left: auto; margin-right: auto; }
}

/* ---------- tool card ---------- */
.tool-card {
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 20px 60px rgba(10, 10, 24, 0.35);
}
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { .tool-grid { grid-template-columns: 1fr; } }

.field-label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--peacock-light); text-transform: uppercase; letter-spacing: 0.05em;
  margin: 18px 0 8px;
}
.tool-col > .field-label:first-child { margin-top: 0; }

.select, .textarea {
  width: 100%;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  color: var(--paper);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s ease;
}
.select:focus, .textarea:focus, .slider:focus-visible {
  border-color: var(--marigold);
  box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.25);
}
.textarea { resize: vertical; min-height: 160px; }

.counter { font-size: 12px; color: var(--paper-dim); margin-top: 6px; text-align: right; }

.gender-toggle { display: flex; gap: 8px; margin-bottom: 10px; }
.gender-btn {
  flex: 1; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--ink-600); background: var(--ink-800); color: var(--paper-dim);
  font-family: var(--font-body); font-weight: 700; font-size: 14px; cursor: pointer;
  transition: all 0.15s ease;
}
.gender-btn.is-active { background: var(--marigold); border-color: var(--marigold); color: var(--ink-900); }

.voice-status { font-size: 12px; color: var(--paper-dim); margin: 8px 0 0; min-height: 16px; }

.slider {
  width: 100%; accent-color: var(--peacock);
  background: transparent;
}

.cta-btn {
  margin-top: 26px; width: 100%;
  background: linear-gradient(120deg, var(--marigold), var(--marigold-deep));
  color: var(--ink-900);
  border: none; border-radius: 14px;
  padding: 16px 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.cta-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(242, 169, 59, 0.25); }
.cta-btn:disabled { opacity: 0.65; cursor: progress; transform: none; }

.cta-btn__spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid rgba(20, 20, 44, 0.25); border-top-color: var(--ink-900);
  animation: spin-loader 0.7s linear infinite;
}
@keyframes spin-loader { to { transform: rotate(360deg); } }

.error-msg {
  margin-top: 16px; padding: 12px 16px; border-radius: 10px;
  background: rgba(228, 87, 46, 0.15); border: 1px solid rgba(228, 87, 46, 0.4);
  color: #ffb59c; font-size: 14px;
}

.capability-banner {
  margin: 8px 0 24px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(228, 87, 46, 0.14);
  border: 1px solid rgba(228, 87, 46, 0.4);
  font-size: 14px;
  line-height: 1.6;
}
.capability-banner strong { color: #ffb59c; }
.capability-banner code {
  background: rgba(0,0,0,0.25); padding: 1px 6px; border-radius: 6px; font-size: 13px;
}
.capability-banner ul { margin: 8px 0 0; padding-left: 20px; }

.result { margin-top: 30px; border-top: 1px solid var(--ink-600); padding-top: 22px; }
.result h2 {
  font-family: var(--font-display); font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--paper-dim); margin: 0 0 10px;
}
.result h2:not(:first-child) { margin-top: 22px; }
.translated-text {
  background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: 12px;
  padding: 16px; font-size: 17px; line-height: 1.7; margin: 0;
}
audio { width: 100%; margin-top: 4px; }
.download-link {
  display: inline-block; margin-top: 12px; color: var(--peacock-light);
  font-weight: 700; text-decoration: none; font-size: 14px;
}
.download-link:hover { text-decoration: underline; }

/* ---------- language strip ---------- */
.languages-strip { padding: 44px 0 30px; }
.languages-strip h2 {
  font-family: var(--font-display); font-size: 20px; margin: 0 0 16px; text-align: center;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  background: var(--ink-700); border: 1px solid var(--ink-600);
  border-radius: 999px; padding: 8px 16px; font-size: 14px; color: var(--paper);
}
.chip span { color: var(--paper-dim); font-size: 12px; margin-left: 6px; }

/* ---------- footer ---------- */
.site-footer { padding: 30px 0 60px; border-top: 1px solid var(--ink-700); margin-top: 30px; }
.footer-inner { color: var(--paper-dim); font-size: 13px; text-align: center; }
.footer-note { margin-top: 6px; opacity: 0.75; }