:root {
  --bg: #ffffff;
  --surface: #f5f7fa;
  --card: #ffffff;
  --text: #0e1726;
  --muted: #526073;
  --line: #e3e8ef;
  --line-strong: #cfd7e3;
  --accent: #2752d6;
  --accent-hover: #1d41b3;
  --accent-soft: #eaf0ff;
  --btn: #2752d6;
  --btn-hover: #1d41b3;
  --btn-text: #ffffff;
  --warn-bg: #fff4e0;
  --warn-text: #8a4b00;
  --shadow: 0 1px 2px rgb(14 23 38 / 0.04), 0 8px 24px rgb(14 23 38 / 0.06);
  --shadow-hover: 0 2px 4px rgb(14 23 38 / 0.05), 0 18px 40px rgb(14 23 38 / 0.12);
  --radius: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b111b;
    --surface: #101826;
    --card: #131c2b;
    --text: #e8edf5;
    --muted: #9aa7ba;
    --line: #223047;
    --line-strong: #31425f;
    --accent: #8ea6ff;
    --accent-hover: #b3c3ff;
    --accent-soft: #1a2647;
    --btn: #4f73ff;
    --btn-hover: #6b89ff;
    --warn-bg: #3a2a12;
    --warn-text: #ffc978;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-hover: 0 18px 40px rgb(0 0 0 / 0.45);
  }
}

/* Dark, animated surfaces: header, heroes, dark sections, and the call-to-action band */
header.site, .hero, .band, section.dark {
  --bg: #070b14;
  --surface: rgb(255 255 255 / 0.04);
  --card: rgb(255 255 255 / 0.045);
  --text: #eef2fa;
  --muted: #9aa8bf;
  --line: rgb(255 255 255 / 0.09);
  --line-strong: rgb(255 255 255 / 0.2);
  --accent: #8ea6ff;
  --accent-hover: #b3c3ff;
  --accent-soft: rgb(120 145 255 / 0.14);
  --btn: #4f73ff;
  --btn-hover: #6b89ff;
  --warn-bg: rgb(255 176 64 / 0.12);
  --warn-text: #ffc978;
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .wrap { padding: 0 1.5rem; } }
a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0.5rem; z-index: 10; background: #ffffff; color: #0e1726; padding: 0.5rem 0.75rem; }
.skip:focus { left: 0.5rem; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 750; letter-spacing: -0.04em; line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }
p, ul, ol { margin: 0 0 1rem; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
.eyebrow {
  color: var(--accent); font-size: 0.8125rem; font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.875rem;
}
.grad {
  background: linear-gradient(90deg, #8ea6ff, #5ec8ff, #b79cff, #8ea6ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 9s ease-in-out infinite alternate;
}
@keyframes sheen { to { background-position: 100% 0; } }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: 0.625rem 1.25rem; border-radius: 10px;
  background: var(--btn); color: var(--btn-text); border: 1px solid var(--btn);
  font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 24px -10px var(--btn);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.button:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-text); transform: translateY(-1px); box-shadow: 0 12px 28px -10px var(--btn); }
.button.ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); box-shadow: none; }
.button.ghost:hover { border-color: var(--muted); color: var(--text); }
.button.light { background: #ffffff; color: #0e1726; border-color: #ffffff; box-shadow: 0 8px 30px -10px rgb(142 166 255 / 0.6); }
.button.light:hover { background: #e6ecff; border-color: #e6ecff; color: #0e1726; }
.button.small { min-height: 2.375rem; padding: 0.4rem 0.9rem; font-size: 0.9375rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.actions p { display: contents; }
.more { display: inline-block; margin-top: 2rem; font-weight: 600; text-decoration: none; transition: transform 0.2s var(--ease); }
.more:hover { transform: translateX(3px); }

/* Header */
header.site {
  position: sticky; top: 0; z-index: 5;
  background: rgb(7 11 20 / 0.97);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 0.5rem 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--text); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; text-decoration: none;
}
.brand:hover { color: var(--text); }
.mark { width: 1.875rem; height: 1.875rem; flex: none; }
.mark rect { fill: var(--text); }
.mark path { fill: none; stroke: var(--bg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
header.site nav { grid-column: 1 / -1; grid-row: 2; }
nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; list-style: none; margin: 0; padding: 0; }
nav a { color: var(--muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: color 0.2s; }
nav a:hover, nav a[aria-current="page"] { color: var(--text); }
header.site nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
@media (min-width: 48rem) {
  header.site .wrap { grid-template-columns: auto 1fr auto; gap: 2rem; padding-top: 1rem; padding-bottom: 1rem; }
  header.site nav { grid-column: auto; grid-row: auto; justify-self: end; }
}

/* Sections */
section { padding: 4.5rem 0; }
section.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) { section { padding: 6rem 0; } }
.section-head { max-width: 42rem; margin-bottom: 2.5rem; }
.section-head h2 { margin-bottom: 1rem; }
.section-head p:not(.eyebrow) { color: var(--muted); font-size: 1.125rem; }

/* Hero: slow aurora glow under a drifting grid */
.hero, .band, section.dark { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); }
.hero { padding: 4rem 0 4.5rem; }
.hero::before, .band::before, section.dark::before {
  content: ""; position: absolute; inset: -25%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(32% 30% at 72% 30%, rgb(79 115 255 / 0.42), transparent 70%),
    radial-gradient(26% 26% at 88% 62%, rgb(56 189 248 / 0.22), transparent 70%),
    radial-gradient(30% 28% at 28% 12%, rgb(139 92 246 / 0.26), transparent 70%);
  filter: blur(30px);
  animation: aurora 22s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 75% 70% at 65% 35%, #000 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 65% 35%, #000 15%, transparent 75%);
  animation: drift 30s linear infinite;
}
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-5%, 4%, 0) rotate(10deg) scale(1.1); }
  100% { transform: translate3d(4%, -3%, 0) rotate(-8deg) scale(1.02); }
}
@keyframes drift { to { background-position: 56px 56px; } }
.hero > .wrap { display: grid; gap: 3.5rem; align-items: center; }
.hero h1 { margin-bottom: 1.25rem; }
.hero h1 + p { font-size: clamp(1.125rem, 2.2vw, 1.3125rem); color: var(--muted); max-width: 36rem; }
@media (min-width: 60rem) {
  .hero { padding: 7rem 0 7.5rem; }
  .hero > .wrap { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
}
.page-hero { padding: 4.5rem 0 4rem; }
.page-hero > .wrap { display: block; }
.page-hero h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); max-width: 48rem; }
@media (min-width: 60rem) { .page-hero { padding: 6.5rem 0 5.5rem; } }

/* Load-in: hero content rises into place, one piece after another */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.hero-copy > *, .page-hero .wrap > *, .preview { animation: rise 0.9s var(--ease) both; }
.hero-copy > :nth-child(2), .page-hero .wrap > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3), .page-hero .wrap > :nth-child(3) { animation-delay: 0.16s; }
.hero-copy > :nth-child(4), .page-hero .wrap > :nth-child(4) { animation-delay: 0.24s; }
.preview { animation-delay: 0.3s; }

/* Product preview window */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.preview { margin: 0; }
.window {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.55), 0 0 90px -30px rgb(79 115 255 / 0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  overflow: hidden; font-size: 0.875rem; line-height: 1.45;
  animation: float 7s ease-in-out 1.2s infinite;
}
.window::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--angle), transparent 0 68%, rgb(142 166 255 / 0.9) 80%, rgb(94 200 255 / 0.9) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: trace 6s linear infinite;
}
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes trace { to { --angle: 360deg; } }
.window-bar {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.7rem 0.9rem;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.window-bar span { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--line-strong); }
.window-bar p {
  margin: 0 auto; padding: 0.15rem 0.9rem; border-radius: 6px; background: var(--card);
  border: 1px solid var(--line); color: var(--muted); font-size: 0.75rem;
}
.window-body { padding: 1.25rem 1.25rem 1.5rem; }
.pv-kicker { color: var(--muted); font-size: 0.75rem; margin: 0 0 0.2rem; }
.pv-title { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; margin: 0 0 0.875rem; }
.pv-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.125rem; }
.pv-stats li { background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.8125rem; }
.pv-stats strong { color: var(--accent); }
.pv-label {
  color: var(--muted); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.07em;
  text-transform: uppercase; margin: 1rem 0 0.4rem;
}
.pv-row {
  display: grid; grid-template-columns: 5.25rem 1fr; gap: 0.75rem; align-items: start;
  padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 10px;
  animation: rise 0.7s var(--ease) both;
}
.window-body > .pv-row:nth-of-type(1) { animation-delay: 0.7s; }
.window-body > .pv-row:nth-of-type(2) { animation-delay: 0.85s; }
.window-body > .pv-row:nth-of-type(3) { animation-delay: 1s; }
.pv-row.alert { background: var(--warn-bg); border-color: transparent; }
.pv-row.alert b { color: var(--warn-text); }
.pv-date { font-weight: 650; font-size: 0.8125rem; white-space: nowrap; }
.pv-name { font-weight: 600; margin: 0; }
.pv-meta { color: var(--muted); font-size: 0.8125rem; margin: 0.1rem 0 0; }
.preview figcaption { color: var(--muted); font-size: 0.8125rem; margin-top: 1rem; text-align: center; }
/* Outside the dark hero (products page), give the window a solid card look */
section:not(.hero) .window { background: var(--card); box-shadow: var(--shadow-hover); }

/* Facts strip */
section.facts-strip { padding: 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); }
.fact { padding: 1.75rem 1rem 1.75rem 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
.fact br { display: none; }
.fact strong { display: block; color: var(--text); font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0.15rem; }
.fact:nth-child(n+3) { border-top: 1px solid var(--line); }
@media (min-width: 48rem) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact { padding: 2.25rem 1.5rem; border-left: 1px solid var(--line); }
  .fact:first-child { border-left: 0; padding-left: 0; }
  .fact:nth-child(n+3) { border-top: 0; }
}

/* Cards */
.cards { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .cards.two, .cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) {
  .cards.three { grid-template-columns: repeat(3, 1fr); }
  .cards.four { grid-template-columns: repeat(4, 1fr); }
  .cards { gap: 1.25rem; }
}
.card {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--muted); font-size: 1rem; }
.icon {
  width: 2.75rem; height: 2.75rem; padding: 0.6rem; margin-bottom: 1.25rem; border-radius: 10px;
  background: linear-gradient(135deg, #4f73ff, #38bdf8); fill: none; stroke: #ffffff; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  box-shadow: 0 8px 18px -8px rgb(79 115 255 / 0.7);
  transition: transform 0.3s var(--ease);
}
.card:hover .icon { transform: scale(1.08) rotate(-4deg); }

/* Split layouts */
.split { display: grid; gap: 2.5rem; align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1.25fr; gap: 4.5rem; }
  .split.product { grid-template-columns: 1fr 1.1fr; }
}
.split-copy h2 { margin-bottom: 1.25rem; }
.split-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.125rem; }
.split-copy > p strong { color: var(--text); }
.split-copy .checklist { margin: 1.25rem 0 1.5rem; }

.checklist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.checklist li {
  position: relative; padding: 0.875rem 1rem 0.875rem 3rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-weight: 500;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.checklist li:hover { transform: translateX(4px); border-color: var(--line-strong); }
.checklist li::before {
  content: ""; position: absolute; left: 1rem; top: 50%; width: 1.25rem; height: 1.25rem; margin-top: -0.625rem;
  border-radius: 50%;
  background: var(--btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* Process steps */
.steps ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 40rem) { .steps ol { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .steps ol { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.steps li {
  counter-increment: step; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem; color: var(--muted); box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.steps li:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.steps li { position: relative; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1.25rem;
  border-radius: 50%; background: linear-gradient(135deg, #4f73ff, #38bdf8); color: #ffffff;
  font-weight: 700; font-size: 1rem; box-shadow: 0 0 0 6px var(--accent-soft);
}
@media (min-width: 64rem) {
  .steps li:not(:last-child)::after {
    content: ""; position: absolute; top: 2.75rem; left: calc(1.5rem + 2.5rem + 0.75rem); right: -1.25rem; height: 2px;
    background: linear-gradient(90deg, #4f73ff, rgb(56 189 248 / 0.25));
  }
}
.steps li strong { display: block; color: var(--text); font-size: 1.125rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }

/* Contact */
.contact-card {
  padding: 2rem; border-radius: calc(var(--radius) + 4px); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-hover); color: var(--muted);
}
.contact-card .button { margin-top: 1.5rem; }
.contact-email { font-size: clamp(1.125rem, 3.5vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.contact-email a { color: var(--text); text-decoration: none; }
.contact-email a:hover { color: var(--accent); }
@media (min-width: 56rem) { .contact-card { padding: 2.75rem; } }

/* Call-to-action band (shares the hero's aurora) */
.band { text-align: center; padding: 5.5rem 0; }
.band .wrap { max-width: 44rem; }
.band h2 { margin-bottom: 1rem; }
.band p { color: var(--muted); font-size: 1.125rem; }
.band .button { margin-top: 1rem; }

/* Footer */
footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem; }
footer.site .wrap { display: grid; gap: 2rem; padding-top: 3.5rem; padding-bottom: 2.5rem; }
footer.site .footer-brand p { margin-top: 0.75rem; max-width: 22rem; }
footer.site nav ul { flex-direction: column; gap: 0.6rem; }
footer.site a { color: var(--muted); }
footer.site a:hover, footer.site .brand { color: var(--text); }
footer.site .footer-contact a { color: var(--text); font-weight: 600; }
footer.site .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.5rem; margin: 0; font-size: 0.875rem; }
@media (min-width: 48rem) { footer.site .wrap { grid-template-columns: 2fr 1fr 1.5fr; } }

/* Dark content section (shares the hero's aurora) */
section.dark { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.dark::before { animation-duration: 28s; opacity: 0.8; }

/* Feature list: gradient icon tile beside a short title and line */
.features { display: grid; gap: 1.25rem; margin-top: 2rem; }
.feature { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.feature .icon { margin: 0; width: 2.5rem; height: 2.5rem; padding: 0.55rem; }
.feature p { color: var(--muted); font-size: 1rem; margin: 0; }
.feature br { display: none; }
.feature strong { display: block; color: var(--text); font-size: 1.0625rem; margin-bottom: 0.15rem; }
.split-copy .features + p .more, .split-copy > p .more { margin-top: 1.75rem; }

/* Product showcase: the real site on a laptop and a phone */
.showcase { overflow: hidden; }
@media (min-width: 56rem) { .split.product-show { grid-template-columns: 1fr 1.2fr; } }
.devices { position: relative; margin: 0; padding: 0 6% 2.5rem 0; }
.devices::before {
  content: ""; position: absolute; inset: 5% -10% 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgb(79 115 255 / 0.28), rgb(56 189 248 / 0.12) 55%, transparent 75%);
  filter: blur(20px);
}
.devices img { display: block; width: 100%; height: auto; }
.laptop-screen {
  background: #0b0f17; padding: 2.2% 2.2% 2.6%; border-radius: 14px 14px 0 0;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06) inset, 0 30px 60px -25px rgb(14 23 38 / 0.55);
}
.laptop-screen img { border-radius: 3px; }
.laptop-base {
  position: relative; height: 0.9rem; margin: 0 -6%;
  background: linear-gradient(#e4e8ef, #a9b2c1); border-radius: 0 0 14px 14px;
  box-shadow: 0 14px 24px -12px rgb(14 23 38 / 0.5);
}
.laptop-base::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 0.35rem; translate: -50% 0;
  background: #c3cad6; border-radius: 0 0 8px 8px;
}
.phone {
  position: absolute; right: 0; bottom: 0; width: 27%; aspect-ratio: 9 / 19;
  border: 5px solid #0b0f17; border-radius: 26px; overflow: hidden; background: #0b0f17;
  box-shadow: 0 30px 50px -20px rgb(14 23 38 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.08);
  animation: float 7s ease-in-out 0.6s infinite;
}
.phone img { height: 100%; object-fit: cover; object-position: top; }
.devices figcaption { position: absolute; left: 0; bottom: 0; color: var(--muted); font-size: 0.8125rem; max-width: 65%; }
@media (prefers-color-scheme: dark) { .laptop-base { background: linear-gradient(#5b6577, #2c3442); } .laptop-base::before { background: #3a4353; } }

/* Illustration panels on top of cards */
.art-card { padding-top: 0; overflow: hidden; }
.art {
  margin: 0 -1.5rem 1.5rem; aspect-ratio: 16 / 9;
  background:
    radial-gradient(60% 80% at 80% 10%, rgb(79 115 255 / 0.45), transparent 70%),
    radial-gradient(50% 70% at 10% 100%, rgb(56 189 248 / 0.25), transparent 70%),
    #0b1222;
  border-bottom: 1px solid var(--line);
}
.art svg { display: block; width: 100%; height: 100%; transition: transform 0.5s var(--ease); }
.card:hover .art svg { transform: scale(1.04); }
.a-panel { fill: rgb(255 255 255 / 0.07); stroke: rgb(255 255 255 / 0.18); }
.a-bar { fill: rgb(255 255 255 / 0.08); }
.a-dot { fill: rgb(255 255 255 / 0.3); }
.a-dot.on { fill: #5ec8ff; }
.a-line { fill: rgb(255 255 255 / 0.22); }
.a-line.strong { fill: rgb(255 255 255 / 0.8); }
.a-btn { fill: #4f73ff; }
.a-img { fill: rgb(94 200 255 / 0.16); }
.a-sun { fill: rgb(142 166 255 / 0.7); }
.a-tile { fill: rgb(255 255 255 / 0.08); }
.a-tile.t1 { fill: rgb(79 115 255 / 0.45); }
.a-tile.t2 { fill: rgb(56 189 248 / 0.3); }
.a-tile.t3 { fill: rgb(139 92 246 / 0.35); }
.a-row { fill: rgb(255 255 255 / 0.05); }
.a-note { fill: #18233a; stroke: rgb(255 255 255 / 0.18); }
.a-chart { fill: #5ec8ff; opacity: 0.85; }
.a-chart.hi { fill: #8ea6ff; opacity: 1; }
.a-grid { fill: none; stroke: rgb(255 255 255 / 0.45); stroke-width: 1.4; }
.a-hub { fill: rgb(79 115 255 / 0.3); stroke: #8ea6ff; stroke-width: 1.5; }
.a-spark { fill: #ffffff; }
.a-flow { fill: none; stroke: #5ec8ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 7; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.a-float { animation: float 6s ease-in-out infinite; }
.a-float.f2 { animation-delay: -3s; }

/* AI review illustration */
.review { margin: 0; }
.review figcaption { color: var(--muted); font-size: 0.8125rem; margin-top: 1rem; text-align: center; }
section .window.code { background: #0d1424; box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.6), 0 0 90px -30px rgb(79 115 255 / 0.5); }
.code-body { padding: 1.25rem; }
.code-body pre {
  margin: 0.5rem 0 1rem; padding: 0.75rem 0.9rem; border-radius: 8px; background: rgb(0 0 0 / 0.3);
  font: 0.8125rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto;
}
.code-body .ln { display: inline-block; width: 1.5rem; color: var(--muted); opacity: 0.6; user-select: none; }
.code-body .add { color: #86efac; }
.code-body .del { color: #fca5a5; text-decoration: line-through; text-decoration-color: rgb(252 165 165 / 0.5); }
.code-tag, .code-ok { font-size: 0.875rem; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tag { border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.75rem; font-weight: 650; }
.tag.ai { background: rgb(142 166 255 / 0.18); color: #b3c3ff; }
.tag.ok { background: rgb(52 211 153 / 0.16); color: #6ee7b7; }
.code-review { margin: 0 0 0.5rem; padding: 0.8rem 1rem; border-radius: 8px; border-left: 3px solid #ffc978; background: rgb(255 201 120 / 0.08); font-size: 0.875rem; }
.code-review p { margin: 0; }
.code-review .who { display: flex; align-items: center; gap: 0.5rem; font-weight: 650; margin-bottom: 0.35rem; }
.avatar { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: linear-gradient(135deg, #ffb347, #ff7a59); color: #1a1205; font-size: 0.75rem; font-weight: 750; }

/* Screens gallery: real product pages in small browser frames */
.screens { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .screens { grid-template-columns: repeat(3, 1fr); } }
.screen { margin: 0; }
.screen a {
  display: block; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  box-shadow: var(--shadow); transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.screen a:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.screen-bar { display: flex; gap: 0.3rem; padding: 0.5rem 0.65rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.screen-bar span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line-strong); }
.screen img { display: block; width: 100%; height: auto; }
.screen figcaption { color: var(--muted); font-size: 0.9375rem; margin-top: 0.9rem; }
.screen figcaption strong { display: block; color: var(--text); }

/* Pipeline: sources flowing into the weekly list */
.pipeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.75rem; counter-reset: stage; }
@media (min-width: 56rem) { .pipeline { grid-template-columns: 1.3fr 1fr 1.1fr 1fr; gap: 2.25rem; } }
.stage {
  position: relative; counter-increment: stage; padding: 1.4rem; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem;
}
.stage.out { background: linear-gradient(145deg, rgb(79 115 255 / 0.35), rgb(56 189 248 / 0.15)); border-color: rgb(142 166 255 / 0.4); color: var(--text); }
.stage-label { color: var(--text); font-weight: 650; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.6rem; }
.stage-label::before {
  content: counter(stage); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #4f73ff, #38bdf8); color: #ffffff; font-size: 0.8125rem;
}
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li { padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 0.8125rem; }
.stage:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -1.75rem; width: 2px; height: 1.75rem; translate: -50% 0;
  background: repeating-linear-gradient(#5ec8ff 0 4px, transparent 4px 9px);
  animation: flow-down 1s linear infinite;
}
@keyframes flow-down { to { background-position: 0 9px; } }
@media (min-width: 56rem) {
  .stage:not(:last-child)::after {
    left: 100%; top: 50%; bottom: auto; width: 2.25rem; height: 2px; translate: 0 -50%;
    background: repeating-linear-gradient(90deg, #5ec8ff 0 4px, transparent 4px 9px);
    animation-name: flow-right;
  }
  @keyframes flow-right { to { background-position: 9px 0; } }
}

/* About: studio card with a San Diego coast at sunset */
.studio-card {
  position: relative; margin: 0; overflow: hidden; border-radius: calc(var(--radius) + 6px);
  aspect-ratio: 4 / 3; box-shadow: 0 30px 70px -30px rgb(14 23 38 / 0.6);
}
.coast { position: absolute; inset: 0; width: 100%; height: 100%; }
.coast .stars { fill: #ffffff; opacity: 0.7; }
.coast .sun { fill: #ffb067; filter: drop-shadow(0 0 22px rgb(255 160 90 / 0.8)); }
.coast .hills { fill: #141a3a; opacity: 0.85; }
.coast .city { fill: #0d1230; }
.coast .glint { stroke: rgb(255 190 130 / 0.55); stroke-width: 2; stroke-linecap: round; }
.coast .wave { fill: none; stroke: rgb(142 166 255 / 0.35); stroke-width: 1.5; animation: swell 6s ease-in-out infinite; }
.coast .wave.w2 { animation-delay: -3s; stroke: rgb(94 200 255 / 0.25); }
@keyframes swell { 50% { transform: translateX(-14px); } }
.studio-card figcaption {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 1rem; border-radius: 12px; color: #c9d3e6; font-size: 0.875rem; line-height: 1.35;
  background: rgb(7 11 20 / 0.6); border: 1px solid rgb(255 255 255 / 0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.studio-card figcaption strong { display: block; color: #ffffff; font-size: 1.0625rem; }
.studio-card .mark { width: 2.5rem; height: 2.5rem; }
.studio-card .mark rect { fill: #ffffff; }
.studio-card .mark path { stroke: #0e1726; }

/* About: the name */
.name-card {
  display: grid; gap: 1.25rem; align-items: start; padding: 2rem; border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(145deg, var(--accent-soft), var(--surface)); border: 1px solid var(--line);
}
.name-card .icon { margin: 0; width: 3.25rem; height: 3.25rem; padding: 0.75rem; }
.name-copy h2 { margin-bottom: 0.75rem; }
.name-copy p { color: var(--muted); font-size: 1.125rem; max-width: 44rem; }
@media (min-width: 48rem) { .name-card { grid-template-columns: auto 1fr; gap: 1.75rem; padding: 2.75rem; } }

/* Scroll reveal: content eases in as it enters the screen (where supported) */
@supports (animation-timeline: view()) {
  @keyframes reveal { from { opacity: 0; translate: 0 28px; } }
  section:not(.hero) .section-head,
  section:not(.hero) .split-copy,
  .card, .steps li, .fact, .checklist li, .studio-card, .contact-card, .band .wrap > *,
  .feature, .devices, .review, .screen, .stage, .name-card {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}