/* ==========================================================================
   MKW Studio – site styles
   System type (SF Pro on Apple devices, self-hosted Inter elsewhere).
   ========================================================================== */

@font-face {
  font-family: "Inter Studio";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Studio";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #fbfbfd;
  --card-shadow:
    0 0 0 1px rgb(0 0 0 / 0.05),
    0 1px 3px rgb(0 0 0 / 0.03),
    0 24px 50px -28px rgb(30 40 110 / 0.24);
  --bg-alt: #f5f5f7;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --line: #d2d2d7;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --link: #0066cc;

  --dark-bg: #000000;
  --dark-text: #f5f5f7;
  --dark-2: #86868b;
  --dark-link: #2997ff;
  --dark-line: #333336;

  --brand-a: #3B8CFF;
  --brand-b: #2F5BFF;
  --brand-c: #6A4DFF;
  --brand-gradient: linear-gradient(150deg, var(--brand-a) 0%, var(--brand-b) 48%, var(--brand-c) 100%);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter Studio", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max: 1240px;
  --gutter: 22px;
  --nav-h: 52px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  font-weight: 400;
  letter-spacing: -0.016em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; letter-spacing: inherit; }

::selection { background: rgb(0 113 227 / 0.22); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}
[tabindex="-1"]:focus { outline: none; }
[id] { scroll-margin-top: var(--nav-h); }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 300;
  padding: 8px 16px;
  border-radius: 980px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.3s var(--ease-out);
}
.skip:focus { transform: none; }

/* ---------- Global navigation ---------- */
.gnav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.gnav.is-scrolled,
.gnav--solid {
  background: rgb(255 255 255 / 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08);
}
.gnav.is-dark {
  background: rgb(22 22 23 / 0.8);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06);
}
.gnav.is-dark .logo { color: var(--dark-text); }
.gnav.is-dark .gnav__links a { color: rgb(255 255 255 / 0.8); }
.gnav.is-dark .gnav__links a:hover { color: #fff; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gnav.is-scrolled, .gnav--solid { background: rgb(255 255 255 / 0.96); }
}

.gnav__inner {
  width: min(100% - 2 * var(--gutter), var(--max));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  transition: color 0.35s var(--ease);
}
.logo__icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 22.37%;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.3), 0 2px 6px -2px rgb(47 91 255 / 0.5);
}
.logo__icon svg { width: 70%; height: 70%; }

.gnav__links {
  display: flex;
  gap: clamp(20px, 3vw, 36px);
  font-size: 13px;
  letter-spacing: -0.01em;
}
.gnav__links a {
  color: rgb(0 0 0 / 0.8);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.gnav__links a:hover { color: #000; }
.gnav__links a { position: relative; }
.gnav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.35s var(--ease-out);
}
.gnav__links a[aria-current] { color: #000; }
.gnav__links a[aria-current]::after { transform: scaleX(1); }
.gnav.is-dark .gnav__links a[aria-current] { color: #fff; }

/* Mobile menu: a two-line button that turns into a cross, and a full-height panel */
.gnav__end { display: flex; align-items: center; gap: 4px; }
.gnav__toggle,
.gnav__menu { display: none; }
.gnav__toggle {
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -13px;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(0 0 0 / 0.8);
  cursor: pointer;
  transition: color 0.35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.gnav__toggle span {
  grid-area: 1 / 1;
  width: 17px; height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out);
}
.gnav__toggle span:first-child { transform: translateY(-3.5px); }
.gnav__toggle span:last-child { transform: translateY(3.5px); }
.gnav.is-dark .gnav__toggle { color: rgb(255 255 255 / 0.85); }

.gnav__menu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s;
}
.gnav__menu ul {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  padding: 16px 0 48px;
}
.gnav__menu li {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.gnav__menu a {
  display: block;
  padding: 9px 0;
  font-size: 28px;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s var(--ease);
}
.gnav__menu a:active { opacity: 0.55; }

.gnav.is-open,
.gnav.is-open.is-dark,
.gnav.is-open.is-scrolled {
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.gnav.is-open .logo { color: var(--text); }
.gnav.is-open .gnav__toggle { color: var(--text); }
.gnav.is-open .gnav__toggle span:first-child { transform: rotate(45deg); }
.gnav.is-open .gnav__toggle span:last-child { transform: rotate(-45deg); }
.gnav.is-open .gnav__menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s var(--ease), visibility 0s;
}
.gnav.is-open .gnav__menu li {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease-out);
}
.gnav.is-open .gnav__menu li:nth-child(1) { transition-delay: 60ms; }
.gnav.is-open .gnav__menu li:nth-child(2) { transition-delay: 85ms; }
.gnav.is-open .gnav__menu li:nth-child(3) { transition-delay: 110ms; }
.gnav.is-open .gnav__menu li:nth-child(4) { transition-delay: 135ms; }
.gnav.is-open .gnav__menu li:nth-child(5) { transition-delay: 160ms; }
.gnav.is-open .gnav__menu li:nth-child(6) { transition-delay: 185ms; }
.gnav.is-open .gnav__menu li:nth-child(7) { transition-delay: 210ms; }
html.menu-open { overflow: hidden; }

/* ---------- Buttons and links ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: 980px;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  line-height: 1.18;
  letter-spacing: -0.022em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.pill:hover { background: var(--blue-hover); }
.pill:active { transform: scale(0.97); }
.pill--sm { min-height: 28px; padding: 4px 14px; font-size: 13px; letter-spacing: -0.01em; }
.pill--lg { min-height: 56px; padding: 16px 32px; font-size: 19px; }
.pill--light { background: #fff; color: #1d1d1f; font-weight: 500; }
.pill--light:hover { background: #e8e8ed; }
.magnetic { display: inline-flex; will-change: transform; }

.more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--link);
  font-size: 17px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.more svg { width: 7px; height: 12px; transition: transform 0.3s var(--ease-out); }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.more:hover svg { transform: translateX(3px); }
.more--button {
  appearance: none;
  background: none;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
  color: var(--link);
}
.more--button.is-done { color: #1d8b3c; text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 48px) var(--gutter) 88px;
  text-align: center;
  overflow: clip;
  isolation: isolate;
}

/* ---------- Ambient backgrounds ---------- */
.hero__bg,
.dark__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora__blob {
  position: absolute;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--color), transparent 72%);
  will-change: transform;
}
.aurora__blob--a {
  --size: min(80vw, 1100px);
  --color: rgb(59 140 255 / 0.30);
  left: -14%; top: -40%;
  animation: drift-a 26s ease-in-out infinite alternate;
}
.aurora__blob--b {
  --size: min(72vw, 1000px);
  --color: rgb(124 92 255 / 0.26);
  right: -16%; top: -24%;
  animation: drift-b 31s ease-in-out infinite alternate;
}
.aurora__blob--c {
  --size: min(62vw, 880px);
  --color: rgb(255 122 190 / 0.15);
  left: 36%; top: 32%;
  animation: drift-c 35s ease-in-out infinite alternate;
}
.aurora__blob--d {
  --size: min(56vw, 800px);
  --color: rgb(64 214 255 / 0.18);
  left: -12%; top: 34%;
  animation: drift-d 29s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(14%, 10%, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-12%, 14%, 0) scale(1.08); } }
@keyframes drift-c { to { transform: translate3d(-20%, -12%, 0) scale(1.18); } }
@keyframes drift-d { to { transform: translate3d(18%, -12%, 0) scale(1.1); } }
.is-paused .aurora__blob,
.is-paused .chip__in { animation-play-state: paused; }

.gridlines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(29 29 31 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(29 29 31 / 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 50% -1px;
  -webkit-mask-image: radial-gradient(ellipse 52% 48% at 50% 30%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 52% 48% at 50% 30%, #000 0%, transparent 78%);
}
.hero__fade {
  position: absolute;
  inset: auto 0 0;
  height: 32%;
  background: linear-gradient(to bottom, rgb(245 245 247 / 0), var(--bg-alt));
}

/* Floating glass chips around the hero icon */
.chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.chip {
  position: absolute;
  will-change: transform;
}
.chip__in {
  display: grid;
  place-items: center;
  width: var(--size, 60px);
  aspect-ratio: 1;
  border-radius: 22.37%;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.62));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.9),
    0 1px 2px rgb(20 30 80 / 0.06),
    0 22px 44px -18px rgb(40 50 140 / 0.38);
  animation: bob 7s ease-in-out infinite alternate;
}
.chip__in svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: var(--brand-b);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes bob {
  from { transform: translate3d(0, -8px, 0) rotate(var(--r, 0deg)); }
  to { transform: translate3d(0, 8px, 0) rotate(var(--r, 0deg)); }
}
.chip--1 { left: calc(50% - 330px); top: 15%; --size: 64px; --r: -8deg; }
.chip--2 { left: calc(50% + 262px); top: 11%; --size: 54px; --r: 8deg; }
.chip--3 { left: calc(50% - 600px); top: 55%; --size: 58px; --r: 6deg; }
.chip--4 { left: calc(50% + 530px); top: 61%; --size: 66px; --r: -6deg; }
.chip--2 .chip__in { animation-delay: -2.5s; animation-duration: 8s; }
.chip--3 .chip__in { animation-delay: -4s; animation-duration: 9s; }
.chip--4 .chip__in { animation-delay: -1.2s; animation-duration: 7.5s; }
.js .chips { opacity: 0; }
.is-ready .chips { opacity: 1; transition: opacity 1.4s var(--ease-out) 0.6s; }

/* Soft colour washes behind light sections */
.glow {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.glow::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(1000px, 95vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--glow-color), transparent 72%);
}
.glow--tr::before { --glow-color: rgb(59 140 255 / 0.13); right: -22%; top: -12%; }
.glow--l::before { --glow-color: rgb(124 92 255 / 0.11); left: -28%; top: 18%; }
.glow--r::before { --glow-color: rgb(255 122 190 / 0.10); right: -26%; top: 6%; }

/* Cursor spotlight + glowing edge on cards (added by JS on mouse devices) */
.spot::before,
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.spot::before {
  z-index: -1;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgb(59 140 255 / 0.10)), transparent 45%);
}
.spot::after {
  z-index: 3;
  padding: 1px;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--edge, rgb(59 140 255 / 0.6)), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.spot:hover::before,
.spot:hover::after { opacity: 1; }
.tile--dark.spot { --spot: rgb(41 151 255 / 0.16); --edge: rgb(41 151 255 / 0.7); }

.hero__stage {
  position: relative;
  width: clamp(148px, 17vw, 220px);
  aspect-ratio: 1;
  margin-bottom: clamp(32px, 4vw, 48px);
  perspective: 900px;
  will-change: transform, opacity;
}
.hero__glow {
  position: absolute;
  inset: -130%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(59 140 255 / 0.22), rgb(106 77 255 / 0.12) 45%, transparent 72%);
  animation: breathe 9s var(--ease) infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(0.92); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* Layered app icon with tvOS-style parallax depth */
.appicon {
  position: absolute;
  inset: 0;
  border-radius: 22.37%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}
.appicon__layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.appicon__base {
  background:
    radial-gradient(110% 110% at 18% 8%, rgb(120 180 255 / 0.9) 0%, transparent 46%),
    var(--brand-gradient);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    inset 0 -14px 30px -10px rgb(30 20 120 / 0.35),
    0 40px 70px -28px rgb(47 91 255 / 0.6),
    0 20px 40px -24px rgb(0 0 0 / 0.35);
}
.appicon__glyph {
  display: grid;
  place-items: center;
  color: #fff;
  transform: translateZ(34px);
}
.appicon__glyph svg {
  width: 64%;
  height: 64%;
  filter: drop-shadow(0 8px 12px rgb(16 24 110 / 0.35));
}
.appicon__shine {
  overflow: hidden;
  transform: translateZ(52px);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 42%);
  pointer-events: none;
}
.appicon__shine span {
  position: absolute;
  inset: -60%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.1) 42%, transparent 70%);
  will-change: transform;
}
.appicon-shadow {
  position: absolute;
  left: 12%; right: 12%;
  bottom: -20%;
  height: 16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(20 30 90 / 0.28), transparent);
  will-change: transform, opacity;
}

.hero__copy { will-change: transform, opacity; }
.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 16px;
  line-height: 1;
}
.lockup__mark {
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.lockup__word {
  margin-right: -0.4em; /* balance the trailing letter-spacing */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-2);
}
/* Announcement pill under the hero buttons */
.announce {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin-top: 30px;
  padding: 5px 16px 5px 6px;
  border-radius: 980px;
  background: rgb(255 255 255 / 0.62);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.9),
    0 0 0 1px rgb(47 91 255 / 0.12),
    0 12px 28px -16px rgb(40 50 140 / 0.45);
  color: var(--text);
  font-size: 14px;
  letter-spacing: -0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.announce__tag {
  padding: 5px 11px;
  border-radius: 980px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.announce { max-width: 100%; }
.announce__text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.announce svg { flex: none; width: 6px; height: 11px; color: var(--text-3); transition: transform 0.3s var(--ease-out); }
.announce:hover .announce__text { text-decoration: underline; text-underline-offset: 3px; }
.announce:hover svg { transform: translateX(3px); }
.hero__title {
  font-size: clamp(48px, 7.2vw, 96px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.hero__sub {
  max-width: 30em;
  margin: 22px auto 0;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.34;
  letter-spacing: 0.005em;
  color: var(--text-2);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 32px;
  margin-top: 36px;
}

/* Entrance (one sequence on load) */
.js [data-in] { opacity: 0; transform: translate3d(0, 20px, 0); }
.js .hero__stage { opacity: 0; }
.is-ready [data-in] {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s var(--ease-out) calc(220ms + var(--d, 0) * 90ms),
    transform 1.2s var(--ease-out) calc(220ms + var(--d, 0) * 90ms);
}
.is-ready .hero__stage { opacity: 1; transition: opacity 0.9s var(--ease-out); }

/* ---------- About statement (words light up as you scroll) ---------- */
.statement__text {
  max-width: 21em;
  margin-top: clamp(40px, 5vw, 64px);
  font-size: clamp(30px, 3.9vw, 56px);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.js .statement__text .word {
  color: rgb(29 29 31 / 0.16);
  transition: color 0.4s var(--ease);
}
.js .statement__text .word.is-lit { color: var(--text); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(96px, 11vw, 160px); }
.section--alt {
  background:
    radial-gradient(60% 70% at 85% 0%, rgb(59 140 255 / 0.08), transparent 70%),
    linear-gradient(180deg, #f3f4f8 0%, #eceef6 100%);
}
.section--tight { padding-top: 0; }

.section__title {
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.section__lead {
  max-width: 30em;
  margin-top: 18px;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.34;
  letter-spacing: 0.005em;
  color: var(--text-2);
}

/* Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(48px, 6vw, 80px);
}
.tile {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: clamp(28px, 3vw, 40px);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  isolation: isolate;
}
.tile h3 {
  margin-top: auto;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tile p {
  max-width: 28em;
  margin-top: 10px;
  color: var(--text-2);
}
.tile__copy h3 { margin-top: 0; }
.tile__icon {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--brand-b);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 40px;
}
.tile--dark {
  color: var(--dark-text);
  background:
    radial-gradient(90% 80% at 100% 0%, rgb(47 91 255 / 0.38), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgb(124 92 255 / 0.22), transparent 60%),
    var(--dark-bg);
}
.tile--dark p { color: var(--dark-2); }
.tile--dark .tile__icon { stroke: var(--dark-link); }

/* Mobile tile with two phones */
.tile--mobile {
  grid-column: span 4;
  min-height: 580px;
  background: linear-gradient(165deg, #ebf1ff 0%, #ffffff 58%);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 24px;
}
.tile--mobile .tile__copy { align-self: start; }
.phones { position: relative; min-height: 460px; }
.phone {
  position: absolute;
  aspect-ratio: 9 / 19.3;
  padding: 2.6%;
  border-radius: 15% / 7%;
  background: #1d1d1f;
  box-shadow:
    inset 0 0 0 1.5px #3a3a3c,
    0 40px 60px -30px rgb(0 0 0 / 0.45);
  transition: transform 1.4s var(--ease-out);
}
.phone--front { width: 50%; right: 4%; top: 6%; }
.phone--back { width: 46%; right: 46%; top: 22%; }
.js .tile--mobile .phone--front { transform: translate3d(0, 80px, 0); }
.js .tile--mobile .phone--back { transform: translate3d(0, 120px, 0); }
.js .tile--mobile.is-in .phone { transform: none; }
.js .tile--mobile.is-in .phone--back { transition-delay: 0.12s; }

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12.6% / 5.9%;
  overflow: hidden;
}
.phone__screen::before {
  content: "";
  position: absolute;
  top: 2.4%;
  left: 50%;
  z-index: 2;
  width: 30%;
  height: 3.4%;
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
}
.screen-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 19cqi 5.5cqi 0;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(90% 60% at 30% 10%, rgb(120 180 255 / 0.7), transparent 60%),
    radial-gradient(70% 50% at 90% 100%, rgb(214 107 255 / 0.45), transparent 70%),
    var(--brand-gradient);
}
.screen-lock > span { display: block; flex: none; }
.lk-date { font-size: 5.4cqi; font-weight: 500; opacity: 0.88; }
.lk-time {
  margin-top: 0.5cqi;
  font-size: 27cqi;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.screen-lock .lk-note {
  display: flex;
  align-items: flex-start;
  gap: 3.4cqi;
  width: 100%;
  margin-top: 18cqi;
  padding: 4.4cqi;
  border-radius: 6.5cqi;
  background: rgb(255 255 255 / 0.24);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
  text-align: left;
}
.lk-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 9.5cqi; height: 9.5cqi;
  border-radius: 22.37%;
  background: #fff;
  color: var(--brand-b);
}
.lk-icon svg { width: 72%; height: 72%; }
.lk-text { display: flex; flex-direction: column; gap: 0.6cqi; min-width: 0; font-size: 4.5cqi; line-height: 1.25; }
.lk-text b { font-size: 5cqi; font-weight: 600; }
.lk-text small { opacity: 0.88; }
.lk-note em { margin-left: auto; font-size: 4cqi; font-style: normal; opacity: 0.75; }
.screen-lock .lk-bar {
  position: absolute;
  bottom: 3.2cqi;
  left: 50%;
  width: 36%;
  height: 1.5cqi;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.85);
  transform: translateX(-50%);
}

.phone { container-type: inline-size; }
.screen-list {
  display: flex;
  flex-direction: column;
  gap: 3.6cqi;
  padding: 24cqi 7cqi 0;
  background: #fff;
  color: #1d1d1f;
  font-size: 5.6cqi;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: left;
}
.screen-list > span { display: flex; flex: none; }
.sl-title { margin-bottom: 1cqi; font-size: 11cqi; font-weight: 700; letter-spacing: -0.02em; }
.sl-card {
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.2cqi;
  min-height: 32cqi;
  padding: 6cqi;
  border-radius: 6cqi;
  background: var(--brand-gradient);
  color: #fff;
}
.sl-card b { font-size: 6.4cqi; font-weight: 600; }
.sl-card small { font-size: 4.8cqi; opacity: 0.82; }
.sl-row {
  align-items: center;
  gap: 4cqi;
  padding: 4.4cqi 5cqi;
  border-radius: 5cqi;
  background: #f2f2f4;
  font-weight: 500;
}
.sl-row i { width: 6cqi; height: 6cqi; border-radius: 1.8cqi; background: var(--brand-a); }
.sl-row i.i2 { background: #34c759; }
.sl-row i.i3 { background: #8e8e93; }
.sl-row em {
  margin-left: auto;
  padding: 0.6cqi 2.4cqi;
  border-radius: 99px;
  background: #ff3b30;
  color: #fff;
  font-size: 4.4cqi;
  font-style: normal;
  font-weight: 600;
}
.sl-tabbar { margin: auto -7cqi 0; height: 14cqi; border-top: 1px solid #e5e5ea; background: #fafafa; }

/* Web tile with a small browser window */
.tile--web {
  min-height: 580px;
  background: linear-gradient(195deg, #f1edff 0%, #ffffff 58%);
}
.browser {
  margin: 36px calc(-1 * clamp(28px, 3vw, 40px)) calc(-1 * clamp(28px, 3vw, 40px)) 0;
  margin-top: auto;
  height: 280px;
  border-radius: 14px 0 0 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 24px 40px -24px rgb(0 0 0 / 0.25);
  overflow: hidden;
}
.tile--web .tile__copy { margin-bottom: 36px; }
.browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid #ececf0;
}
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #dcdce1; }
.browser__body {
  display: grid;
  grid-template-columns: 31% minmax(0, 1fr);
  gap: 10px;
  height: calc(100% - 30px);
  padding: 12px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.bw-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 8px;
  background: #f5f5f7;
}
.bw-side i {
  padding: 5px 8px;
  border-radius: 6px;
  overflow: hidden;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #6e6e73;
}
.bw-side i.is-active {
  background: #fff;
  color: #1d1d1f;
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.bw-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-bottom: 10px;
  border-radius: 8px;
  background: #f5f5f7;
}
.bw-kpi {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 10px 12px 0;
}
.bw-kpi small { grid-column: 1 / -1; color: #6e6e73; }
.bw-kpi b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #1d1d1f; }
.bw-kpi em {
  justify-self: start;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgb(52 199 89 / 0.14);
  color: #1d8b3c;
  font-style: normal;
  font-weight: 600;
}
.bw-chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 7%;
  min-height: 0;
  padding: 4px 12px 0;
}
.bw-foot { padding: 0 12px; color: #86868b; font-size: 10.5px; }
.bw-chart b {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, var(--brand-a), var(--brand-c));
  transform-origin: 50% 100%;
}
.js .bw-chart b { transform: scaleY(0.08); transition: transform 1.1s var(--ease-out); }
.js .tile--web.is-in .bw-chart b { transform: none; }
.js .tile--web.is-in .bw-chart b:nth-child(2) { transition-delay: 0.08s; }
.js .tile--web.is-in .bw-chart b:nth-child(3) { transition-delay: 0.16s; }
.js .tile--web.is-in .bw-chart b:nth-child(4) { transition-delay: 0.24s; }
.js .tile--web.is-in .bw-chart b:nth-child(5) { transition-delay: 0.32s; }
.js .tile--web.is-in .bw-chart b:nth-child(6) { transition-delay: 0.4s; }
/* ---------- Mini interface illustrations (tiles and process steps) ---------- */
.mini {
  display: block;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 10px 24px -14px rgb(30 40 110 / 0.3);
}
.tile__art { position: relative; margin-bottom: 36px; font-size: 13px; line-height: 1.3; letter-spacing: -0.01em; }
.tile { min-height: 400px; }

/* E-commerce: product row + order toast */
.product { display: flex; align-items: center; gap: 12px; padding: 12px; }
.product__img {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 11px;
  background:
    radial-gradient(60% 60% at 30% 25%, rgb(255 255 255 / 0.7), transparent 60%),
    linear-gradient(140deg, #cfe0ff 0%, #a9c1ff 50%, #8f9dff 100%);
}
.product__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product__text b { font-size: 14px; font-weight: 600; }
.product__text small { font-size: 13px; color: var(--text-2); }
.product__btn {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 980px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0 18px;
  padding: 9px 13px;
  border-radius: 12px;
  background: #1d1d1f;
  color: #fff;
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.5);
  transition: opacity 0.6s var(--ease-out) 0.6s, transform 0.7s var(--ease-out) 0.6s;
}
.toast i {
  position: relative;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #34c759;
}
.toast i::after {
  content: "";
  position: absolute;
  left: 5.5px; top: 3px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.js .tile:not(.is-in) .toast { opacity: 0; transform: translate3d(0, 12px, 0); }

/* Care after launch: release notes */
.art-releases { display: grid; gap: 4px; }
.rel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgb(255 255 255 / 0.72);
}
.rel b { color: #fff; font-weight: 600; }
.rel em { font-style: normal; font-size: 12px; color: var(--dark-2); white-space: nowrap; }
.rel--new { background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.rel--new em { color: #30d158; }

/* Consulting: code review comment */
.code {
  display: block;
  overflow: hidden;
  padding: 10px 0;
  border-radius: 12px;
  background: #f5f5f7;
  font: 12px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0;
  color: #1d1d1f;
}
.code__line { display: block; padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code__line--hl { background: rgb(255 204 0 / 0.16); box-shadow: inset 2px 0 0 #ffcc00; }
.code .ln { display: inline-block; width: 22px; color: #a1a1a6; }
.code .k { color: #ad3da4; }
.code .f { color: #2f5bff; }
.comment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 0 22px;
  padding: 10px 12px;
  transition: opacity 0.6s var(--ease-out) 0.6s, transform 0.7s var(--ease-out) 0.6s;
}
.comment__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 22.37%;
  background: var(--brand-gradient);
  color: #fff;
}
.comment__avatar svg { width: 66%; height: 66%; }
.js .tile:not(.is-in) .comment { opacity: 0; transform: translate3d(0, 12px, 0); }

/* Client work tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 32px;
  padding-top: 32px;
}
.tags li {
  padding: 7px 14px;
  border-radius: 980px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
  font-size: 14px;
  letter-spacing: -0.01em;
}
.tags li:nth-child(3n + 1) { background: #eef3ff; box-shadow: 0 0 0 1px rgb(47 91 255 / 0.18); color: #2443c4; }

/* Process: step header + illustrations */
.step__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.step__meta { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.step__art { margin: 28px 0 32px; font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; }

.art-chat { display: flex; flex-direction: column; gap: 8px; }
.bubble {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 18px;
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.bubble--in { align-self: flex-start; background: #e9e9eb; border-bottom-left-radius: 6px; transition-delay: 0.35s; }
.bubble--out { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; transition-delay: 0.95s; }
.js .step:not(.is-in) .bubble { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.96); }

.art-check { display: grid; gap: 11px; }
.check { display: flex; align-items: center; gap: 10px; }
.check i {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: inset 0 0 0 1.5px var(--blue);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.check i::after {
  content: "";
  position: absolute;
  left: 7px; top: 3.5px;
  width: 4.5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(1);
  transition: transform 0.35s var(--ease-out);
}
.check:nth-child(1) i, .check:nth-child(1) i::after { transition-delay: 0.4s; }
.check:nth-child(2) i, .check:nth-child(2) i::after { transition-delay: 0.75s; }
.check:nth-child(3) i, .check:nth-child(3) i::after { transition-delay: 1.1s; }
.js .step:not(.is-in) .check i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.js .step:not(.is-in) .check i::after { transform: rotate(45deg) scale(0); }

.art-build { padding: 14px; font-size: 13px; }
.art-build__top { display: flex; justify-content: space-between; gap: 8px; }
.art-build__top b { font-weight: 600; }
.art-build__top span { color: var(--text-2); }
.progress { display: block; height: 6px; margin: 10px 0 12px; overflow: hidden; border-radius: 3px; background: #ececf0; }
.progress b {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-gradient);
  transform-origin: 0 50%;
  transition: transform 1.3s var(--ease-out) 0.4s;
}
.js .step:not(.is-in) .progress b { transform: scaleX(0); }
.commits { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.commits i { aspect-ratio: 1; border-radius: 2.5px; background: rgb(47 91 255 / 0.1); }
.commits .c1 { background: rgb(47 91 255 / 0.28); }
.commits .c2 { background: rgb(47 91 255 / 0.48); }
.commits .c3 { background: rgb(47 91 255 / 0.72); }
.commits .c4 { background: rgb(47 91 255 / 1); }

.art-launch { padding: 12px; }
.store { display: flex; align-items: center; gap: 10px; }
.store__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  border-radius: 22.37%;
  background: var(--brand-gradient);
  color: #fff;
}
.store__icon svg { width: 62%; height: 62%; }
.store__text { display: flex; flex-direction: column; min-width: 0; }
.store__text b { font-size: 14px; font-weight: 600; }
.store__text small { font-size: 12px; color: var(--text-2); }
.store__live {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 980px;
  background: rgb(52 199 89 / 0.14);
  color: #1d8b3c;
  font-size: 12px;
  font-weight: 600;
}
.spark { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.spark__area { fill: url(#spark-fill); transition: opacity 1s var(--ease) 0.9s; }
.spark__line {
  fill: none;
  stroke: var(--brand-b);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s var(--ease-out) 0.4s;
}
.js .step:not(.is-in) .spark__line { stroke-dashoffset: 1; }
.js .step:not(.is-in) .spark__area { opacity: 0; }

/* ---------- Dark section ---------- */
.dark {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--dark-bg);
  color: var(--dark-text);
  padding-block: clamp(112px, 14vw, 200px);
}
.aurora--dark .aurora__blob--a { --color: rgb(47 91 255 / 0.34); left: -22%; top: -36%; }
.aurora--dark .aurora__blob--b { --color: rgb(150 80 255 / 0.26); right: -18%; top: 18%; }
.gridlines--dark {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 22% 26%, #000 0%, transparent 76%);
  mask-image: radial-gradient(ellipse 60% 55% at 22% 26%, #000 0%, transparent 76%);
}
.dark__title {
  font-size: clamp(48px, 7.4vw, 104px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.gradient-text {
  display: inline-block;
  padding-bottom: 0.06em;
  background: linear-gradient(100deg, #4C9AFF 0%, #8A6BFF 42%, #D16BFF 72%, #FF8FB1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.dark__lead {
  max-width: 28em;
  margin-top: 24px;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.34;
  letter-spacing: 0.005em;
  color: var(--dark-2);
}
.dark__head { flex-wrap: nowrap; gap: 18px 48px; }
.dark__head .dark__lead { flex: 0 1 17em; min-width: 13em; margin-top: 0; padding-bottom: 0.5em; }
@media (max-width: 1068px) {
  .dark__head { flex-wrap: wrap; }
  .dark__head .dark__lead { flex-basis: auto; max-width: 26em; }
}

/* Principle cards: dark glass with a small live illustration */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(56px, 7vw, 96px);
}
.pillar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 32px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.025));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 40px 80px -40px rgb(0 0 0 / 0.8);
}
.pillar.spot { --spot: rgb(41 151 255 / 0.14); --edge: rgb(41 151 255 / 0.65); }
.pillar__art {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 172px;
  margin-bottom: 32px;
  overflow: hidden;
  border-radius: 18px;
  background: rgb(0 0 0 / 0.42);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: rgb(255 255 255 / 0.85);
}
.pillar h3 {
  margin-top: 0;
  padding-inline: 4px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.014em;
}
.pillar p {
  max-width: 24em;
  margin-top: 8px;
  padding-inline: 4px;
  color: var(--dark-2);
}

/* Performance: frame timings marching under the 16.7 ms budget */
.art-frames { padding: 16px 16px 14px; gap: 12px; }
.frames {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}
.frames::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 22%;
  z-index: 1;
  border-top: 1px dashed rgb(255 214 10 / 0.6);
}
.frames__budget {
  position: absolute;
  right: 0;
  top: calc(22% - 19px);
  z-index: 1;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgb(0 0 0 / 0.6);
  color: rgb(255 214 10 / 0.9);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.frames__track {
  position: absolute;
  left: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: max-content;
  animation: march 9s linear infinite;
  will-change: transform;
}
.frames__track i {
  width: 9px;
  height: var(--h);
  margin-right: 6px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #30d158, rgb(48 209 88 / 0.25));
}
@keyframes march { to { transform: translate3d(-50%, 0, 0); } }
.frames__meta { display: flex; justify-content: space-between; gap: 8px; color: var(--dark-2); font-size: 12px; }
.frames__meta span:first-child { display: inline-flex; align-items: center; gap: 6px; color: rgb(255 255 255 / 0.85); }
.frames__meta i { width: 7px; height: 7px; border-radius: 50%; background: #30d158; box-shadow: 0 0 8px #30d158; }

/* Accessibility: growing type and two switches */
.art-a11y { justify-content: space-between; padding: 16px 16px 8px; }
.type-scale { display: flex; align-items: baseline; gap: 14px; color: #fff; font-weight: 600; line-height: 1; }
.type-scale span:nth-child(1) { font-size: 16px; opacity: 0.45; }
.type-scale span:nth-child(2) { font-size: 25px; opacity: 0.7; }
.type-scale span:nth-child(3) { font-size: 36px; }
.type-scale small { margin-left: auto; align-self: center; font-size: 12px; font-weight: 400; color: var(--dark-2); }
.tg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}
.switch {
  position: relative;
  flex: none;
  width: 38px; height: 22px;
  border-radius: 99px;
  background: #30d158;
  transition: background-color 0.35s var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
  transform: translateX(16px);
  transition: transform 0.4s var(--ease-out);
}
.tg:nth-of-type(2) .switch, .tg:nth-of-type(2) .switch::after { transition-delay: 0.5s; }
.tg:nth-of-type(3) .switch, .tg:nth-of-type(3) .switch::after { transition-delay: 0.85s; }
.js .pillar:not(.is-in) .switch { background: rgb(120 120 128 / 0.36); }
.js .pillar:not(.is-in) .switch::after { transform: none; }

/* Privacy: a consent prompt */
.art-consent {
  align-items: center;
  justify-content: center;
  padding: 12px;
  background:
    radial-gradient(70% 80% at 50% 100%, rgb(10 132 255 / 0.22), transparent 70%),
    rgb(0 0 0 / 0.42);
}
.prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: min(100%, 250px);
  padding: 14px 14px 0;
  border-radius: 16px;
  background: rgb(44 44 46 / 0.94);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 40px -20px rgb(0 0 0 / 0.9);
  text-align: center;
  transition: opacity 0.4s var(--ease-out) 0.45s, transform 0.55s var(--ease-out) 0.45s;
}
.prompt__icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--blue);
}
.prompt__icon svg { width: 14px; height: 14px; fill: #fff; }
.prompt b { font-size: 13px; font-weight: 600; color: #fff; }
.prompt small { font-size: 11.5px; color: rgb(255 255 255 / 0.6); }
.prompt__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(100% + 28px);
  margin-top: 10px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.prompt__btns span { padding: 9px 0; color: #0a84ff; font-size: 13px; }
.prompt__btns .is-primary { font-weight: 600; border-left: 1px solid rgb(255 255 255 / 0.12); }
.js .pillar:not(.is-in) .prompt { opacity: 0; transform: scale(0.9); }

.is-paused .frames__track { animation-play-state: paused; }

/* ---------- Section header: title and lead side by side ---------- */
.section__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px 64px;
}
.section__head .section__lead { margin-top: 0; max-width: 21em; padding-bottom: 0.45em; }
.band--gray { background-color: var(--bg-alt); }

/* ---------- Selected work: full-bleed Snoomi showcase ---------- */
.showcase {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(104px, 12vw, 180px);
  color: var(--dark-text);
  background:
    radial-gradient(55% 65% at 78% 48%, rgb(140 110 255 / 0.34), transparent 66%),
    radial-gradient(45% 55% at 6% 100%, rgb(59 140 255 / 0.2), transparent 62%),
    linear-gradient(175deg, #1c2050 0%, #13163b 52%, #090a22 100%);
}
.showcase .section__lead { color: rgb(245 245 247 / 0.6); }
.showcase__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.showcase__stars {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(1.4px 1.4px at 24px 36px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 132px 92px, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 214px 18px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 76px 170px, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 190px 206px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 252px 140px, #fff 50%, transparent 52%);
  background-size: 280px 240px;
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 25%, transparent 90%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
.showcase__moonglow {
  position: absolute;
  right: -12%;
  top: -8%;
  width: min(70vw, 1200px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 214 140 / 0.13), transparent 70%);
}
.showcase__feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  margin-top: clamp(40px, 5vw, 72px);
}
.showcase__copy { display: flex; flex-direction: column; align-items: flex-start; }
.showcase__title {
  margin-top: 24px;
  font-size: clamp(64px, 8.4vw, 132px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.035em;
  background: linear-gradient(180deg, #ffffff 35%, #cfc6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.05em;
}
.showcase__text {
  max-width: 17em;
  margin-top: 22px;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: rgb(245 245 247 / 0.8);
}
.showcase__note { margin-top: 28px; font-size: 15px; color: var(--dark-2); }
.showcase__device { position: relative; height: clamp(560px, 50vw, 730px); }
.showcase__device::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 115%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(255 210 122 / 0.16), rgb(140 110 255 / 0.12) 45%, transparent 70%);
}
.phone--snoomi {
  left: 0;
  right: 0;
  top: 0;
  margin-inline: auto;
  width: clamp(250px, 22vw, 322px);
  box-shadow: inset 0 0 0 1.5px #3a3a3c, 0 50px 90px -30px rgb(0 0 0 / 0.75);
}
.js .showcase__device .phone--snoomi { transform: translate3d(0, 120px, 0); }
.js .showcase__device.is-in .phone--snoomi { transform: none; transition-delay: 0.15s; }

/* ---------- Client projects band ---------- */
.clients { padding-block: clamp(96px, 11vw, 160px); }
.clients__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 48px clamp(48px, 6vw, 112px);
}
.clients__copy { display: flex; flex-direction: column; align-items: flex-start; }
.clients__title {
  margin-top: 20px;
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.022em;
}
.clients__copy p {
  max-width: 25em;
  margin-top: 16px;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.42;
  color: var(--text-2);
}
.clients__copy .more { margin-top: 26px; }
.tags--lg { gap: 12px; margin: 0; padding: 0; }
.tags--lg li {
  padding: 14px 22px;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 500;
  box-shadow: var(--card-shadow);
}
.tags--lg li:nth-child(3n + 1) { box-shadow: 0 0 0 1px rgb(47 91 255 / 0.2), 0 20px 40px -26px rgb(47 91 255 / 0.5); }
.clients__tags { min-width: 0; }

/* Capability marquee: two rows drifting in opposite directions (built by JS) */
.mq {
  display: grid;
  gap: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.mq__row { overflow: hidden; padding: 6px 0 22px; }
.mq__track { display: flex; gap: 12px; width: max-content; will-change: transform; }
.mq__group { flex: none; flex-wrap: nowrap; width: max-content; }
.mq__group li { flex: none; white-space: nowrap; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 10px 24px -14px rgb(30 40 110 / 0.3); }
.mq__group li:nth-child(3n + 1) { box-shadow: 0 0 0 1px rgb(47 91 255 / 0.2), 0 12px 24px -14px rgb(47 91 255 / 0.5); }

.screen-snoomi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30% 9% 0;
  color: #fff;
  background: radial-gradient(120% 60% at 50% 0%, #3a2f7d 0%, #1c1d4a 55%, #10112f 100%);
}
.screen-snoomi span { display: block; flex: none; position: relative; }
.screen-snoomi .sn-stars {
  position: absolute;
  inset: 0;
  opacity: 0.8;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 14%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 72% 10%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 84% 27%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 30% 33%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 61% 21%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 11% 45%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 90% 47%, #fff 50%, transparent 52%);
  animation: twinkle 3.6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.4; } to { opacity: 0.9; } }
.sn-moon {
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff8e1 0%, #ffe0a0 55%, #f3bd66 100%);
  box-shadow: 0 0 36px 6px rgb(255 214 140 / 0.35);
}
.sn-time {
  margin-top: 12%;
  font-size: 15cqi;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.sn-label {
  margin-top: 3%;
  font-size: 5.6cqi;
  color: rgb(255 255 255 / 0.6);
}
.screen-snoomi .sn-row {
  display: flex;
  align-items: center;
  gap: 8%;
  width: 100%;
  height: 8.5%;
  margin-top: 5%;
  padding: 0 7%;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.08);
}
.screen-snoomi .sn-row:first-of-type,
.sn-label + .sn-row { margin-top: 13%; }
.screen-snoomi .sn-row { gap: 4cqi; font-size: 5.2cqi; color: rgb(255 255 255 / 0.88); }
.sn-row i {
  flex: none;
  width: 6cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgb(255 214 140 / 0.85);
}
.sn-row.is-done i { background: rgb(255 214 140 / 0.9); box-shadow: none; }
.screen-snoomi .sn-cta {
  width: 100%;
  margin: auto 0 15cqi;
  padding: 4.4cqi;
  border-radius: 99px;
  background: rgb(255 214 140 / 0.92);
  color: #1c1d4a;
  font-size: 5.4cqi;
  font-weight: 600;
  text-align: center;
}
.sn-row em { margin-left: auto; font-style: normal; font-size: 4.6cqi; color: rgb(255 255 255 / 0.55); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: rgb(0 0 0 / 0.06);
  color: var(--text-2);
}
.badge--live { background: rgb(255 255 255 / 0.12); color: #fff; }
.badge__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd27a;
}
.badge__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: 0.6; }
  70%, 100% { transform: scale(3); opacity: 0; }
}


/* ---------- About ---------- */
.about__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 0;
  margin-top: clamp(56px, 7vw, 96px);
}
.about__facts > div {
  padding: 4px clamp(20px, 2.4vw, 36px);
  border-left: 1px solid var(--line);
}
.about__facts dt { display: flex; flex-direction: column; }
.about__facts dt b {
  font-size: clamp(44px, 4.6vw, 68px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.about__facts dt span {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.about__facts dd {
  max-width: 22em;
  margin-top: 6px;
  color: var(--text-2);
}

/* ---------- Process ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(48px, 6vw, 72px);
}
.step {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 32px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.step__num {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-b);
}
.step h3 {
  margin-top: auto;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.step p { margin-top: 10px; color: var(--text-2); }

/* ---------- Ways to work together ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(48px, 6vw, 80px);
}
.plan {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.plan__kicker {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-b);
}
.plan__kicker i { font-style: normal; font-weight: 500; color: var(--text-3); }
.plan h3 {
  margin-top: clamp(28px, 3vw, 44px);
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.plan > p { margin-top: 10px; color: var(--text-2); }
.plan__list {
  display: grid;
  gap: 12px;
  margin: 28px 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.plan__list li { position: relative; padding-left: 28px; }
.plan__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.36em;
  width: 15px; height: 8px;
  border: solid var(--brand-b);
  border-width: 0 0 2px 2px;
  border-radius: 1px;
  transform: rotate(-45deg) scale(0.8);
  transform-origin: 30% 50%;
}
.plan .plan__for { margin-top: auto; font-size: 14px; }
.plan__for b { font-weight: 600; color: var(--text); }

/* ---------- Questions ----------
   Panels open on a firm spring with no overshoot (stiffness 480, damping 40,
   mass 0.6); the answer fades in over 180ms and out faster, in 140ms. */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 48px 64px;
  align-items: start;
}
.faq__intro p {
  max-width: 20em;
  margin-top: 18px;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.34;
  letter-spacing: 0.005em;
  color: var(--text-2);
}
.faq__intro .more { margin-top: 22px; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s var(--ease);
}
.faq__btn:hover { color: var(--link); }
.faq__btn svg {
  flex: none;
  width: 8px; height: 14px;
  margin-right: 6px;
  color: var(--text-3);
  transform: rotate(90deg);
  transition: transform 434ms linear(0, 0.1217, 0.3109, 0.4794, 0.6121, 0.7125, 0.7873, 0.8458, 0.8861, 0.9158, 0.9378, 0.9541, 0.9661, 0.9749, 0.9815, 0.9863, 0.9899, 0.9925, 0.9945, 0.9959, 0.997, 0.9978, 0.9984, 0.9988, 0.9991, 0.9994, 0.9995, 1);
}
html:not(.js) .faq__btn { cursor: default; }
html:not(.js) .faq__btn svg { display: none; }
.faq__item.is-open .faq__btn svg { transform: rotate(270deg); }
.faq__clip { display: grid; grid-template-rows: 1fr; }
.js .faq__clip {
  grid-template-rows: 0fr;
  transition: grid-template-rows 517ms linear(0, 0.0784, 0.2206, 0.3661, 0.5016, 0.6065, 0.6909, 0.7579, 0.8107, 0.852, 0.8862, 0.9111, 0.9306, 0.9458, 0.9577, 0.967, 0.9746, 0.9802, 0.9845, 0.9879, 0.9906, 0.9926, 0.9942, 0.9956, 0.9965, 0.9973, 0.9979, 0.9984, 0.9987, 0.999, 0.9992, 0.9994, 1);
}
.js .faq__item.is-open .faq__clip { grid-template-rows: 1fr; }
.faq__panel { min-height: 0; overflow: hidden; }
.faq__a { max-width: 36em; padding: 0 40px 26px 0; color: var(--text-2); }
.js .faq__a { opacity: 0; transition: opacity 140ms cubic-bezier(0.4, 0, 1, 1); }
.js .faq__item.is-open .faq__a { opacity: 1; transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1); }

/* ---------- Contact ---------- */
.cta {
  padding: clamp(8px, 2vw, 24px) 0 clamp(96px, 12vw, 160px);
  text-align: center;
}
.cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 11vw, 150px) clamp(22px, 4vw, 48px);
  border-radius: 36px;
  color: var(--dark-text);
  background:
    radial-gradient(70% 90% at 50% 118%, rgb(47 91 255 / 0.42), transparent 70%),
    linear-gradient(175deg, #14173d 0%, #0a0b24 55%, #05050f 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 40px 90px -50px rgb(20 26 90 / 0.7);
}
.cta__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 50% -1px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 0%, transparent 78%);
}
.aurora--panel { z-index: -1; }
.aurora--panel .aurora__blob--a { --size: 80%; --color: rgb(59 140 255 / 0.36); left: -26%; top: -62%; }
.aurora--panel .aurora__blob--b { --size: 72%; --color: rgb(124 92 255 / 0.36); right: -22%; top: -30%; }
.aurora--panel .aurora__blob--c { --size: 62%; --color: rgb(255 122 190 / 0.16); left: 22%; top: 52%; }
.cta__icon {
  display: inline-grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 22.37%;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), 0 24px 50px -14px rgb(47 91 255 / 0.8);
}
.cta__icon svg { width: 64%; height: 64%; }
.cta__title {
  margin-top: 36px;
  padding-bottom: 0.06em;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.018em;
  background: linear-gradient(180deg, #ffffff 40%, #c9c2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.cta__lead {
  max-width: 26em;
  margin: 22px auto 0;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.34;
  letter-spacing: 0.005em;
  color: rgb(245 245 247 / 0.68);
}
.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
}
.cta .more--button { color: var(--dark-link); }
.cta .more--button.is-done { color: #30d158; }
.cta :focus-visible { outline-color: #fff; }

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 1s var(--ease-out) calc(var(--d, 0) * 90ms),
    transform 1.2s var(--ease-out) calc(var(--d, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Footer ---------- */
.footer {
  padding: 18px 0 max(22px, env(safe-area-inset-bottom));
  background: var(--bg-alt);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.34;
  letter-spacing: -0.01em;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  margin-bottom: 16px;
  padding: clamp(36px, 4.5vw, 56px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.4;
}
.footer .logo { color: var(--text); }
.footer .logo:hover { text-decoration: none; }
.footer__brand p { margin-top: 14px; }
.footer__col h2 { margin: 0; font-size: 12px; font-weight: 600; color: var(--text); }
.footer__col ul { display: grid; gap: 10px; margin-top: 14px; }
.footer__fine {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  padding-top: 16px;
}
.footer__links { display: flex; flex-wrap: wrap; }
.footer__links li + li { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); }
.footer a { color: #424245; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__place { margin-left: auto; }

/* ---------- Document pages (privacy, company information) ---------- */
.doc {
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 104px)) 0 clamp(88px, 10vw, 140px);
}
.doc__inner { max-width: 692px; margin-inline: auto; }
.doc__kicker {
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-b);
}
.doc h1 {
  margin-top: 8px;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.07;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.doc__intro {
  margin-top: 18px;
  font-size: 21px;
  line-height: 1.38;
  letter-spacing: 0.004em;
  color: var(--text-2);
}
.doc__meta { margin-top: 14px; font-size: 14px; color: var(--text-3); }
.doc h2 {
  margin: 52px 0 12px;
  font-size: 24px;
  line-height: 1.17;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.doc p, .doc ul { margin-top: 12px; }
.doc ul { list-style: disc; padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--link); text-underline-offset: 3px; }
.doc address { font-style: normal; margin-top: 12px; }

.facts-table {
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.facts-table > div {
  display: grid;
  grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
  gap: 4px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.facts-table dt { color: var(--text-2); }
.facts-table dd { font-weight: 500; }
.doc .facts-table { margin-top: 20px; }
.doc .facts-table > div { padding: 12px 0; }

/* ---------- Not found ---------- */
.notfound {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 48px) 0 80px;
  text-align: center;
}
.notfound__code {
  font-size: clamp(96px, 18vw, 180px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.045em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.notfound h1 {
  margin-top: 16px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.notfound__lead {
  max-width: 30em;
  margin: 14px auto 0;
  font-size: 19px;
  color: var(--text-2);
}
.notfound__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
}

/* ---------- Responsive ---------- */
@media (min-width: 1700px) {
  :root { --max: 1360px; }
  .tile--mobile, .tile--web { min-height: 640px; }
}
@media (max-width: 1280px) {
  .chip--3, .chip--4 { display: none; }
}
@media (max-width: 860px) {
  .chips { display: none; }
}

@media (max-width: 1068px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { grid-column: span 1; }
  .tile--mobile { grid-column: span 2; }
  .tile--web { min-height: 480px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { min-height: 240px; }
  .showcase__feature, .clients__grid { grid-template-columns: minmax(0, 1fr); }
  .about__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__grid, .plans { grid-template-columns: minmax(0, 1fr); }
  .plan h3 { margin-top: 32px; }
  .showcase__device { height: 640px; }
}

@media (max-width: 734px) {
  .gnav__links { display: none; }
  .js .gnav__toggle { display: grid; }
  .js .gnav__menu { display: block; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile, .tile--mobile { grid-column: auto; }
  .tile { min-height: 300px; }
  .tile--mobile { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .phones { min-height: 400px; margin-bottom: -40px; }
  .phone--front { width: 46%; right: 8%; top: 0; }
  .phone--back { width: 42%; right: 46%; top: 12%; }
  .tile--web { min-height: 0; }
  .browser { height: 240px; }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { min-height: 0; }
  .step h3 { margin-top: 0; }
  .showcase { padding-bottom: 0; }
  .showcase__device { height: 520px; }
  .phone--snoomi { width: min(260px, 72%); }
  .tags--lg li { padding: 11px 18px; }
  .about__facts { grid-template-columns: minmax(0, 1fr); gap: 32px 0; }
  .faq__a { padding-right: 0; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__place { margin-left: 0; width: 100%; }
  .announce { font-size: 13px; }
  .mq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
  .facts-table > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-in], .js [data-reveal], .js .hero__stage, .js .chips { opacity: 1; transform: none; }
  .aurora__blob, .chip__in { animation: none !important; }
  .js .tile--mobile .phone, .js .bw-chart b, .js .showcase__device .phone--snoomi { transform: none; }
  .showcase__stars, .frames__track { animation: none !important; }
  .js .pillar .prompt { opacity: 1; transform: none; }
  .js .statement__text .word { color: var(--text); }
}