/* BeeSmartAutomation — site styles. Tokens extracted from the approved prototype. */

/* Fira Code 400 cyrillic-ext */
@font-face{font-family:'Fira Code';font-style:normal;font-weight:400 500;font-display:swap;src:url(/static/fonts/fira-code-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* Fira Code 400 cyrillic */
@font-face{font-family:'Fira Code';font-style:normal;font-weight:400 500;font-display:swap;src:url(/static/fonts/fira-code-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* Fira Code 400 latin-ext */
@font-face{font-family:'Fira Code';font-style:normal;font-weight:400 500;font-display:swap;src:url(/static/fonts/fira-code-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Fira Code 400 latin */
@font-face{font-family:'Fira Code';font-style:normal;font-weight:400 500;font-display:swap;src:url(/static/fonts/fira-code-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Fira Sans 400 cyrillic-ext */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/fira-sans-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* Fira Sans 400 cyrillic */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/fira-sans-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* Fira Sans 400 latin-ext */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/fira-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Fira Sans 400 latin */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/fira-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Fira Sans 500 cyrillic-ext */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/fira-sans-500-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* Fira Sans 500 cyrillic */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/fira-sans-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* Fira Sans 500 latin-ext */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/fira-sans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Fira Sans 500 latin */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/fira-sans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Fira Sans 600 cyrillic-ext */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/fira-sans-600-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* Fira Sans 600 cyrillic */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/fira-sans-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* Fira Sans 600 latin-ext */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/fira-sans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Fira Sans 600 latin */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/fira-sans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Fira Sans 700 cyrillic-ext */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/fira-sans-700-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* Fira Sans 700 cyrillic */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/fira-sans-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* Fira Sans 700 latin-ext */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/fira-sans-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Fira Sans 700 latin */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/fira-sans-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Fira Sans 800 cyrillic-ext */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/fira-sans-800-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* Fira Sans 800 cyrillic */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/fira-sans-800-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* Fira Sans 800 latin-ext */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/fira-sans-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Fira Sans 800 latin */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/fira-sans-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root {
  --purple: #5A12A8; --purple-h: #470C88; --purple-l: #6A1BC2;
  --tint: #F1EAFB; --tint-2: #F7F3FC; --tint-3: #FBF9FD;
  --orange: #F0961B;
  /* Prototype used #E0870F for small orange text; that is 2.3–2.8:1 on light backgrounds.
     This amber keeps the hue and meets WCAG AA (≥4.5:1 on bg, white and tint). */
  --orange-text: #9D5C00;
  --ink: #1C1A24; --body: #4A4558; --muted: #6B6578; --prose: #2E2A3A;
  --line: #ECE8F2; --line-2: #DCD5E8; --dash: #D3CBE2;
  --bg: #FBFAF8;
  --dark: #1C1630; --dark-card: #221A38; --dark-card-2: #2A2144; --dark-line: #3A3150; --dark-text: #C9C2DA;
  --sans: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hex: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  --stripes: repeating-linear-gradient(135deg, #F3EFF8 0 12px, #ECE6F4 12px 24px);
  --stripes-dark: repeating-linear-gradient(135deg, #241C3B 0 12px, #2A2144 12px 24px);
  --header-h: 67px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; outline: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, canvas { display: block; max-width: 100%; }
a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--orange-text); }
input, textarea, select, button { font: inherit; color: inherit; }
input[type=range] { accent-color: var(--purple); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
section[id], [id^="svc-"] { scroll-margin-top: calc(var(--header-h) + 8px); }

.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 { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--purple); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; color: #fff; }

.wrap { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; width: 100%; }

/* ---------- type */
.eyebrow { font-family: var(--mono); font-size: 13px; color: var(--orange-text); margin-bottom: 14px; letter-spacing: .02em; }
.eyebrow--dark { color: var(--orange); }
.h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 20px; max-width: 900px; text-wrap: balance; }
.h1--center { margin-left: auto; margin-right: auto; max-width: 820px; margin-bottom: 18px; }
.h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.01em; font-weight: 700; text-wrap: balance; }
.h2--lg { font-size: clamp(30px, 3.6vw, 46px); }
.h2--sm { font-size: 32px; letter-spacing: 0; margin-bottom: 32px; }
.lead { font-size: 19px; line-height: 1.6; color: var(--body); max-width: 720px; }
.lead--center { margin: 0 auto 36px; max-width: 640px; }
.tag { font-family: var(--mono); font-size: 12px; color: var(--orange-text); }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border: 0; border-radius: 12px; font-weight: 600; font-size: 16px; line-height: 1.2; padding: 16px 26px; text-align: center; transition: background-color .15s, border-color .15s, color .15s; }
.btn--primary { background: var(--purple); color: #fff; }
.btn--primary:hover { background: var(--purple-h); color: #fff; }
.btn--ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--orange); color: var(--ink); }
.btn--sm { padding: 11px 18px; border-radius: 10px; font-size: 14px; }
.btn--md { padding: 15px 24px; }
.btn--block { width: 100%; border-radius: 10px; padding: 15px; }
.btn[disabled], .btn[aria-busy=true] { opacity: .7; cursor: progress; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.more-link { font-weight: 600; }

/* ---------- motif helpers */
.hex { display: block; flex: none; width: 12px; height: 12px; clip-path: var(--hex); background: var(--purple); }
.hex--orange { background: var(--orange); }
.dot { display: block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot--purple { background: var(--purple); }
.dot--orange { background: var(--orange); }
.ticks { display: flex; flex-direction: column; gap: 14px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.ticks li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; clip-path: var(--hex); }
.ticks--orange li { color: #EDE8F6; }
.ticks--orange li::before { background: var(--orange); }
.ticks--purple { gap: 12px; }
.ticks--purple li { gap: 12px; }
.ticks--purple li::before { background: var(--purple); }
.points { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--tint-3); padding: 12px 14px; border-radius: 10px; }
.points li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 6px; background: var(--purple); clip-path: var(--hex); }
.points--tight { gap: 8px; margin-top: 6px; }
.points--tight li { padding: 10px 12px; }

.ph { background: var(--stripes); display: flex; align-items: center; justify-content: center; }
.ph--dark { background: var(--stripes-dark); }
.ph__label { font-family: var(--mono); font-size: 13px; color: var(--muted); background: var(--bg); padding: 8px 12px; border-radius: 6px; }
.ph__label--sm { font-size: 12px; padding: 6px 10px; }
.ph__label--dark { color: var(--dark-text); background: var(--dark); padding: 6px 10px; }

/* ---------- header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(251, 250, 248, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header__in { max-width: 1240px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; flex: none; min-height: 46px; border-radius: 6px; }
.logo img { height: 34px; width: auto; }
.nav { flex: 1; display: flex; justify-content: center; }
.nav__list { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.nav__list a { display: block; padding: 10px 14px; font-size: 15px; font-weight: 500; color: var(--ink); border-bottom: 2px solid transparent; border-radius: 0; }
.nav__list a:hover { color: var(--purple); }
.nav__list a[aria-current=page] { color: var(--purple); font-weight: 600; border-bottom-color: var(--orange); }
.nav__cta { display: none; }
.header-tools { display: flex; align-items: center; gap: 12px; flex: none; }
.lang { display: flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; font-family: var(--mono); font-size: 12px; }
.lang a { padding: 5px 10px; border-radius: 999px; color: var(--ink); }
.lang a:hover { color: var(--purple); }
.lang a[aria-current=true] { background: var(--purple); color: #fff; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.burger__bars, .burger__bars::before, .burger__bars::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .2s, opacity .2s; }
.burger__bars::before, .burger__bars::after { content: ""; position: absolute; left: 0; }
.burger__bars::before { top: -6px; }
.burger__bars::after { top: 6px; }
.burger[aria-expanded=true] .burger__bars { background: transparent; }
.burger[aria-expanded=true] .burger__bars::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded=true] .burger__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1020px) {
  .site-header__in { gap: 12px; flex-wrap: wrap; }
  .logo { margin-right: auto; }
  .header-tools { order: 2; }
  .header-cta { display: none; }
  .js .burger { display: inline-flex; order: 3; }
  .nav { order: 4; flex-basis: 100%; }
  .js .nav { display: none; }
  .js .site-header.is-open .nav { display: block; padding: 6px 0 14px; }
  .nav__list { flex-direction: column; gap: 0; }
  .js .nav__list a { padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 17px; }
  .js .nav__list a[aria-current=page] { border-bottom-color: var(--line); box-shadow: inset 3px 0 0 var(--orange); padding-left: 14px; }
  .js .nav__cta { display: flex; margin-top: 14px; padding: 14px; }
  .no-js .nav__list, html:not(.js) .nav__list { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .site-header__in { padding: 8px 16px; }
  .logo img { height: 30px; }
}

/* ---------- hero */
.hero { position: relative; overflow: hidden; min-height: min(780px, 92vh); display: flex; align-items: center; }
.hero__scene { position: absolute; inset: 0; z-index: 0; }
.hero__scene canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .9s ease; }
.hero__scene.is-live canvas { opacity: 1; }
.hero__fallback { position: absolute; inset: 0 0 0 30%; opacity: .55; transition: opacity .9s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='145.5' viewBox='0 0 84 145.5'%3E%3Cg fill='%23F7F3FC' stroke='%23F0961B' stroke-opacity='.45' stroke-width='1.2'%3E%3Cpath d='M42 2l38 22v44L42 90 4 68V24z'/%3E%3Cpath d='M0 75l38 22v44L0 163-38 141V97zM84 75l38 22v44l-38 22-38-22V97z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 84px 145.5px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 60% 55%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 60% 55%, #000 30%, transparent 75%); }
.hero__scene.is-live .hero__fallback { opacity: 0; }
.hero__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #FBFAF8 0%, rgba(251, 250, 248, .92) 32%, rgba(251, 250, 248, 0) 62%); }
.hero__in { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 80px 24px; pointer-events: none; }
.hero__copy { max-width: 580px; pointer-events: auto; }
.pill-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--purple); background: var(--tint); padding: 7px 12px; border-radius: 999px; }
.pill-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }
.hero__title { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.02em; margin: 22px 0 20px; font-weight: 800; text-wrap: balance; }
.hero__title span { color: var(--purple); }
.hero__sub { font-size: 19px; line-height: 1.55; color: var(--body); margin: 0 0 32px; text-wrap: pretty; }
.chips { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 44px; }
.chip { display: flex; flex-direction: column-reverse; gap: 2px; }
.chip__v { font-size: 26px; font-weight: 700; color: var(--ink); }
.chip__l { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .hero { align-items: flex-start; }
  .hero__fallback { inset: 35% 0 0 0; }
  .hero__fade { background: linear-gradient(180deg, rgba(251, 250, 248, .96) 0%, rgba(251, 250, 248, .9) 50%, rgba(251, 250, 248, .25) 100%); }
  .hero__in { padding: 56px 24px 72px; }
}

/* ---------- manufacturers strip (rolling) */
.brands { position: relative; background: #fff; border-top: 1px solid var(--line); padding: 22px 0 26px; }
.brands__title { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0 56px 16px; }
.brands__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.brands__track { display: flex; width: max-content; animation: brands-roll var(--brands-duration, 40s) linear infinite; }
.brands__list { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.brand { display: flex; align-items: center; gap: 10px; height: 40px; white-space: nowrap; color: var(--muted); transition: color .2s; }
.brand:hover { color: var(--purple); }
.brand__mark { width: 18px; height: 16px; background: var(--orange); clip-path: var(--hex); flex: none; opacity: .85; }
.brand__name { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.brand__logo { height: 36px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.brand:hover .brand__logo { filter: none; opacity: 1; }
.brands:hover .brands__track, .brands.is-paused .brands__track { animation-play-state: paused; }
.brands__toggle { position: absolute; right: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--muted); }
.brands__toggle::before { content: ""; width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.brands.is-paused .brands__toggle::before { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.brands__toggle:hover { color: var(--purple); border-color: var(--purple); }
.no-js .brands__toggle { display: none; }
@keyframes brands-roll { to { transform: translateX(-50%); } }
/* Like the 3D scenes (and the prototype), reduced motion slows the strip down instead of stopping it. */
@media (prefers-reduced-motion: reduce) { .brands__track { animation-duration: calc(var(--brands-duration, 40s) * 2) !important; } }
@media (max-width: 600px) { .brands__list { gap: 44px; padding-right: 44px; } .brand__name { font-size: 19px; } .brands__title { margin: 0 52px 14px; } }

/* ---------- compatibility strip */
.compat { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compat__in { padding-top: 22px; padding-bottom: 22px; display: flex; gap: 10px 28px; flex-wrap: wrap; align-items: center; justify-content: center; }
.compat__label { font-size: 13px; color: var(--muted); }
.compat__list { display: flex; gap: 10px 28px; flex-wrap: wrap; justify-content: center; }
.proto { font-family: var(--mono); font-size: 13px; color: var(--ink); padding: 6px 12px; border: 1px dashed var(--dash); border-radius: 6px; }

/* ---------- sections */
.section { padding-top: 100px; padding-bottom: 100px; }
.section--how { padding-top: 110px; padding-bottom: 90px; }
.how__title { margin: 0 0 56px; max-width: 720px; }
.section--intro { padding-top: 90px; padding-bottom: 60px; }
.section--intro-tight { padding-bottom: 40px; }
.section--intro-ai { padding-bottom: 50px; }
.section--center { text-align: center; padding-bottom: 40px; }
.section--values { padding-top: 40px; }
.section--rows { padding-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.section--caps { padding-top: 30px; padding-bottom: 90px; }
.section--blog { padding-top: 90px; }
.section--split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 56px; align-items: center; }
.band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tint { background: var(--tint); }
.dark { background: var(--dark); color: #fff; }
.dark__title { margin: 0 0 22px; }
.dark__sub { font-size: 17px; line-height: 1.6; color: var(--dark-text); margin: 0 0 30px; text-wrap: pretty; }
.dark__sub--last { margin: 0; }
.dark a { color: #fff; }
@media (max-width: 700px) {
  .section { padding-top: 72px; padding-bottom: 72px; }
  .section--intro { padding-top: 56px; padding-bottom: 40px; }
  .section--rows, .section--caps, .section--values { padding-top: 24px; }
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.hexnum { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 500; color: var(--purple); background: var(--tint); clip-path: var(--hex); }
.card__title { font-size: 22px; font-weight: 700; }
.card__text { font-size: 16px; line-height: 1.6; color: var(--body); text-wrap: pretty; }

/* ---------- smart payments / isometric scene */
.section--pay { padding-top: 100px; padding-bottom: 90px; }
.pay__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px 56px; align-items: end; }
.pay__sub { font-size: 17px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.iso { position: relative; margin-top: 40px; height: clamp(440px, 50vw, 620px); border-radius: 22px; background: var(--tint-3); border: 1px solid var(--line); overflow: hidden; }
.iso__canvas { position: absolute; inset: 0; }
.iso__canvas canvas { width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .7s ease; }
.iso.is-live .iso__canvas canvas { opacity: 1; }
.iso.is-live .iso__canvas { cursor: grab; touch-action: pan-y; }
.iso.is-dragging .iso__canvas { cursor: grabbing; }
.iso__labels { position: absolute; inset: 0; pointer-events: none; }
.iso__label { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform; background: #fff; color: var(--ink); border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(28, 22, 48, .06); }
.iso.is-live .iso__label { visibility: visible; }
.iso__label--module { background: var(--orange); border-color: var(--orange); }
.iso__label--cloud { background: var(--purple); border-color: var(--purple); color: #fff; }
.iso__legend { position: absolute; left: 18px; bottom: 16px; right: 18px; display: flex; gap: 8px 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--body); pointer-events: none; }
.iso__key { display: flex; align-items: center; gap: 8px; }
.iso__hint { color: var(--muted); }
/* Static diagram when WebGL is unavailable (or before JS): the same labels as a flow grid. */
:is(.iso.is-static, .no-js .iso) { height: auto; padding: 32px 24px 64px; }
:is(.iso.is-static, .no-js .iso) .iso__labels { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 28px; align-items: center;
  grid-template-areas: "p0 m c y0" "p1 m c y1" "p2 mo c y2"; }
:is(.iso.is-static, .no-js .iso) .iso__label { position: relative; visibility: visible; text-align: center; white-space: normal; padding: 10px 12px; border-radius: 12px; }
:is(.iso.is-static, .no-js .iso) .iso__label:nth-child(1) { grid-area: p0; } :is(.iso.is-static, .no-js .iso) .iso__label:nth-child(2) { grid-area: p1; } :is(.iso.is-static, .no-js .iso) .iso__label:nth-child(3) { grid-area: p2; }
:is(.iso.is-static, .no-js .iso) .iso__label:nth-child(4) { grid-area: m; align-self: stretch; display: flex; align-items: center; justify-content: center; background: var(--tint); }
:is(.iso.is-static, .no-js .iso) .iso__label:nth-child(5) { grid-area: mo; }
:is(.iso.is-static, .no-js .iso) .iso__label:nth-child(6) { grid-area: c; align-self: stretch; display: flex; align-items: center; justify-content: center; }
:is(.iso.is-static, .no-js .iso) .iso__label:nth-child(7) { grid-area: y0; } :is(.iso.is-static, .no-js .iso) .iso__label:nth-child(8) { grid-area: y1; } :is(.iso.is-static, .no-js .iso) .iso__label:nth-child(9) { grid-area: y2; }
:is(.iso.is-static, .no-js .iso) .iso__label:nth-child(-n+5)::after { content: "→"; position: absolute; right: -21px; top: 50%; transform: translateY(-50%); color: var(--purple); font-weight: 700; }
:is(.iso.is-static, .no-js .iso) .iso__label:nth-child(6)::after { content: "⇄"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--orange-text); font-weight: 700; }
:is(.iso.is-static, .no-js .iso) .iso__hint { display: none; }
@media (max-width: 700px) {
  :is(.iso.is-static, .no-js .iso) .iso__labels { grid-template-columns: 1fr; grid-template-areas: "p0" "p1" "p2" "m" "mo" "c" "y0" "y1" "y2"; }
  :is(.iso.is-static, .no-js .iso) .iso__label::after { display: none; }
}
.paysteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; margin-top: 28px; }
.paystep { display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--line); padding-top: 16px; }
.paystep__n { font-family: var(--mono); font-size: 12px; color: var(--purple); }
.paystep__title { font-size: 18px; font-weight: 700; }
.paystep__text { font-size: 15px; line-height: 1.55; color: var(--body); }

/* ---------- platform / AI teaser */
.shot { aspect-ratio: 4 / 3; border-radius: 18px; border: 1px solid var(--dark-line); overflow: hidden; }
.shot--img img { width: 100%; height: 100%; object-fit: cover; }
.video-card { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; flex-direction: column; gap: 16px; overflow: hidden; color: #fff; }
.video-card:hover { color: #fff; }
.video-card__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card .play, .video-card .ph__label { position: relative; }
.play { width: 72px; height: 72px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; flex: none; transition: transform .2s; }
.play::after { content: ""; width: 22px; height: 26px; margin-left: 5px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.play--lg { width: 88px; height: 88px; }
.play--lg::after { width: 26px; height: 30px; margin-left: 6px; }
.video-card:hover .play, .video__btn:hover .play { transform: scale(1.06); }
.ait__title { margin: 0 0 18px; }
.ait__sub { font-size: 17px; line-height: 1.6; color: var(--body); margin: 0 0 26px; text-wrap: pretty; }
.ait__list { margin-bottom: 30px; }

/* ---------- services teaser */
.svc__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.svc-grid li { display: flex; }
.svc { flex: 1; background: #fff; padding: 28px; display: flex; flex-direction: column; gap: 10px; min-height: 170px; color: var(--ink); border-radius: 0; }
.svc:hover { background: #FBF7FF; color: var(--ink); }
.svc .tag { font-size: 12px; }
.svc__title { font-size: 19px; font-weight: 700; }
.svc__text { font-size: 15px; line-height: 1.55; color: #5A556A; }

/* ---------- about */
.about__title { margin-bottom: 28px; }
.about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px; margin-top: 40px; }
.about__story { display: flex; flex-direction: column; gap: 18px; }
.about__story p { font-size: 18px; line-height: 1.65; color: #3E394B; text-wrap: pretty; }
.about__img { aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; }
.value { border-top: 3px solid var(--orange); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.value__title { font-size: 21px; font-weight: 700; }
.value__text { font-size: 16px; line-height: 1.6; color: var(--body); }

/* ---------- services page */
.row-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px; }
.row-card__main { display: flex; flex-direction: column; gap: 12px; }
.row-card__title { font-size: 26px; font-weight: 700; line-height: 1.2; }
.row-card__text { font-size: 16px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
@media (max-width: 500px) { .row-card { padding: 24px; } }

/* ---------- AI page */
.ai__lead { max-width: 760px; margin: 0 0 44px; text-wrap: pretty; }
.video { position: relative; aspect-ratio: 16 / 8; border-radius: 22px; overflow: hidden; }
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; height: 100%; background: transparent; border: 0; cursor: pointer; color: #fff; }
div.video__btn { cursor: default; }
.video__watch { font-size: 18px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(28, 22, 48, .5); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
@media (max-width: 600px) { .video { aspect-ratio: 16 / 10; } }
.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.cap { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.cap__title { font-size: 24px; font-weight: 700; line-height: 1.2; }
.cap__text { font-size: 16px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.chat { background: var(--dark-card); border: 1px solid var(--dark-line); border-radius: 20px; overflow: hidden; }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--dark-line); font-weight: 600; font-size: 15px; }
.chat__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 85%; display: flex; flex-direction: column; gap: 4px; }
.msg--op { align-self: flex-end; }
.msg--ai { align-self: flex-start; }
.msg__who { font-family: var(--mono); font-size: 11px; color: #C9B8EE; }
.msg--ai .msg__who { color: var(--orange); }
.msg__text { background: var(--purple); padding: 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.5; color: #fff; }
.msg--ai .msg__text { background: var(--dark-card-2); }
.chat__input { margin: 0 20px 20px; padding: 13px 16px; border: 1px solid var(--dark-line); border-radius: 12px; color: #8F86A8; font-size: 14px; }

/* ---------- pricing */
.toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px; background: #fff; margin: 0; min-width: 0; }
.toggle label { cursor: pointer; padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); }
.toggle input:checked + label { background: var(--purple); color: #fff; }
.toggle input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }
.save { color: var(--orange-text); }
.toggle input:checked + label .save { color: #FFC37A; }
.plans { padding-top: 20px; padding-bottom: 40px; }
.plans__set { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.plan { cursor: pointer; background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 18px; position: relative; transition: border-color .15s; }
.plan--featured { background: var(--dark); color: #fff; border-color: var(--dark-line); }
.plan.is-selected, .plan:has(.plan__radio:checked) { border-color: var(--orange); }
.plan:has(.plan__radio:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
.plan__badge { position: absolute; top: -13px; left: 32px; background: var(--orange); color: var(--ink); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.plan__name { font-size: 22px; font-weight: 700; cursor: pointer; }
.plan__desc { font-size: 15px; line-height: 1.5; opacity: .8; min-height: 45px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan__amount { font-size: 50px; font-weight: 800; letter-spacing: -0.02em; }
.plan__per { font-size: 14px; opacity: .75; }
.plan__note { font-family: var(--mono); font-size: 12px; opacity: .75; }
.plan__rule { height: 1px; border: 0; margin: 0; background: var(--line); opacity: .6; }
.plan--featured .plan__rule { background: var(--dark-line); }
.plan.is-selected .plan__rule { background: var(--orange); }
.plan__features { display: flex; flex-direction: column; gap: 10px; }
.plan__features li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.plan__features li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 6px; background: var(--orange); clip-path: var(--hex); }
.calc-wrap { padding-top: 20px; padding-bottom: 60px; }
.calc { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; align-items: center; }
.calc__left { display: flex; flex-direction: column; gap: 16px; }
.calc__title { font-size: 22px; font-weight: 700; }
.calc__row { display: flex; justify-content: space-between; font-size: 15px; color: var(--body); }
.calc__count { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.calc input[type=range] { width: 100%; }
.calc__sel { font-size: 14px; color: var(--muted); }
.calc__sel strong { color: var(--ink); }
.calc__warn { font-size: 13px; color: var(--orange-text); }
.calc__right { background: var(--tint-2); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.calc__period { font-size: 14px; color: var(--muted); }
.calc__total { font-size: 46px; font-weight: 800; color: var(--purple); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc__hw { font-size: 14px; color: var(--body); }
.calc__cta { margin-top: 10px; }
.calc__note { font-size: 13px; color: var(--muted); line-height: 1.45; }
.calc__err { font-size: 14px; color: #A3192E; }
.calc__err:empty { display: none; }
.faq-wrap { max-width: 860px; margin: 0 auto; padding: 40px 24px 100px; }
.faq { border-bottom: 1px solid #E6E1EE; }
.faq summary { cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 18px; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq__sign { color: var(--purple); font-family: var(--mono); flex: none; }
.faq__sign::before { content: "+"; }
.faq[open] .faq__sign::before { content: "−"; }
.faq__a { padding: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--body); }

/* ---------- blog */
.blog__title { margin-bottom: 30px; }
.cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.cat { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; background: #fff; color: var(--ink); border: 1px solid var(--line-2); }
.cat:hover { color: var(--purple); border-color: var(--purple); }
.cat[aria-current=page] { background: var(--purple); color: #fff; border-color: var(--purple); }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 28px; }
.post-card__link { display: flex; flex-direction: column; gap: 14px; color: var(--ink); transition: opacity .15s; }
.post-card__link:hover { opacity: .85; color: var(--ink); }
.post-card__cover { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; }
.post-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.post-meta { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.post-meta--lg { font-size: 13px; margin-bottom: 16px; }
.post-meta__cat { color: var(--orange-text); }
.post-card__title { font-size: 21px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.post-card__excerpt { font-size: 15px; line-height: 1.55; color: var(--body); }
.pager { display: flex; justify-content: space-between; margin-top: 48px; font-weight: 600; }
.rss-link { margin-top: 40px; font-family: var(--mono); font-size: 13px; }
.article { max-width: 780px; padding-top: 70px; padding-bottom: 100px; }
.back-link { display: inline-block; font-weight: 600; margin-bottom: 36px; }
.article__title { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.015em; font-weight: 800; margin: 0 0 30px; text-wrap: balance; }
.article__cover { aspect-ratio: 16 / 8; border-radius: 16px; overflow: hidden; margin-bottom: 36px; }
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.prose { display: flex; flex-direction: column; gap: 20px; font-size: 18px; line-height: 1.75; color: var(--prose); }
.prose p, .prose li { text-wrap: pretty; }
.prose h2 { font-size: 28px; line-height: 1.2; margin-top: 16px; color: var(--ink); }
.prose h3 { font-size: 22px; line-height: 1.3; margin-top: 8px; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { display: flex; gap: 12px; }
.prose ul li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 11px; background: var(--purple); clip-path: var(--hex); }
.prose ol { list-style: decimal; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 0; padding: 8px 0 8px 20px; border-left: 3px solid var(--orange); color: var(--body); }
.prose img { border-radius: 14px; height: auto; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--tint); padding: 2px 6px; border-radius: 5px; }
.prose pre { background: var(--dark); color: #EDE8F6; padding: 18px; border-radius: 14px; overflow: auto; font-size: 14px; }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; }
.prose-note { margin-top: 32px; font-size: 14px; color: var(--muted); }
.related { padding-bottom: 100px; }

/* ---------- result pages */
.result { max-width: 860px; }
.result .lead { margin-bottom: 32px; }
.result__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; margin-bottom: 32px; }
.result__list dt { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.result__list dd { font-size: 18px; font-weight: 600; margin-top: 4px; word-break: break-word; }

/* ---------- contact */
.contact { background: var(--tint); }
.contact__in { padding-top: 90px; padding-bottom: 90px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px; }
.contact__title { margin: 0 0 18px; }
.contact__sub { font-size: 17px; line-height: 1.6; color: var(--body); margin: 0 0 28px; }
.contact__details { display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-style: normal; align-items: flex-start; }
.contact__details span { color: var(--body); }
.contact__box { background: #fff; border-radius: 18px; padding: 28px; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field input:not([type=checkbox]), .field textarea { width: 100%; padding: 14px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 15px; background: var(--bg); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: #767086; opacity: 1; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--purple); outline-offset: 0; border-color: var(--purple); border-radius: 10px; }
.field [aria-invalid=true] { border-color: #C2263E; }
.field__err { font-size: 13px; color: #A3192E; }
.field__err:empty { display: none; }
.consent { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--body); }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--purple); flex: none; }
.consent label { flex: 1; min-width: 0; }
.consent a, .lead a, .contact__sub a { text-decoration: underline; text-underline-offset: 3px; }
.consent .field__err { flex-basis: 100%; }
.form__status { font-size: 14px; color: #A3192E; }
.form__status:empty { display: none; }
.form__noscript { font-size: 14px; color: var(--body); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-done { padding: 12px; display: flex; flex-direction: column; gap: 10px; justify-content: center; min-height: 240px; outline: none; }
.form-done__title { font-size: 24px; font-weight: 700; color: var(--purple); }
.form-done__text { font-size: 16px; color: var(--body); }

/* ---------- footer */
.site-footer { background: var(--dark); color: var(--dark-text); }
.site-footer__in { max-width: 1240px; margin: 0 auto; padding: 40px 24px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.site-footer__contact { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.site-footer a { color: var(--dark-text); }
.site-footer a:hover { color: var(--orange); }
.site-footer__nav { display: flex; gap: 12px 20px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .site-header, .contact, .site-footer, .hero__scene, .iso { display: none !important; }
}