/* =========================================================================
   Radway Digital — "The Digital Showroom"
   Obsidian & graphite surfaces, bright genuine screenshots, electric lime for
   action, restrained chrome edges and glass. Unbounded for display, Inter for
   reading, JetBrains Mono for a few technical labels.
   ========================================================================= */

:root {
  --obsidian: #08090b;
  --obsidian-2: #0c0e11;
  --graphite: #121418;
  --graphite-2: #1a1d23;
  --text: #f5f1e8;
  --mute: #a8abb1;
  --dim: #7c8087;
  --lime: #d4ff3a;
  --lime-soft: rgba(212, 255, 58, .12);
  --line: rgba(245, 241, 232, .11);
  --line-2: rgba(245, 241, 232, .2);
  --glass: rgba(245, 241, 232, .035);
  --error: #ff9b8a;
  --chrome: linear-gradient(120deg, rgba(255,255,255,.55) 0%, rgba(170,182,196,.18) 25%, rgba(255,255,255,.4) 45%, rgba(160,170,184,.12) 70%, rgba(255,255,255,.35) 100%);

  --f-display: 'Unbounded', 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* one motion vocabulary */
  --ease: cubic-bezier(.2, .75, .15, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 180ms;
  --t-med: 420ms;
  --t-slow: 700ms;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1400px;
  --header-h: 72px;
  --radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); background: var(--obsidian); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--obsidian); color: var(--text);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
main:focus { outline: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--lime); color: var(--obsidian); padding: 12px 18px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- type ---------- */
.label { font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); display: inline-flex; align-items: center; gap: .7em; }
.label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(212, 255, 58, .8); }
.h1 { font: 600 clamp(2.1rem, 4.2vw, 3.9rem)/1.06 var(--f-display); letter-spacing: -.035em; text-wrap: balance; margin: 14px 0 16px; }
.h2 { font: 600 clamp(1.8rem, 3.3vw, 3rem)/1.08 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.h2 span { display: inline; }

/* ---------- brand ---------- */
.rd-mono { width: 30px; height: 30px; flex: none; overflow: visible; }
.rd-mono path { fill: none; stroke: currentColor; stroke-width: 3.3; stroke-linecap: round; stroke-linejoin: round; }
.rd-mono .rd-mono__line { stroke: var(--lime); filter: drop-shadow(0 0 3px rgba(212, 255, 58, .9)); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; white-space: nowrap; }
.brand__name { font: 600 12.5px/1 var(--f-display); letter-spacing: .2em; }
.brand__name b { font-weight: 400; margin-left: .45em; color: var(--mute); }
.brand--lg .rd-mono { width: 44px; height: 44px; }
.brand--lg .brand__name { font-size: 15px; }

/* ---------- buttons ---------- */
.btn {
  --bg: transparent; --fg: var(--text); --bd: var(--line-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 1.3em; border-radius: 999px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg);
  font: 600 15px/1 var(--f-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 18px; height: 18px; flex: none; transition: transform var(--t-med) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn[target="_blank"]:hover .icon { transform: translate(2px, -2px); }
.btn:active { transform: scale(.97); transition-duration: 80ms; }
.btn--accent { --bg: var(--lime); --fg: #0a0b0d; --bd: var(--lime); }
.btn--accent:hover { --bg: #e1ff6c; box-shadow: 0 8px 32px -8px rgba(212, 255, 58, .5); }
.btn--ghost { font-weight: 500; }
.btn--ghost:hover { --bd: var(--text); background: rgba(245, 241, 232, .06); }
.btn--lg { min-height: 54px; padding: 0 1.5em; font-size: 16px; }
.btn--sm { min-height: 44px; padding: 0 1.05em; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.icon { width: 20px; height: 20px; }

.ibtn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(8, 9, 11, .6); color: var(--text); font-size: 14px; font-weight: 500;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.ibtn:hover { border-color: rgba(245, 241, 232, .5); background: rgba(245, 241, 232, .08); }
.ibtn:active { transform: scale(.96); }
.ibtn .icon { width: 18px; height: 18px; }
.ibtn--round { width: 48px; height: 48px; padding: 0; justify-content: center; }
.ibtn[aria-pressed="true"]:not([data-film="cc"]) { background: var(--text); color: var(--obsidian); border-color: var(--text); }
.cc { font: 600 10px/1 var(--f-mono); border: 1.5px solid currentColor; border-radius: 4px; padding: 3px 4px; }
.ibtn[aria-pressed="true"] .cc { background: var(--text); color: var(--obsidian); border-color: var(--text); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter);
  view-transition-name: site-header; border-bottom: 1px solid transparent;
  transition: background-color var(--t-med), border-color var(--t-med);
}
.site-header.is-scrolled, .menu-open .site-header { background: rgba(8, 9, 11, .8); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 4px; }
.site-nav a, .watch-link {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: none; cursor: pointer;
  text-decoration: none; font-size: 14px; font-weight: 500; color: rgba(245, 241, 232, .8); transition: color var(--t-fast), background-color var(--t-fast);
}
.site-nav a:hover, .watch-link:hover { color: var(--text); background: rgba(245, 241, 232, .07); }
.site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a[aria-current="page"]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.watch-link .icon { width: 14px; height: 14px; color: var(--lime); }
.header-actions { display: flex; align-items: center; gap: 6px; }
.menu-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; }
.mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--obsidian); padding: 16px var(--gutter) 32px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; }
.mobile-menu ul { border-top: 1px solid var(--line); }
.mobile-menu li a { display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); text-decoration: none; font: 600 clamp(1.5rem, 7vw, 2.2rem)/1 var(--f-display); letter-spacing: -.03em; }
.watch-link--menu { align-self: flex-start; border: 1px solid var(--line-2); }
@media (max-width: 960px) {
  .site-nav, .header-actions > .watch-link { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 400px) { .header-cta { display: none; } }
@media (max-width: 440px) { .hero__copy .actions .icon { display: none; } }

/* ---------- frames ---------- */
.frame, .phone, .stage__frame, .device, .fpanel, .opanel { position: relative; isolation: isolate; }
.frame, .stage__frame, .fpanel, .opanel { border-radius: 12px; overflow: hidden; background: #0e1013; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04); }
.frame::after, .phone::after, .stage__frame::after, .device::after, .fpanel::after {
  /* restrained chrome edge */
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--chrome);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.frame__bar, .device__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #17191e; border-bottom: 1px solid rgba(255, 255, 255, .05); flex: none; }
.frame__bar i, .device__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(245, 241, 232, .2); flex: none; }
.frame__url, .device__bar span { flex: 1; text-align: center; font: 500 11px/1 var(--f-mono); color: #8f9399; margin-right: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #15171b; }
.phone { padding: 5px; border-radius: 28px; background: linear-gradient(160deg, #2a2d34, #0d0e11 60%); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.phone img { width: 100%; aspect-ratio: 520 / 1125; object-fit: cover; object-position: top; border-radius: 23px; background: #15171b; }
.frame--glow { box-shadow: 0 0 0 1px rgba(212, 255, 58, .22), 0 50px 120px -50px rgba(0, 0, 0, .95), 0 0 80px -20px rgba(212, 255, 58, .18); }

/* ---------- sections ---------- */
section { position: relative; }
.work, .screens, .services, .process, .about, .approach, .gallery, .next, .brief { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.work > *, .screens > *, .services > *, .process > *, .about > *, .approach > *, .gallery > *, .next > *, .brief > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.screens, .process, .brief { background: var(--graphite); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px 48px; align-items: end; margin-bottom: clamp(32px, 4.5vw, 56px); }
.section-head .label { grid-column: 1 / -1; }
.section-head__aside { color: var(--mute); max-width: 44ch; justify-self: end; }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; } .section-head__aside { justify-self: start; } }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; min-height: min(100svh, 980px);
  padding: calc(var(--header-h) + clamp(24px, 4vh, 48px)) var(--gutter) clamp(40px, 6vh, 72px);
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(800px 520px at 75% 42%, rgba(212, 255, 58, .07), transparent 65%), radial-gradient(900px 600px at 0% 0%, rgba(245, 241, 232, .05), transparent 60%); }
.hero__title { font: 600 clamp(2.15rem, 4.05vw, 4.4rem)/1.04 var(--f-display); letter-spacing: -.04em; margin: 18px 0 20px; }
.hero__title span { display: block; white-space: nowrap; }
.hero__title i { font-style: normal; color: var(--lime); }
.hero__lede { max-width: 38ch; font-size: clamp(17px, 1.3vw, 19px); color: #d3d0c8; margin-bottom: 28px; }
.watch { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; min-height: 44px; padding: 4px 16px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); cursor: pointer; font-size: 14px; font-weight: 500; transition: border-color var(--t-fast), background-color var(--t-fast); }
.watch:hover { border-color: var(--line-2); background: rgba(245, 241, 232, .07); }
.watch__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--obsidian); }
.watch__icon .icon { width: 14px; height: 14px; }
.watch__time { font: 500 12px/1 var(--f-mono); color: var(--mute); }

/* interactive project stage */
.stage { display: grid; gap: 16px; min-width: 0; }
.stage__frame {
  transform: perspective(1800px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 600ms var(--ease), box-shadow var(--t-med);
  box-shadow: 0 0 0 1px rgba(212, 255, 58, .28), 0 0 70px -18px rgba(212, 255, 58, .32), 0 60px 110px -50px rgba(0, 0, 0, .95);
}
.stage__frame::before { /* illuminated lower edge */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; z-index: 5; background: linear-gradient(90deg, transparent, var(--lime), transparent); box-shadow: 0 0 18px 2px rgba(212, 255, 58, .55);
}
.stage__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #15171b; }
.stage__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage__screen img.is-entering { clip-path: inset(0 100% 0 0); }
.stage__screen img.is-entering.is-in { clip-path: inset(0 0 0 0); transition: clip-path 650ms var(--ease-io); }
.stage__screen::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 3; background: var(--lime); box-shadow: 0 0 14px 3px rgba(212, 255, 58, .6); opacity: 0; transform: translateX(-4px); }
.stage__screen.is-scanning::after { animation: scan 650ms var(--ease-io); }
@keyframes scan { 0% { opacity: 1; transform: translateX(0); } 95% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--scan-w, 600px)); } }
.stage__info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 2px 2px 0; }
.stage__name { font: 600 clamp(1.15rem, 1.6vw, 1.5rem)/1.2 var(--f-display); letter-spacing: -.02em; margin-top: 4px; }
.stage__links { display: flex; gap: 8px; flex-wrap: wrap; }
.stage__select { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.selector {
  display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 8px 12px 8px 8px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; background: var(--glass); color: var(--text);
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.selector img { width: 84px; flex: none; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px; }
.selector__text { display: grid; gap: 4px; min-width: 0; }
.selector__name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.selector__ind { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.selector:hover { border-color: var(--line-2); background: rgba(245, 241, 232, .06); }
.selector:active { transform: scale(.98); }
.selector[aria-pressed="true"] { border-color: rgba(212, 255, 58, .7); background: var(--lime-soft); }
.selector[aria-pressed="true"] img { box-shadow: 0 0 0 1.5px var(--lime); }
.stage__nav { display: none; align-items: center; justify-content: center; gap: 18px; }
.stage__count { font: 500 13px/1 var(--f-mono); color: var(--mute); min-width: 5ch; text-align: center; }

@media (max-width: 1180px) and (min-width: 901px) {
  .selector img { width: 60px; }
  .selector { padding: 8px; gap: 10px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 26px; padding-top: calc(var(--header-h) + 18px); padding-bottom: 48px; }
  .hero__title { font-size: min(9.3vw, 3.6rem); margin: 12px 0 14px; }
  .hero__lede { margin-bottom: 20px; }
  .hero__copy .actions .btn { flex: 1 1 auto; min-height: 50px; padding: 0 1em; font-size: 15px; }
  .watch { margin-top: 14px; }
  .stage__select { display: none; }
  .stage__nav { display: flex; }
  .stage__info { flex-direction: column; align-items: flex-start; }
}

/* ---------- selected work cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.card { display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); transition: border-color var(--t-med), transform var(--t-med) var(--ease); }
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card__media { display: block; text-decoration: none; }
.card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 8px 8px; flex: 1; }
.card__title { font: 600 1.25rem/1.2 var(--f-display); letter-spacing: -.02em; }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 4px; }
.card__desc { color: var(--mute); font-size: 15.5px; flex: 1; margin-bottom: 8px; }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr; max-width: 640px; } }

/* ---------- Every screen. Considered. ---------- */
.screens__controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 9, 11, .5); }
.seg__btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--mute); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); }
.seg__btn:hover { color: var(--text); }
.seg__btn[aria-pressed="true"] { background: var(--text); color: var(--obsidian); }
.seg--projects .seg__btn[aria-pressed="true"] { background: var(--lime); }
.screens__stage {
  container-type: size; position: relative; height: clamp(360px, 44vw, 620px); display: grid; place-items: center;
  border-radius: 24px; background: radial-gradient(60% 50% at 50% 100%, rgba(212, 255, 58, .1), transparent 70%), linear-gradient(180deg, rgba(245,241,232,.025), rgba(245,241,232,0)); border: 1px solid var(--line);
  padding: 0; overflow: hidden;
}
.screens__stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: .35; mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); pointer-events: none; }
.device {
  --pad: 0px; --bar: 30px;
  --dw: min(calc(100cqw - 48px), calc((100cqh - 48px - 30px) * 1.6));
  width: var(--dw); height: calc(var(--dw) * .625 + 30px);
  display: flex; flex-direction: column; padding: var(--pad); border-radius: 14px; background: #0e1013;
  box-shadow: 0 0 0 1px rgba(212, 255, 58, .2), 0 0 60px -20px rgba(212, 255, 58, .28), 0 40px 80px -40px rgba(0, 0, 0, .95);
  transition: width var(--t-slow) var(--ease-io), height var(--t-slow) var(--ease-io), padding var(--t-slow) var(--ease-io), border-radius var(--t-slow) var(--ease-io);
}
.device__bar { transition: height var(--t-slow) var(--ease-io), opacity var(--t-med); overflow: hidden; }
.device__screen { position: relative; flex: 1; overflow: hidden; background: #15171b; border-radius: 0 0 12px 12px; transition: border-radius var(--t-slow) var(--ease-io); }
.device__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 260ms var(--ease) 0ms; }
.device__screen img.is-active { opacity: 1; transition: opacity 360ms var(--ease) 300ms; }
.device[data-mode="tablet"] { --pad: 12px; --tw: min(calc(100cqw - 48px), calc((100cqh - 48px - 24px) * .75 + 24px)); width: var(--tw); height: calc((var(--tw) - 24px) / .75 + 24px); border-radius: 30px; }
.device[data-mode="mobile"] { --pad: 9px; --mw: min(calc(100cqw - 48px), calc((100cqh - 48px - 18px) * .4622 + 18px)); width: var(--mw); height: calc((var(--mw) - 18px) / .4622 + 18px); border-radius: 38px; }
.device[data-mode="tablet"] .device__bar, .device[data-mode="mobile"] .device__bar { height: 0; opacity: 0; border: 0; }
.device[data-mode="tablet"] .device__screen { border-radius: 20px; }
.device[data-mode="mobile"] .device__screen { border-radius: 30px; }
.screens__caption { display: grid; gap: 6px; margin-top: 20px; min-height: 4.4em; max-width: 70ch; }
.screens__caption [data-caption-text] { font-size: 17px; color: #d3d0c8; }
.screens.is-switching .device__screen img.is-active { opacity: 0; transition-delay: 0ms; }
@media (max-width: 700px) {
  .screens__stage { height: 440px; }
  .seg { width: 100%; }
  .seg__btn { flex: 1; padding: 0 10px; }
  .seg--projects .seg__btn { font-size: 13px; }
}

/* ---------- services / process ---------- */
.service-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.service { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: 20px; background: var(--glass); }
.service h3 { font: 600 clamp(1.3rem, 1.9vw, 1.7rem)/1.15 var(--f-display); letter-spacing: -.025em; }
.service p:not(.label) { color: #d3d0c8; }
.service .service__fit { color: var(--mute); font-size: 15px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 960px) { .service-list { grid-template-columns: 1fr; } }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 36px); }
.step { padding-top: 22px; border-top: 1px solid var(--line-2); position: relative; }
.step::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--lime); box-shadow: 0 0 10px rgba(212, 255, 58, .6); }
.step__num { font: 500 12px/1 var(--f-mono); color: var(--lime); margin-bottom: 18px; }
.step h3 { font: 600 1.35rem/1.2 var(--f-display); letter-spacing: -.02em; margin-bottom: 10px; }
.step p:last-child { color: var(--mute); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- about ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.about__portrait { position: sticky; top: calc(var(--header-h) + 24px); aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(80% 60% at 50% 40%, rgba(212, 255, 58, .1), transparent 70%), var(--graphite); }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about__portrait--mark { display: grid; place-items: center; }
.about__portrait--mark .rd-mono { width: 42%; height: auto; }
.about__portrait figcaption { position: absolute; left: 16px; bottom: 16px; display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: rgba(8, 9, 11, .7); backdrop-filter: blur(10px); }
.about__portrait figcaption span { color: var(--mute); font-size: 14px; }
.about__copy { display: grid; gap: 18px; justify-items: start; }
.about__copy .h2 { margin: 2px 0 6px; }
.about__copy p { color: var(--mute); max-width: 60ch; }
.about__copy .about__lead { color: var(--text); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.about__gets-title { margin-top: 12px; }
.gets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-bottom: 8px; }
.gets li { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); }
.gets .icon { color: var(--lime); flex: none; margin-top: 2px; }
.gets b { display: block; font-weight: 600; margin-bottom: 4px; }
.gets span { color: var(--mute); font-size: 15px; }
@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__portrait { position: relative; top: 0; aspect-ratio: 16 / 9; max-height: 260px; width: 100%; }
  .about__portrait--mark .rd-mono { width: 22%; }
  .gets { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
.site-footer { padding: clamp(56px, 8vw, 110px) var(--gutter) 28px; border-top: 1px solid var(--line); background: radial-gradient(900px 400px at 85% 0%, rgba(212, 255, 58, .06), transparent 60%), var(--obsidian); }
.site-footer > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.footer__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: clamp(48px, 6vw, 80px); }
.footer__line { font: 600 clamp(1.8rem, 4vw, 3.6rem)/1.05 var(--f-display); letter-spacing: -.035em; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; padding: 32px 0; border-top: 1px solid var(--line); align-items: start; }
.footer__nav { display: grid; }
.footer__nav a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; color: #d3d0c8; }
.footer__nav a:hover { color: var(--text); }
.footer__controls { display: grid; justify-items: start; gap: 2px; }
.footer__controls .watch-link { padding-left: 0; }
.sound-pref { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 14px; color: rgba(245, 241, 232, .8); }
.sound-pref .icon { width: 16px; height: 16px; }
.sound-pref b { color: var(--text); }
.sound-pref[aria-pressed="true"] b { color: var(--lime); }
.footer__legal { color: var(--dim); font-size: 13px; padding-top: 12px; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- /work ---------- */
.page-head { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--header-h) + clamp(28px, 4vw, 52px)) var(--gutter) clamp(20px, 3vw, 36px); }
.page-head__lede { color: #d3d0c8; max-width: 56ch; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15px; transition: border-color var(--t-fast); }
.jump a:hover { border-color: var(--lime); }
.jump .label { color: var(--lime); }
.exhibit { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 64px); align-items: center; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(48px, 6vw, 88px); }
.exhibit + .exhibit { border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 88px); }
.exhibit__media { position: relative; padding: 0 5% 6% 0; transform: perspective(1800px) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg)); transition: transform var(--t-slow) var(--ease); }
.exhibit__media > a { display: block; text-decoration: none; }
.project-head__shot, .card__media, .exhibit__media a { text-decoration: none; }
.exhibit__phone { position: absolute !important; right: 0; bottom: 0; width: 17%; }
.exhibit__title { font: 600 clamp(1.7rem, 2.8vw, 2.6rem)/1.08 var(--f-display); letter-spacing: -.03em; margin: 12px 0 14px; text-wrap: balance; }
.exhibit__desc { color: #d3d0c8; margin-bottom: 24px; }
@media (max-width: 900px) {
  .exhibit { grid-template-columns: 1fr; }
  .exhibit__media { padding: 0 9% 10% 0; }
  .exhibit__phone { width: 24%; }
}

/* ---------- project detail ---------- */
.project-head { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--header-h) + clamp(16px, 2.5vw, 32px)) var(--gutter) clamp(48px, 6vw, 88px); }
.crumbs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: var(--mute); font-size: 14px; font-weight: 500; }
.crumbs a:hover { color: var(--text); }
.crumbs .icon { width: 16px; }
.project-head__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: end; margin: 8px 0 clamp(28px, 4vw, 48px); }
.project-head__lede { color: #d3d0c8; max-width: 62ch; font-size: clamp(17px, 1.3vw, 19px); }
.project-head__shot { transform: perspective(2000px) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg)); transition: transform var(--t-slow) var(--ease); }
@media (max-width: 760px) { .project-head__row { grid-template-columns: 1fr; } }
.brief__grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: clamp(20px, 3vw, 44px); }
.brief article { display: grid; gap: 12px; align-content: start; }
.brief article > p:not(.label) { font-size: 17px; color: #d3d0c8; }
.features { display: grid; gap: 10px; }
.features li { display: flex; gap: 10px; font-size: 15.5px; color: #d3d0c8; }
.features .icon { color: var(--lime); flex: none; width: 18px; margin-top: 3px; }
@media (max-width: 960px) { .brief__grid { grid-template-columns: 1fr; } }
.obs-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
.obs { padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: 20px; background: var(--glass); }
.obs h3 { font: 600 1.25rem/1.2 var(--f-display); letter-spacing: -.02em; margin-bottom: 10px; }
.obs p:last-child { color: var(--mute); }
@media (max-width: 760px) { .obs-list { grid-template-columns: 1fr; } }
.gallery__desktop { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 28px); margin-bottom: clamp(28px, 4vw, 48px); }
.gallery__mobile { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: clamp(14px, 3vw, 44px); }
.gallery__note { color: var(--dim); font-size: 14px; text-align: center; margin-top: 28px; }
.gallery__cta { display: flex; justify-content: center; margin-top: 24px; }
@media (max-width: 760px) {
  .gallery__desktop { grid-template-columns: 1fr; }
  .gallery__mobile { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; justify-content: flex-start; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 12px; }
  .gallery__mobile .phone { flex: 0 0 62vw; scroll-snap-align: center; }
}
.next { border-top: 1px solid var(--line); }
.next__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.next .h2 { margin: 12px 0 24px; }
.next-card { display: grid; gap: 8px; text-decoration: none; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); transition: border-color var(--t-med), transform var(--t-med) var(--ease); }
.next-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.next-card__name { display: flex; align-items: center; justify-content: space-between; font: 600 1.4rem/1.1 var(--f-display); letter-spacing: -.02em; }
.next-card img { border-radius: 10px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; margin-top: 6px; }
@media (max-width: 760px) { .next__grid { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact { padding: calc(var(--header-h) + clamp(20px, 3.5vw, 48px)) var(--gutter) clamp(48px, 6vw, 88px); }
.contact__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "intro panel" ". next"; gap: 24px clamp(28px, 5vw, 72px); align-items: start; }
.contact__intro { grid-area: intro; position: sticky; top: calc(var(--header-h) + 24px); }
.contact__intro .h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.contact__lede { color: #d3d0c8; }
.contact__panel { grid-area: panel; border: 1px solid var(--line); border-radius: 22px; background: var(--glass); padding: clamp(18px, 3vw, 36px); }
.contact__next { grid-area: next; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.contact__next li { display: grid; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); color: var(--mute); font-size: 15px; }
.contact__next .step__num { margin: 0; }
.narrow { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; justify-items: start; }
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "panel" "next"; }
  .contact__intro { position: static; }
  .contact__intro .h1 { margin: 10px 0 8px; }
  .contact__next { grid-template-columns: 1fr; }
}
.env-note { margin-bottom: 20px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(212, 255, 58, .35); background: var(--lime-soft); font-size: 14.5px; color: #e9e6dc; }
.env-note b { color: var(--lime); }
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field legend { font-size: 15px; font-weight: 500; }
.optional { color: var(--mute); font-weight: 400; }
.hint { color: var(--mute); font-size: 14px; }
.field input:not([type="radio"]), .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(245, 241, 232, .22);
  background: rgba(8, 9, 11, .7); color: var(--text); font: 400 16px/1.4 var(--f-body); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 132px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f1e8' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.field select option { background: var(--graphite); color: var(--text); }
.field input::placeholder { color: #80848a; }
.field input:not([type="radio"]):hover, .field textarea:hover, .field select:hover { border-color: rgba(245, 241, 232, .42); }
.field input:not([type="radio"]):focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(212, 255, 58, .3); }
.field [aria-invalid="true"]:not([type="radio"]) { border-color: var(--error); }
.error { color: var(--error); font-size: 14px; font-weight: 500; display: flex; gap: 6px; }
.error::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: var(--obsidian); font-size: 12px; font-weight: 700; margin-top: 1px; }
.field--choices { border: 0; padding: 0; margin: 0; }
.field--choices legend { padding: 0; margin-bottom: 10px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .choices { grid-template-columns: 1fr; } }
/* selectable cards with a fixed-size radio indicator that cannot stretch */
.choice { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(245, 241, 232, .2); cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice__mark { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid rgba(245, 241, 232, .55); display: grid; place-items: center; transition: border-color var(--t-fast), background-color var(--t-fast); }
.choice__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--obsidian); transform: scale(0); transition: transform var(--t-fast) var(--ease); }
.choice input:checked + .choice__mark { background: var(--lime); border-color: var(--lime); }
.choice input:checked + .choice__mark::after { transform: scale(1); }
.choice input:focus-visible + .choice__mark { outline: 2px solid var(--lime); outline-offset: 3px; }
.choice__text { display: grid; gap: 2px; }
.choice__text b { font-weight: 600; font-size: 15px; }
.choice__text span { color: var(--mute); font-size: 13.5px; }
.choice:hover { border-color: rgba(245, 241, 232, .45); }
.choice:has(input:checked) { border-color: var(--lime); background: var(--lime-soft); }
.field--choices[data-invalid] .choice { border-color: rgba(255, 155, 138, .55); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form__privacy { color: var(--mute); font-size: 14px; }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.form-status:empty { display: none; }
.form-status { padding: 14px 16px; border-radius: 12px; font-size: 15px; background: rgba(245, 241, 232, .06); }
.form-status[data-tone="error"] { background: rgba(255, 155, 138, .1); border-left: 3px solid var(--error); }
.form-summary { margin-bottom: 22px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 155, 138, .09); border-left: 3px solid var(--error); }
.form-summary h2 { font: 600 17px/1.3 var(--f-body); margin-bottom: 8px; }
.form-summary ul { list-style: disc; padding-left: 20px; }
.form-summary a { color: var(--error); font-weight: 500; }
.form-success { display: grid; gap: 16px; justify-items: start; }
.form-success .label { color: var(--lime); }
.form-success p { color: #d3d0c8; }
.form-success:focus { outline: none; }

/* =========================================================================
   Automatic opening (first visit, ~4 s, silent)
   ========================================================================= */
html.opening-active { overflow: hidden; }
html.opening-active .stage__frame, html.opening-active .selector img { opacity: 0; }
html.opening-active .hero__copy { opacity: 0; transform: translateY(14px); }
html.opening-settle .hero__copy { opacity: 1; transform: none; transition: opacity .9s var(--ease) .2s, transform 1s var(--ease) .2s; }
.opening { position: fixed; inset: 0; z-index: 120; background: var(--obsidian); transition: background-color .9s var(--ease-io); }
.opening__mark { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 18px; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.opening__mark .rd-mono, .film__mark .rd-mono { width: clamp(84px, 12vw, 132px); height: auto; }
.rd-mono--draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rd-mono--draw .rd-mono__r { transition: stroke-dashoffset 1s var(--ease-io); }
.rd-mono--draw .rd-mono__d { transition: stroke-dashoffset 1s var(--ease-io) .18s; }
.rd-mono--draw .rd-mono__line { transition: stroke-dashoffset .8s var(--ease-io) .45s; filter: drop-shadow(0 0 6px rgba(212, 255, 58, .95)); }
.is-drawn .rd-mono--draw path { stroke-dashoffset: 0; }
.opening__name { font: 600 clamp(13px, 1.4vw, 16px)/1 var(--f-display); letter-spacing: .32em; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease) .5s, transform .6s var(--ease) .5s; }
.opening__name b { font-weight: 400; color: var(--mute); }
.is-drawn .opening__name { opacity: 1; transform: none; }
.opening__panels { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); display: flex; gap: 2vw; }
.opanel { width: clamp(150px, 22vw, 340px); aspect-ratio: 16 / 10; opacity: 0; transform: translateY(40px) scale(.94); filter: blur(8px); transform-origin: 0 0; transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease); }
.opanel img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.opanel[data-i="1"] { transition-delay: .12s; }
.opanel[data-i="2"] { transition-delay: .24s; }
.panels-in .opanel { opacity: 1; transform: none; filter: none; }
.opening.is-settling { background-color: rgba(8, 9, 11, 0); pointer-events: none; }
.opening.is-settling .opening__mark { opacity: 0; transform: translate(-50%, -70%); }
.opening.is-settling .opanel { opacity: 0; transition: transform 1s var(--ease-io), opacity .45s var(--ease) .85s; }
.opening__skip { position: absolute; right: var(--gutter); bottom: 24px; }
.opening.is-settling .opening__skip { opacity: 0; transition: opacity .3s; }
@media (max-width: 700px) {
  .opening__panels { flex-direction: column; top: 70%; gap: 10px; }
  .opanel { width: 56vw; }
  .opanel[data-i="1"], .opanel[data-i="2"] { display: none; }
}

/* =========================================================================
   Full narrated introduction (dialog)
   ========================================================================= */
.film { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--text); overflow: hidden; background: radial-gradient(1100px 700px at 50% 42%, #14171c, var(--obsidian) 70%); }
.film::backdrop { background: var(--obsidian); }
.film__scene { position: absolute; inset: 0; }
.film__light { position: absolute; left: 50%; top: 57%; width: min(70vw, 820px); height: 2px; margin-left: calc(min(70vw, 820px) / -2); background: linear-gradient(90deg, transparent, var(--lime) 20%, #fffff0 50%, var(--lime) 80%, transparent); box-shadow: 0 0 22px 2px rgba(212, 255, 58, .5); transform: scaleX(0); opacity: 0; transition: transform 1.1s var(--ease-io), opacity .6s; }
.film__mark { position: absolute; left: 50%; top: 42%; display: grid; justify-items: center; gap: 16px; transform: translate(-50%, -50%); transition: top .9s var(--ease), transform .9s var(--ease), opacity .6s; }
.film__mark .opening__name { opacity: 1; transform: none; }
[data-state="mark"] .film__light { transform: scaleX(1); opacity: .9; }
[data-state="mark"] .rd-mono--draw path, .film__scene:not([data-state="idle"]) .rd-mono--draw path { stroke-dashoffset: 0; }
.film__scene:not([data-state="idle"]):not([data-state="mark"]) .film__mark { top: 11%; transform: translate(-50%, -50%) scale(.55); }
[data-state="end"] .film__mark { opacity: 0; }
[data-state="idle"] .film__mark .opening__name { opacity: 0; }

.fpanel {
  --w: 26vw; --h: calc(26vw * .625 + 26px); --x: 0vw; --y: 0px;
  position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); display: flex; flex-direction: column;
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); opacity: 0;
  transition: width .75s var(--ease-io), height .75s var(--ease-io), transform .75s var(--ease-io), opacity .6s var(--ease), filter .6s, border-radius .75s, padding .75s;
}
.fpanel .frame__bar { height: 26px; transition: height .6s var(--ease-io), opacity .4s; overflow: hidden; }
.fpanel__screen { position: relative; flex: 1; overflow: hidden; border-radius: inherit; }
.fpanel__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .25s .3s; }
.fpanel__screen img.is-active { opacity: 1; }
.fpanel[data-i="0"] { --x: -32vw; }
.fpanel[data-i="2"] { --x: 32vw; }
.film__scene:not([data-state="idle"]):not([data-state="mark"]):not([data-state="end"]) .fpanel { opacity: 1; }
[data-state="emerge"] .fpanel { --y: 4vh; }
[data-state="gallery"] .fpanel[data-i="0"], [data-state="live"] .fpanel[data-i="0"], [data-state="start"] .fpanel[data-i="0"],
[data-state="tablet"] .fpanel[data-i="0"], [data-state="mobile"] .fpanel[data-i="0"] { --x: 0vw; --w: min(46vw, 86vh); --h: calc(min(46vw, 86vh) * .625 + 26px); z-index: 2; box-shadow: 0 0 0 1px rgba(212, 255, 58, .3), 0 0 80px -20px rgba(212, 255, 58, .35), 0 40px 90px -40px #000; }
[data-state="gallery"] .fpanel[data-i="1"], [data-state="live"] .fpanel[data-i="1"], [data-state="start"] .fpanel[data-i="1"] { --x: -37vw; --w: 20vw; --h: calc(20vw * .625 + 26px); }
[data-state="gallery"] .fpanel[data-i="2"], [data-state="live"] .fpanel[data-i="2"], [data-state="start"] .fpanel[data-i="2"] { --x: 37vw; --w: 20vw; --h: calc(20vw * .625 + 26px); }
[data-state="tablet"] .fpanel[data-i="0"] { --h: 56vh; --w: calc((56vh - 20px) * .75 + 20px); padding: 10px; border-radius: 26px; }
[data-state="mobile"] .fpanel[data-i="0"] { --h: 58vh; --w: calc((58vh - 16px) * .4622 + 16px); padding: 8px; border-radius: 34px; }
[data-state="tablet"] .fpanel[data-i="0"] .frame__bar, [data-state="mobile"] .fpanel[data-i="0"] .frame__bar { height: 0; opacity: 0; border: 0; }
[data-state="tablet"] .fpanel:not([data-i="0"]), [data-state="mobile"] .fpanel:not([data-i="0"]) { --w: 18vw; --h: calc(18vw * .625 + 26px); filter: brightness(.7); }
[data-state="tablet"] .fpanel[data-i="1"], [data-state="mobile"] .fpanel[data-i="1"] { --x: -40vw; }
[data-state="tablet"] .fpanel[data-i="2"], [data-state="mobile"] .fpanel[data-i="2"] { --x: 40vw; }
[data-state="start"] .fpanel { --y: -4vh; }
.film__tag, .film__pill { position: absolute; left: 50%; opacity: 0; transition: opacity .5s var(--ease), transform .7s var(--ease); pointer-events: none; }
.film__tag { top: 18%; transform: translate(-50%, 8px); font: 500 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
[data-state="tablet"] .film__tag, [data-state="mobile"] .film__tag, [data-state="gallery"] .film__tag { opacity: 1; transform: translate(-50%, 0); }
.film__pill { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 1.4em; border-radius: 999px; font-weight: 600; transform: translate(-50%, 16px); }
.film__pill .icon { width: 18px; }
.film__pill--live { top: calc(50% + min(46vw, 86vh) * .3125 + 30px); background: var(--text); color: var(--obsidian); }
.film__pill--start { top: calc(50% + min(46vw, 86vh) * .3125 + 26px); background: var(--lime); color: var(--obsidian); }
[data-state="live"] .film__pill--live, [data-state="start"] .film__pill--start { opacity: 1; transform: translate(-50%, 0); }
[data-state="start"] .film__pill--start { box-shadow: 0 0 0 0 rgba(212, 255, 58, .5); animation: pulse 1.6s var(--ease) .4s 1; }
@keyframes pulse { to { box-shadow: 0 0 0 24px rgba(212, 255, 58, 0); } }
.film__end { position: absolute; inset: 0 0 120px; display: grid; place-content: center; justify-items: center; gap: 24px; text-align: center; padding: 0 var(--gutter); }
.film__end .rd-mono { width: 72px; height: 72px; }
.film__end-title { font: 600 clamp(1.6rem, 3.4vw, 3rem)/1.12 var(--f-display); letter-spacing: -.03em; max-width: 20ch; }
.film__end .actions { justify-content: center; }
.film__caption { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(92vw, 820px); text-align: center; font: 500 clamp(16px, 1.5vw, 20px)/1.45 var(--f-body); }
.film__caption span { background: rgba(8, 9, 11, .82); padding: 6px 12px; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.film__status { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); font: 500 12px/1.4 var(--f-mono); letter-spacing: .08em; color: var(--mute); text-align: center; width: min(92vw, 640px); }
.film__controls { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 var(--gutter); }
.film__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(245, 241, 232, .1); }
.film__progress span { display: block; height: 100%; background: var(--lime); transform-origin: left; transform: scaleX(var(--p, 0)); }
.film.is-paused .film__pill--start { animation-play-state: paused; }
.film__scene.no-anim, .film__scene.no-anim * { transition: none !important; animation: none !important; }
@media (max-width: 700px) {
  .fpanel { --w: 44vw; --h: calc(44vw * .625 + 26px); }
  .fpanel[data-i="0"] { --x: 0vw; --y: -24vh; }
  .fpanel[data-i="1"] { --x: 0vw; --y: -6vh; }
  .fpanel[data-i="2"] { --x: 0vw; --y: 12vh; }
  [data-state="gallery"] .fpanel[data-i="0"], [data-state="live"] .fpanel[data-i="0"], [data-state="start"] .fpanel[data-i="0"] { --w: 86vw; --h: calc(86vw * .625 + 26px); --y: -4vh; }
  [data-state="tablet"] .fpanel[data-i="0"] { --h: 46vh; --w: calc((46vh - 20px) * .75 + 20px); --y: -2vh; }
  [data-state="mobile"] .fpanel[data-i="0"] { --h: 50vh; --w: calc((50vh - 16px) * .4622 + 16px); --y: -2vh; }
  .film__scene:not([data-state="emerge"]) .fpanel:not([data-i="0"]) { opacity: 0 !important; }
  .film__pill--live, .film__pill--start { top: auto; bottom: 200px; }
  .film__caption { bottom: 128px; }
  .film__controls .ibtn { padding: 0 12px; font-size: 13px; }
}

/* ---------- page transitions: sequential fade (no superimposed text) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition { background-color: #08090b; }
  ::view-transition-group(root), ::view-transition-image-pair(root) { background-color: #08090b; }
  ::view-transition-old(root) { animation: vt-out 140ms cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vt-in 230ms cubic-bezier(0, 0, .2, 1) 150ms both; }
  ::view-transition-new(*):only-child { animation: vt-in 230ms cubic-bezier(0, 0, .2, 1) 150ms both; }
  ::view-transition-old(*):only-child { animation: vt-out 140ms cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-group(site-header) { animation: none; }
  ::view-transition-old(site-header) { display: none; }
  ::view-transition-new(site-header) { animation: none; }
  ::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.2, .75, .15, 1); }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .btn, .ibtn, .choice, .selector, .seg__btn { border: 1px solid ButtonText; }
  .frame::after, .phone::after, .stage__frame::after, .device::after, .fpanel::after { display: none; }
}

/* =========================================================================
   Agency sections
   ========================================================================= */
.hero__title--long { font-size: clamp(2rem, 3.55vw, 3.9rem); line-height: 1.06; }
.hero__actions .btn--ghost { font-weight: 500; }
@media (max-width: 900px) { .hero__title--long { font-size: min(8.4vw, 3.2rem); } }
@media (max-width: 440px) { .hero__actions .btn { flex: 1 1 100%; } .hero__actions .btn--ghost { flex: 1 1 calc(50% - 5px); padding: 0 .6em; } }
.more { margin-top: 28px; display: flex; justify-content: center; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 5px; }
.text-link .icon { width: 16px; }

/* services */
.svc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.svc { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); transition: border-color var(--t-med), transform var(--t-med) var(--ease); }
.svc:hover { border-color: rgba(212, 255, 58, .45); transform: translateY(-3px); }
.svc__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lime-soft); color: var(--lime); border: 1px solid rgba(212, 255, 58, .25); }
.svc h3 { font: 600 1.02rem/1.25 var(--f-display); letter-spacing: -.01em; }
.svc p { color: var(--mute); font-size: 15px; }
@media (max-width: 1180px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .svc-grid { grid-template-columns: 1fr 1fr; } .svc { padding: 18px 16px; } }
@media (max-width: 460px) { .svc-grid { grid-template-columns: 1fr; } }

/* pricing */
.packages { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.packages > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); align-items: stretch; }
.price { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: 24px; background: var(--glass); }
.price h3 { font: 600 1.45rem/1.15 var(--f-display); letter-spacing: -.02em; }
.price__tagline { color: var(--mute); }
.price__amount { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.price__amount b { font: 600 clamp(1.8rem, 2.6vw, 2.4rem)/1 var(--f-display); letter-spacing: -.03em; }
.price__from, .price__unit { color: var(--mute); font-size: 14px; }
.price__monthly { color: #d3d0c8; }
.price__monthly b { font: 600 1.15rem/1 var(--f-display); color: var(--text); }
.price__cta { width: 100%; }
.price__features { display: grid; gap: 10px; }
.price__features li { display: flex; gap: 10px; font-size: 15px; color: #d3d0c8; }
.price__features .icon { width: 18px; flex: none; color: var(--lime); margin-top: 3px; }
.price__foot { color: var(--mute); font-size: 13px; margin-top: auto; padding-top: 8px; }
.price--featured { border-color: rgba(212, 255, 58, .55); background: linear-gradient(180deg, rgba(212, 255, 58, .08), rgba(212, 255, 58, .015) 40%), var(--graphite); box-shadow: 0 0 0 1px rgba(212, 255, 58, .2), 0 30px 80px -40px rgba(212, 255, 58, .35); }
.price__badge { position: absolute; top: -13px; right: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--lime); color: var(--obsidian); font: 600 12px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
.price__badge .icon { width: 14px; height: 14px; }
.price-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); color: #d3d0c8; font-size: 15px; }
.price-note .icon { color: var(--lime); flex: none; }
@media (max-width: 1000px) { .price-grid { grid-template-columns: 1fr; max-width: 560px; } .price--featured { order: -1; } }

/* six steps */
.steps--six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
.process__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
@media (max-width: 860px) { .steps--six { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps--six { grid-template-columns: 1fr; } }

/* payments */
.payments { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.payments > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.pay-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pay { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); }
.pay__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lime-soft); color: var(--lime); }
.pay--offline .pay__icon { background: rgba(245, 241, 232, .07); color: var(--text); }
.pay h3 { font: 600 1.1rem/1.2 var(--f-display); }
.pay ul { display: grid; gap: 8px; }
.pay li { position: relative; padding-left: 16px; color: #d3d0c8; font-size: 15px; }
.pay li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.pay--offline li::before { background: var(--mute); }
.pay__safe-title { margin: 40px 0 14px; display: block; }
.safe-grid, .subs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.safe-grid li, .subs-grid li { display: flex; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); }
.safe-grid .icon, .subs-grid .icon { color: var(--lime); flex: none; margin-top: 2px; }
.safe-grid b, .subs-grid b { display: block; margin-bottom: 4px; }
.safe-grid span, .subs-grid span { color: var(--mute); font-size: 15px; }
.pay__disclaimer { margin-top: 18px; color: var(--dim); font-size: 14px; max-width: 80ch; }
@media (max-width: 1000px) { .pay-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pay-grid, .safe-grid, .subs-grid { grid-template-columns: 1fr; } }

/* dashboard */
.dash { padding: clamp(64px, 8vw, 120px) var(--gutter); background: var(--graphite); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dash > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.dash__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.dash__features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dash__features li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 9, 11, .4); font-size: 15px; }
.dash__features .icon { color: var(--lime); width: 18px; flex: none; }
.dash__features li > span:not(.chip) { flex: 1 1 140px; }
.chip { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font: 600 11px/1.2 var(--f-body); letter-spacing: .02em; white-space: nowrap; }
.chip--demo { background: var(--lime-soft); color: var(--lime); border: 1px solid rgba(212, 255, 58, .35); }
.chip--custom { background: rgba(245, 241, 232, .06); color: #d3d0c8; border: 1px solid var(--line-2); }
.dash__legend { display: grid; gap: 14px; justify-items: start; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: rgba(8, 9, 11, .4); }
.dash__legend p { color: #d3d0c8; font-size: 15px; }
.dash__legend .chip { margin-right: 6px; }
.dash__honest { color: var(--mute) !important; border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 960px) { .dash__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dash__features { grid-template-columns: 1fr; } }

/* interactive demo */
.demo { margin-top: 40px; border: 1px solid rgba(212, 255, 58, .3); border-radius: 22px; background: var(--obsidian-2); overflow: hidden; }
.demo__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(245, 241, 232, .03); }
.demo__bar h3 { font: 600 1.05rem/1.2 var(--f-display); }
.demo__flag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--lime); margin-right: auto; }
.demo__flag .icon { width: 15px; }
.demo__body { display: grid; gap: 18px; padding: 18px; }
.demo__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.stat span { display: block; color: var(--mute); font-size: 13px; }
.stat b { font: 600 1.35rem/1.2 var(--f-display); }
.demo__tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; width: max-content; max-width: 100%; }
.demo__tab { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--mute); font-weight: 600; cursor: pointer; }
.demo__tab[aria-selected="true"] { background: var(--text); color: var(--obsidian); }
.demo__panel { overflow-x: auto; }
.demo table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.demo th { text-align: left; color: var(--mute); font-weight: 500; font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.demo td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.demo input[type="number"], .demo input[type="text"], .demo select { min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(8, 9, 11, .7); color: var(--text); font: 400 14.5px/1.3 var(--f-body); width: 100%; }
.demo input[type="number"] { max-width: 120px; }
.demo .stock { display: inline-flex; align-items: center; gap: 6px; }
.demo .stock button, .demo .rm { min-width: 36px; min-height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: none; color: var(--text); cursor: pointer; font-size: 16px; }
.demo .rm { font-size: 13px; padding: 0 10px; }
.demo .low { color: var(--error); font-weight: 600; font-size: 12px; margin-left: 6px; }
.demo__add { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; align-items: end; margin-top: 12px; }
.demo__add label { display: grid; gap: 4px; font-size: 13px; color: var(--mute); }
.demo__log { color: var(--mute); font-size: 13px; min-height: 1.4em; }
@media (max-width: 700px) { .demo__stats { grid-template-columns: 1fr 1fr; } .demo__add { grid-template-columns: 1fr 1fr; } }

/* subscription + faq */
.subs, .faq, .cstrip { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.subs > *, .faq > *, .cstrip > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.subs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.subs__note { margin-top: 18px; color: var(--mute); font-size: 15px; }
@media (max-width: 900px) { .subs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .subs-grid { grid-template-columns: 1fr; } }
.faq { background: var(--graphite); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq__list { display: grid; gap: 10px; max-width: 900px; }
.faq__item { border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 9, 11, .45); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 16.5px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 16px; height: 16px; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: var(--lime); transition: transform var(--t-med) var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0); }
.faq__item[open] { border-color: rgba(212, 255, 58, .35); }
.faq__item p { padding: 0 20px 18px; color: #d3d0c8; max-width: 75ch; }

/* contact */
.cstrip__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(600px 300px at 0% 0%, rgba(212, 255, 58, .08), transparent 60%), var(--graphite); }
.cstrip .h2 { margin: 10px 0 12px; }
.cstrip__lede { color: #d3d0c8; margin-bottom: 22px; max-width: 46ch; }
@media (max-width: 860px) { .cstrip__grid { grid-template-columns: 1fr; } }
.contact-list { display: grid; gap: 8px; }
.contact-list li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 9, 11, .45); }
.contact-list .icon { color: var(--lime); flex: none; }
.contact-list div { display: grid; gap: 2px; min-width: 0; }
.contact-list .label { font-size: 10.5px; }
.contact-list a { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.placeholder { color: var(--dim); font-size: 15px; }
.placeholder em { font-style: normal; font-size: 13px; }
.contact__aside { grid-area: aside; display: grid; gap: 14px; align-content: start; }
.contact__aside .contact__next { grid-template-columns: 1fr; }
.contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "intro intro" "panel aside"; }
.contact__intro { position: static; max-width: 760px; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "panel" "aside"; } }
.field--checks { border: 0; padding: 0; margin: 0; }
.field--checks legend { padding: 0; margin-bottom: 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.check { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 1px solid rgba(245, 241, 232, .2); border-radius: 999px; cursor: pointer; font-size: 14.5px; transition: border-color var(--t-fast), background-color var(--t-fast); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.check__box { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px; border: 2px solid rgba(245, 241, 232, .5); display: grid; place-items: center; }
.check__box .icon { width: 12px; height: 12px; opacity: 0; color: var(--obsidian); stroke-width: 3; }
.check input:checked + .check__box { background: var(--lime); border-color: var(--lime); }
.check input:checked + .check__box .icon { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--lime); outline-offset: 3px; }
.check:has(input:checked) { border-color: var(--lime); background: var(--lime-soft); }
.check:hover { border-color: rgba(245, 241, 232, .45); }

/* /ecommerce head */
.page-head--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: end; }
.page-head--split .actions { margin-top: 22px; }
.eco-price { display: grid; gap: 6px; padding: 24px; border: 1px solid rgba(212, 255, 58, .5); border-radius: 22px; background: linear-gradient(180deg, rgba(212, 255, 58, .08), transparent), var(--graphite); }
.eco-price__setup b { font: 600 2rem/1.1 var(--f-display); }
.eco-price__monthly { color: #d3d0c8; }
@media (max-width: 860px) { .page-head--split { grid-template-columns: 1fr; } }

/* portfolio card features */
.card__feats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.card__feats li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: #d3d0c8; }

/* floating WhatsApp / contact button */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--lime); color: var(--obsidian); font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 12px 34px -10px rgba(212, 255, 58, .55), 0 0 0 1px rgba(0, 0, 0, .2); transition: transform var(--t-fast) var(--ease), opacity var(--t-med); }
.wa-float:hover { transform: translateY(-2px); }
.wa-float .icon { width: 24px; height: 24px; }
.wa-float--pending { background: var(--text); box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .8); }
html.opening-active .wa-float, .menu-open .wa-float { opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
  .wa-float { right: 14px; bottom: 14px; width: 56px; height: 56px; padding: 0; justify-content: center; }
  .wa-float > span:not(.sr-only) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.site-footer { padding-bottom: 96px; }
.footer__brand { display: grid; gap: 12px; }
.footer__brand p { color: var(--mute); font-size: 15px; max-width: 34ch; }
@media (max-width: 1200px) { .header-actions > .watch-link { display: none; } }
@media (max-width: 1120px) and (min-width: 961px) { .site-nav a { padding: 0 10px; } }

.payments > .pay__disclaimer, .screens > .screens__caption { max-width: var(--maxw); }
.faq > .faq__list { max-width: var(--maxw); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 860px) { .faq > .faq__list { grid-template-columns: 1fr; } }

.contact__aside .contact__next { grid-area: auto; }
.contact .form__row { align-items: end; }
body[data-page="contact"] .wa-float--pending { display: none; }

/* autoplay blocked by the browser: invite one tap to start the narration */
.film.needs-tap .film__status { top: auto; bottom: 150px; width: auto; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--lime); color: var(--obsidian); font: 600 15px/1 var(--f-body); letter-spacing: 0; text-transform: none; box-shadow: 0 0 0 0 rgba(212, 255, 58, .5); animation: tap-pulse 1.8s var(--ease) infinite; cursor: pointer; }
.film.needs-tap .film__status::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / contain no-repeat; }
.film.needs-tap { cursor: pointer; }
@keyframes tap-pulse { 0% { box-shadow: 0 0 0 0 rgba(212, 255, 58, .55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(212, 255, 58, 0); } }
@media (max-width: 700px) { .film.needs-tap .film__status { bottom: 190px; } }

/* =========================================================================
   Future Commerce Studio upgrade
   ========================================================================= */

/* ---------- hero: ambient light, aurora, cinematic title, floating phone ---------- */
.hero { position: relative; isolation: isolate; }
.hero__light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(520px 380px at var(--mx, 72%) var(--my, 40%), rgba(212, 255, 58, .11), transparent 70%),
    radial-gradient(900px 600px at 15% 0%, rgba(245, 241, 232, .05), transparent 60%);
  transition: background .2s linear;
}
.hero__light::before {
  content: ""; position: absolute; inset: -20%; opacity: .5;
  background: conic-gradient(from 210deg at 70% 45%, transparent 0deg, rgba(212, 255, 58, .07) 60deg, transparent 120deg, rgba(120, 160, 255, .05) 200deg, transparent 280deg);
  filter: blur(40px); animation: aurora 26s linear infinite;
}
.hero.is-offscreen .hero__light::before { animation-play-state: paused; }
@keyframes aurora { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .hero__title span { display: block; opacity: 0; transform: translateY(.45em); clip-path: inset(0 0 100% 0); animation: title-in .9s var(--ease) forwards; }
  .hero__title span:nth-child(2) { animation-delay: .08s; }
  .hero__title span:nth-child(3) { animation-delay: .16s; }
  .hero__title span:nth-child(4) { animation-delay: .24s; }
  .hero__lede, .hero__actions, .hero__more { opacity: 0; animation: fade-up .8s var(--ease) .35s forwards; }
  .hero__actions { animation-delay: .45s; }
  .hero__more { animation-delay: .55s; }
}
@keyframes title-in { to { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; }
.watch--quiet { margin-top: 0; border-color: transparent; background: none; padding-left: 0; color: var(--mute); }
.watch--quiet:hover { color: var(--text); background: none; }
.watch--quiet .watch__icon { width: 30px; height: 30px; background: rgba(212, 255, 58, .14); color: var(--lime); }
.stage__visual { position: relative; }
.stage__phone {
  position: absolute; z-index: 6; right: -3%; bottom: 7%; width: 19%; padding: 4px; border-radius: 22px;
  background: linear-gradient(160deg, #2b2e35, #0d0e11 60%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06), 0 0 40px -12px rgba(212, 255, 58, .35);
  transform: perspective(1200px) rotateY(calc(var(--ry, 0deg) * -1.4)) translateY(var(--float, 0));
  transition: transform .6s var(--ease), opacity .3s;
}
.stage__phone img { width: 100%; aspect-ratio: 520 / 1125; object-fit: cover; object-position: top; border-radius: 18px; background: #15171b; }
.stage__phone.is-swapping { opacity: .4; }
@media (prefers-reduced-motion: no-preference) { .stage__phone { animation: bob 7s ease-in-out infinite; } .hero.is-offscreen .stage__phone { animation-play-state: paused; } }
@keyframes bob { 50% { --float: -8px; translate: 0 -8px; } }
@media (max-width: 900px) { .stage__phone { width: 24%; right: 2%; bottom: 8%; } }

/* ---------- gentle scroll reveals (progressive enhancement, content never hidden without support) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc, .outcome, .price, .card, .pay, .step, .gets li, .fees article {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes rise { from { opacity: .35; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* glass + pointer sheen on cards (desktop) */
.svc, .outcome, .price, .card, .pay { position: relative; }
@media (hover: hover) {
  .svc::after, .outcome::after, .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(300px 160px at var(--px, 50%) var(--py, 0%), rgba(212, 255, 58, .08), transparent 70%); transition: opacity .3s; }
  .svc:hover::after, .outcome:hover::after, .card:hover::after { opacity: 1; }
}

/* ---------- outcomes ---------- */
.outcomes { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.outcomes > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.outcome-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.outcome { display: grid; gap: 10px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); }
.outcome h3 { font: 600 1.1rem/1.25 var(--f-display); letter-spacing: -.01em; }
.outcome p { color: var(--mute); font-size: 15.5px; }
@media (max-width: 900px) { .outcome-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .outcome-grid { grid-template-columns: 1fr; } }

/* ---------- configurator teaser ---------- */
.cfg-teaser { padding: 0 var(--gutter) clamp(64px, 8vw, 120px); }
.cfg-teaser__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; padding: clamp(24px, 4vw, 52px); border-radius: 28px; border: 1px solid rgba(212, 255, 58, .35); background: radial-gradient(700px 320px at 100% 0%, rgba(212, 255, 58, .12), transparent 60%), var(--graphite); }
.cfg-teaser .h2 { margin: 10px 0 14px; }
.cfg-teaser__lede { color: #d3d0c8; margin-bottom: 22px; max-width: 52ch; }
.cfg-teaser__steps { display: grid; gap: 8px; }
.cfg-teaser__steps li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 9, 11, .45); font-weight: 500; }
.cfg-teaser__steps .step__num { margin: 0; }
@media (max-width: 860px) { .cfg-teaser__inner { grid-template-columns: 1fr; } }

/* ---------- configurator page ---------- */
.cfg { max-width: calc(1180px + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--header-h) + clamp(24px, 3vw, 44px)) var(--gutter) clamp(56px, 7vw, 96px); }
.cfg__head { margin-bottom: 24px; }
.cfg__progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 28px; counter-reset: s; }
.cfg__progress button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); color: var(--mute); font-weight: 600; font-size: 14px; cursor: default; text-align: left; }
.cfg__progress button span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 12px/1 var(--f-mono); }
.cfg__progress li.is-done button { color: var(--text); cursor: pointer; }
.cfg__progress li.is-done button span { background: var(--lime-soft); border-color: rgba(212, 255, 58, .5); color: var(--lime); }
.cfg__progress li.is-current button { color: var(--text); border-color: rgba(212, 255, 58, .6); background: rgba(212, 255, 58, .06); }
.cfg__progress li.is-current button span { background: var(--lime); color: var(--obsidian); border-color: var(--lime); }
@media (max-width: 700px) { .cfg__progress button { justify-content: center; padding: 6px; font-size: 0; } .cfg__progress button span { font-size: 12px; } }
.cfg__q { font: 600 clamp(1.4rem, 2.4vw, 2rem)/1.15 var(--f-display); letter-spacing: -.02em; margin-bottom: 18px; }
.cfg__q:focus { outline: none; }
.cfg__hint { color: var(--mute); font-size: 15px; margin: -6px 0 16px; }
.cfg__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cfg__cards--styles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cfg__cards--features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .cfg__cards, .cfg__cards--features { grid-template-columns: 1fr 1fr; } .cfg__cards--styles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cfg__cards, .cfg__cards--features { grid-template-columns: 1fr; } .cfg__cards--styles { grid-template-columns: 1fr 1fr; } }
.cfg-card { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease); }
.cfg-card:hover { border-color: var(--line-2); }
.cfg-card:active { transform: scale(.99); }
.cfg-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cfg-card b { display: block; font-weight: 600; }
.cfg-card small { color: var(--mute); font-size: 13.5px; }
.cfg-card__mark { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid rgba(245, 241, 232, .5); display: grid; place-items: center; }
.cfg-card__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--obsidian); transform: scale(0); transition: transform var(--t-fast); }
.cfg-card:has(input:checked) { border-color: var(--lime); background: var(--lime-soft); }
.cfg-card input:checked ~ .cfg-card__mark, .cfg-card:has(input:checked) .cfg-card__mark { background: var(--lime); border-color: var(--lime); }
.cfg-card:has(input:checked) .cfg-card__mark::after { transform: scale(1); }
.cfg-card:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 3px; }
.cfg-card input:checked + .check__box { background: var(--lime); border-color: var(--lime); }
.cfg-card input:checked + .check__box .icon { opacity: 1; }
.cfg-card .check__box { margin-top: 2px; }
.cfg-card--style { flex-direction: column; padding: 10px; gap: 10px; }
.cfg-card__label { display: flex; align-items: center; gap: 10px; padding: 0 4px 4px; }
.style-prev { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: var(--sp-bg); color: var(--sp-fg); aspect-ratio: 4 / 3; align-content: start; overflow: hidden; border: 1px solid rgba(255, 255, 255, .06); }
.style-prev__nav { display: flex; gap: 4px; justify-content: flex-end; }
.style-prev__nav i { width: 14px; height: 3px; border-radius: 2px; background: currentColor; opacity: .5; }
.style-prev__h { font: 600 15px/1.05 var(--sp-font); margin-top: 6px; }
.style-prev__p { height: 4px; border-radius: 2px; background: currentColor; opacity: .3; width: 90%; }
.style-prev__p--short { width: 60%; }
.style-prev__btn { justify-self: start; margin-top: 4px; padding: 4px 8px; border-radius: var(--sp-r); background: var(--sp-ac); color: var(--sp-bg); font: 600 9px/1 var(--f-body); }
.cfg__nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.cfg__nav [data-next] { margin-left: auto; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* recommendation */
.rec__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.rec__choice { position: relative; display: grid; gap: 4px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; }
.rec__choice input { position: absolute; opacity: 0; }
.rec__choice.is-rec { border-color: rgba(212, 255, 58, .45); }
.rec__choice:has(input:checked) { border-color: var(--lime); background: var(--lime-soft); box-shadow: 0 0 40px -16px rgba(212, 255, 58, .5); }
.rec__choice:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 3px; }
.rec__name { font: 600 1.05rem/1.2 var(--f-display); }
.rec__name em { font: 600 11px/1 var(--f-body); font-style: normal; text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; margin-left: 6px; border-radius: 999px; background: var(--lime); color: var(--obsidian); vertical-align: middle; }
.rec__price { color: #d3d0c8; font-size: 14.5px; }
.rec__detail { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: rgba(8, 9, 11, .45); display: grid; gap: 16px; }
.rec__why { font-size: 16.5px; }
.rec__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rec__cols h4 { font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; }
.rec__list { display: grid; gap: 8px; }
.rec__list li { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); font-weight: 500; }
.rec__list small { display: block; color: var(--mute); font-weight: 400; font-size: 13px; }
.rec__list--custom li { border-style: dashed; }
.rec__empty, .rec__note { color: var(--mute); font-size: 14.5px; }
@media (max-width: 760px) { .rec__choices, .rec__cols { grid-template-columns: 1fr; } }
/* brief */
.cfg__brief-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .cfg__brief-grid { grid-template-columns: 1fr; } }
.brief-sheet { display: grid; gap: 0; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.brief-sheet div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.brief-sheet div:last-child { border-bottom: 0; }
.brief-sheet dt { color: var(--mute); font-size: 14px; }
.brief-sheet dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 560px) { .brief-sheet div { grid-template-columns: 1fr; gap: 4px; } }
.tagchip { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; }
.swatch { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-ac) 50%); border: 1px solid var(--line-2); }
.cfg__next-steps { display: grid; gap: 12px; justify-items: start; }
.text-btn { background: none; border: 0; padding: 8px 0; min-height: 44px; color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 4px; cursor: pointer; }

/* ---------- portfolio filters / tech ---------- */
.filters { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-top: 18px; border: 1px solid var(--line); border-radius: 999px; }
.filters .seg__btn[aria-pressed="true"] { background: var(--lime); color: var(--obsidian); }
.exhibit__tech { color: var(--dim); font-size: 14px; margin: 8px 0 18px; }
.exhibit .card__feats { margin: -8px 0 6px; }

/* ---------- pricing comparison ---------- */
.compare { padding: clamp(56px, 7vw, 100px) var(--gutter); background: var(--graphite); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compare > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.compare__tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 500; }
.toggle input { width: 20px; height: 20px; accent-color: var(--lime); }
.compare__table[data-pick="0"] [data-col="0"], .compare__table[data-pick="1"] [data-col="1"], .compare__table[data-pick="2"] [data-col="2"] { background: rgba(212, 255, 58, .05); }
.compare__wrap { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(8, 9, 11, .4); }
.compare__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare__table th, .compare__table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.compare__table tbody th { text-align: left; font-weight: 500; color: #d3d0c8; }
.compare__table thead th { font: 600 1rem/1.2 var(--f-display); vertical-align: bottom; }
.compare__table thead th:first-child { text-align: left; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.compare__table thead small { display: block; font: 500 12.5px/1.4 var(--f-body); color: var(--mute); margin-top: 4px; }
.compare__table .is-featured { color: var(--lime); }
.compare__table td .icon { color: var(--lime); width: 20px; height: 20px; }
.compare__table .no { color: var(--dim); }
.compare__table tr:last-child > * { border-bottom: 0; }
.compare__table.diff-only tr[data-same] { display: none; }
@media (max-width: 760px) {
  .compare__table [data-col] { display: none; }
  .compare__table[data-pick="0"] [data-col="0"], .compare__table[data-pick="1"] [data-col="1"], .compare__table[data-pick="2"] [data-col="2"] { display: table-cell; }
}
.fees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.fees article { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); }
.fees h3 { font: 600 1.05rem/1.2 var(--f-display); }
.fees p:last-child { color: var(--mute); font-size: 15px; }
@media (max-width: 960px) { .fees { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fees { grid-template-columns: 1fr; } }

/* ---------- storefront demo ---------- */
.store-demo { padding: clamp(56px, 7vw, 100px) var(--gutter); }
.store-demo > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.store-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.store-shell { margin: 0 auto; border-radius: 22px; border: 1px solid rgba(212, 255, 58, .3); background: #0e1013; overflow: hidden; transition: max-width .6s var(--ease-io), border-radius .6s; max-width: 100%; box-shadow: 0 40px 90px -50px #000; }
.store-shell.is-phone { max-width: 390px; border-radius: 34px; border: 8px solid #1d2026; }
.store-shell__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #13161a; }
.store-shell__brand { font: 600 15px/1 var(--f-display); letter-spacing: .02em; }
.store-cart { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--text); cursor: pointer; font-weight: 600; }
.store-cart b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lime); color: var(--obsidian); font-size: 12px; }
.store-cart .icon { width: 18px; }
.store-shell__body { padding: 18px; min-height: 420px; }
.shop-hero { margin-bottom: 14px; }
.shop-hero__title { font: 600 1.4rem/1.2 var(--f-display); margin-top: 4px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.store-shell.is-phone .shop-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .shop-grid { grid-template-columns: 1fr 1fr; gap: 8px; } }
.pcard { display: grid; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(245, 241, 232, .02); }
.pcard__open { padding: 0; border: 0; background: none; cursor: pointer; }
.pimg { display: block; width: 100%; height: auto; }
.pimg--sm { width: 56px; flex: none; border-radius: 10px; }
.pimg--xs { width: 32px; flex: none; border-radius: 8px; }
.pimg--lg { width: 100%; max-width: 280px; border-radius: 16px; }
.pcard__body { display: grid; gap: 4px; padding: 10px 12px 12px; }
.pcard__name { font-weight: 600; }
.pcard__price { color: #d3d0c8; }
.pcard__stock { color: #ffb86b; font-size: 13px; }
.pcard__stock.is-out { color: var(--error); }
.pcard .btn { margin-top: 6px; }
.store-shell.is-phone .pcard .btn { font-size: 12px; padding: 0 .6em; min-height: 40px; }
.shop-panel { display: grid; gap: 14px; max-width: 560px; }
.shop-panel__title { font: 600 1.3rem/1.2 var(--f-display); display: flex; align-items: center; gap: 10px; }
.cart-lines { display: grid; gap: 10px; }
.cart-lines li { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; }
.cart-lines li > div { flex: 1; display: grid; }
.cart-lines small { color: var(--mute); font-size: 13px; }
.qty { display: inline-flex; align-items: center; gap: 8px; }
.qty button, .demo .stock button { min-width: 36px; min-height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: none; color: var(--text); cursor: pointer; font-size: 16px; }
.cart-total { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); font-size: 17px; }
.shop-empty { color: var(--mute); }
.checkout label { display: grid; gap: 6px; font-weight: 500; }
.checkout input[name="name"] { min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(8, 9, 11, .7); color: var(--text); font: 400 16px var(--f-body); }
.checkout fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px 12px; display: grid; gap: 6px; }
.checkout legend { padding: 0 6px; color: var(--mute); font-size: 14px; }
.checkout .opt { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 400; }
.checkout .opt input { width: 18px; height: 18px; accent-color: var(--lime); }
.checkout__note { color: var(--mute); font-size: 14px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-2); }
.checkout__err { color: var(--error); font-weight: 500; }
.confirm { padding: 18px; border-radius: 18px; border: 1px solid rgba(212, 255, 58, .45); background: var(--lime-soft); }
.confirm:focus { outline: none; }
.demo-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: rgba(245, 241, 232, .08); border: 1px solid var(--line-2); font: 600 11px/1.4 var(--f-body); color: #d3d0c8; letter-spacing: .02em; }
.pdialog { width: min(640px, 92vw); padding: 0; border: 1px solid var(--line-2); border-radius: 22px; background: var(--graphite); color: var(--text); }
.pdialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }
.pdlg { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; padding: 20px; }
@media (max-width: 560px) { .pdlg { grid-template-columns: 1fr; } .pimg--lg { max-width: 160px; } }
.pdlg__body { display: grid; gap: 10px; align-content: start; }
.pdlg h3 { font: 600 1.4rem/1.2 var(--f-display); }
.pdlg__price { font-size: 18px; }
.pdlg__opts { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pdlg__opts legend { margin-bottom: 6px; color: var(--mute); font-size: 14px; }
.opt-pill { position: relative; }
.opt-pill input { position: absolute; opacity: 0; }
.opt-pill span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); cursor: pointer; }
.opt-pill input:checked + span { border-color: var(--lime); background: var(--lime-soft); }
.opt-pill input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.pdlg__qty { display: flex; align-items: center; gap: 10px; }
.pdlg__qty input { width: 80px; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(8, 9, 11, .7); color: var(--text); }
.pdlg__stock { color: var(--mute); font-size: 14px; }

/* ---------- dashboard demo ---------- */
.dstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat--warn { border-color: rgba(255, 184, 107, .5); }
.stat--warn b { color: #ffb86b; }
.dgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.dgrid--2 { grid-template-columns: 1fr 1fr; }
.dgrid .chart { grid-row: span 2; }
@media (max-width: 860px) { .dstats { grid-template-columns: 1fr 1fr; } .dgrid, .dgrid--2 { grid-template-columns: 1fr; } .dgrid .chart { grid-row: auto; } }
.dcard { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(245, 241, 232, .02); display: grid; gap: 10px; align-content: start; }
.dcard--warn { border-color: rgba(255, 184, 107, .4); }
.dcard__title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mini-orders, .top-list, .activity { display: grid; gap: 8px; }
.mini-orders li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; font-size: 14px; }
.top-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.top-list li span { flex: 1; }
.activity li { font-size: 14px; color: #d3d0c8; padding-left: 14px; position: relative; }
.activity li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.status { padding: 3px 8px; border-radius: 999px; font: 600 11.5px/1.3 var(--f-body); border: 1px solid var(--line-2); white-space: nowrap; }
.status--paid, .status--delivered { color: var(--lime); border-color: rgba(212, 255, 58, .4); }
.status--pending-payment { color: #ffb86b; border-color: rgba(255, 184, 107, .45); }
.status--out-for-delivery, .status--processing, .status--ready-for-pickup { color: #8ec5ff; border-color: rgba(142, 197, 255, .45); }
.status--cancelled { color: var(--error); border-color: rgba(255, 155, 138, .45); }
.chart { margin: 0; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(245, 241, 232, .02); display: grid; gap: 10px; align-content: start; }
.chart__title { font-weight: 600; }
.chart__title span { color: var(--mute); font-weight: 400; font-size: 13.5px; }
.chart__wrap { position: relative; }
.chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart__grid { stroke: rgba(245, 241, 232, .08); stroke-width: 1; }
.chart__y, .bar__x { fill: var(--mute); font: 500 11px var(--f-body); }
.bar__mark { fill: #7fa51a; transition: fill .15s; }
.bar.is-hot .bar__mark, .bar:focus .bar__mark { fill: var(--lime); }
.bar:focus { outline: none; }
.bar:focus-visible .bar__mark { stroke: var(--text); stroke-width: 2; }
.chart__tip { position: absolute; transform: translate(-50%, calc(-100% - 8px)); padding: 6px 10px; border-radius: 8px; background: var(--text); color: var(--obsidian); font: 600 12.5px/1.2 var(--f-body); white-space: nowrap; pointer-events: none; }
.chart__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 0 !important; }
.chart__table th, .chart__table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.dtable { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.dtable table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 720px; }
.dtable th { text-align: left; color: var(--mute); font-weight: 500; font-size: 13px; padding: 10px; border-bottom: 1px solid var(--line); }
.dtable td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable input, .dtable select { min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(8, 9, 11, .7); color: var(--text); font: 400 14.5px/1.3 var(--f-body); width: 100%; }
.dtable input[type="number"] { max-width: 120px; }
.prow { display: inline-flex; align-items: center; gap: 10px; }
.rm[aria-pressed="true"] { background: var(--text); color: var(--obsidian); }
.dhint { color: var(--mute); font-size: 14px; margin-top: 10px; }
.track { margin-top: 12px; }
.track__steps { display: grid; gap: 0; counter-reset: t; }
.track__steps li { position: relative; padding: 0 0 14px 28px; color: var(--mute); font-size: 14.5px; }
.track__steps li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--obsidian); }
.track__steps li::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.track__steps li:last-child::after { display: none; }
.track__steps li.is-done { color: var(--text); }
.track__steps li.is-done::before { background: var(--lime); border-color: var(--lime); }
.track__steps li.is-current { font-weight: 600; }
.track__meta { color: var(--mute); font-size: 14px; }
.demo__add { grid-template-columns: 2fr 1fr 1fr 1fr auto; }
.demo__add select { min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(8, 9, 11, .7); color: var(--text); }
@media (max-width: 700px) { .demo__add { grid-template-columns: 1fr 1fr; } }

/* ---------- AI assistant ---------- */
.ai-launch { position: fixed; right: 18px; bottom: 18px; z-index: 46; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 14px; border-radius: 999px; border: 1px solid rgba(212, 255, 58, .5); background: rgba(12, 14, 17, .88); color: var(--text); font-weight: 600; font-size: 15px; cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .8), 0 0 30px -10px rgba(212, 255, 58, .45); transition: transform var(--t-fast) var(--ease), border-color var(--t-fast); }
.ai-launch:hover { transform: translateY(-2px); border-color: var(--lime); }
.ai-launch .icon { width: 22px; height: 22px; color: var(--lime); }
.ai-launch[aria-expanded="true"] { opacity: 0; pointer-events: none; }
.wa-float ~ .ai-launch { bottom: 80px; }
@media (max-width: 600px) { .ai-launch { width: 56px; height: 56px; padding: 0; justify-content: center; right: 14px; bottom: 14px; } .ai-launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wa-float ~ .ai-launch { bottom: 80px; } }
html.opening-active .ai-launch, .menu-open .ai-launch, body:has(dialog[open]) .ai-launch { opacity: 0; pointer-events: none; }
.ai-panel { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(400px, calc(100vw - 28px)); height: min(600px, calc(100dvh - 110px)); display: flex; flex-direction: column; border-radius: 22px; border: 1px solid var(--line-2); background: rgba(14, 16, 19, .97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 100px -30px #000, 0 0 0 1px rgba(212, 255, 58, .12); overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .ai-panel:not([hidden]) { animation: fade-up .35s var(--ease); } }
@media (max-width: 600px) { .ai-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: calc(100dvh - 90px); } }
.ai-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.ai-panel__title { font: 600 1rem/1.2 var(--f-display); }
.ai-panel__mode { font-size: 12.5px; color: var(--lime); }
.ai-panel[data-mode="guided"] .ai-panel__mode { color: var(--mute); }
.ai-panel__close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; }
.ai-panel__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.ai-msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; display: grid; gap: 8px; }
.ai-msg--bot { align-self: flex-start; background: rgba(245, 241, 232, .06); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.ai-msg--user { align-self: flex-end; background: var(--lime); color: var(--obsidian); border-bottom-right-radius: 6px; font-weight: 500; }
.ai-msg a { color: var(--lime); font-weight: 600; }
.ai-msg.is-typing { color: var(--mute); }
.ai-panel__chips { display: flex; gap: 6px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
.ai-chip { flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--text); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.ai-chip:hover { border-color: var(--lime); }
.ai-panel__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ai-panel__form input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(8, 9, 11, .8); color: var(--text); font: 400 15px var(--f-body); }
.ai-panel__form input:focus-visible { outline: none; border-color: var(--lime); }
.ai-panel__note { padding: 0 14px 12px; color: var(--dim); font-size: 12px; }

/* ---------- portal preview ---------- */
.portal { padding: 0 var(--gutter) clamp(56px, 7vw, 100px); }
.portal > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.portal__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .portal__grid { grid-template-columns: 1fr; } }
.portal__login { display: grid; gap: 14px; padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); }
.h3 { font: 600 1.25rem/1.2 var(--f-display); }
.portal__login input[disabled] { opacity: .5; }
.portal__app { padding: 20px; border-radius: 22px; border: 1px solid rgba(212, 255, 58, .25); background: var(--graphite); display: grid; gap: 16px; }
.portal__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: end; }
.portal__name { font: 600 1.15rem/1.2 var(--f-display); margin-top: 4px; }
.portal__progress { display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: center; min-width: 220px; }
.portal__progress span { color: var(--mute); font-size: 14px; }
.portal__progress .bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgba(245, 241, 232, .08); overflow: hidden; }
.portal__progress .bar i { display: block; height: 100%; background: var(--lime); border-radius: 99px; }
.portal__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .portal__cards { grid-template-columns: 1fr; } }
.portal__update { color: #d3d0c8; font-size: 15px; }
.portal__update small, .dcard small { display: block; color: var(--dim); font-size: 12.5px; margin-top: 4px; }
.portal__foundation { margin-top: 18px; color: var(--mute); font-size: 14.5px; }
.cfg__brief-grid .contact__panel, .cfg__brief-grid .contact__next { grid-area: auto; }
.cfg__brief-grid .contact__next { grid-template-columns: 1fr; }
.compare__table .ask, .compare__note .ask { display: inline-flex; padding: 3px 8px; border-radius: 999px; border: 1px dashed var(--line-2); color: #d3d0c8; font-size: 12px; font-weight: 600; white-space: nowrap; }
.compare__note { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 12px; color: var(--mute); font-size: 14px; }
.rec__cols { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 860px) { .dstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dgrid, .dgrid--2 { grid-template-columns: minmax(0, 1fr); } }
.demo__body, .demo__panel, .dgrid > *, .dstats > * { min-width: 0; }
.demo__tabs { overflow-x: auto; scrollbar-width: none; }
.stat b { overflow-wrap: anywhere; }
.demo__body { grid-template-columns: minmax(0, 1fr); }
.demo__tabs { max-width: 100%; }
.stat b { overflow-wrap: normal; white-space: nowrap; font-size: clamp(1.02rem, 4.4vw, 1.35rem); }
@media (max-width: 560px) { .chart__y, .bar__x { font-size: 19px; } }
@media (max-width: 380px) { .stat { padding: 12px; } .stat b { font-size: .98rem; } }

/* Keep floating controls clear of the “Powered by Netlify” badge (bottom-right, 64px tall on *.netlify.app) */
.ai-launch, .wa-float { bottom: 78px; }
.wa-float ~ .ai-launch { bottom: 142px; }
.ai-panel { bottom: 78px; height: min(600px, calc(100dvh - 170px)); }
@media (max-width: 600px) { .ai-launch, .wa-float { bottom: 76px; } .wa-float ~ .ai-launch { bottom: 140px; } .ai-panel { bottom: 72px; height: calc(100dvh - 150px); } }
.site-footer { padding-bottom: 150px; }