:root {
  color-scheme: light dark;
  --paper: #f5f5f7;
  --surface: #ffffff;
  --surface-soft: #fbfbfd;
  --ink: #1d1d1f;
  --muted: #5d6570;
  --line: #d6d6dc;
  --teal: #078a8b;
  --blue: #0071e3;
  --navy: #1d1d1f;
  --deep: #111114;
  --glow: rgba(0, 113, 227, 0.12);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.09);
  --radius: 8px;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #000000;
  --surface: #111114;
  --surface-soft: #1c1c1e;
  --ink: #f5f5f7;
  --muted: #a1a1a6;
  --line: rgba(255, 255, 255, 0.16);
  --glow: rgba(0, 113, 227, 0.24);
}

:root[data-vibe="vice-city"] {
  --paper: #edf5f7;
  --surface: #fbfdff;
  --surface-soft: #dff0f3;
  --ink: #243044;
  --muted: #657184;
  --line: rgba(81, 135, 153, 0.24);
  --teal: #70b9c7;
  --blue: #4fa7c7;
  --navy: #243044;
  --deep: #1e2d3d;
  --glow: rgba(79, 167, 199, 0.2);
  --shadow: 0 22px 62px rgba(48, 95, 112, 0.14);
}

:root[data-vibe="vice-city"][data-theme="dark"] {
  --paper: #050608;
  --surface: #111419;
  --surface-soft: #191d23;
  --ink: #f5f7fa;
  --muted: #b6bec8;
  --line: rgba(255, 255, 255, 0.16);
  --teal: #9fd0d8;
  --blue: #8bc8de;
  --navy: #f4fbff;
  --deep: #020304;
  --glow: rgba(139, 200, 222, 0.24);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

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

:focus-visible {
  outline: 3px solid rgba(0, 118, 189, 0.55);
  outline-offset: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
  padding: 14px clamp(18px, 5vw, 72px);
  background: rgba(245, 245, 247, 0.82);
  border-bottom: 1px solid rgba(214, 214, 220, 0.62);
  backdrop-filter: saturate(180%) blur(20px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 800;
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(15px, 2.4vw, 32px);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 740;
}

.site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.nav-toggle {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  backdrop-filter: saturate(180%) blur(18px);
}

.settings-menu {
  position: relative;
  flex: 0 0 auto;
}

.settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0;
  font-weight: 780;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  backdrop-filter: saturate(180%) blur(18px);
}

.settings-button::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.settings-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  display: none;
  width: min(360px, calc(100vw - 28px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.settings-panel.is-open {
  display: grid;
  gap: 18px;
}

.panel-title {
  color: var(--ink);
  font-weight: 820;
}

.panel-group {
  display: grid;
  gap: 8px;
}

.panel-group > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
}

.segmented-control.wide {
  width: 100%;
}

.segmented-control button {
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 780;
  cursor: pointer;
}

.segmented-control.wide button {
  flex: 1;
}

.segmented-control button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}

.theme-switch button,
.segmented-control[aria-label="Color mode"] button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0;
  font-weight: 760;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.theme-switch button::before,
.segmented-control[aria-label="Color mode"] button::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
}

.theme-switch button[data-theme-choice="light"]::before,
.segmented-control[aria-label="Color mode"] button[data-theme-choice="light"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%203v2M12%2019v2M3%2012h2M19%2012h2M5.64%205.64l1.41%201.41M16.95%2016.95l1.41%201.41M5.64%2018.36l1.41-1.41M16.95%207.05l1.41-1.41'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%203v2M12%2019v2M3%2012h2M19%2012h2M5.64%205.64l1.41%201.41M16.95%2016.95l1.41%201.41M5.64%2018.36l1.41-1.41M16.95%207.05l1.41-1.41'/%3E%3C/svg%3E") center / contain no-repeat;
}

.theme-switch button[data-theme-choice="dark"]::before,
.segmented-control[aria-label="Color mode"] button[data-theme-choice="dark"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.theme-switch button[data-theme-choice="system"]::before,
.segmented-control[aria-label="Color mode"] button[data-theme-choice="system"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4.5'%20width='18'%20height='12'%20rx='2.5'/%3E%3Cpath%20d='M12%2016.5v3M8.5%2019.5h7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4.5'%20width='18'%20height='12'%20rx='2.5'/%3E%3Cpath%20d='M12%2016.5v3M8.5%2019.5h7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The panel is the only mode control on touch, so give it a larger target
   and match the height of the Theme control sitting below it. */
.segmented-control[aria-label="Color mode"] button {
  width: 34px;
  height: 34px;
  min-height: 34px;
}

.theme-switch button:hover,
.segmented-control[aria-label="Color mode"] button:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}

.theme-switch button[aria-pressed="true"],
.segmented-control[aria-label="Color mode"] button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.05),
    0 1px 2.5px rgba(0, 0, 0, 0.11);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: 0;
}

h1 {
  max-width: 680px;
  font-size: clamp(2.45rem, 4.8vw, 4.45rem);
}

.studio-hero h1 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1.2rem, 6.5vw, 3.2rem);
}

.studio-hero h1 .typed-character {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.18em);
}

.studio-hero h1.is-typing .typed-character {
  animation: type-character 260ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(180ms + (var(--character-index) * 38ms));
}

@keyframes type-character {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.85rem);
}

h3 {
  font-size: 1.2rem;
}

p {
  margin: 0;
}

.quiet-label {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mini-label {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lede {
  max-width: 680px;
  margin-top: 22px;
  color: var(--muted);
  font-size: clamp(1.16rem, 2vw, 1.42rem);
  line-height: 1.52;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 19px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.96rem;
  font-weight: 840;
  text-decoration: none;
}

.button.primary {
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 113, 227, 0.18);
}

.button.primary:hover {
  background: #056aa4;
  transform: translateY(-2px);
}

.button.secondary {
  border-color: rgba(7, 46, 69, 0.24);
  background: rgba(255, 255, 255, 0.62);
  color: var(--navy);
}

.button.secondary:hover {
  border-color: rgba(7, 46, 69, 0.48);
  transform: translateY(-2px);
}

.button {
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue);
  font-weight: 840;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.text-link.inline-copy-link {
  display: inline;
  min-height: 0;
}

.hero-actions,
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.studio-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 780px);
  gap: 0;
  align-items: center;
  padding: clamp(72px, 8vw, 112px) clamp(20px, 6vw, 86px) clamp(60px, 7vw, 96px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 247, 0.96)),
    radial-gradient(circle at 88% 20%, var(--glow), transparent 32%);
}

:root[data-vibe="vice-city"] .studio-hero {
  min-height: clamp(500px, 68svh, 640px);
  background:
    linear-gradient(90deg, rgba(244, 251, 253, 0.78), rgba(244, 251, 253, 0.5) 42%, rgba(244, 251, 253, 0.12)),
    linear-gradient(180deg, rgba(36, 48, 68, 0.03), rgba(79, 167, 199, 0.08)),
    url("assets/vice-city-wallpaper.png") center bottom / cover no-repeat;
}

:root[data-vibe="vice-city"] .studio-hero::before,
:root[data-vibe="vice-city"] .studio-hero::after {
  display: none;
}

:root[data-vibe="vice-city"] .button.primary {
  background: linear-gradient(135deg, #4fa7c7, #8c8fd6);
  box-shadow: 0 14px 30px rgba(79, 167, 199, 0.22);
}

:root[data-vibe="vice-city"] .quiet-label,
:root[data-vibe="vice-city"] .mini-label,
:root[data-vibe="vice-city"] .text-link {
  color: #367f9f;
}

:root[data-vibe="vice-city"][data-theme="dark"] .quiet-label,
:root[data-vibe="vice-city"][data-theme="dark"] .mini-label,
:root[data-vibe="vice-city"][data-theme="dark"] .text-link {
  color: #a9dce8;
}

.hero-product {
  position: relative;
  min-height: 560px;
}

.product-card {
  position: absolute;
  left: 0;
  top: 8%;
  z-index: 2;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  max-width: 430px;
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.product-card > div {
  min-width: 0;
}

.product-card .app-icon {
  width: 92px;
  border-radius: 22px;
  box-shadow: 0 14px 30px rgba(0, 118, 189, 0.18);
}

.product-card h2 {
  font-size: 2rem;
}

.product-card p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.48;
}

.hero-device {
  position: absolute;
  right: min(2vw, 18px);
  bottom: -10px;
  width: min(72%, 430px);
  filter: drop-shadow(0 30px 60px rgba(7, 46, 69, 0.22));
}

.section {
  padding: clamp(68px, 9vw, 126px) clamp(20px, 6vw, 86px);
}

section[id] {
  scroll-margin-top: 78px;
}

.product-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
  background: var(--surface);
}

.feature-media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #dcecf1;
  box-shadow: var(--shadow);
}

.feature-media img {
  width: 100%;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

.motion-ready .feature-media.reveal-on-scroll img {
  transform: scale(1.035);
}

.motion-ready .feature-media.reveal-on-scroll.is-visible img {
  transform: scale(1);
}

.feature-copy p:not(.quiet-label),
.copy-block p,
.content-card p,
.contact-panel p {
  margin-top: 18px;
  color: var(--muted);
}

.build-list {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(34px, 7vw, 90px);
  background: var(--surface-soft);
}

:root[data-vibe="vice-city"] .build-list {
  background: #dff0f3;
}

:root[data-vibe="vice-city"][data-theme="dark"] .build-list {
  background: #080b0f;
}

.build-items {
  display: grid;
  gap: 22px;
}

.build-items article {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.build-items article:last-child {
  border-bottom: 0;
}

.build-items p,
.about-strip p,
.invitation p {
  margin-top: 14px;
  color: var(--muted);
}

.single-page-section {
  background: var(--paper);
}

.section-intro {
  max-width: 820px;
  margin-bottom: clamp(38px, 6vw, 68px);
}

.section-intro p:not(.quiet-label) {
  max-width: 760px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 1.18rem;
}

.capability-grid,
.about-grid {
  display: grid;
  gap: 24px clamp(28px, 5vw, 64px);
}

.capability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capability-grid article,
.about-grid article {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.capability-grid p,
.about-grid p {
  margin-top: 12px;
  color: var(--muted);
}

.about-section {
  background: var(--surface-soft);
}

/* ---------------------------------------------------------------------------
   Product showcase: four large app icons, one shared detail panel below.
   Only one product is ever expanded; switching crossfades the panel's
   content instead of collapsing and reopening it. See product-showcase.js
   for the data and interaction logic - this block is layout/visuals only.
   --------------------------------------------------------------------------- */
.product-showcase {
  background: var(--paper);
}

.showcase-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  gap: clamp(10px, 3vw, 40px);
  max-width: 860px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding: 0;
  list-style: none;
}

.showcase-icon {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
  padding: 6px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Fluid, not stepped: width:100% of the grid column plus a max-width means
   this scales continuously with the viewport, so every tile stays in one row
   at every size instead of wrapping to a second row on small screens.
   border-radius:22% (rather than a fixed px value) keeps the same corner
   proportion at any tile size without extra breakpoints. */
.showcase-tile {
  display: block;
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 22%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}

.showcase-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-name {
  /* .showcase-icon is a column flexbox, and a flex item's default min-width
     is its unbroken content width - without resetting it, a name longer
     than its column (e.g. "GameQuadrant" at phone widths) overflows into
     the icon next to it instead of wrapping. */
  position: relative;
  width: 100%;
  min-width: 0;
  padding-bottom: 10px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(0.66rem, 1.7vw, 0.95rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transition: color 220ms ease;
}

.showcase-name::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent, var(--blue));
  transform: translateX(-50%) scaleX(0);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase-icon:hover .showcase-tile {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.17);
}

.showcase-icon[aria-expanded="true"] .showcase-tile {
  transform: translateY(-4px) scale(1.045);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}

.showcase-icon[aria-expanded="true"] .showcase-name {
  color: var(--accent, var(--blue));
}

.showcase-icon[aria-expanded="true"] .showcase-name::after {
  transform: translateX(-50%) scaleX(1);
}

/* Collapsed by default via a 0fr/1fr grid-rows morph, which animates
   smoothly to and from the content's real height without measuring pixels
   in JS. [hidden] must still win when present (full removal, incl. from the
   accessibility tree) - the dedicated override below makes sure it does.
   No card: a hairline rule separates it from the icon row instead of a
   bordered/shadowed box, and it spans the section's full width rather than
   the icon row's narrower, centered max-width. */
.showcase-detail {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: clamp(24px, 4vw, 36px);
  transition: grid-template-rows 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase-detail[hidden] {
  display: none;
}

.showcase-detail.is-open {
  grid-template-rows: 1fr;
}

.showcase-detail-inner {
  min-height: 0;
  overflow: hidden;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  opacity: 1;
  transition: opacity 200ms ease;
}

.showcase-detail.is-switching .showcase-detail-inner {
  opacity: 0;
  transition: opacity 130ms ease;
}

.showcase-detail-tagline {
  margin: 0 0 4px;
  color: var(--showcase-accent, var(--blue));
  font-size: 0.98rem;
  font-weight: 800;
}

.showcase-detail-copy h3 {
  margin: 0 0 8px;
}

.showcase-detail-synopsis {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

/* Up to 5 columns so short one-line highlights spread across the panel's
   full width instead of leaving it mostly empty - this is the main space
   saving over the old boxed, single-column layout. */
.showcase-detail-highlights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 28px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.showcase-detail-highlights li {
  position: relative;
  padding-left: 18px;
  overflow-wrap: normal;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.4;
}

.showcase-detail-highlights li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--showcase-accent, var(--blue));
}

.showcase-detail-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.showcase-detail-status {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}


.invitation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: var(--deep);
  color: #ffffff;
}

:root[data-vibe="vice-city"] .invitation {
  background:
    linear-gradient(90deg, rgba(246, 252, 255, 0.94) 0%, rgba(246, 252, 255, 0.9) 48%, rgba(246, 252, 255, 0.58) 68%, rgba(246, 252, 255, 0.12) 100%),
    url("assets/vice-city-lower-wallpaper.png") center bottom / cover no-repeat;
  color: var(--ink);
}

.invitation h2,
.page-hero.dark h1,
.page-hero.dark p,
.invitation .quiet-label {
  color: #ffffff;
}

.invitation p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.2rem;
}

:root[data-vibe="vice-city"] .invitation h2,
:root[data-vibe="vice-city"] .invitation .quiet-label {
  color: #243044;
}

:root[data-vibe="vice-city"] .invitation p {
  color: #35465b;
}

.about-strip {
  max-width: 1020px;
}

.about-strip p {
  max-width: 790px;
  font-size: 1.22rem;
}

.page-hero {
  padding: clamp(68px, 10vw, 126px) clamp(20px, 6vw, 86px);
  background: linear-gradient(135deg, var(--paper), var(--surface-soft));
}

.page-hero.dark {
  background:
    linear-gradient(135deg, rgba(17, 17, 20, 0.97), rgba(31, 37, 46, 0.96)),
    radial-gradient(circle at 84% 20%, var(--glow), transparent 32%);
  color: #ffffff;
}

:root[data-vibe="vice-city"] .page-hero {
  background:
    linear-gradient(90deg, rgba(255, 248, 251, 0.84), rgba(255, 248, 251, 0.52)),
    url("assets/vice-city-wallpaper.png") center / cover no-repeat;
}

:root[data-vibe="vice-city"] .page-hero.dark {
  background:
    linear-gradient(90deg, rgba(21, 13, 28, 0.82), rgba(21, 13, 28, 0.54)),
    url("assets/vice-city-wallpaper.png") center / cover no-repeat;
}

.page-hero p:not(.quiet-label) {
  max-width: 760px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 1.24rem;
}

.page-hero.dark p:not(.quiet-label) {
  color: rgba(255, 255, 255, 0.78);
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.content-card {
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.content-card.wide {
  grid-column: 1 / -1;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(34px, 7vw, 86px);
  align-items: center;
  background: var(--surface);
}

.product-detail .app-icon {
  width: 112px;
  border-radius: 26px;
  box-shadow: 0 18px 34px rgba(0, 118, 189, 0.22);
}

.product-detail figure {
  margin: 0;
}

.product-detail figure img {
  max-height: 660px;
  margin-inline: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 70px rgba(6, 31, 43, 0.2));
}

.simple-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.simple-list li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: start;
}

.contact-panel {
  padding: clamp(26px, 5vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.contact-panel + .contact-panel {
  margin-top: 18px;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.4fr);
  gap: 24px;
  padding: 38px clamp(20px, 6vw, 86px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.94rem;
}

.site-footer strong,
.site-footer span {
  display: block;
}

.site-footer strong {
  color: var(--ink);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: flex-end;
}

.site-footer a {
  color: var(--ink);
  font-weight: 760;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.site-footer p {
  grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #000000;
    --surface: #111114;
    --surface-soft: #1c1c1e;
    --ink: #eef8fb;
    --muted: #a1a1a6;
    --line: rgba(255, 255, 255, 0.16);
    --glow: rgba(0, 113, 227, 0.24);
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) {
    --paper: #050608;
    --surface: #111419;
    --surface-soft: #191d23;
    --ink: #f5f7fa;
    --muted: #b6bec8;
    --line: rgba(255, 255, 255, 0.16);
    --teal: #9fd0d8;
    --blue: #8bc8de;
    --navy: #f4fbff;
    --deep: #020304;
    --glow: rgba(139, 200, 222, 0.24);
    --shadow: 0 22px 62px rgba(0, 0, 0, 0.38);
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) .build-list {
    background: #080b0f;
  }

  :root:not([data-theme="light"]) .site-header {
    background: rgba(0, 0, 0, 0.78);
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) .site-header {
    background: rgba(5, 6, 8, 0.9);
  }

  :root:not([data-theme="light"]) .button.secondary {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }

  :root:not([data-theme="light"]) .studio-hero,
  :root:not([data-theme="light"]) .page-hero {
    background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.98), rgba(28, 28, 30, 0.94)),
      radial-gradient(circle at 84% 20%, var(--glow), transparent 34%);
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) .studio-hero,
  :root[data-vibe="vice-city"]:not([data-theme="light"]) .page-hero {
    background:
      linear-gradient(90deg, rgba(5, 6, 8, 0.7), rgba(5, 6, 8, 0.42) 48%, rgba(5, 6, 8, 0.16)),
      linear-gradient(180deg, rgba(5, 6, 8, 0.06), rgba(5, 6, 8, 0.2)),
      url("assets/vice-city-wallpaper.png") center bottom / cover no-repeat;
  }

  :root:not([data-theme="light"]) .product-card {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(17, 17, 20, 0.8);
  }

  :root:not([data-theme="light"]) .feature-media {
    background: #111114;
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) .product-card {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(17, 20, 25, 0.88);
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) .feature-media {
    background: #171c22;
  }
}

:root[data-theme="dark"] .site-header {
  background: rgba(0, 0, 0, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

:root[data-vibe="vice-city"][data-theme="dark"] .site-header {
  background: rgba(5, 6, 8, 0.9);
}

:root[data-theme="dark"] .button.secondary {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

:root[data-theme="dark"] .studio-hero,
:root[data-theme="dark"] .page-hero {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.98), rgba(28, 28, 30, 0.94)),
    radial-gradient(circle at 86% 18%, var(--glow), transparent 32%);
}

:root[data-vibe="vice-city"][data-theme="dark"] .studio-hero,
:root[data-vibe="vice-city"][data-theme="dark"] .page-hero {
  background:
    linear-gradient(90deg, rgba(5, 6, 8, 0.7), rgba(5, 6, 8, 0.42) 48%, rgba(5, 6, 8, 0.16)),
    linear-gradient(180deg, rgba(5, 6, 8, 0.06), rgba(5, 6, 8, 0.2)),
    url("assets/vice-city-wallpaper.png") center bottom / cover no-repeat;
}

:root[data-vibe="vice-city"][data-theme="dark"] .product-card {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(17, 20, 25, 0.88);
}

:root[data-vibe="vice-city"][data-theme="dark"] .feature-media {
  background: #171c22;
}

:root[data-theme="dark"] .product-card {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(17, 17, 20, 0.8);
}

:root[data-theme="dark"] .feature-media {
  background: #111114;
}

/* Apple Core: continuously cycling color wash behind the header and hero.
   Reproduces the looping gradient at the top of captions.ai in pure CSS, following
   the same peach -> amber -> lavender -> cyan journey. Vice City opts out through
   the existing .studio-hero::before reset above. */
@property --tc-wash-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffc9a8;
}

@property --tc-wash-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffb3cd;
}

@property --tc-wash-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: #9ec2fa;
}

@property --tc-wash-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: #8fdde2;
}

:root:not([data-vibe="vice-city"]) .studio-hero {
  overflow: visible;
}

:root:not([data-vibe="vice-city"]) .hero-copy-block {
  position: relative;
  z-index: 1;
}

:root:not([data-vibe="vice-city"]) .studio-hero::before {
  content: "";
  position: absolute;
  top: -104px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  /* Also declared as plain values so the wash still renders where @property is absent. */
  --tc-wash-1: #ffab7a;
  --tc-wash-2: #ff93b8;
  --tc-wash-3: #74a6f7;
  --tc-wash-4: #4fcdd8;
  background:
    radial-gradient(58% 78% at 4% 6%, color-mix(in srgb, var(--tc-wash-1) 92%, transparent), transparent 66%),
    radial-gradient(54% 74% at 32% 0%, color-mix(in srgb, var(--tc-wash-2) 78%, transparent), transparent 68%),
    radial-gradient(62% 86% at 66% 8%, color-mix(in srgb, var(--tc-wash-3) 86%, transparent), transparent 70%),
    radial-gradient(66% 82% at 99% 20%, color-mix(in srgb, var(--tc-wash-4) 92%, transparent), transparent 68%);
  background-repeat: no-repeat;
  background-size: 180% 180%, 172% 172%, 190% 190%, 164% 164%;
  background-position: 0% 28%, 22% 0%, 78% 12%, 100% 38%;
  animation:
    tc-wash-drift 34s ease-in-out infinite alternate,
    tc-wash-cycle 16s linear infinite;
  will-change: background-position, background-image;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.5) 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.5) 74%, transparent 100%);
}

@keyframes tc-wash-drift {
  from {
    background-position: 0% 28%, 22% 0%, 78% 12%, 100% 38%;
  }
  to {
    background-position: 24% 0%, 0% 32%, 100% 0%, 68% 22%;
  }
}

@keyframes tc-wash-cycle {
  0%,
  100% {
    --tc-wash-1: #ffab7a;
    --tc-wash-2: #ff93b8;
    --tc-wash-3: #74a6f7;
    --tc-wash-4: #4fcdd8;
  }
  25% {
    --tc-wash-1: #ffc056;
    --tc-wash-2: #ff9b7d;
    --tc-wash-3: #7fb0f5;
    --tc-wash-4: #5bbfe8;
  }
  50% {
    --tc-wash-1: #ff8fb5;
    --tc-wash-2: #b98af0;
    --tc-wash-3: #8b9df2;
    --tc-wash-4: #6fa8f0;
  }
  75% {
    --tc-wash-1: #ab8ded;
    --tc-wash-2: #7fb2f5;
    --tc-wash-3: #5cc0e6;
    --tc-wash-4: #45cbcf;
  }
}

:root[data-theme="dark"]:not([data-vibe="vice-city"]) .studio-hero::before {
  opacity: 0.42;
  mix-blend-mode: screen;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-vibe="vice-city"]) .studio-hero::before {
    opacity: 0.42;
    mix-blend-mode: screen;
  }
}

/* The wash fades out into --paper, and every band below it used to sit within a
   percent or two of its neighbour, so the sections ran together. Alternating
   surface and paper down the page does the separating on its own - no rules
   between sections. Both tokens flip with the colour mode, so one rhythm covers
   light (#fff / #f5f5f7) and dark (#111114 / #000). */
:root:not([data-vibe="vice-city"]) .build-list,
:root:not([data-vibe="vice-city"]) .single-page-section {
  background: var(--surface);
}

:root:not([data-vibe="vice-city"]) .product-feature,
:root:not([data-vibe="vice-city"]) .about-section {
  background: var(--paper);
}

/* ---------------------------------------------------------------------------
   Hero molecule: a ball-and-stick cluster where each atom is an app tile.
   Eight atoms sit on the corners of a cube, so every bond is the same length.
   Pure CSS 3D - the scene spins on Y and each tile counter-spins at the exact
   same rate, which keeps the artwork facing the viewer (billboarding).
   Apple Core only; Vice City keeps its wallpaper hero.
   --------------------------------------------------------------------------- */
.hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 400px;
  perspective: 1200px;
  perspective-origin: 50% 45%;
}

.hero-visual::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 200, 228, 0.3), transparent 68%);
  filter: blur(18px);
}

.molecule-tilt {
  position: relative;
  width: 400px;
  height: 400px;
  transform: rotateX(-14deg) rotateZ(3deg);
  transform-style: preserve-3d;
}

.molecule {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: molecule-spin 30s linear infinite;
}

@keyframes molecule-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.molecule-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 14%, transparent 46%),
    radial-gradient(circle at 50% 55%, #7ae2e8, #14a2b8 44%, #0a7691);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 14px 38px rgba(12, 132, 166, 0.46),
    0 0 66px rgba(110, 214, 234, 0.42);
  animation: molecule-counterspin 30s linear infinite;
}

.molecule-core::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(110, 214, 234, 0.55);
  border-radius: 50%;
  animation: core-pulse 3.8s ease-out infinite;
}

@keyframes core-pulse {
  0% { opacity: 0.85; transform: scale(0.9); }
  70% { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* Bonds start at the core's surface rather than its centre, so the eight of
   them no longer converge on a hard vertex. */
.bond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 109px;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  background: linear-gradient(90deg, rgba(20, 162, 184, 0.5) 0%, rgba(20, 162, 184, 0.92) 22%, rgba(125, 220, 235, 0.3) 100%);
}

/* A bond is a flat plane, so it thins to nothing whenever the rotation turns it
   edge-on. A second blade at 90 degrees keeps one face toward the viewer at all
   times, which is what stops bonds winking out mid-spin. */
.bond::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  transform: rotateX(90deg);
}

/* The stub that overlaps the core: blurred, and fading to fully transparent at
   the centre so the bonds dissolve into the sphere instead of drawing a bright
   knot across it. */
.bond::before {
  content: "";
  position: absolute;
  top: 0;
  left: -46px;
  width: 60px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(20, 162, 184, 0) 0%, rgba(20, 162, 184, 0.18) 55%, rgba(20, 162, 184, 0.5) 100%);
  filter: blur(2.5px);
}

.bond-1 { transform: rotateY(-45.0deg) rotateZ(-35.26deg) translateX(46px); }
.bond-2 { transform: rotateY(-135.0deg) rotateZ(-35.26deg) translateX(46px); }
.bond-3 { transform: rotateY(135.0deg) rotateZ(-35.26deg) translateX(46px); }
.bond-4 { transform: rotateY(45.0deg) rotateZ(-35.26deg) translateX(46px); }
.bond-5 { transform: rotateY(-45.0deg) rotateZ(35.26deg) translateX(46px); }
.bond-6 { transform: rotateY(-135.0deg) rotateZ(35.26deg) translateX(46px); }
.bond-7 { transform: rotateY(135.0deg) rotateZ(35.26deg) translateX(46px); }
.bond-8 { transform: rotateY(45.0deg) rotateZ(35.26deg) translateX(46px); }

.atom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  transform-style: preserve-3d;
}

.atom-1 { transform: translate3d(89.5px, -89.5px, 89.5px); }
.atom-2 { transform: translate3d(-89.5px, -89.5px, 89.5px); }
.atom-3 { transform: translate3d(-89.5px, -89.5px, -89.5px); }
.atom-4 { transform: translate3d(89.5px, -89.5px, -89.5px); }
.atom-5 { transform: translate3d(89.5px, 89.5px, 89.5px); }
.atom-6 { transform: translate3d(-89.5px, 89.5px, 89.5px); }
.atom-7 { transform: translate3d(-89.5px, 89.5px, -89.5px); }
.atom-8 { transform: translate3d(89.5px, 89.5px, -89.5px); }

.atom-face {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 22px rgba(15, 23, 42, 0.28);
  animation: molecule-counterspin 30s linear infinite;
}

/* Cancels the scene rotation exactly: same duration, same easing, opposite direction. */
@keyframes molecule-counterspin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}

.atom-face svg {
  width: 28px;
  height: 28px;
}

.atom-1 .atom-face { background: linear-gradient(160deg, #34d399, #059669); }
.atom-2 .atom-face { background: linear-gradient(160deg, #fb7185, #e11d48); }
.atom-3 .atom-face { background: linear-gradient(160deg, #38bdf8, #0284c7); }
.atom-4 .atom-face { background: linear-gradient(160deg, #fbbf24, #d97706); }
.atom-5 .atom-face { background: linear-gradient(160deg, #a78bfa, #7c3aed); }
.atom-6 .atom-face { background: linear-gradient(160deg, #818cf8, #4f46e5); }
.atom-7 .atom-face { background: linear-gradient(160deg, #e879f9, #c026d3); }
.atom-8 .atom-face { background: linear-gradient(160deg, #2dd4bf, #0d9488); }

:root[data-theme="dark"] .atom-face {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 24px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .atom-face {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 10px 24px rgba(0, 0, 0, 0.55);
  }
}

/* Two columns once there is room for the molecule to sit beside the copy.
   The molecule keeps its full size, so the whole 20% height reduction comes
   out of the padding: 668px -> 534px at 1440 wide. The stage min-height matches
   the molecule box exactly so it never adds height of its own. Vice City keeps
   the original padding. */
:root:not([data-vibe="vice-city"]) .studio-hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(46px, 5vw, 72px);
  padding-bottom: clamp(40px, 4.4vw, 62px);
}

/* Nudged off the column centre toward the copy. */
.hero-visual {
  transform: translateX(-15%);
}

:root:not([data-vibe="vice-city"]) .hero-copy-block {
  container-type: inline-size;
}

/* The headline is white-space: nowrap and was sized off the viewport, which no
   longer tracks its column now the hero is split. 9cqw keeps the single line
   inside the copy column at every width (the string measures 10.7x its font size). */
:root:not([data-vibe="vice-city"]) .studio-hero h1 {
  font-size: clamp(1.2rem, 8.5cqw, 3.2rem);
}

:root[data-vibe="vice-city"] .hero-visual {
  display: none;
}


@media (max-width: 980px) {
  .hero-visual {
    display: none;
  }

  /* Single-column hero: rather than stacking the molecule above or below the
     copy (which would add a whole screen of height on a phone), it shares the
     copy's grid cell and sits bottom-right, in the space the narrowed lede and
     buttons leave free. The hero ends up no taller than it was without it.
     --hero-mol is the molecule's on-screen footprint. Mid-spin, with
     perspective, the atoms sweep about 320px of the 400px scene, so
     scale = footprint / 320. --hero-mol-bleed lets it reach into the hero's
     side padding instead of taking that width from the copy. */
  /* overflow-x: clip trims the scaled scene's empty 400px stage box at the
     side without turning the hero into a scroll container, so the colour
     wash can still reach up behind the header. */
  :root:not([data-vibe="vice-city"]) .studio-hero {
    --hero-mol: 196px;
    --hero-mol-scale: 0.6;
    --hero-mol-bleed: 0px;
    overflow-x: clip;
  }

  :root:not([data-vibe="vice-city"]) .hero-copy-block {
    grid-area: 1 / 1;
  }

  :root:not([data-vibe="vice-city"]) .hero-visual {
    display: block;
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    width: var(--hero-mol);
    height: var(--hero-mol);
    min-height: 0;
    margin-right: calc(-1 * var(--hero-mol-bleed));
    transform: none;
    pointer-events: none;
  }

  :root:not([data-vibe="vice-city"]) .hero-visual::before {
    top: 50%;
    left: 50%;
    width: calc(var(--hero-mol) * 1.5);
    height: calc(var(--hero-mol) * 1.5);
    transform: translate(-50%, -50%);
  }

  :root:not([data-vibe="vice-city"]) .molecule-tilt {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -200px;
    scale: var(--hero-mol-scale);
  }

  /* The row itself stays four-across at every width (see .showcase-tile's
     fluid sizing); the bullet grid drops to 3 columns here so each one
     stays wide enough for a one-liner at tablet width. */
  .showcase-detail-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :root:not([data-vibe="vice-city"]) .studio-hero {
    grid-template-columns: minmax(0, 780px);
  }

  /* Single column again, so the viewport is the right basis once more. */
  :root:not([data-vibe="vice-city"]) .studio-hero h1 {
    font-size: clamp(1.2rem, 6.5vw, 3.2rem);
  }

  .site-header {
    align-items: center;
  }

  .header-actions {
    gap: 10px;
  }

  .theme-switch {
    display: none;
  }

  .settings-menu {
    order: 1;
  }

  .nav-toggle {
    order: 2;
  }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
    /* Without this the auto rows stretch and the three bars spread apart. */
    align-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
  }

  .nav-toggle span:not(.sr-only) {
    width: 20px;
    height: 2px;
    background: currentColor;
  }

  .site-nav {
    order: 3;
    position: absolute;
    left: 14px;
    right: 14px;
    top: calc(100% + 8px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 6px 10px;
  }

  .studio-hero,
  .product-feature,
  .build-list,
  .product-detail,
  .contact-layout,
  .content-grid,
  .capability-grid,
  .about-grid,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .hero-product {
    min-height: 520px;
  }

  .hero-device {
    right: 0;
    width: min(62vw, 360px);
  }

  .site-footer nav {
    justify-content: flex-start;
  }
}

/* Tablet: the molecule stands beside the lede and the button row, so both
   give up its width. */
@media (min-width: 621px) and (max-width: 980px) {
  :root:not([data-vibe="vice-city"]) .studio-hero .lede,
  :root:not([data-vibe="vice-city"]) .hero-actions {
    max-width: calc(100% - var(--hero-mol) - 16px);
  }
}

@media (max-width: 620px) {
  /* Phone: the lede keeps the full width and only the stacked buttons
     narrow, leaving a square beside them just big enough for the molecule. */
  :root:not([data-vibe="vice-city"]) .studio-hero {
    --hero-mol: 144px;
    --hero-mol-scale: 0.44;
    --hero-mol-bleed: 18px;
  }

  :root:not([data-vibe="vice-city"]) .hero-copy-block {
    width: 100%;
    max-width: 100%;
  }

  :root:not([data-vibe="vice-city"]) .hero-actions {
    width: calc(100% - var(--hero-mol) + var(--hero-mol-bleed) - 10px);
  }

  /* A little less side padding keeps both labels on one line at the
     narrower width. */
  :root:not([data-vibe="vice-city"]) .hero-actions .button {
    padding-inline: 14px;
  }

  .showcase-row {
    gap: 8px;
  }

  .showcase-icon {
    padding-inline: 0;
  }

  /* One-line highlights don't fit two columns once the screen is this
     narrow - drop to a single column rather than let them wrap. */
  .showcase-detail-highlights {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-detail-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  main,
  section,
  footer {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .site-header {
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    min-height: 68px;
    padding: 10px 14px;
  }

  .brand {
    gap: 8px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .header-actions {
    margin-left: auto;
    gap: 8px;
  }

  .settings-button {
    min-height: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 0;
  }

  .settings-panel {
    position: fixed;
    top: 76px;
    left: auto !important;
    right: 14px !important;
    width: min(320px, calc(100vw - 28px)) !important;
    max-width: min(320px, calc(100vw - 28px));
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    padding: 14px;
    border-radius: var(--radius);
    transform: none;
  }

  .settings-panel.is-open {
    gap: 14px;
  }

  .segmented-control {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .segmented-control button {
    min-width: 0;
    padding: 0 6px;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .segmented-control[aria-label="Color mode"] button {
    flex: 1;
    width: auto;
    padding: 0;
    font-size: 0;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
  }

  body {
    font-size: 17px;
  }

  .brand span {
    font-size: 1.18rem;
  }

  h1 {
    font-size: 2.4rem;
  }

  h2 {
    font-size: 2.15rem;
  }

  .studio-hero {
    width: 100vw;
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 48px;
    padding-right: 30px;
    padding-left: 30px;
  }

  :root[data-vibe="vice-city"] .studio-hero::before,
  :root[data-vibe="vice-city"] .studio-hero::after {
    display: none;
  }

  .hero-copy-block,
  .hero-copy-block .lede {
    width: min(100%, 330px);
    max-width: 330px;
  }

  .hero-actions,
  .inline-actions,
  .button {
    width: 100%;
  }

  .hero-product {
    min-height: auto;
    display: grid;
    gap: 24px;
  }

  .product-card,
  .hero-device {
    position: static;
  }

  .product-card {
    grid-template-columns: 72px minmax(0, 1fr);
    width: min(100%, 330px);
    max-width: 330px;
    overflow: hidden;
    padding: 18px;
  }

  .product-card .app-icon {
    width: 72px;
    border-radius: 18px;
  }

  .hero-device {
    width: min(86vw, 330px);
    margin-inline: auto;
  }

  .invitation {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Below every current iPhone's width the buttons would have to wrap their
   labels to make room, so the molecule bows out there instead. */
@media (max-width: 359px) {
  :root:not([data-vibe="vice-city"]) .hero-visual {
    display: none;
  }

  :root:not([data-vibe="vice-city"]) .hero-actions {
    width: 100%;
  }
}