/* tastemaker v3: macro=product-demo-workbench | nav=full-width-bar | hero-bg=paper-shaders dot-orbit | light sections | products=device-mockups | hero=headline-row+interactive-workbench | range=marquee | feature=F1-bands | apps=catalogue-grid | howto=F4-steps | close=C2-picker | footer=minimal-row
   mood=technical+playful | dark-only | base #131209 (landing-page-design list) | per-service colors: mobil #9D8CFF, web #3FC8E4, shop #FF8A4C, panel #C6F432
   contrast: every service color >= 6.8:1 on #131209/#1F1F1F/#272727 and as fill behind #131209 text; muted #A8A397 >= 5.9:1 */

:root {
  --bg: #131209;
  --surface: #1F1F1F;
  --surface-2: #272727;
  --border: #313131;
  --text: #F2EFE6;
  --muted: #A8A397;
  --ink: #131209;

  --c-mobil: #9D8CFF;
  --c-web: #3FC8E4;
  --c-shop: #FF8A4C;
  --c-panel: #22C55E;
  /* fills stay bright in every section; --c-* are text-safe for the section they sit in */
  --f-mobil: #9D8CFF; --f-web: #3FC8E4; --f-shop: #FF8A4C; --f-panel: #22C55E;
  --brand: #22C55E;
  --brand-hover: #4ADE80;
  --c: var(--brand);

  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px; --s-300: 24px;
  --s-400: 32px; --s-500: 40px; --s-600: 48px; --s-700: 64px; --s-800: 80px; --s-900: 96px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;
  --r-device: 48px; --r-device-inner: 39px; /* iPhone frame: outer 48, 9px bezel, inner 39 (nested radius formula) */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-move: 500ms;
  --t-color: 300ms;

  --max: 1200px;
  --gutter: var(--s-300);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-900); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--text); text-underline-offset: 3px; }
button { font-family: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: var(--r-md); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

/* ---------- Text styles (landing-page-design B1) ---------- */
.heading-1 { font-size: 60px; line-height: 60px; font-weight: 600; letter-spacing: -0.03em; }
.heading-2 { font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: -0.025em; }
.heading-3 { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
.heading-4 { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.015em; }
.heading-5 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.heading-6 { font-size: 20px; line-height: 28px; font-weight: 600; }
.title-1 { font-size: 20px; line-height: 28px; font-weight: 500; }
.title-2 { font-size: 18px; line-height: 28px; font-weight: 500; }
.title-3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.title-4 { font-size: 14px; line-height: 20px; font-weight: 500; }
.body-3 { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-5 { font-size: 14px; line-height: 20px; font-weight: 500; }
.body-6 { font-size: 14px; line-height: 20px; font-weight: 400; }
.button-md { font-size: 16px; line-height: 24px; font-weight: 600; }
.button-sm { font-size: 14px; line-height: 20px; font-weight: 600; }
.button-xsm { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-1 { font-size: 14px; line-height: 20px; font-weight: 500; }
.caption-2 { font-size: 14px; line-height: 20px; font-weight: 400; }
.caption-3 { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-4 { font-size: 12px; line-height: 16px; font-weight: 500; }
.caption-5 { font-size: 12px; line-height: 16px; font-weight: 400; }

.skip { position: absolute; left: var(--s-200); top: -64px; z-index: 50; background: var(--text); color: var(--ink); padding: var(--s-75) var(--s-100); border-radius: var(--r-lg); text-decoration: none; }
.skip:focus { top: var(--s-200); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-75);
  padding: var(--s-75) var(--s-100); border-radius: var(--r-lg);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--t-color) var(--ease), border-color var(--t-color) var(--ease), color var(--t-color) var(--ease), transform var(--t-color) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--brand); color: var(--ink); }
.btn-ghost { color: var(--text); border-color: var(--border); background: transparent; }
@media (hover: hover) {
  .btn-primary:hover { background: var(--brand-hover); }
  .btn-ghost:hover { border-color: var(--muted); background: var(--surface); }
}
.ico { width: 24px; height: 24px; flex: none; }
.ico-s { width: 16px; height: 16px; flex: none; }

/* ---------- Logo: </suqo>.dev ---------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); font-family: var(--mono); font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap; }
.logo .lt { color: var(--muted); }
.logo .ld { color: var(--c); transition: color var(--t-move) var(--ease); }
.logo-code .ch { opacity: 0; }
.logo-code .ch.on { opacity: 1; }
.caret { width: 2px; height: 18px; margin-left: var(--s-25); background: var(--c); animation: caret 1s steps(1) infinite; transition: background-color var(--t-move) var(--ease); }
.caret.done { animation: caret 1s steps(1) 3, fade 300ms var(--ease) 3s forwards; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes fade { to { opacity: 0; } }

/* ---------- Nav ---------- */
.nav-wrap { position: sticky; top: 0; z-index: 40; padding: var(--s-100) var(--gutter) 0; display: flex; justify-content: center; pointer-events: none; }
.nav {
  pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-300);
  width: 100%; max-width: var(--max); min-height: 64px;
  padding: var(--s-75) var(--s-75) var(--s-75) var(--s-300);
  background: rgba(31, 31, 31, .72); border: 1px solid var(--border); border-radius: var(--r-2xl);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.nav-links { display: flex; gap: var(--s-50); margin-inline: auto; }
.nav-links a { display: block; padding: var(--s-75) var(--s-100); border-radius: var(--r-lg); color: var(--muted); text-decoration: none; transition: color var(--t-color) var(--ease), background-color var(--t-color) var(--ease); }
.nav-links a[aria-current="true"] { color: var(--text); background: var(--surface-2); }
@media (hover: hover) { .nav-links a:hover { color: var(--text); } }
.menu-toggle { display: none; width: 40px; height: 40px; border: 0; background: transparent; border-radius: var(--r-lg); position: relative; cursor: pointer; color: var(--text); }
.menu-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--t-move) var(--ease); }
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 30; background: rgba(19, 18, 9, .94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); padding: 112px var(--gutter) var(--s-600); }
.mobile-menu ul { display: grid; gap: var(--s-300); }
.mobile-menu a:not(.btn) { color: var(--text); text-decoration: none; }
.mobile-menu li { opacity: 0; transform: translateY(24px); transition: opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease); }
.mobile-menu.open li { opacity: 1; transform: none; }

/* ---------- Layout ---------- */
.hero, .section, .tagline, .close, .foot { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Hero ---------- */
.hero-wrap { position: relative; overflow: hidden; margin-top: -88px; padding-top: 88px; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(242, 239, 230, .14) 1px, transparent 1.5px);
  background-size: 24px 24px;
}
.hero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1200ms var(--ease); }
.hero-bg::before {
  /* fine dot texture over the moving field */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(242, 239, 230, .10) 1px, transparent 1.5px);
  background-size: 24px 24px;
}
.hero-bg.ready canvas { opacity: 1; }
.hero-bg::after {
  /* contrast-safe vignette: keeps the headline and console on a calm field */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(90% 70% at 22% 22%, rgba(19, 18, 9, .78) 0%, rgba(19, 18, 9, .35) 55%, rgba(19, 18, 9, .1) 80%),
    linear-gradient(to bottom, rgba(19, 18, 9, 0) 60%, var(--bg) 100%);
}
.hero { position: relative; z-index: 1; padding-top: var(--s-800); padding-bottom: var(--s-800); }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-400) var(--s-700); align-items: end; }
.hero h1 { max-width: 680px; }
.hero-side { display: grid; gap: var(--s-300); max-width: 520px; }
.hero-side .muted { color: var(--text); opacity: .86; text-shadow: 0 1px 12px rgba(19, 18, 9, .6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-100); }

/* ---------- Workbench ---------- */
.bench { margin-top: var(--s-700); }
body[data-kind="web"] { --c: var(--c-web); }
body[data-kind="shop"] { --c: var(--c-shop); }
body[data-kind="panel"] { --c: var(--c-panel); }

.bench-tabs { display: flex; flex-wrap: wrap; gap: var(--s-75); margin-bottom: var(--s-200); }
.tab {
  display: inline-flex; align-items: center; gap: var(--s-75);
  padding: var(--s-75) var(--s-200); border-radius: var(--r-full);
  border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer;
  transition: color var(--t-color) var(--ease), background-color var(--t-color) var(--ease), border-color var(--t-color) var(--ease), transform var(--t-color) var(--ease);
}
.tab:active { transform: scale(0.98); }
.tab[data-kind="mobil"] { --tc: var(--c-mobil); }
.tab[data-kind="web"] { --tc: var(--c-web); }
.tab[data-kind="shop"] { --tc: var(--c-shop); }
.tab[data-kind="panel"] { --tc: var(--c-panel); }
.tab .dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--tc); transition: background-color var(--t-color) var(--ease); }
.tab[aria-selected="true"] { background: var(--tc); border-color: var(--tc); color: var(--ink); }
.tab[aria-selected="true"] .dot { background: var(--ink); }
@media (hover: hover) { .tab[aria-selected="false"]:hover { color: var(--text); border-color: var(--muted); } }

.bench-body {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  border: 1px solid var(--border); border-radius: var(--r-3xl); background: var(--surface); overflow: hidden;
}
.console { padding: var(--s-400); display: flex; flex-direction: column; gap: var(--s-300); border-right: 1px solid var(--border); }
.console-label { color: var(--c); transition: color var(--t-move) var(--ease); }
.request { min-height: calc(28px * 3); }
.request::after { content: ""; display: inline-block; width: 2px; height: 20px; margin-left: var(--s-25); vertical-align: -3px; background: var(--c); animation: caret 1s steps(1) infinite; }
.request.done::after { opacity: 0; animation: none; }
.build-log { display: grid; gap: var(--s-100); }
.build-log li { display: flex; gap: var(--s-100); align-items: center; font-family: var(--mono); font-size: 14px; line-height: 20px; color: var(--muted); opacity: 0; transform: translateY(8px); transition: opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease), color var(--t-color) var(--ease); }
.build-log li.in { opacity: 1; transform: none; }
.build-log li.ok { color: var(--text); }
.build-log li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: var(--r-full); border: 2px solid var(--border); transition: background-color var(--t-color) var(--ease), border-color var(--t-color) var(--ease); }
.build-log li.ok::before { background: var(--c); border-color: var(--c); box-shadow: inset 0 0 0 3px var(--surface); }
.progress { margin-top: auto; height: 4px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.progress span { display: block; height: 100%; width: 100%; background: var(--c); transform: translateX(-100%); transition: transform 600ms var(--ease), background-color var(--t-move) var(--ease); }

.stage { position: relative; min-height: 520px; background: color-mix(in oklab, var(--c) 9%, var(--bg)); transition: background-color var(--t-move) var(--ease); overflow: hidden; }
.scene { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-400); visibility: hidden; opacity: 0; transition: opacity 300ms var(--ease), visibility 0s 300ms; }
.scene.active { visibility: visible; opacity: 1; transition: opacity 300ms var(--ease); }
.bk { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease); }
.scene.built .bk { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 90ms); }

/* phone (mobile scene) */
.s-phone { width: 212px; }
.s-phone-screen { background: var(--text); color: var(--ink); padding: 15cqw 6.5cqw 8cqw; display: grid; gap: var(--s-75); align-content: start; }
.m-head { display: grid; }
.m-sub { color: #5F5B50; }
.m-card { background: var(--c-mobil); color: var(--ink); border-radius: var(--r-2xl); padding: var(--s-100) var(--s-200); display: grid; gap: var(--s-75); }
.stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-50); }
.stamps i { aspect-ratio: 1; border-radius: var(--r-full); border: 2px solid rgba(19, 18, 9, .35); transition: background-color var(--t-color) var(--ease), border-color var(--t-color) var(--ease); }
.stamps i.on { background: var(--ink); border-color: var(--ink); }
.m-row { display: flex; justify-content: space-between; padding: var(--s-75) 0; border-bottom: 1px solid #DCD8CC; }
.m-btn { background: var(--ink); color: var(--text); text-align: center; border-radius: var(--r-xl); padding: var(--s-75) var(--s-100); margin-top: var(--s-50); }
.toast {
  /* iOS-style banner inside the screen */
  position: absolute; z-index: 5; left: 7%; right: 7%; top: 7.5%;
  display: flex; gap: var(--s-75); align-items: center;
  background: rgba(255, 255, 255, .82); color: var(--ink); border-radius: var(--r-2xl);
  padding: var(--s-75) var(--s-100); font-size: 11px; line-height: 14px; font-weight: 500;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(-12px); transition: opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease);
}
.toast-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-mobil); flex: none; }
.scene.done .toast { opacity: 1; transform: none; }

/* browser (web + shop scenes) */
.s-browser { width: min(100%, 600px); background: var(--text); color: var(--ink); border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--border); }
.b-bar { display: flex; align-items: center; gap: var(--s-200); padding: var(--s-75) var(--s-200); background: #E3DFD3; }
.b-dots { display: flex; gap: var(--s-50); }
.b-dots i { width: 8px; height: 8px; border-radius: var(--r-full); background: #B9B4A6; }
.b-url { flex: 1; background: var(--text); border-radius: var(--r-md); padding: var(--s-25) var(--s-100); font-family: var(--mono); color: #5F5B50; }
.w-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); padding: var(--s-200) var(--s-300); }
.w-logo { width: 72px; height: 16px; border-radius: var(--r-md); background: var(--ink); }
.w-links { display: flex; gap: var(--s-200); flex: 1; }
.w-links i { width: 48px; height: 8px; border-radius: var(--r-full); background: #CFCABC; }
.w-lang { display: flex; gap: var(--s-75); color: #5F5B50; }
.w-lang b { color: var(--ink); background: var(--c-web); border-radius: var(--r-md); padding: 0 var(--s-50); }
.w-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-300); padding: var(--s-200) var(--s-300); align-items: center; }
.w-copy { display: grid; gap: var(--s-100); justify-items: start; }
.w-txt { color: #5F5B50; }
.w-cta { background: var(--ink); color: var(--text); border-radius: var(--r-lg); padding: var(--s-50) var(--s-100); }
.w-img { aspect-ratio: 4 / 3; border-radius: var(--r-xl); background: var(--c-web); position: relative; overflow: hidden; }
.w-img::before { content: ""; position: absolute; width: 56%; aspect-ratio: 1; border-radius: var(--r-full); border: 10px solid var(--ink); left: 22%; top: 18%; }
.w-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-200); padding: var(--s-100) var(--s-300) var(--s-300); }
.w-cards span { height: 64px; border-radius: var(--r-xl); background: #E3DFD3; }

.cart { margin-left: auto; color: var(--ink); display: inline-flex; gap: var(--s-50); align-items: center; }
.cart b { min-width: 20px; height: 20px; padding: 0 var(--s-50); border-radius: var(--r-full); background: var(--c-shop); display: inline-grid; place-items: center; transition: transform var(--t-color) var(--ease); }
.cart b.bump { transform: scale(1.25); }
.e-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-200); padding: var(--s-300); }
.e-item { display: grid; gap: var(--s-50); }
.bottle { height: 120px; border-radius: var(--r-xl); background: #E3DFD3; position: relative; margin-bottom: var(--s-75); }
.bottle::before { content: ""; position: absolute; left: 50%; bottom: 14px; width: 34px; height: 76px; margin-left: -17px; border-radius: var(--r-xl) var(--r-xl) var(--r-md) var(--r-md); background: #6B7A2A; }
.bottle::after { content: ""; position: absolute; left: 50%; bottom: 88px; width: 12px; height: 14px; margin-left: -6px; border-radius: var(--r-sm); background: var(--c-shop); }
.bottle.b2::before { width: 40px; margin-left: -20px; height: 84px; background: #4E5B1C; }
.bottle.b2::after { bottom: 96px; }
.bottle.b3::before { width: 52px; margin-left: -26px; height: 56px; border-radius: var(--r-lg); background: #3D2F2A; }
.bottle.b3::after { bottom: 68px; width: 56px; margin-left: -28px; height: 8px; }
.e-pay { display: flex; flex-wrap: wrap; gap: var(--s-75); padding: 0 var(--s-300) var(--s-300); }
.chip { padding: var(--s-50) var(--s-100); border-radius: var(--r-full); border: 1px solid #CFCABC; color: var(--ink); }

/* panel scene */
.s-panel { width: min(100%, 620px); display: grid; grid-template-columns: 56px 1fr; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; }
.p-side { display: grid; align-content: start; justify-items: center; gap: var(--s-200); padding: var(--s-200) 0; background: #0B0A05; border-right: 1px solid var(--border); }
.p-logo { width: 24px; height: 24px; border-radius: var(--r-lg); background: var(--c-panel); }
.p-side i { width: 20px; height: 20px; border-radius: var(--r-md); background: var(--surface-2); }
.p-side i.on { background: var(--muted); }
.p-main { padding: var(--s-300); display: grid; gap: var(--s-200); }
.p-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-100); }
.p-kpis div { display: grid; gap: var(--s-25); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-100) var(--s-200); }
.p-kpis span { color: var(--muted); }
.p-kpis div:first-child b { color: var(--c-panel); }
.p-table { display: grid; border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.p-row { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: var(--s-200); align-items: center; padding: var(--s-100) var(--s-200); border-bottom: 1px solid var(--border); }
.p-row:last-child { border-bottom: 0; }
.p-who { color: var(--muted); }
.pill { padding: var(--s-25) var(--s-100); border-radius: var(--r-full); color: var(--ink); }
.st-go { background: var(--c-web); } .st-ok { background: var(--c-panel); } .st-wait { background: var(--c-shop); }

.bench-note { margin-top: var(--s-200); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--s-75); align-items: baseline; }
.link-btn { background: none; border: 0; padding: 0; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Range marquee ---------- */
.range { border-block: 1px solid var(--border); overflow: hidden; }
.marquee { display: flex; padding: var(--s-300) 0; }
.marquee-track { display: flex; flex: none; gap: var(--s-400); padding-right: var(--s-400); animation: marquee 60s linear infinite; }
.marquee-track li { display: flex; align-items: center; gap: var(--s-400); white-space: nowrap; color: var(--muted); }
.marquee-track li::after { content: ""; width: 8px; height: 8px; border-radius: var(--r-md); background: var(--c-mobil); }
.marquee-track li:nth-child(4n+2)::after { background: var(--c-web); }
.marquee-track li:nth-child(4n+3)::after { background: var(--c-shop); }
.marquee-track li:nth-child(4n+4)::after { background: var(--f-panel); }
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Tagline reveal (B11) ---------- */
.tagline { padding-top: var(--s-900); padding-bottom: var(--s-800); }
.reveal-words { max-width: 900px; }
.reveal-words .w { opacity: .3; transition: opacity 600ms var(--ease); }
.reveal-words .w.on { opacity: 1; }

/* ---------- Sections ---------- */
.section { padding-top: var(--s-900); }
.section-head { display: grid; gap: var(--s-200); max-width: 680px; margin-bottom: var(--s-600); }

/* Service bands */
.bands { display: grid; border-top: 1px solid var(--border); }
.band { display: grid; grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-300) var(--s-500); padding: var(--s-500) 0; border-bottom: 1px solid var(--border); align-items: start; }
.band-mark { width: 64px; height: 64px; border-radius: var(--r-2xl); background: var(--f); color: var(--ink); display: grid; place-items: center; }
.band-mark .ico { width: 32px; height: 32px; }
.band-copy { display: grid; gap: var(--s-100); }
.band-copy h3 { color: var(--c); }
.band-list { display: grid; gap: var(--s-100); padding-top: var(--s-75); }
.band-list li { display: flex; gap: var(--s-100); align-items: baseline; }
.band-list li::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-md); background: var(--f); flex: none; transform: translateY(-1px); }

/* Apps catalog */
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-300); margin-top: var(--s-600); }
.apps-loading { display: contents; }
.app-sk { height: 168px; border-radius: var(--r-3xl); background: var(--surface); }
.apps-empty { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-300); padding: var(--s-400); border: 1px solid var(--border); border-radius: var(--r-3xl); background: var(--surface); }
.apps-empty p { max-width: 560px; }
.empty-icons { display: flex; gap: var(--s-75); }
.empty-icons span { width: 40px; height: 40px; border-radius: var(--r-xl); background: var(--f-mobil); }
.empty-icons span:nth-child(2) { background: var(--f-web); }
.empty-icons span:nth-child(3) { background: var(--f-shop); }
.empty-icons span:nth-child(4) { background: var(--f-panel); }
.app-card { display: grid; gap: var(--s-200); align-content: start; padding: var(--s-300); border: 1px solid var(--border); border-radius: var(--r-3xl); background: var(--surface); }
.app-top { display: flex; gap: var(--s-100); align-items: center; }
.app-icon { width: 56px; height: 56px; border-radius: var(--r-2xl); background: var(--c-mobil); object-fit: cover; flex: none; }
.app-meta { display: grid; }
.app-status { color: var(--muted); }
.app-links { display: flex; flex-wrap: wrap; gap: var(--s-75); }

/* Steps: a real sequence, so numbered */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-300); counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: var(--s-75); align-content: start; padding-top: var(--s-300); border-top: 2px solid var(--c); }
.steps li::before { content: counter(s); font-family: var(--mono); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c); margin-bottom: var(--s-75); }

/* FAQ */
.faq { max-width: 800px; border: 1px solid var(--border); border-radius: var(--r-3xl); background: var(--surface); padding: var(--s-75) var(--s-300); }
.faq details { border-bottom: 1px solid var(--border); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-200) var(--s-500) var(--s-200) 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: var(--s-50); top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--t-move) var(--ease); }
.faq details[open] summary::after { transform: translateY(4px) rotate(225deg); }
.faq details p { padding-bottom: var(--s-200); max-width: 680px; }

/* Close */
.close { padding-top: var(--s-900); padding-bottom: var(--s-900); }
.close-inner { display: grid; gap: var(--s-300); justify-items: start; padding: var(--s-700); border-radius: var(--r-3xl); background: var(--brand); color: var(--ink); }
.close-inner .muted { color: var(--ink); opacity: .78; }
.close-inner .btn-primary { background: var(--ink); color: var(--text); }
.close-inner .pick-btn { border-color: rgba(19, 18, 9, .28); color: var(--ink); }
.close-inner .pick-btn[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--tc); }
.close-inner :focus-visible { outline-color: var(--ink); }
.close-inner p.title-1 { max-width: 640px; }
.pick { display: flex; flex-wrap: wrap; gap: var(--s-75); }
.pick-btn { padding: var(--s-75) var(--s-200); border-radius: var(--r-full); border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: color var(--t-color) var(--ease), background-color var(--t-color) var(--ease), border-color var(--t-color) var(--ease), transform var(--t-color) var(--ease); }
.pick-btn:active { transform: scale(0.98); }
.pick-btn[data-kind="mobil"] { --tc: var(--c-mobil); }
.pick-btn[data-kind="web"] { --tc: var(--c-web); }
.pick-btn[data-kind="shop"] { --tc: var(--c-shop); }
.pick-btn[data-kind="panel"] { --tc: var(--c-panel); }
.pick-btn[aria-checked="true"] { background: var(--tc); border-color: var(--tc); color: var(--ink); }
@media (hover: hover) {
  .pick-btn[aria-checked="false"]:hover { color: var(--text); border-color: var(--muted); }
  .close-inner .pick-btn[aria-checked="false"]:hover { color: var(--ink); border-color: var(--ink); }
  .close-inner .btn-primary:hover { background: #2A291C; }
}
.close-actions { display: flex; flex-wrap: wrap; gap: var(--s-200); align-items: center; }

/* Footer */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-200) var(--s-400); padding-top: var(--s-400); padding-bottom: var(--s-600); border-top: 1px solid var(--border); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s-300); }
.foot-links a { color: var(--muted); text-decoration: none; }
@media (hover: hover) { .foot-links a:hover { color: var(--text); text-decoration: underline; } }
.foot > p { margin-left: auto; }

/* Scroll reveal */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* Legal pages */
.doc { max-width: 720px; margin-inline: auto; padding: var(--s-800) var(--gutter) var(--s-900); }
.doc h1 { margin-bottom: var(--s-300); }
.doc h2 { margin: var(--s-500) 0 var(--s-100); }
.doc p, .doc li { color: var(--muted); }
.doc p + p { margin-top: var(--s-200); }
.doc .back { display: inline-block; margin-top: var(--s-600); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-copy { grid-template-columns: 1fr; }
  .bench-body { grid-template-columns: 1fr; }
  .console { border-right: 0; border-bottom: 1px solid var(--border); padding: var(--s-300); }
  .request { min-height: calc(28px * 2); }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: block; }
  .nav { gap: var(--s-200); padding-left: var(--s-200); }
  .band { grid-template-columns: 64px minmax(0, 1fr); }
  .band-list { grid-column: 2; }
  .steps { grid-template-columns: 1fr 1fr; gap: var(--s-500) var(--s-300); }
}
@media (max-width: 640px) {
  :root { --gutter: var(--s-200); }
  .heading-1 { font-size: 48px; line-height: 48px; }
  .heading-2 { font-size: 30px; line-height: 36px; }
  .heading-3 { font-size: 30px; line-height: 36px; }
  .heading-4 { font-size: 24px; line-height: 32px; }
  .hero { padding-top: var(--s-600); padding-bottom: var(--s-700); }
  .bench { margin-top: var(--s-500); }
  .tab { padding: var(--s-75) var(--s-100); }
  .stage { min-height: 460px; }
  .s-phone { width: 196px; }
  .scene { padding: var(--s-200); }
  .s-browser, .s-panel { width: 100%; }
  .w-hero { grid-template-columns: 1fr; }
  .w-img, .w-links { display: none; }
  .e-grid { gap: var(--s-100); padding: var(--s-200); }
  .bottle { height: 96px; }
  .e-pay { padding: 0 var(--s-200) var(--s-200); }
  .p-main { padding: var(--s-200); }
  .p-row { grid-template-columns: 1fr auto; }
  .p-who { display: none; }
  .s-panel { grid-template-columns: 40px 1fr; }
  .section, .tagline { padding-top: var(--s-800); }
  .tagline { padding-bottom: var(--s-200); }
  .band { grid-template-columns: 1fr; padding: var(--s-400) 0; }
  .band-list { grid-column: auto; }
  .steps { grid-template-columns: 1fr; }
  .close-inner { padding: var(--s-400) var(--s-300); }
  .faq { padding: var(--s-50) var(--s-200); }
  .foot > p { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { transform: none; transition: opacity 300ms var(--ease); }
  .mobile-menu li, .bk, .build-log li, .toast { transform: none; }
  .caret, .request::after { animation: none; }
  .reveal-words .w { opacity: 1; transition: none; }
  .marquee-track { animation: none; flex-wrap: wrap; row-gap: var(--s-200); }
  .marquee { padding-inline: var(--gutter); }
  .marquee-track[aria-hidden="true"] { display: none; }
}

/* ---------- Hue scoping ---------- */
[data-hue="mobil"] { --c: var(--c-mobil); --f: var(--f-mobil); }
[data-hue="web"] { --c: var(--c-web); --f: var(--f-web); }
[data-hue="shop"] { --c: var(--c-shop); --f: var(--f-shop); }
[data-hue="panel"] { --c: var(--c-panel); --f: var(--f-panel); }

/* ---------- Light sections ---------- */
.light {
  --bg: #FFFFFF; --surface: #F4F4EF; --surface-2: #E9E8E1; --border: #E3E1D8;
  --text: #131209; --muted: #5C584C;
  --c-mobil: #5B47E0; --c-web: #0E7490; --c-shop: #C2410C; --c-panel: #047857;
  background: var(--bg); color: var(--text); padding-bottom: var(--s-900);
}
.light :focus-visible { outline-color: var(--text); }

/* ---------- iPhone mockup: iPhone 15 Pro proportions ----------
   Body 70.6 x 146.6 mm, bezel ~3.4% of width, body corner ~12.5 mm.
   Screen metrics from iOS points on a 393 pt wide screen (cqw = % of screen width):
   status bar 54pt = 13.7cqw, Dynamic Island 126 x 37pt at 11pt = 32 x 9.4cqw at 2.8cqw,
   clock 17pt = 4.3cqw, home indicator 134 x 5pt = 34 x 1.3cqw. */
.iphone {
  position: relative; margin: 0; display: block;
  container-type: inline-size; /* bezel and screen inset follow the phone's own width */
  aspect-ratio: 70.6 / 146.6;
  border-radius: 17.7% / 8.5%;
  background: #050505;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 50px 80px -40px rgba(0, 0, 0, .55),
    0 24px 32px -24px rgba(0, 0, 0, .4);
}
.iphone::before {
  /* natural titanium band */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.1cqw;
  background: linear-gradient(140deg, #E2E2E4 0%, #8E8E93 18%, #D9D9DC 36%, #5E5E63 56%, #C7C7CB 76%, #7A7A7F 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.iphone::after {
  /* power button, right side */
  content: ""; position: absolute; right: -1.1%; top: 27%; width: 1.4%; height: 13%;
  border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #6E6E73, #C7C7CB);
}
.iphone .side,
.iphone .side::before,
.iphone .side::after {
  position: absolute; width: 1.4%; border-radius: 2px 0 0 2px;
  background: linear-gradient(270deg, #6E6E73, #C7C7CB);
}
.iphone .side { left: -1.1%; top: 17%; height: 5%; }
.iphone .side::before, .iphone .side::after { content: ""; left: 0; width: 100%; height: 170%; }
.iphone .side::before { top: 150%; }
.iphone .side::after { top: 362%; }

.iphone-screen {
  container-type: inline-size;
  position: absolute; inset: 3.4cqw;
  border-radius: 15.3% / 7.1%;
  overflow: hidden; background: var(--sb, #000); color: var(--sb-ink, #fff);
}
.iphone-screen::before {
  /* faint glass reflection */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 38%);
}
.iphone-screen::after {
  /* home indicator */
  content: ""; position: absolute; z-index: 3; left: 50%; bottom: 2.2cqw;
  width: 34cqw; height: 1.3cqw; margin-left: -17cqw; border-radius: 9999px;
  background: var(--sb-ink, #fff); opacity: .85;
}
.iphone-screen > img {
  position: absolute; left: 0; top: 13.7cqw; width: 100%; height: calc(100% - 13.7cqw);
  object-fit: cover; object-position: top center;
}
.status {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 13.7cqw;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 7.5cqw 0 10.5cqw;
  background: var(--sb); color: var(--sb-ink);
  font-family: -apple-system, "SF Pro Text", var(--font);
  font-size: 4.3cqw; line-height: 1; font-weight: 600; letter-spacing: -0.01em;
}
.island { position: absolute; left: 50%; top: 2.8cqw; width: 32cqw; height: 9.4cqw; margin-left: -16cqw; border-radius: 9999px; background: #000; }
.status-icons { display: flex; align-items: center; gap: 1.4cqw; }
.sig { width: 4.6cqw; height: 3cqw; background: currentColor; clip-path: polygon(0 100%, 0 70%, 19% 70%, 19% 100%, 27% 100%, 27% 48%, 46% 48%, 46% 100%, 54% 100%, 54% 24%, 73% 24%, 73% 100%, 81% 100%, 81% 0, 100% 0, 100% 100%); }
.wifi { width: 4.2cqw; height: 3cqw; background: currentColor; clip-path: polygon(50% 100%, 0 30%, 15% 14%, 34% 4%, 50% 0, 66% 4%, 85% 14%, 100% 30%); }
.bat { position: relative; width: 6.6cqw; height: 3.2cqw; border: .35cqw solid currentColor; border-radius: 1cqw; opacity: .95; }
.bat::before { content: ""; position: absolute; right: -1.1cqw; top: 30%; width: .6cqw; height: 40%; border-radius: 0 .4cqw .4cqw 0; background: currentColor; opacity: .5; }
.bat::after { content: ""; position: absolute; inset: .35cqw 1.6cqw .35cqw .35cqw; border-radius: .5cqw; background: currentColor; }

/* ---------- Browser mockup ---------- */
.browser { margin: 0; border-radius: var(--r-xl); overflow: hidden; background: #FFFFFF; border: 1px solid #DAD8CF; box-shadow: 0 30px 60px -30px rgba(19, 18, 9, .35); }
.browser-chrome { display: flex; align-items: center; gap: var(--s-200); padding: var(--s-75) var(--s-100); background: #F1F0EA; border-bottom: 1px solid #DAD8CF; }
.lights { display: flex; gap: var(--s-75); }
.lights i { width: 12px; height: 12px; border-radius: var(--r-full); background: #FF5F57; }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }
.browser-url { flex: 1; max-width: 360px; margin-inline: auto; text-align: center; background: #FFFFFF; border-radius: var(--r-md); padding: var(--s-50) var(--s-100); color: #5C584C; font-family: var(--mono); }
.browser img { display: block; width: 100%; height: auto; }

/* ---------- Products ---------- */
.product { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: var(--s-700); align-items: center; padding: var(--s-600) 0; border-top: 1px solid var(--border); }
.product-flip .product-copy { order: 2; }
.product-copy { display: grid; gap: var(--s-200); align-content: start; }
.product-tags { display: flex; flex-wrap: wrap; gap: var(--s-75); }
.tag { padding: var(--s-50) var(--s-100); border-radius: var(--r-full); background: var(--f); color: var(--ink); }
.tag-soft { background: var(--surface-2); color: var(--text); }
.product-list { display: grid; gap: var(--s-100); }
.product-list li { display: flex; gap: var(--s-100); align-items: baseline; }
.product-list li::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-md); background: var(--f); flex: none; transform: translateY(-1px); }
.product-stage { position: relative; padding: 0 var(--s-700) var(--s-600) 0; }
.product-flip .product-stage { padding: 0 0 var(--s-600) var(--s-700); }
.product-phone { position: absolute; right: 0; bottom: 0; width: 26%; min-width: 132px; }
.product-flip .product-phone { right: auto; left: 0; }

@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; gap: var(--s-400); }
  .product-flip .product-copy { order: 0; }
  .product-stage, .product-flip .product-stage { padding: 0 var(--s-600) var(--s-600) 0; }
  .product-flip .product-phone { left: auto; right: 0; }
}
@media (max-width: 640px) {
  .hero-wrap { margin-top: -80px; padding-top: 80px; }
  .nav { padding-left: var(--s-200); min-height: 56px; }
  .product-stage, .product-flip .product-stage { padding: 0 var(--s-400) var(--s-500) 0; }
  .product-phone { width: 34%; min-width: 0; }
  .light { padding-bottom: var(--s-800); }
}

/* ---------- Technology ---------- */
.tech { display: grid; border-top: 1px solid var(--border); }
.tech-row { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--s-200) var(--s-500); align-items: center; padding: var(--s-300) 0; border-bottom: 1px solid var(--border); }
.tech-list { display: flex; flex-wrap: wrap; gap: var(--s-75); }
.tech-chip { display: inline-flex; align-items: center; gap: var(--s-75); padding: var(--s-75) var(--s-200) var(--s-75) var(--s-100); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.tech-logo { width: 20px; height: 20px; flex: none; }
@media (max-width: 640px) {
  .tech-row { grid-template-columns: 1fr; }
}

/* ---------- Scroll-driven motion ----------
   main.js writes --e (entrance 0..1), --p (pass-through 0..1), --x (hero exit 0..1) and --fill (process steps).
   Every default below is the resting state, so the page is complete without JS or with reduced motion. */
.scroll-bar {
  position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 3px;
  background: var(--c); transform: scaleX(0); transform-origin: left center;
  transition: background-color 400ms var(--ease);
  pointer-events: none;
}

/* Hero: the headline lifts away faster than the workbench, the color field sinks behind them */
.hero-copy { transform: translate3d(0, calc(var(--x, 0) * -120px), 0); opacity: calc(1 - var(--x, 0) * 1.4); }
.bench { transform: translate3d(0, calc(var(--x, 0) * -40px), 0) scale(calc(1 - var(--x, 0) * .05)); transform-origin: 50% 0; }
.hero-bg { transform: translate3d(0, calc(var(--x, 0) * 35%), 0); }

/* Marquee drifts with the scroll on top of its own loop */
.marquee { transform: translate3d(calc(var(--p, .5) * -320px + 160px), 0, 0); }

/* White area rises as a sheet: rounded top corners and side inset settle to full width */
.light {
  --k: calc(1 - var(--e, 1));
  clip-path: inset(0 calc(var(--k) * min(4vw, 56px)) 0 round calc(var(--k) * 56px) calc(var(--k) * 56px) 0 0);
}

/* Service bands: the colored rule draws across, the icon tile spins into place */
.band { position: relative; }
.band::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--c); transform: scaleX(var(--e, 1)); transform-origin: left center;
}
.band-mark { transform: rotate(calc((1 - var(--e, 1)) * -45deg)) scale(calc(.6 + var(--e, 1) * .4)); }

/* Products: the browser tilts up from the desk, the phone moves on its own layer */
.product-stage { perspective: 1400px; }
.product-stage .browser {
  transform: rotateX(calc((1 - var(--e, 1)) * 18deg)) scale(calc(.92 + var(--e, 1) * .08));
  transform-origin: 50% 100%;
}
.product-stage .product-phone { transform: translate3d(0, calc((.5 - var(--p, .5)) * 160px), 0) rotate(calc((.5 - var(--p, .5)) * 6deg)); }
.product-flip .product-stage .product-phone { transform: translate3d(0, calc((.5 - var(--p, .5)) * 160px), 0) rotate(calc((var(--p, .5) - .5) * 6deg)); }

/* Tech chips arrive one after another when their row appears */
.js .tech-row .tech-chip { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity 400ms var(--ease), transform 400ms var(--ease); transition-delay: calc(var(--i, 0) * 55ms + 150ms); }
.js .tech-row.in .tech-chip { opacity: 1; transform: none; }

/* Process: one colored line runs through the four steps with the scroll */
.steps li { position: relative; border-top-color: var(--border); }
.steps li::after {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--c); transform: scaleX(var(--fill, 1)); transform-origin: left center;
}
.steps li::before { opacity: calc(.35 + var(--fill, 1) * .65); }

/* Closing block opens like a window */
.close-inner { clip-path: inset(calc((1 - var(--e, 1)) * 14%) calc((1 - var(--e, 1)) * 8%) round var(--r-3xl)); }

/* Tagline words follow the scroll, so the change has to be quick */
.reveal-words .w { transition-duration: 220ms; }

@media (prefers-reduced-motion: reduce) {
  .scroll-bar { display: none; }
  .js .tech-row .tech-chip { opacity: 1; transform: none; transition: none; }
}