/* Veritime landing — layout, decorative theming, light theme, responsive.
   Built on the Nocturne design system (styles.css). Разработано NCT.UZ. */

/* ─────────── decorative theme tokens (dark default) ─────────── */
:root {
  --vt-radial: radial-gradient(1200px 700px at 78% -10%, color-mix(in srgb, var(--color-accent-800) 70%, transparent), transparent 70%);
  --vt-surface-raised: #2a2d3c;
  --vt-card-grad: linear-gradient(165deg, #2a2d3c, var(--color-surface) 55%);
  --vt-scene-grad: linear-gradient(160deg, #2a2d3c, var(--color-surface) 40%, #1c1e2b);
  --vt-step-glow: linear-gradient(165deg, #2f2c48, var(--color-surface) 60%);
  --vt-demo-grad: linear-gradient(165deg, #2f2c48, var(--color-surface) 50%);
  --vt-plan-pop-grad: linear-gradient(165deg, #322e52, var(--color-surface) 60%);
  --vt-header-bg: color-mix(in srgb, var(--color-bg) 72%, transparent);
  --plate-a: #1c1e2b;
  --plate-b: #15161f;
  --plate-top: #2a2d3c;
  --plate-stroke: #3f424d;
  --vt-tray-bg: #1c1e2b;
  --vt-shot-ground: #e4e7f5;
  --accent-green: oklch(0.82 0.12 168);
  --accent-red: oklch(0.68 0.14 30);
}

/* ─────────── LIGHT THEME ─────────── */
:root[data-theme="light"] {
  --color-bg: #f3f5fe;
  --color-surface: #ffffff;
  --color-text: #292b31;
  --color-accent: #796cbf;
  --color-divider: color-mix(in srgb, #292b31 14%, transparent);

  --color-neutral-100: #292b31;
  --color-neutral-200: #3f424d;
  --color-neutral-300: #595d6c;
  --color-neutral-400: #75798c;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #b2b6ca;
  --color-neutral-700: #cfd3e5;
  --color-neutral-800: #e4e7f5;
  --color-neutral-900: #f3f5fe;

  --color-accent-100: #2b2741;
  --color-accent-200: #423a6a;
  --color-accent-300: #5d5294;
  --color-accent-400: #796cbf;
  --color-accent-500: #968ae0;
  --color-accent-600: #b5abfc;
  --color-accent-700: #d2cefd;
  --color-accent-800: #e7e5fe;
  --color-accent-900: #f5f4ff;

  --shadow-sm: 0 0 0 1px color-mix(in srgb, #292b31 10%, transparent);
  --shadow-md: 0 1px 2px rgba(41,43,49,0.08), 0 8px 24px rgba(41,43,49,0.10);
  --shadow-lg: 0 2px 6px rgba(41,43,49,0.10), 0 24px 56px rgba(41,43,49,0.16);

  --vt-radial: radial-gradient(1200px 700px at 78% -10%, color-mix(in srgb, #b5abfc 42%, transparent), transparent 70%);
  --vt-surface-raised: #eef0fb;
  --vt-card-grad: linear-gradient(165deg, #ffffff, #f3f5fe 70%);
  --vt-scene-grad: linear-gradient(160deg, #ffffff, #f3f5fe 60%);
  --vt-step-glow: linear-gradient(165deg, #efedff, #ffffff 60%);
  --vt-demo-grad: linear-gradient(165deg, #efedff, #ffffff 55%);
  --vt-plan-pop-grad: linear-gradient(165deg, #eceafc, #ffffff 60%);
  --vt-header-bg: color-mix(in srgb, #f3f5fe 80%, transparent);
  --plate-a: #e4e7f5;
  --plate-b: #d4d8ec;
  --plate-top: #eef0fb;
  --plate-stroke: #cfd3e5;
  --vt-tray-bg: #e4e7f5;
}
:root[data-theme="light"] body { background: var(--color-bg); }
:root[data-theme="light"] a { color: var(--color-accent); }

/* ─────────── base / layout ─────────── */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
.page { min-height: 100vh; background: var(--vt-radial), var(--color-bg); }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-300); }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); }
.section { padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(56px, 9vw, 112px); }
.section-tight { padding-top: 0; }
h1 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.025em; margin: 0 0 8px; text-wrap: balance; }
.section > h2, .band-inner > h2 { max-width: 720px; }
.overline { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 10px; }
.section-sub { color: var(--color-neutral-300); max-width: 560px; margin: 0 0 40px; }
img { display: block; max-width: 100%; }

/* ─────────── header ─────────── */
.site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: var(--vt-header-bg); transition: box-shadow .25s; }
.site-header.scrolled { box-shadow: 0 1px 0 var(--color-divider); }
.nav-bar { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 12px clamp(16px, 4vw, 40px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; }
.brand-mark { display: inline-flex; }
.brand-name { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 22px; font-size: 14px; margin-right: auto; margin-left: 10px; }
.nav-links a { color: var(--color-neutral-300); text-decoration: none; }
.nav-links a:hover { color: var(--color-accent-300); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.lang-seg { font-size: 12px; }
.lang-seg .seg-opt { padding: 5px 9px; }
.theme-toggle { flex: none; }
.nav-try.glow { box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.nav-burger { display: none; }

.mobile-menu { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 18px; }
.mm-link { color: var(--color-text); text-decoration: none; padding: 10px 0; }
.mm-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mm-actions .btn { flex: 1; min-height: 44px; }

/* ─────────── hero ─────────── */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; padding-top: clamp(36px, 6vw, 80px); padding-bottom: clamp(56px, 8vw, 96px); }
.hero-copy { display: flex; flex-direction: column; gap: 22px; max-width: 580px; }
.hero-kicker { align-self: flex-start; gap: 8px; }
.dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); }
.hero-sub { font-size: clamp(16px, 1.4vw, 18px); color: var(--color-neutral-300); margin: 0; text-wrap: pretty; max-width: 520px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-cta .btn { padding: 13px 20px; font-size: 15px; }
.hero-cta-main.glow { box-shadow: 0 0 0 1px var(--color-accent), 0 0 36px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.hero-micro { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--color-neutral-400); }
.hero-micro span { display: flex; gap: 6px; align-items: center; }

/* hero scene */
.hero-scene-wrap { perspective: 1400px; position: relative; min-width: 0; }
.hero-scene { position: relative; transform-style: preserve-3d; transform: rotateX(9deg) rotateY(-13deg); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.scene-card { position: relative; border-radius: var(--radius-lg); background: var(--vt-scene-grad); box-shadow: var(--shadow-lg), 0 40px 80px -20px color-mix(in srgb, var(--color-accent-800) 80%, transparent); padding: 14px; }
.scene-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-neutral-400); margin-bottom: 12px; flex-wrap: wrap; }
.scene-dots { display: flex; gap: 5px; }
.scene-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-neutral-700); }
.scene-title { margin-left: 6px; color: var(--color-text); }
.scene-date { margin-left: auto; }
.scene-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px; margin-bottom: 6px; }
.kpi { background: color-mix(in srgb, var(--color-bg) 55%, transparent); border-radius: var(--radius-md); padding: 8px 10px; box-shadow: var(--shadow-sm); }
.kpi-label { font-size: 10px; color: var(--color-neutral-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-val { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.scene-plot { position: relative; }
.scene-plot svg { display: block; width: 100%; height: auto; }
.scene-tip { position: absolute; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; background: var(--color-surface); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: 8px 11px; font-size: 12px; white-space: nowrap; z-index: 3; }
.tip-name { font-weight: 500; }
.tip-meta { color: var(--color-neutral-400); }
.tip-app { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.tip-sw { width: 8px; height: 8px; border-radius: 2px; }
.scene-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--color-neutral-300); padding: 2px 4px 0; }
.leg { display: flex; align-items: center; gap: 6px; }
.leg-sw { width: 10px; height: 10px; border-radius: 3px; }
.scene-chip { position: absolute; background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(8px); border-radius: var(--radius-lg); padding: 10px 14px; display: flex; gap: 10px; align-items: center; }
.scene-chip-prod { top: 22%; right: -18px; transform: translateZ(90px); box-shadow: 0 0 0 1px var(--color-accent-700), 0 20px 40px rgba(0,0,0,0.5); }
.chip-ring { width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--accent-green) 0 82%, var(--color-neutral-800) 82% 100%); display: grid; place-items: center; }
.chip-ring > div { width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface); }
.chip-label { font-size: 11px; color: var(--color-neutral-400); }
.chip-val { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.scene-chip-late { bottom: -20px; left: -14px; transform: translateZ(60px); box-shadow: var(--shadow-md); font-size: 12px; padding: 9px 13px; }
.chip-ava { width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent-800); color: var(--color-accent-200); display: grid; place-items: center; font-size: 11px; }
.chip-name { font-weight: 500; }
.chip-late { color: oklch(0.76 0.12 30); }

/* ─────────── pain band ─────────── */
.band { background: radial-gradient(900px 400px at 15% 0%, var(--color-section-glow), transparent 70%), var(--color-section); color: #e9e9ed; }
.band-inner { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
.band h2 { color: #f3f5fe; }
.band .section-sub { color: #cfd3e5; }
.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(20px, 3vw, 40px); }
.pain { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; background: linear-gradient(to right, var(--color-section-ghost), transparent) no-repeat top / 100% 1px; }
.pain-n { font-size: clamp(40px, 5vw, 60px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.pain-text { color: #e4e7f5; max-width: 300px; text-wrap: pretty; }

/* ─────────── features ─────────── */
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; perspective: 1200px; }
.feature { background: var(--vt-card-grad); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.feature:hover { transform: rotateX(6deg) translateY(-6px); box-shadow: 0 0 0 1px var(--color-accent-700), 0 24px 40px -12px rgba(0,0,0,0.6); }
.feature-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(150deg, var(--color-accent-700), var(--color-accent-900)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-accent-300) 40%, transparent), 0 8px 18px -6px var(--color-accent-800); color: var(--color-accent-200); font-size: 22px; }
:root[data-theme="light"] .feature-ic { color: var(--color-accent); background: linear-gradient(150deg, #e7e5fe, #d2cefd); }
.feature-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.feature-text { font-size: 14px; color: var(--color-neutral-400); text-wrap: pretty; }

/* ─────────── how / steps ─────────── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; perspective: 1600px; }
.step { background: var(--color-surface); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.step-a { transform: rotateY(8deg); transform-origin: right center; }
.step-b { background: var(--vt-step-glow); box-shadow: 0 0 0 1px var(--color-accent-700), 0 30px 60px -20px rgba(0,0,0,0.6); transform: translateZ(40px) translateY(clamp(0px, 2vw, 28px)); }
.step-c { transform: rotateY(-8deg) translateY(clamp(0px, 4vw, 56px)); transform-origin: left center; }
.step-n { font-size: 48px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.step-n-muted { color: var(--color-accent-700); }
.step-n-accent { color: var(--color-accent); }
.step-title { font-size: 19px; font-weight: 500; }
.step-text { font-size: 14px; color: var(--color-neutral-400); }
.step-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.step-field { display: flex; align-items: center; color: var(--color-neutral-300); font-size: 13px; }
.step-code-box { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.step-code-label { font-size: 11px; color: var(--color-neutral-400); }
.step-code-row { display: flex; align-items: center; gap: 10px; background: var(--color-bg); border-radius: var(--radius-md); padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--color-accent-800); }
.step-code { font-family: ui-monospace, Menlo, monospace; font-size: 22px; letter-spacing: 0.08em; color: var(--color-accent-200); }
:root[data-theme="light"] .step-code { color: var(--color-accent); }
.step-code-row .btn { margin-left: auto; }
.step-code-cmd { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--color-neutral-300); background: var(--color-bg); border-radius: var(--radius-md); padding: 9px 12px; overflow-x: auto; white-space: nowrap; }
.step-bars { display: flex; align-items: flex-end; gap: 5px; height: 70px; margin-top: 6px; }
.bar-col { flex: 1; display: flex; flex-direction: column; gap: 2px; height: 100%; justify-content: flex-end; }
.bar-u { background: oklch(0.68 0.14 30); border-radius: 2px; }
.bar-p { background: oklch(0.82 0.12 168); border-radius: 3px 3px 2px 2px; }

/* ─────────── law ─────────── */
.law { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.law-list { display: flex; flex-direction: column; gap: 18px; }
.law-item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.law-ic { font-size: 22px; color: var(--color-accent-300); padding-top: 2px; }
:root[data-theme="light"] .law-ic { color: var(--color-accent); }
.law-title { font-weight: 500; margin-bottom: 2px; }
.law-text { font-size: 14px; color: var(--color-neutral-400); text-wrap: pretty; }
.law-visual { perspective: 1400px; }
.shot-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 12px; transform: rotateY(10deg) rotateX(4deg); position: relative; }
.shot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; color: var(--color-neutral-400); flex-wrap: wrap; }
.blur-seg { margin-left: auto; font-size: 12px; }
.blur-seg .seg-opt { padding: 4px 9px; }
.shot-frame { border-radius: var(--radius-md); background: var(--vt-shot-ground); overflow: hidden; aspect-ratio: 16 / 10; position: relative; }
.shot-blur { position: absolute; inset: 0; filter: blur(3.5px); transition: filter .4s; }
.shot-toolbar { height: 9%; background: #cfd3e5; display: flex; align-items: center; gap: 4%; padding: 0 3%; }
.shot-toolbar span { height: 30%; border-radius: 2px; }
.shot-toolbar span:nth-child(1) { width: 10%; background: #75798c; }
.shot-toolbar span:nth-child(2), .shot-toolbar span:nth-child(3) { width: 8%; background: #9397ab; }
.shot-sheet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: #b2b6ca; margin: 3%; border: 1px solid #b2b6ca; }
.sheet-cell { background: #f3f5fe; height: 14px; font-size: 7px; color: #3f424d; padding: 2px 3px; overflow: hidden; white-space: nowrap; }
.shot-tag { position: absolute; left: 8px; bottom: 8px; font-size: 10px; }
.tray-stack { position: absolute; right: -10px; bottom: -34px; transform: translateZ(70px); width: min(300px, 86%); }
.tray-tip { background: var(--color-surface); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: 10px 12px; font-size: 12px; margin-bottom: 8px; display: flex; gap: 8px; align-items: flex-start; }
.tray-tip svg { flex: none; margin-top: 1px; }
.tray-bar { background: var(--vt-tray-bg); border-radius: var(--radius-md); padding: 7px 12px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--color-neutral-300); box-shadow: var(--shadow-md); }
:root[data-theme="light"] .tray-bar { color: #595d6c; }
.tray-icon { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--color-accent-800); }
.tray-dot { position: absolute; right: -2px; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: oklch(0.82 0.12 168); box-shadow: 0 0 0 2px var(--vt-tray-bg); }
.tray-clock { margin-left: auto; }

/* ─────────── pricing ─────────── */
.pricing-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.pricing-head > div:first-child { margin-right: auto; }
.pricing-head h2 { max-width: 640px; margin: 0; }
.period-badge { padding: 1px 6px; font-size: 10px; margin-left: 6px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; align-items: stretch; }
.plan { position: relative; border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.plan-popular { background: var(--vt-plan-pop-grad); box-shadow: 0 0 0 1px var(--color-accent), 0 0 48px -8px color-mix(in srgb, var(--color-accent) 40%, transparent), 0 30px 60px -24px rgba(0,0,0,0.7); }
.plan-head { display: flex; align-items: center; gap: 8px; }
.plan-name { font-size: 18px; font-weight: 500; }
.plan-desc { font-size: 13px; color: var(--color-neutral-400); min-height: 40px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-amount { font-size: 40px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.plan-unit { font-size: 13px; color: var(--color-neutral-400); }
.plan-cta { padding: 11px 16px; }
.plan-items { display: flex; flex-direction: column; gap: 9px; font-size: 14px; padding-top: 14px; background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent) no-repeat top / 100% 1px; }
.plan-item { display: flex; gap: 9px; align-items: flex-start; }
.plan-item i { color: oklch(0.82 0.12 168); margin-top: 3px; }
.pay-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; font-size: 13px; color: var(--color-neutral-400); }
.pay-note .tag-outline { font-weight: 500; }

/* ─────────── faq + demo ─────────── */
.faq-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: start; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; }
.faq-q { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 4px; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--color-text); }
.faq-q:hover { color: var(--color-accent-300); }
:root[data-theme="light"] .faq-q:hover { color: var(--color-accent); }
.faq-q:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.faq-q > span { flex: 1; }
.faq-q i { color: var(--color-accent); }
.faq-a { padding: 0 4px 18px; color: var(--color-neutral-300); font-size: 14px; max-width: 560px; text-wrap: pretty; }

.demo-card { background: var(--vt-demo-grad); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); box-shadow: 0 0 0 1px var(--color-accent-800), 0 40px 80px -30px rgba(0,0,0,0.7); }
:root[data-theme="light"] .demo-card { box-shadow: 0 0 0 1px var(--color-accent-700), var(--shadow-lg); }
.demo-form { display: flex; flex-direction: column; gap: 14px; }
.demo-form-head h3 { margin: 0 0 4px; }
.demo-sub { color: var(--color-neutral-400); margin: 0; font-size: 14px; }
.demo-card .input { min-height: 44px; }
.phone-wrap { display: flex; align-items: center; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-divider); }
.phone-wrap.invalid { box-shadow: inset 0 0 0 1px oklch(0.68 0.14 30); }
.phone-cc { padding: 0 4px 0 12px; color: var(--color-neutral-400); font-size: 14px; }
.phone-input { border: 0; background: transparent; padding-left: 4px; box-shadow: none; }
.phone-input:focus-visible { outline: none; }
.field-err { font-size: 12px; color: oklch(0.76 0.12 30); margin-top: 5px; display: flex; gap: 5px; align-items: center; }
.size-seg { display: flex; }
.size-opt { flex: 1; justify-content: center; min-height: 40px; }
.demo-submit { padding: 13px; font-size: 15px; margin-top: 4px; }
.demo-spin { animation: vtspin .9s linear infinite; }
@keyframes vtspin { to { transform: rotate(360deg); } }
.demo-success { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 24px 0; }
.demo-check { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, oklch(0.82 0.12 168) 18%, transparent); color: oklch(0.82 0.12 168); font-size: 26px; }
.demo-success h3 { margin: 0; }
.demo-success p { color: var(--color-neutral-300); margin: 0; }

/* ─────────── footer ─────────── */
.site-footer { padding-top: 40px; padding-bottom: 32px; background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent) no-repeat top / 100% 1px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px; margin-bottom: 36px; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-about { font-size: 13px; color: var(--color-neutral-400); max-width: 240px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.footer-head { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-500); }
.footer-col a { color: var(--color-text); text-decoration: none; display: flex; gap: 6px; align-items: center; }
.footer-col a:hover { color: var(--color-accent-300); }
:root[data-theme="light"] .footer-col a:hover { color: var(--color-accent); }
.footer-city { color: var(--color-neutral-400); }
.footer-docs { display: flex; flex-direction: column; gap: 8px; }
.footer-docs a { color: var(--color-neutral-300); text-decoration: none; }
.footer-docs a:hover { color: var(--color-accent-300); }
.footer-bottom { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--color-neutral-500); }
.footer-copy { margin-right: auto; }
.footer-made { color: var(--color-neutral-300); text-decoration: none; }
.footer-made:hover { color: var(--color-accent-300); }

/* ─────────── responsive ─────────── */
@media (max-width: 960px) {
  .nav-links, .nav-login, .nav-try { display: none; }
  .nav-burger { display: inline-flex; }
  .brand { margin-right: auto; }
}
@media (min-width: 961px) {
  .mobile-menu { display: none !important; }
}
@media (max-width: 560px) {
  .scene-chip-prod { right: 4px; top: 10px; transform: translateZ(90px) scale(.9); }
  .scene-chip-late { left: 0; bottom: -14px; transform: translateZ(60px) scale(.9); }
  .pricing-head { align-items: flex-start; }
}

/* ─────────── motion ─────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scene, .feature, .shot-blur, .step { transition: none !important; }
  .hero-scene { transform: none !important; }
  .step-a, .step-b, .step-c { transform: none !important; }
  .shot-card { transform: none !important; }
  .demo-spin { animation: none !important; }
}