:root {
  --ink: #071A36;
  --muted: #52677C;
  --cream: #F4FBFF;
  --paper: #FFFEFA;
  --orange: #FF784F;
  --yellow: #FFD45A;
  --mint: #70E1D1;
  --blue: #1769FF;
  --cyan: #20CFFF;
  --line: #CFE7EE;
  --radius: 24px;
}
body {
  background: linear-gradient(180deg, #F5FCFF 0, #FFFDF7 42%, #F5FBFF 100%);
  color: var(--ink);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 8%, #20CFFF20 0, transparent 25%),
    radial-gradient(circle at 92% 18%, #FFD45A30 0, transparent 22%),
    radial-gradient(circle at 82% 78%, #FF784F18 0, transparent 24%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .2;
  background-image: radial-gradient(#1769FF26 .65px, transparent .65px);
  background-size: 13px 13px;
}
.site-header { background: #F8FDFFDC; border-color: #BFE6EF; box-shadow: 0 10px 35px #1769FF0B; }
.site-header nav a { color: #071A36; }
.eyebrow, .demo-label, .footer-grid h2, .signal, h1, h2 { letter-spacing: 0; }
h1, h2 { color: #071A36; }
.lede, .section-intro, .fine, .faq details p { color: #52677C; }
.disabled { background: #EAF7FF; color: #52677C; }
.live i { background: #70E1D1; }
.mode-row .done { color: #167E72; }
.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute;
  left: -18vw;
  top: 10%;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  background: radial-gradient(circle, #20CFFF1E, transparent 68%);
  pointer-events: none;
}
.hero h1 { color: #071A36; text-shadow: 0 2px 0 #fff; }
.hero .eyebrow { color: #006FA9; }
.primary { background: linear-gradient(135deg, #0C44BD, #1769FF 58%, #00A9DE); box-shadow: 0 12px 30px #1769FF30; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px #1769FF3D; }
.practice-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #FFFFFF 0, #EFFBFF 48%, #FFF7DF 100%);
  border-color: #A9DFEA;
  box-shadow: 0 35px 80px #075EA526, 0 0 0 8px #FFFFFF75;
}
.practice-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, #20CFFF50, transparent 68%);
}
.note.active { color: #FF5F55; filter: drop-shadow(0 0 14px #FF784FA0); }
.mode-row .current { background: linear-gradient(135deg, #FF5F55, #FF9B4A); }
.mode-row .done { color: #008D78; }
.band { background: linear-gradient(135deg, #E8FBFF 0, #FFF9E8 54%, #F4FBFF 100%); border-color: #CCE9EE; }
.demo.band {
  position: relative;
  overflow: hidden;
  background: #071A36;
  color: #EFFBFF;
  border: 0;
}
.demo.band::before, .demo.band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}
.demo.band::before { width: 430px; height: 430px; left: -170px; top: -180px; background: #1769FF34; }
.demo.band::after { width: 360px; height: 360px; right: -120px; bottom: -150px; background: #FF784F2B; }
.demo.band .eyebrow { color: #70E1D1; }
.demo.band p { color: #C8D9E9; }
.demo-stage {
  background: radial-gradient(circle at 50% 45%, #0D4C91 0, #071A36 58%, #030A18 100%);
  border: 1px solid #20CFFF4A;
  box-shadow: inset 0 0 80px #20CFFF18, 0 25px 60px #00102A55;
}
.pulse { background: linear-gradient(145deg, #20CFFF, #1769FF 62%, #70E1D1); box-shadow: 0 0 35px #20CFFF90; }
.signal { color: #FFD45A; text-shadow: 0 0 14px #FFD45A; }
.grid article {
  border-color: #CFE7EE;
  box-shadow: 0 16px 44px #1769FF0D;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.grid article:hover { transform: translateY(-5px); border-color: #78CEE1; box-shadow: 0 24px 55px #1769FF18; }
.three article:nth-child(1) { background: linear-gradient(150deg, #fff 45%, #FFF2E9); }
.three article:nth-child(2) { background: linear-gradient(150deg, #fff 45%, #E9FBFF); }
.three article:nth-child(3) { background: linear-gradient(150deg, #fff 45%, #EFFFF8); }
.icon { background: linear-gradient(145deg, #E8FBFF, #FFF4CF); color: #0C66C8; box-shadow: inset 0 0 0 1px #BFE8EC; }
.steps li { border-color: #CFE7EE; box-shadow: 0 15px 38px #1769FF0C; }
.steps li:nth-child(1) > b { background: linear-gradient(145deg, #FF9A45, #FF5F55); }
.steps li:nth-child(2) > b { background: linear-gradient(145deg, #20CFFF, #1769FF); }
.steps li:nth-child(3) > b { background: linear-gradient(145deg, #70E1D1, #00A57C); }
.pricing article:nth-child(1) { background: linear-gradient(160deg, #fff, #EFFFF8); }
.pricing article:nth-child(2) { background: linear-gradient(160deg, #fff, #EAF7FF); }
.pricing article:nth-child(3) { background: linear-gradient(160deg, #fff, #FFF3E7); }
.featured { outline-color: #20AEE8; }
.notice { background: linear-gradient(90deg, #FFF7DC, #EFFCFF); border-left-color: #FFB72F; }
.beta.band { background: linear-gradient(135deg, #DFF9FF, #FFF7DA 50%, #FFECE5); }
form { border-color: #A9DFEA; box-shadow: 0 24px 60px #1769FF16; }
footer {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 15% 0, #0D4C91 0, #071A36 38%, #030B1D 100%);
  color: #EFFBFF;
}
footer::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid #20CFFF14;
  box-shadow: 0 0 80px #20CFFF0E;
  pointer-events: none;
}
.footer-grid p { color: #C1D3E5; }
.footer-grid a:hover { color: #70E1D1; }
@media (max-width: 900px) {
  .hero::before { width: 90vw; height: 90vw; }
  .grid article:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .primary, .grid article { transition: none; }
  .primary:hover, .grid article:hover { transform: none; }
}