/* Coformia — Stone + Persian */
:root {
  color-scheme: light;
  --page-max: 1200px;
  --bg: #FFFFF0;
  --bg2: #EDE6DC;
  --ink: #3F3A34;
  --soft: #6B6560;
  --line: #E6DFD6;
  --blue: #1C39BB;
  --link: #1C39BB;
  --blue-hover: #152E96;
  --tile-dark: #15204A;
  --on-dark: #FFFFF0;
  --on-dark-soft: #C9C4B8;
  --dark: var(--tile-dark);
  --radius: 12px;
  --radius-lg: 12px;
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --glass-fill: color-mix(in srgb, var(--blue) 38%, transparent);
  --glass-fill-hover: color-mix(in srgb, var(--blue) 55%, transparent);
  --glass-stroke: color-mix(in srgb, #ffffff 48%, var(--blue) 52%);
  --glass-highlight: color-mix(in srgb, #ffffff 72%, transparent);
  --glass-shadow: color-mix(in srgb, var(--blue) 22%, transparent);
  --glass-nav-fill: color-mix(in srgb, var(--blue) 14%, var(--bg) 86%);
  --glass-nav-stroke: color-mix(in srgb, var(--blue) 28%, var(--line));
  --glass-panel: color-mix(in srgb, var(--bg) 82%, transparent);
  --glass-panel-muted: color-mix(in srgb, var(--bg2) 78%, transparent);
  --glass-panel-stroke: color-mix(in srgb, var(--line) 70%, #ffffff 30%);
  --glass-dark-panel: color-mix(in srgb, var(--tile-dark) 82%, transparent);
  --glass-dark-stroke: color-mix(in srgb, #ffffff 14%, var(--tile-dark));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C0B0A;
    --bg2: #1A1816;
    --ink: #F6F1EA;
    --soft: #B8AFA4;
    --line: #3A342E;
    --link: #8A9AE8;
    --blue: #6B82E0;
    --blue-hover: #8A9AE8;
    --tile-dark: #10183A;
    --on-dark: #FFFFF0;
    --on-dark-soft: #9A9488;
    --glass-fill: color-mix(in srgb, var(--blue) 34%, transparent);
    --glass-fill-hover: color-mix(in srgb, var(--blue) 50%, transparent);
    --glass-stroke: color-mix(in srgb, #ffffff 22%, var(--blue) 78%);
    --glass-highlight: color-mix(in srgb, #ffffff 28%, transparent);
    --glass-shadow: color-mix(in srgb, var(--blue) 35%, transparent);
    --glass-nav-fill: color-mix(in srgb, var(--blue) 22%, var(--bg2) 78%);
    --glass-nav-stroke: color-mix(in srgb, var(--blue) 40%, var(--line));
    --glass-panel: color-mix(in srgb, var(--bg2) 55%, transparent);
    --glass-panel-muted: color-mix(in srgb, var(--bg) 45%, transparent);
    --glass-panel-stroke: color-mix(in srgb, var(--line) 55%, #ffffff 12%);
    --glass-dark-panel: color-mix(in srgb, var(--tile-dark) 75%, transparent);
    --glass-dark-stroke: color-mix(in srgb, #ffffff 10%, var(--tile-dark));
  }
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C0B0A;
  --bg2: #1A1816;
  --ink: #F6F1EA;
  --soft: #B8AFA4;
  --line: #3A342E;
  --link: #8A9AE8;
  --blue: #6B82E0;
  --blue-hover: #8A9AE8;
  --tile-dark: #10183A;
  --on-dark: #FFFFF0;
  --on-dark-soft: #9A9488;
  --glass-fill: color-mix(in srgb, var(--blue) 34%, transparent);
  --glass-fill-hover: color-mix(in srgb, var(--blue) 50%, transparent);
  --glass-stroke: color-mix(in srgb, #ffffff 22%, var(--blue) 78%);
  --glass-highlight: color-mix(in srgb, #ffffff 28%, transparent);
  --glass-shadow: color-mix(in srgb, var(--blue) 35%, transparent);
  --glass-nav-fill: color-mix(in srgb, var(--blue) 22%, var(--bg2) 78%);
  --glass-nav-stroke: color-mix(in srgb, var(--blue) 40%, var(--line));
  --glass-panel: color-mix(in srgb, var(--bg2) 55%, transparent);
  --glass-panel-muted: color-mix(in srgb, var(--bg) 45%, transparent);
  --glass-panel-stroke: color-mix(in srgb, var(--line) 55%, #ffffff 12%);
  --glass-dark-panel: color-mix(in srgb, var(--tile-dark) 75%, transparent);
  --glass-dark-stroke: color-mix(in srgb, #ffffff 10%, var(--tile-dark));
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.logo-dark { display: none; }

@media (min-width: 1600px) {
  :root { --page-max: 1360px; }
}

@media (min-width: 2200px) {
  :root { --page-max: 1520px; }
}

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 22px;
  box-sizing: border-box;
}

/* Glass buttons — frosted ::before only (no SVG filter; same on all browsers) */
.pill,
button.replay,
.gnav nav a.app {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform 0.2s ease;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

.pill::before,
button.replay::before,
.gnav nav a.app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--glass-fill);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid color-mix(in srgb, #fff 55%, var(--blue) 45%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--blue) 35%, transparent);
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pill-in {
  position: relative;
  z-index: 2;
  color: inherit;
}

.pill {
  padding: 11px 22px;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 600;
}

button.replay {
  margin-top: 28px;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius);
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 600;
}

.gnav nav a.app {
  opacity: 1;
  font-weight: 650;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--link);
  text-shadow: none;
}

.pill:hover,
button.replay:hover,
.gnav nav a.app:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.pill:hover::before,
button.replay:hover::before,
.gnav nav a.app:hover::before {
  background: var(--glass-fill-hover);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 14px 32px color-mix(in srgb, var(--blue) 30%, transparent);
}

.pill:disabled,
button.replay:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.pill:disabled:hover,
button.replay:disabled:hover {
  transform: none;
}

.pill:disabled:hover::before,
button.replay:disabled:hover::before {
  background: var(--glass-fill);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--blue) 35%, transparent);
}

.gnav nav a.app::before {
  background: var(--glass-nav-fill);
  border-color: var(--glass-nav-stroke);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 6px 18px var(--glass-shadow);
}

.gnav nav a.app:hover {
  color: var(--ink);
}

.gnav nav a.app:hover::before {
  background: color-mix(in srgb, var(--blue) 20%, var(--bg) 80%);
}

.pnav nav a.pill {
  opacity: 1;
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
}

.links .pill {
  font-size: 17px;
  padding: 11px 22px;
}

.links .pill::after {
  content: "";
}

.pnav nav a.pill,
.links .pill {
  font-weight: 600;
}

.hero .replay {
  margin-top: 0;
  color: var(--link);
  font-weight: 500;
}

.hero .replay::before {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}

.hero .replay:hover {
  transform: none;
}

.hero .replay:hover::before {
  background: var(--bg2);
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}

@media (prefers-reduced-motion: reduce) {
  .pill,
  button.replay,
  .gnav nav a.app {
    transition: none;
  }
  .pill:hover,
  button.replay:hover,
  .gnav nav a.app:hover {
    transform: none;
  }
}

/* Glass surfaces */
.gnav,
.pnav {
  position: sticky;
  top: env(safe-area-inset-top, 0);
  z-index: 40;
  isolation: isolate;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.gnav::before,
.pnav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--glass-panel-stroke);
}
.gnav .wrap,
.pnav .wrap,
.gnav .scroll-progress {
  position: relative;
  z-index: 1;
}
.pnav {
  top: calc(env(safe-area-inset-top, 0px) + 48px);
  z-index: 39;
}

.gnav.is-open #site-nav {
  background: color-mix(in srgb, var(--bg) 28%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid var(--glass-panel-stroke);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 10%, transparent);
}

.gnav .wordmark img {
  height: 36px;
  width: auto;
  max-width: min(46vw, 200px);
  padding: 2px 8px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}

@media (max-width: 720px) {
  .gnav .wrap { min-height: 52px; align-items: center; }
  .gnav .wordmark img { height: 28px; max-width: 52vw; padding: 2px 6px; }
  .gnav.is-open #site-nav { gap: 12px; }
  .gnav.is-open #site-nav a.app { width: 100%; text-align: center; box-sizing: border-box; }
  .hero { padding: 32px 0 28px; }
  .hero h1 { font-size: clamp(32px, 9.2vw, 44px); }
  .hero-frame { aspect-ratio: auto; max-width: none; padding: 14px 12px 16px; }
  .hero-frame .shift { gap: 12px; }
  .hero-frame .arrow { font-size: 22px; }
  .hero-frame .mess { min-height: 0; gap: 8px; }
  .hero-frame .mess div { font-size: 11px; padding: 9px 10px; }
  .hero-frame .mess div b { font-size: 12px; }
  .hero-frame .clean { transform: none; padding: 16px 14px; }
  .hero-frame .clean h3 { font-size: 17px; }
  .hero-frame .clean ul { font-size: 13px; }
  @media (max-width: 520px) {
    .hero-frame .mess { grid-template-columns: 1fr; }
    .hero-frame .mess div { transform: none; }
    .hero-frame .arrow { font-size: 18px; }
  }
  .pnav .wrap { height: auto; min-height: 48px; flex-wrap: wrap; padding-block: 8px; }
  .contact > .wrap,
  .faq .wrap { padding: 22px 16px; }
  .dock {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    transform: translateY(120%);
    border-radius: 16px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .dock.is-visible { transform: translateY(0); }
  .triple > div { padding: 16px 14px; }
}

.nav-toggle,
button.copy {
  background: var(--glass-panel);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--glass-panel-stroke);
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}

button.copy:hover,
.nav-toggle:hover {
  background: color-mix(in srgb, var(--bg2) 75%, transparent);
}

.hero-frame,
.card,
.panel,
.dom,
.offer,
.sheet,
.screen,
.mock-ci,
.mock-roster {
  background: var(--glass-panel);
  backdrop-filter: saturate(165%) blur(18px);
  -webkit-backdrop-filter: saturate(165%) blur(18px);
  border: 1px solid var(--glass-panel-stroke);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 16px 40px color-mix(in srgb, var(--ink) 6%, transparent);
}

.hero-frame {
  border-radius: var(--radius-lg);
  aspect-ratio: auto;
  padding: 18px 20px 20px;
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  backdrop-filter: saturate(170%) blur(22px);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  border: 1px solid var(--glass-panel-stroke);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 20px 50px color-mix(in srgb, var(--ink) 6%, transparent);
}

.hero-frame .shift {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 14px;
  align-items: stretch;
  width: 100%;
}

.hero-frame .mess {
  min-height: 0;
  order: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}

.hero-frame .arrow {
  order: 2;
  justify-self: center;
  line-height: 1;
  transform: rotate(90deg);
}

.hero-frame .clean {
  order: 3;
  width: 100%;
  padding: 18px 20px;
  transform: none;
  box-sizing: border-box;
}

.hero-frame .clean h3 {
  font-size: clamp(18px, 2vw, 22px);
}

.hero-frame .clean ul {
  font-size: clamp(13px, 1.4vw, 15px);
}

.hero-frame .mess div {
  font-size: 12px;
  line-height: 1.35;
  padding: 10px 12px;
}

.hero-frame .mess div b {
  font-size: 13px;
  margin-bottom: 3px;
}

.hero-frame .mess div {
  --r: 0deg;
  transform: rotate(var(--r));
}

.hero-frame .mess div:nth-child(1) { --r: -5deg; }
.hero-frame .mess div:nth-child(2) { --r: 4deg; }
.hero-frame .mess div:nth-child(3) { --r: -3deg; }
.hero-frame .mess div:nth-child(4) { --r: 6deg; }

.card,
.panel,
.dom,
.offer,
.sheet {
  border-radius: var(--radius-lg);
}

.screen {
  border-radius: 22px 22px 0 0;
}

.panel .row,
.alt .panel .row,
.alt .row {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}

.mess div {
  background: var(--glass-panel-muted);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--glass-panel-stroke);
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}

.shift .clean,
.hero-frame .clean {
  background: var(--glass-fill);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  overflow: hidden;
  background-clip: padding-box;
  border: 1px solid var(--glass-stroke);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 12px 32px var(--glass-shadow);
}

main,
main > section,
.tiles,
#products {
  background: transparent;
}

.tile.light {
  background: color-mix(in srgb, var(--bg) 38%, transparent);
  backdrop-filter: saturate(170%) blur(22px);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  border: 1px solid var(--glass-panel-stroke);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 20px 48px color-mix(in srgb, var(--ink) 6%, transparent);
}

.tile.dark {
  background: color-mix(in srgb, var(--tile-dark) 46%, transparent);
  backdrop-filter: saturate(150%) blur(24px);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
  border: 1px solid var(--glass-dark-stroke);
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 12%, transparent) inset,
    0 24px 56px color-mix(in srgb, #000000 22%, transparent);
}

.promise,
.founder,
.steps,
.approach,
.story,
.contact,
.faq {
  background: transparent;
}

.promise,
.founder {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-block: 0;
  box-shadow: none;
}

.hub {
  padding: 12px;
  background: transparent;
}

.hub.ink .hub-sub {
  color: #e5e5ea;
}

.hub.ink > .wrap {
  border-radius: 28px;
  padding: 64px 28px 56px;
  color: #f5f5f7;
  background: color-mix(in srgb, var(--tile-dark) 58%, transparent);
  backdrop-filter: saturate(150%) blur(24px);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
  border: 1px solid var(--glass-dark-stroke);
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 12%, transparent) inset,
    0 24px 56px color-mix(in srgb, #000000 22%, transparent);
}

.triple > div {
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid var(--glass-panel-stroke);
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}

.faq .wrap {
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  backdrop-filter: saturate(165%) blur(22px);
  -webkit-backdrop-filter: saturate(165%) blur(22px);
  border: 1px solid var(--glass-panel-stroke);
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}

.contact > .wrap {
  padding: 44px 36px 48px;
  border-radius: calc(var(--radius-lg) + 4px);
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  backdrop-filter: saturate(170%) blur(22px);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  border: 1px solid var(--glass-panel-stroke);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 24px 56px color-mix(in srgb, var(--blue) 8%, transparent);
}

body > header:not(.gnav):not(.pnav) {
  background: color-mix(in srgb, var(--bg) 28%, transparent);
  backdrop-filter: saturate(170%) blur(20px);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  border-bottom: 1px solid var(--glass-panel-stroke);
}

footer {
  padding-bottom: 88px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.dock {
  position: fixed;
  bottom: 16px;
  left: 50%;
  width: max-content;
  max-width: min(640px, calc(100% - 24px));
  background: color-mix(in srgb, var(--tile-dark) 44%, transparent);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--glass-dark-stroke);
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 10%, transparent) inset,
    0 16px 48px color-mix(in srgb, #000000 28%, transparent);
  color: var(--on-dark);
}

.dock > span {
  color: var(--on-dark-soft);
}

.offer,
.sheet,
.card,
.panel,
.dom,
.screen {
  background: color-mix(in srgb, var(--bg) 34%, transparent);
  backdrop-filter: saturate(165%) blur(20px);
  -webkit-backdrop-filter: saturate(165%) blur(20px);
  border-color: var(--glass-panel-stroke);
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}

section.alt,
section.risk {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

.alt > .wrap {
  padding-block: 48px 56px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg2) 42%, transparent);
  backdrop-filter: saturate(165%) blur(20px);
  -webkit-backdrop-filter: saturate(165%) blur(20px);
  border: 1px solid var(--glass-panel-stroke);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 20px 48px color-mix(in srgb, var(--ink) 5%, transparent);
}

.risk > .wrap {
  padding-block: 56px 64px;
  border-radius: var(--radius-lg);
  color: #f5f5f7;
  background: color-mix(in srgb, var(--tile-dark) 58%, transparent);
  backdrop-filter: saturate(150%) blur(24px);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
  border: 1px solid var(--glass-dark-stroke);
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 12%, transparent) inset,
    0 24px 56px color-mix(in srgb, #000000 22%, transparent);
}

.alt .card,
.alt .panel {
  background: color-mix(in srgb, var(--bg) 44%, transparent);
}

.panel .row,
.alt .panel .row,
.alt .row {
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.chip {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.chip.ok,
.chip.wait {
  box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent) inset;
}

.chip.full,
.ci-full {
  background: var(--glass-fill);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}

.msg.myou,
.chat-input .send {
  background: var(--glass-fill);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--glass-stroke);
}

.dom .ic {
  background: var(--glass-fill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}

.skip {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 60;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.skip:focus,
.skip:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.pill,
button,
.nav-toggle,
.gnav nav a.app,
.gnav .wordmark img,
.hero-frame,
.card,
.panel,
.dom,
.tile,
.offer,
.sheet,
.dock,
.faq .wrap,
.contact > .wrap,
.triple > div,
.mock-ci,
.mock-roster,
.story-mock-wrap,
button.copy {
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  .hero-frame,
  .card,
  .panel,
  .dom,
  .tile.light,
  .tile.dark,
  .dock,
  .faq .wrap,
  .contact > .wrap {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ambient-blob-motion {
    animation: none !important;
  }
}

/* Full-page ambient color wash (glass backdrop) */
body {
  background: transparent;
}

.ambient-wash {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-wash::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  min-height: 100%;
  background: linear-gradient(
    165deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg2) 55%, var(--bg)) 45%,
    color-mix(in srgb, var(--bg2) 70%, var(--bg)) 100%
  );
  z-index: -1;
}

.ambient-hero-cluster,
.ambient-band {
  position: absolute;
  left: 0;
  right: 0;
  overflow: visible;
}

.ambient-band {
  pointer-events: none;
}

.ambient-blob {
  position: absolute;
  left: var(--blob-x, 50%);
  top: var(--blob-y, 50%);
  width: var(--blob-s, 48vmin);
  height: var(--blob-s, 48vmin);
  transform: translate(-50%, -50%);
}

.ambient-blob--faint .ambient-blob-motion {
  opacity: 0.45;
}

.ambient-blob-motion {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: blur(64px);
}

.ambient-blob--a {
  --blob-x: var(--blob-1-x, 28%);
  --blob-y: var(--blob-1-y, 22%);
  --blob-s: var(--blob-1-s, 42vmin);
  --blob-delay: var(--blob-1-delay, 0s);
  --blob-dur: var(--blob-1-dur, 16s);
}
.ambient-blob--a .ambient-blob-motion {
  background: radial-gradient(circle, rgba(28, 57, 187, 0.22) 0%, rgba(28, 57, 187, 0.07) 48%, transparent 74%);
}

.ambient-blob--b {
  --blob-x: var(--blob-2-x, 74%);
  --blob-y: var(--blob-2-y, 18%);
  --blob-s: var(--blob-2-s, 36vmin);
  --blob-delay: var(--blob-2-delay, -3s);
  --blob-dur: var(--blob-2-dur, 19s);
}
.ambient-blob--b .ambient-blob-motion {
  background: radial-gradient(circle, rgba(124, 147, 242, 0.24) 0%, rgba(124, 147, 242, 0.07) 48%, transparent 74%);
}

.ambient-blob--c {
  --blob-x: var(--blob-3-x, 52%);
  --blob-y: var(--blob-3-y, 62%);
  --blob-s: var(--blob-3-s, 32vmin);
  --blob-delay: var(--blob-3-delay, -6s);
  --blob-dur: var(--blob-3-dur, 21s);
}
.ambient-blob--c .ambient-blob-motion {
  background: radial-gradient(circle, rgba(217, 98, 43, 0.18) 0%, rgba(217, 98, 43, 0.05) 48%, transparent 74%);
}

.ambient-blob--d {
  --blob-x: var(--blob-4-x, 12%);
  --blob-y: var(--blob-4-y, 58%);
  --blob-s: var(--blob-4-s, 34vmin);
  --blob-delay: var(--blob-4-delay, -4s);
  --blob-dur: var(--blob-4-dur, 17s);
}
.ambient-blob--d .ambient-blob-motion {
  background: radial-gradient(circle, rgba(47, 107, 82, 0.16) 0%, rgba(28, 57, 187, 0.05) 48%, transparent 74%);
}

body > :not(.ambient-wash):not(.gnav):not(.pnav):not(.skip):not(.dock) {
  position: relative;
  z-index: 1;
}

body > .dock {
  z-index: 45;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ambient-blob {
    opacity: 0.62;
  }
  :root:not([data-theme="light"]) .ambient-blob--a .ambient-blob-motion {
    background: radial-gradient(circle, rgba(107, 130, 224, 0.28) 0%, transparent 68%);
  }
  :root:not([data-theme="light"]) .ambient-blob--b .ambient-blob-motion {
    background: radial-gradient(circle, rgba(138, 154, 232, 0.26) 0%, transparent 68%);
  }
  :root:not([data-theme="light"]) .ambient-blob--c .ambient-blob-motion {
    background: radial-gradient(circle, rgba(217, 98, 43, 0.16) 0%, transparent 68%);
  }
  :root:not([data-theme="light"]) .ambient-blob--d .ambient-blob-motion {
    background: radial-gradient(circle, rgba(107, 130, 224, 0.18) 0%, transparent 70%);
  }
}

:root[data-theme="dark"] .ambient-blob {
  opacity: 0.62;
}
:root[data-theme="dark"] .ambient-blob--a .ambient-blob-motion {
  background: radial-gradient(circle, rgba(107, 130, 224, 0.28) 0%, transparent 68%);
}
:root[data-theme="dark"] .ambient-blob--b .ambient-blob-motion {
  background: radial-gradient(circle, rgba(138, 154, 232, 0.26) 0%, transparent 68%);
}
:root[data-theme="dark"] .ambient-blob--c .ambient-blob-motion {
  background: radial-gradient(circle, rgba(217, 98, 43, 0.16) 0%, transparent 68%);
}
:root[data-theme="dark"] .ambient-blob--d .ambient-blob-motion {
  background: radial-gradient(circle, rgba(107, 130, 224, 0.18) 0%, transparent 70%);
}