:root {
  --bg: #F1F1FE; --card: #FFFFFF; --ink: #1C1D3F; --muted: #5E6088; --chip: #ECECFD;
  --accent: #666AF1; --on-accent: #FFFFFF; --frame: #1C1D3F; --ok: #1F9D6B;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111227; --card: #1B1C3A; --ink: #EEEEFF; --muted: #A3A5CE; --chip: #27294F; --frame: #2E3060; --ok: #4CD6A0; }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: 32px;
  padding: max(20px, env(safe-area-inset-top)) clamp(20px, 5vw, 56px) max(20px, env(safe-area-inset-bottom));
  background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.5;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; }
.logo { display: block; width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 8px 22px rgba(102,106,241,.28); }
main { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 7vw, 96px); align-items: center; max-width: 1080px; width: 100%; margin: 0 auto; }
.badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--chip); color: var(--accent); font-weight: 700; font-size: .9rem; margin-bottom: 20px; }
h1 { margin: 0 0 20px; font-weight: 800; font-size: clamp(2.6rem, 7vw, 4.75rem); line-height: 1.02; letter-spacing: -0.04em; }
.lead { margin: 0 0 32px; max-width: 34ch; font-size: 1.125rem; color: var(--muted); }
.btn { display: inline-block; padding: 16px 32px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1.0625rem; text-decoration: none; transition: transform .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.phone { width: 300px; padding: 10px; border-radius: 44px; background: var(--frame); box-shadow: 0 24px 60px rgba(102,106,241,.28); justify-self: center; }
.screen { background: var(--card); border-radius: 34px; padding: 28px 20px 22px; }
.screen h2 { margin: 0 0 4px; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.screen small { display: block; margin-bottom: 18px; color: var(--muted); font-size: .85rem; }
.days { display: flex; gap: 8px; margin-bottom: 16px; }
.days span { flex: 1; text-align: center; padding: 8px 0; border-radius: 12px; background: var(--chip); font-size: .8rem; font-weight: 700; }
.days .on { background: var(--ink); color: var(--card); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.slot { padding: 11px 0; border-radius: 14px; background: var(--chip); text-align: center; font-weight: 700; font-size: .9rem; opacity: 0; animation: in .45s ease-out forwards; animation-delay: var(--d); }
.slot.sel { animation: in .45s ease-out forwards, pick .3s ease-out forwards; animation-delay: var(--d), 1.7s; }
.go { display: grid; border-radius: 16px; background: var(--accent); color: var(--on-accent); font-weight: 800; text-align: center; }
.go span { grid-area: 1 / 1; padding: 14px 0; }
.go .a { animation: out .25s ease forwards 2.3s; }
.go .b { opacity: 0; animation: in .35s ease-out forwards 2.4s; }
@keyframes in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes pick { to { background: var(--accent); color: var(--on-accent); } }
@keyframes out { to { opacity: 0; } }

footer { font-size: .875rem; color: var(--muted); max-width: 1080px; width: 100%; margin: 0 auto; }
@media (max-width: 760px) { main { grid-template-columns: 1fr; } .phone { justify-self: start; } }
@media (prefers-reduced-motion: reduce) {
  .slot, .slot.sel, .go .b { animation: none; opacity: 1; }
  .slot.sel { background: var(--accent); color: var(--on-accent); }
  .go .a { animation: none; opacity: 0; }
}