:root {
  --bg: #0b1020;
  --bg2: #121933;
  --card: #161e3c;
  --card2: #1b2547;
  --ink: #eaf0ff;
  --muted: #93a0c8;
  --line: #263057;
  --brand: #ff7a18;
  --brand2: #ffb347;
  --accent: #4f9dff;
  --good: #34d399;
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(1200px 600px at 80% -10%, #1c2a5e 0%, transparent 60%),
              radial-gradient(900px 500px at -10% 20%, #2a1c46 0%, transparent 55%),
              var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  max-width: 1180px;
  margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; }
.brand-mark { font-size: 22px; }
.brand-name { letter-spacing: .2px; }
.live-badge {
  font-size: 13px; font-weight: 600; color: var(--good);
  background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3);
  padding: 6px 12px; border-radius: 999px;
}

/* ---- hero ---- */
.hero {
  max-width: 1180px;
  margin: 10px auto 0;
  padding: 24px 28px 40px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: start;
}
.hero-copy h1 {
  font-size: 50px; line-height: 1.04; margin: 8px 0 16px; font-weight: 800; letter-spacing: -1px;
}
.grad {
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: 19px; color: #c7d2f0; line-height: 1.5; max-width: 540px; margin: 0 0 22px; }
.lede strong { color: #fff; }

.features {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; max-width: 560px;
}
.features li {
  position: relative; padding-left: 28px; font-size: 15px; color: #d7def6; line-height: 1.35;
}
.features li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--good); font-weight: 800;
  background: rgba(52,211,153,.12); border-radius: 50%;
  width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px;
}

/* ---- call button ---- */
.cta { display: flex; flex-direction: column; gap: 14px; }
.call-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color: #16110a; font-weight: 800; font-size: 18px;
  border: none; border-radius: 999px; padding: 16px 28px;
  cursor: pointer; width: fit-content;
  box-shadow: 0 12px 34px rgba(255,122,24,.35);
  transition: transform .12s ease, box-shadow .2s ease;
}
.call-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(255,122,24,.45); }
.call-btn:disabled { opacity: .7; cursor: wait; }
.call-btn.calling {
  background: linear-gradient(90deg, #ff4d4d, #ff7a7a); color: #fff;
  box-shadow: 0 12px 34px rgba(255,77,77,.4);
}

.orb {
  width: 16px; height: 16px; border-radius: 50%; background: #16110a;
  box-shadow: 0 0 0 0 rgba(0,0,0,.0);
}
.orb--connecting { background: #16110a; animation: blink 1s infinite; }
.orb--listening { background: #16110a; animation: ripple 1.4s infinite; }
.orb--speaking { background: #16110a; animation: ripple 0.7s infinite; }
.orb--error { background: #7a1616; }
.calling .orb { background: #fff; }
.calling .orb--listening { animation: rippleLight 1.4s infinite; }
.calling .orb--speaking { animation: rippleLight 0.7s infinite; }

@keyframes blink { 50% { opacity: .35; } }
@keyframes ripple {
  0% { box-shadow: 0 0 0 0 rgba(22,17,10,.5); }
  100% { box-shadow: 0 0 0 14px rgba(22,17,10,0); }
}
@keyframes rippleLight {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
}

.status { font-size: 15px; color: var(--muted); min-height: 20px; }
.mic-note { font-size: 13px; color: #7b88ad; margin: 18px 0 0; }

/* ---- panel ---- */
.panel {
  background: linear-gradient(180deg, rgba(27,37,71,.7), rgba(22,30,60,.7));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; backdrop-filter: blur(6px);
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.panel-head h2 { font-size: 15px; margin: 0; text-transform: uppercase; letter-spacing: 1px; color: #aab6dc; }
.panel-sub { font-size: 12px; color: var(--muted); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.card.filled { border-color: rgba(52,211,153,.45); }
.card-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.card-empty { color: var(--muted); font-size: 13px; font-style: italic; }
.card-body .kv {
  display: grid; grid-template-columns: 116px 1fr; gap: 8px;
  padding: 4px 0; font-size: 14px; border-top: 1px dashed rgba(255,255,255,.06);
}
.card-body .kv:first-child { border-top: none; }
.kv .k { color: var(--muted); }
.kv .v { color: #fff; font-weight: 600; word-break: break-word; }

.pulse { animation: cardpulse .7s ease; }
@keyframes cardpulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,.45); }
  100% { box-shadow: 0 0 0 12px rgba(52,211,153,0); }
}

.transcript-wrap { margin-top: 18px; }
.transcript {
  height: 200px; overflow-y: auto;
  background: rgba(8,12,26,.6); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.line { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; }
.line .who { color: var(--muted); font-size: 12px; font-weight: 600; padding-top: 1px; }
.line--caller .txt { color: #fff; }
.line--ai .txt { color: #bfe0ff; }
.line--ai .who { color: var(--accent); }
.line--system { grid-template-columns: 1fr; }
.line--system .txt { color: var(--muted); font-style: italic; font-size: 13px; }
.line--system .who { display: none; }

/* ---- strip ---- */
.strip {
  max-width: 1180px; margin: 8px auto; padding: 14px 28px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.strip-item {
  background: rgba(22,30,60,.5); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; text-align: center;
}
.strip-item b { display: block; font-size: 20px; color: #fff; margin-bottom: 4px; }
.strip-item span { font-size: 13px; color: var(--muted); }

/* ---- footer ---- */
.foot { max-width: 820px; margin: 18px auto 50px; padding: 0 28px; text-align: center; }
.foot p { color: #c0cbeb; font-size: 15px; line-height: 1.6; }
.foot-small { color: var(--muted) !important; font-size: 13px !important; margin-top: 8px; }

/* ---- responsive ---- */
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 38px; }
  .features { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .hero-copy h1 { font-size: 32px; }
  .strip { grid-template-columns: 1fr; }
}