:root {
  color-scheme: light;
  --surface: #fff;
  --surface-soft: #edf3f7;
  --surface-inset: #f3f6f8;
  --surface-selected: #e4eef6;
  --warm-surface: #f7f3ea;
  --warm-inset: #f0e8d8;
  --warm-line: #e7dcc5;
  --warm-note: #f3eee4;
  --warm-ink: #987539;
  --primary-fill: #13385c;
  --primary-hover: #1d5a8f;
  --primary-text: #fff;
  --positive-fill: #e5f2eb;
  --positive-ink: #32745c;
  --hero-glow: #dbe8f4;
  --hero-warm-glow: #eee5d5;
  --preview-fill: #eef3f7;
  --preview-glow: #d3e1ec;
  --floating-fill: #fffffff5;
  --orbit-line: #cad9e780;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e0ebf6;
  --muted: #aabccf;
  --blue: #91bfe7;
  --line: #2b4055;
  --paper: #0c1723;
  --white: #142334;
  --surface: #142334;
  --surface-soft: #172b3e;
  --surface-inset: #1c3044;
  --surface-selected: #244764;
  --warm-surface: #292821;
  --warm-inset: #3a3528;
  --warm-line: #534a37;
  --warm-note: #28271f;
  --warm-ink: #dfc38d;
  --primary-fill: #b3d5f1;
  --primary-hover: #d0e7fa;
  --primary-text: #102c43;
  --positive-fill: #193b35;
  --positive-ink: #8cdbb6;
  --hero-glow: #193951;
  --hero-warm-glow: #302c25;
  --preview-fill: #102030;
  --preview-glow: #24415a;
  --floating-fill: #172b3ef5;
  --orbit-line: #304b6280;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  vertical-align: middle;
  pointer-events: none;
}
.feature-icon, .success-icon, .play, .telegram-icon, .bale-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  padding: 0;
}
.feature-icon > .icon { width: 23px; height: 23px; }
.feature-icon { background: var(--surface-soft); border-color: var(--line); }
.button > span, .preview-label > span, .phone-top > span:last-child,
.checkout-flow b, .preview-tabs b, .filter-demo b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}
.button .icon { width: 18px; height: 18px; }
.hero-notes { flex-wrap: wrap; }
.hero-notes > span, .checkout-flow > span { display: inline-flex; align-items: center; gap: 5px; }
.hero-notes .icon, .checkout-flow .icon { width: 14px; height: 14px; }
.play .icon { width: 15px; height: 15px; }
.spark { display: inline-flex; align-items: center; }
.spark .icon { width: 42px; height: 42px; }
.speed-art .icon { width: 54px; height: 54px; }
.phone-top { color: #13385c; }
.phone-top .icon { width: 12px; height: 12px; }
.phone-top > span:last-child { gap: 3px; }
.phone-screen {
  position: relative;
  aspect-ratio: 480 / 690;
  overflow: hidden;
  isolation: isolate;
}
.phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.phone-screen-dark {
  position: absolute;
  inset: 0;
  background: #090a0e;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.22, 1, .36, 1);
}
[data-theme="dark"] .phone-screen-dark { opacity: 1; }
.phone-screen .phone-screen-dark {
  object-fit: cover;
  object-position: center top;
}
.telegram-icon, .bale-icon {
  transform: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.telegram-icon img, .bale-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 5px;
  background: #fff;
  border: 1px solid #e1e8f0;
  border-radius: 13px;
  line-height: 0;
}
.brand-mark img { display: block; }
.success-icon { background: var(--positive-fill); color: var(--positive-ink); }
.questions summary:after, .questions details[open] summary:after { content: none; }
.questions summary { min-height: 44px; }
.disclosure-icon { margin-inline-start: auto; color: var(--blue); transition: transform 180ms ease; }
.questions details[open] .disclosure-icon { transform: rotate(45deg); }
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: var(--blue); }
.theme-icons { display: grid; place-items: center; width: 26px; height: 26px; overflow: hidden; }
.theme-icons .icon {
  grid-area: 1 / 1;
  width: 22px;
  height: 22px;
  transition: transform 340ms cubic-bezier(.22,1,.36,1), opacity 180ms ease;
}
.theme-moon { opacity: 0; transform: translateY(19px) rotate(-70deg) scale(.65); }
[data-theme="dark"] .theme-sun { opacity: 0; transform: translateY(-19px) rotate(70deg) scale(.65); }
[data-theme="dark"] .theme-moon { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
.skip-link, .feature, .tag, .network-node, .preview-tabs button.active { background: var(--surface); }
.connection img.network-node {
  background: #fff;
  border: 1px solid #e1e8f0;
  object-fit: contain;
}
.tag, .preview-tabs button.active { border-color: var(--line); }
.connect-card { background: var(--surface-soft); }
.button { background: var(--primary-fill); color: var(--primary-text); min-height: 44px; transition: transform 180ms ease; }
.button:hover { background: var(--primary-hover); }
.hero-visual { background: radial-gradient(ellipse at 35% 50%,var(--hero-glow),transparent 64%),radial-gradient(ellipse at 80% 60%,var(--hero-warm-glow),transparent 57%); }
.orbit { border-color: var(--orbit-line); max-width: 100%; }
.floating { background: var(--floating-fill); border-color: var(--line); backdrop-filter: none; }
.compatibility strong { color: var(--muted); }
.filter-demo > span, .filter-demo i, .checkout-flow span { background: var(--surface-inset); }
.filter-demo i:first-child { background: var(--surface-selected); }
.brand-card { background: var(--warm-surface); }
.brand-card .feature-icon { background: var(--warm-inset); border-color: var(--warm-line); }
.preview-section { background: var(--preview-fill); border-color: var(--line); }
.preview-stage { background: radial-gradient(ellipse,var(--preview-glow),transparent 68%); }
.step-number { background: var(--surface-soft); border-color: var(--line); }
.speed-note { background: var(--warm-note); border-color: var(--warm-line); }
.speed-art { color: var(--warm-ink); }
.final-cta { background: #13385c; border: 1px solid #315473; }
.beam { animation: none; background: linear-gradient(90deg,var(--line),var(--blue),var(--line)); }
.woo { color: #7850a2; }
[data-theme="dark"] .woo { color: #c4a6ed; }
.header nav a, .footer > a:last-child, .text-link { min-height: 44px; display: inline-flex; align-items: center; }
.hero > *, .preview-grid > *, .bento > *, .faq > *, .steps > * { min-width: 0; }
.actions { flex-wrap: wrap; }
.checkout-flow { flex-wrap: wrap; }
.filter-demo > div { flex-wrap: wrap; }

@media (max-width: 1100px) {
  .header { gap: 14px; }
  .header nav { gap: 14px; font-size: 12px; }
  .header-actions { gap: 9px; }
}
@media (min-width: 801px) and (max-width: 960px) {
  .header .brand-sub { display: none; }
  .header .brand { font-size: 19px; }
  .header nav { gap: 10px; font-size: 11px; }
  .header .button.small { padding-inline: 12px; gap: 8px; }
  .hero h1 { font-size: 54px; }
  .hero-visual { transform: none; }
  .phone { width: 260px; }
  .sync-float { right: 0; }
  .platform-float { left: 0; }
  .floating { gap: 8px; padding: 12px; }
  .floating strong { font-size: 10px; }
  .floating div > span { font-size: 9px; }
}
@media (max-width: 540px) {
  .header { min-height: 85px; height: auto; padding-block: 15px; flex-wrap: wrap; }
  .header-actions { gap: 8px; }
  .header .brand-sub { display: none; }
  .header .brand { font-size: 18px; }
  .header .brand img { width: 32px; }
  .theme-toggle { width: 44px; height: 44px; border-radius: 13px; }
  .header .button.small { padding-inline: 10px; gap: 8px; }
  .header .button .icon { width: 14px; height: 14px; }
  .spark .icon { width: 32px; height: 32px; }
  .hero h1 { font-size: clamp(38px,10.5vw,47px); }
  .hero-visual { max-width: 100%; }
  .bale-float { max-width: calc(100% - 16px); }
  .floating { max-width: 100%; }
  .preview-stage > img { max-width: 100%; }
  .connection { gap: 0; }
  .network-node { width: 55px; height: 55px; }
  .beam { flex: 0 1 28px; min-width: 8px; }
  .checkout-flow span { white-space: normal; }
}
@media (max-width: 359px) {
  .header { gap: 8px; }
  .header .brand { font-size: 16px; gap: 4px; }
  .header .brand img { width: 28px; }
  .header .button.small { font-size: 9px; padding-inline: 8px; gap: 5px; }
  .header-actions { gap: 6px; }
  .speed-note { padding: 16px; gap: 12px; }
  .feature { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-icons .icon, .disclosure-icon, .button, .phone-screen-dark { transition: none; }
}

/* Reach section: the tinted card and its dashed connector need their own dark
   values -- the light ones are chosen against a white ground. */
:root[data-theme="dark"] {
  --reach-line: #2f4a63;
  --reach-accent-line: #3f6a95;
}