/* ==========================================================================
   Syntrize — design system
   Dark-first theme with a light alternative. Brand gradient: blue → cyan → green.
   ========================================================================== */

:root {
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --grad: linear-gradient(120deg, #4d8bff 0%, #2bd4f0 52%, #2ee6a8 100%);
  --grad-soft: linear-gradient(120deg, rgba(77, 139, 255, .16), rgba(43, 212, 240, .1) 50%, rgba(46, 230, 168, .14));
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 72px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: dark;
  --bg: #030817;
  --bg-2: #060e24;
  --band: rgba(47, 107, 255, .035);
  --surface: rgba(13, 25, 54, .55);
  --surface-solid: #0a1530;
  --surface-2: rgba(24, 42, 86, .5);
  --surface-hover: rgba(28, 48, 98, .62);
  --input-bg: rgba(3, 8, 23, .55);
  --border: rgba(120, 156, 255, .13);
  --border-strong: rgba(120, 156, 255, .26);
  --text: #eaf0ff;
  --text-2: #b3c0de;
  --muted: #8593b7;
  --accent: #6aa0ff;
  --accent-2: #34e6b8;
  --warn: #ffb86b;
  --danger: #ff7d93;
  --grad-text: linear-gradient(110deg, #74a7ff 0%, #45dcf3 45%, #3ef0b5 100%);
  --on-grad: #04112b;
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, .25);
  --shadow: 0 26px 60px -26px rgba(0, 0, 0, .7);
  --shadow-glow: 0 0 0 1px rgba(106, 160, 255, .28), 0 18px 50px -14px rgba(43, 212, 240, .38);
  --header-bg: rgba(3, 8, 23, .72);
  --grid-line: rgba(120, 156, 255, .07);
  --glow-1: rgba(47, 107, 255, .5);
  --glow-2: rgba(25, 227, 160, .3);
  --packet: #8ef3ff;
  --track: rgba(106, 160, 255, .28);
  --beam: rgba(96, 205, 255, .8);
  --ripple: rgba(43, 212, 240, .55);
  --grad-text-flow: linear-gradient(110deg, #74a7ff 0%, #45dcf3 28%, #3ef0b5 50%, #45dcf3 72%, #74a7ff 100%);
  --cyan: #22d3ee;
  --violet: #8b5cf6;
  --shimmer: linear-gradient(90deg, #22d3ee 0%, #22d3ee 16%, #bdf5ff 28%, #ffffff 34%, #ddd2ff 42%, #a78bfa 54%, #8b5cf6 64%, #a78bfa 76%, #67e8f9 90%, #22d3ee 100%);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fe;
  --bg-2: #eaf0fb;
  --band: rgba(26, 90, 232, .035);
  --surface: rgba(255, 255, 255, .8);
  --surface-solid: #ffffff;
  --surface-2: rgba(234, 241, 253, .95);
  --surface-hover: #ffffff;
  --input-bg: #ffffff;
  --border: rgba(20, 45, 110, .11);
  --border-strong: rgba(20, 45, 110, .2);
  --text: #0a1330;
  --text-2: #34415f;
  --muted: #5b6886;
  --accent: #1a5ae8;
  --accent-2: #057f60;
  --warn: #b25c00;
  --danger: #cc2447;
  --grad-text: linear-gradient(110deg, #1a5ae8 0%, #0a8cb0 52%, #06936b 100%);
  --shadow-sm: 0 2px 10px rgba(16, 40, 100, .06);
  --shadow: 0 24px 60px -30px rgba(16, 40, 100, .3);
  --shadow-glow: 0 0 0 1px rgba(26, 90, 232, .2), 0 18px 44px -18px rgba(26, 90, 232, .38);
  --header-bg: rgba(244, 247, 254, .8);
  --grid-line: rgba(20, 45, 110, .06);
  --glow-1: rgba(47, 107, 255, .22);
  --glow-2: rgba(25, 227, 160, .2);
  --packet: #1a5ae8;
  --track: rgba(26, 90, 232, .18);
  --beam: rgba(26, 90, 232, .45);
  --ripple: rgba(26, 90, 232, .35);
  --grad-text-flow: linear-gradient(110deg, #1a5ae8 0%, #0a8cb0 28%, #06936b 50%, #0a8cb0 72%, #1a5ae8 100%);
  --cyan: #0891b2;
  --violet: #7c3aed;
  --shimmer: linear-gradient(90deg, #0891b2 0%, #0891b2 16%, #0ea5e9 28%, #38bdf8 34%, #818cf8 42%, #7c3aed 54%, #6d28d9 64%, #7c3aed 76%, #0ea5e9 90%, #0891b2 100%);
}

/* Always-dark islands (CTA band, blog and guide covers) */
.cta-band, .post-cover, .guide-cover {
  color-scheme: dark;
  --text: #eaf0ff;
  --text-2: #b8c4e0;
  --muted: #8f9cc0;
  --border: rgba(120, 156, 255, .16);
  --border-strong: rgba(120, 156, 255, .3);
  --grad-text: linear-gradient(110deg, #74a7ff 0%, #45dcf3 45%, #3ef0b5 100%);
  --grad-text-flow: linear-gradient(110deg, #74a7ff 0%, #45dcf3 28%, #3ef0b5 50%, #45dcf3 72%, #74a7ff 100%);
  --cyan: #22d3ee;
  --violet: #8b5cf6;
  --shimmer: linear-gradient(90deg, #22d3ee 0%, #22d3ee 16%, #bdf5ff 28%, #ffffff 34%, #ddd2ff 42%, #a78bfa 54%, #8b5cf6 64%, #a78bfa 76%, #67e8f9 90%, #22d3ee 100%);
  --accent: #6aa0ff;
  --accent-2: #34e6b8;
  --ripple: rgba(43, 212, 240, .55);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.14; letter-spacing: -.025em; color: var(--text); text-wrap: balance; overflow-wrap: break-word; }
:lang(de) h1, :lang(de) h2, :lang(de) h3, :lang(de) .statement-text, :lang(de) .sys-tab-txt, :lang(de) .dd-txt strong { -webkit-hyphens: auto; hyphens: auto; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
::selection { background: rgba(43, 212, 240, .3); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { display: inline-block; width: 1.2em; height: 1.2em; flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.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: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--surface-solid); border: 1px solid var(--border-strong); font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.bg-aurora {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 620px at 6% -8%, rgba(47, 107, 255, .2), transparent 62%),
    radial-gradient(760px 520px at 100% 2%, rgba(25, 227, 160, .1), transparent 62%),
    radial-gradient(1000px 700px at 50% 115%, rgba(43, 212, 240, .07), transparent 62%);
}
[data-theme="light"] .bg-aurora {
  background:
    radial-gradient(900px 620px at 6% -8%, rgba(47, 107, 255, .12), transparent 62%),
    radial-gradient(760px 520px at 100% 2%, rgba(25, 227, 160, .1), transparent 62%);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.h1 { font-size: clamp(2.3rem, 1.35rem + 3.9vw, 4.3rem); line-height: 1.05; letter-spacing: -.038em; }
.h2 { font-size: clamp(1.8rem, 1.28rem + 2.1vw, 2.9rem); letter-spacing: -.032em; }
.h3 { font-size: 1.14rem; line-height: 1.3; letter-spacing: -.015em; }
.lead { font-size: clamp(1.02rem, .96rem + .28vw, 1.14rem); line-height: 1.7; color: var(--text-2); }
.accent { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 600 .76rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); flex: none; }
.eyebrow--pill { padding: 7px 14px 7px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); letter-spacing: .1em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.eyebrow--pill::before { display: none; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); flex: none; animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 230, 184, .55); } 70% { box-shadow: 0 0 0 8px rgba(52, 230, 184, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 230, 184, 0); } }

.mini-label { margin: 24px 0 12px; font: 600 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --py: 12px; --px: 20px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--py) var(--px); border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font: 600 .95rem/1.25 var(--font-body); letter-spacing: -.005em; text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease), background-color .25s, border-color .25s, color .25s;
}
.btn .ic { width: 1.05em; height: 1.05em; }
.btn .ic-arrow { transition: transform .25s var(--ease); }
.btn:hover .ic-arrow { transform: translateX(3px); }
.btn-primary { background: var(--grad); background-size: 170% 100%; background-position: 0 0; color: var(--on-grad); box-shadow: 0 12px 30px -12px rgba(43, 212, 240, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-primary:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(43, 212, 240, .75), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--accent); background: var(--surface-hover); transform: translateY(-2px); }
.btn-lg { --py: 15px; --px: 26px; font-size: 1rem; }
.btn-sm { --py: 9px; --px: 16px; font-size: .88rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: var(--accent); }
.more .ic-arrow { transition: transform .25s var(--ease); }
a:hover .more .ic-arrow, a.more:hover .ic-arrow { transform: translateX(4px); }

.glass { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */

.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); margin-bottom: calc(var(--header-h) * -1); border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: var(--header-bg); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); transition: opacity .3s; }
.site-header.is-scrolled, body.nav-open .site-header { border-bottom-color: var(--border); }
.site-header.is-scrolled::before, body.nav-open .site-header::before { opacity: 1; }
body.nav-open .site-header::before { background: var(--bg); }
.header-inner { position: relative; height: 100%; display: flex; align-items: center; gap: 16px; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 40px; height: 40px; filter: drop-shadow(0 0 12px rgba(43, 212, 240, .35)); transition: transform .5s var(--ease); }
.brand:hover img { transform: rotate(-8deg) scale(1.05); }
.brand-name { font: 700 1.28rem/1 var(--font-display); letter-spacing: -.035em; }

.nav { margin-inline: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-item { position: relative; }
.nav-item--mega { position: static; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 9px 11px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 500 .9rem/1 var(--font-body); color: var(--text-2); white-space: nowrap; transition: color .2s, background-color .2s; }
.nav-link:hover, .nav-item.is-open > .nav-link { color: var(--text); background: var(--surface-2); }
.nav-item.is-active > .nav-link { color: var(--text); }
.nav-item.is-active > .nav-link::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 16px; height: 2px; border-radius: 2px; background: var(--grad); transform: translateX(-50%); }
.ic-chev { width: 14px; height: 14px; opacity: .7; transition: transform .25s var(--ease); }
.nav-item.is-open .ic-chev { transform: rotate(180deg); }

.dd {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 60; min-width: 330px; padding: 10px;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-solid); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .22s, transform .22s var(--ease), visibility .22s;
}
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-item.is-open > .dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dd-list { list-style: none; display: grid; gap: 2px; }
.dd--wide { min-width: 580px; }
.dd--wide .dd-list { grid-template-columns: 1fr 1fr; }
.dd-link { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; transition: background-color .2s; }
.dd-link:hover, .dd-link[aria-current] { background: var(--surface-2); }
.dd-ic { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 10px; border: 1px solid var(--border); background: var(--grad-soft); color: var(--accent); transition: .25s; }
.dd-ic .ic { width: 18px; height: 18px; }
.dd-link:hover .dd-ic { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.dd-txt { display: grid; gap: 2px; min-width: 0; }
.dd-txt strong { font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.dd-txt small { font-size: .8rem; line-height: 1.4; color: var(--muted); }

.mega { top: calc(100% - 4px); width: min(1140px, calc(100vw - 2 * var(--gutter))); padding: 20px; }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 16px; }
.mega-h { display: flex; align-items: flex-end; min-height: 42px; padding: 6px 12px 10px; font: 600 .7rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mega .dd-link { align-items: center; padding: 8px 10px; }
.mega .dd-ic { width: 32px; height: 32px; }
.mega-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--grad-soft), var(--surface-2); }
.mega-feature img { width: 52px; height: 52px; filter: drop-shadow(0 0 14px rgba(43, 212, 240, .4)); }
.mega-feature-t { font: 600 1.05rem/1.3 var(--font-display); }
.mega-feature p:not(.mega-feature-t) { font-size: .86rem; color: var(--text-2); }
.mega-feature .btn { margin-top: 6px; }
.mega-all { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.nav + .header-actions { margin-left: 0; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; font: 600 .8rem/1 var(--font-body); transition: color .2s, border-color .2s, background-color .2s; }
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.icon-btn .ic { width: 18px; height: 18px; }
.theme-btn .ic-moon { display: none; }
[data-theme="light"] .theme-btn .ic-sun { display: none; }
[data-theme="light"] .theme-btn .ic-moon { display: inline-block; }
.header-cta { white-space: nowrap; }
.menu-btn { display: none; }
.site-header.is-compact .header-cta { display: none; }
.site-header.is-collapsed .nav { display: none; }
.site-header.is-collapsed .menu-btn { display: inline-flex; }
.site-header.is-collapsed .header-cta { display: inline-flex; }
.menu-btn .ic-close { display: none; }
.menu-btn[aria-expanded="true"] .ic-menu { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: inline-block; }

.lang { position: relative; }
.lang-btn .ic-chev { width: 12px; height: 12px; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 210px; padding: 8px; list-style: none; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-solid); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; }
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang.is-open .ic-chev { transform: rotate(180deg); }
.lang-menu a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font-size: .92rem; color: var(--text-2); transition: background-color .2s, color .2s; }
.lang-menu a:hover, .lang-menu a[aria-current] { background: var(--surface-2); color: var(--text); }
.lang-menu a .ic { margin-left: auto; width: 16px; height: 16px; color: var(--accent-2); }
.lang-code { width: 30px; height: 22px; display: grid; place-items: center; flex: none; border-radius: 6px; border: 1px solid var(--border-strong); font: 700 .68rem/1 var(--font-body); letter-spacing: .06em; color: var(--muted); }
.lang-menu a[aria-current] .lang-code { background: var(--grad); color: var(--on-grad); border-color: transparent; }

.mnav { position: fixed; inset: var(--header-h) 0 0; z-index: 45; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); opacity: 0; transition: opacity .25s; }
.mnav.is-open { opacity: 1; }
.mnav-panel { min-height: 100%; display: flex; flex-direction: column; gap: 28px; padding: 12px var(--gutter) 40px; }
.mnav-list { list-style: none; }
.mnav-list > li { border-bottom: 1px solid var(--border); }
.mnav-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px; cursor: pointer; list-style: none; font: 600 1.08rem/1.25 var(--font-display); }
.mnav-link::-webkit-details-marker { display: none; }
.mnav-group[open] .ic-chev { transform: rotate(180deg); }
.mnav-sub { list-style: none; display: grid; gap: 2px; margin-bottom: 14px; }
.mnav-sub a { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; color: var(--text-2); }
.mnav-sub a:hover { background: var(--surface-2); color: var(--text); }
.mnav-sub .ic { width: 18px; height: 18px; color: var(--accent); }
.mnav-foot { margin-top: auto; display: grid; gap: 18px; }
.mnav-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.mnav-langs a { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: .85rem; font-weight: 600; color: var(--text-2); }
.mnav-langs a[aria-current] { background: var(--grad); color: var(--on-grad); border-color: transparent; }
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + clamp(36px, 6vw, 84px)) 0 clamp(56px, 8vw, 100px); }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 25%, transparent 75%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.hero-glow.g1 { width: 540px; height: 540px; left: -160px; top: -140px; background: radial-gradient(circle, var(--glow-1), transparent 65%); }
.hero-glow.g2 { width: 480px; height: 480px; right: -140px; top: 8%; background: radial-gradient(circle, var(--glow-2), transparent 65%); }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
[data-theme="light"] .hero-canvas { opacity: .6; }

.hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.hero-copy { position: relative; z-index: 1; }
.hero--v-none .hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
.hero--v-none .hero-copy { max-width: 900px; margin-inline: auto; }
.hero--v-none .crumbs ol, .hero--v-none .hero-actions { justify-content: center; }
.hero--v-none .hero-sub { margin-inline: auto; }
.hero--v-none .hero-points { align-items: center; }
.hero-sub { max-width: 640px; margin-top: 22px; font-size: clamp(1.05rem, .98rem + .36vw, 1.22rem); line-height: 1.65; color: var(--text-2); }
.hero-points { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.hero-points li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); text-align: left; }
.hero-points .ic { margin-top: 3px; color: var(--accent-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--border); }
.hero-stats li { display: grid; gap: 4px; }
.stat-v { font: 600 1.9rem/1 var(--font-display); letter-spacing: -.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-l { font-size: .86rem; color: var(--muted); }

.hero--page .h1 { font-size: clamp(2.2rem, 1.35rem + 3vw, 3.65rem); }
.hero--legal { padding-bottom: clamp(24px, 4vw, 40px); }
.hero--legal .h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); }
.hero--legal .hero-sub { font-size: 1.08rem; }

.crumbs { margin-bottom: 22px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; opacity: .5; }
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text-2); }

.hero-visual { position: relative; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev-c { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Home console */
.console-stage { position: relative; padding: 70px 0 10px; }
.console-logo { position: absolute; top: -30px; right: -20px; width: min(320px, 62%); filter: drop-shadow(0 0 40px rgba(43, 212, 240, .45)); animation: float 9s ease-in-out infinite; }
.console { position: relative; z-index: 1; max-width: 520px; padding: 18px; border-radius: var(--radius-lg); }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spinAngle { to { --angle: 360deg; } }
.console::before, .flowcard::before, .stepcard::before, .form-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--angle), rgba(106, 160, 255, .18) 0deg, rgba(106, 160, 255, .95) 55deg, rgba(52, 230, 184, .95) 105deg, rgba(106, 160, 255, .18) 165deg, rgba(106, 160, 255, .18) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinAngle 7s linear infinite;
}
.form-card::before { animation-duration: 10s; }
.console-top { display: flex; align-items: center; gap: 12px; padding: 4px 6px 16px; border-bottom: 1px solid var(--border); }
.console-dots { display: flex; gap: 6px; }
.console-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.console-title { font: 600 .92rem/1.2 var(--font-display); }
.live-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(52, 230, 184, .28); background: rgba(52, 230, 184, .1); font: 600 .7rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); white-space: nowrap; }
.console-steps { list-style: none; display: grid; gap: 8px; padding: 14px 0 8px; }
.cs { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; transition: background-color .45s, border-color .45s, opacity .45s; }
.cs-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent-2); transition: .45s; }
.cs-ic .ic { width: 18px; height: 18px; }
.cs-t { font-size: .92rem; color: var(--text-2); }
.cs-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(52, 230, 184, .1); font-size: .74rem; font-weight: 600; color: var(--accent-2); white-space: nowrap; transition: opacity .35s, transform .45s var(--ease-spring); }
.cs-badge .ic { width: 12px; height: 12px; stroke-width: 2.8; }
html.js .console .cs { opacity: .5; }
html.js .console .cs .cs-ic { color: var(--muted); }
html.js .console .cs .cs-badge { opacity: 0; transform: scale(.7); }
html.js .console .cs.is-active { opacity: 1; background: var(--surface-2); border-color: var(--border-strong); }
html.js .console .cs.is-active .cs-ic { background: var(--grad); color: var(--on-grad); border-color: transparent; box-shadow: 0 0 22px rgba(43, 212, 240, .5); }
html.js .console .cs.is-active .cs-t, html.js .console .cs.is-done .cs-t { color: var(--text); }
html.js .console .cs.is-done { opacity: 1; }
html.js .console .cs.is-done .cs-ic { color: var(--accent-2); }
html.js .console .cs.is-done .cs-badge { opacity: 1; transform: none; }
.console-foot { display: flex; align-items: center; gap: 10px; padding: 14px 8px 4px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted); }
.console-foot .ic { width: 16px; height: 16px; }
.console-bar { margin-left: auto; width: 110px; height: 6px; flex: none; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.console-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--grad); transition: width .6s var(--ease); }

/* Workflow card (service & industry heroes) */
.flowcard { position: relative; max-width: 470px; margin-left: auto; padding: 20px; border-radius: var(--radius-lg); }
.fc-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.fc-ic { width: 50px; height: 50px; display: grid; place-items: center; flex: none; border-radius: 15px; background: var(--grad); color: var(--on-grad); box-shadow: 0 10px 30px -8px rgba(43, 212, 240, .6); }
.fc-ic .ic { width: 24px; height: 24px; }
.fc-titles { min-width: 0; }
.fc-label { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fc-title { margin-top: 4px; font: 600 1.05rem/1.25 var(--font-display); }
.fc-steps { position: relative; list-style: none; display: grid; gap: 4px; padding-top: 14px; }
.fc-steps::before { content: ""; position: absolute; left: 21px; top: 34px; bottom: 20px; width: 2px; background: linear-gradient(var(--accent), var(--accent-2)); opacity: .3; }
.fc-steps::after { content: ""; position: absolute; left: 21px; top: 34px; width: 2px; height: var(--fill, 0px); border-radius: 2px; background: linear-gradient(var(--accent), var(--accent-2)); box-shadow: 0 0 12px rgba(43, 212, 240, .8); transition: height .8s var(--ease); }
.fc-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; gap: 8px; padding: 7px 10px 7px 0; border-radius: 12px; transition: background-color .4s; }
.fc-num { position: relative; z-index: 1; width: 28px; height: 28px; margin-left: 8px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-solid); font: 600 .68rem/1 var(--font-display); color: var(--muted); transition: .4s; }
.fc-text { font-size: .93rem; color: var(--text-2); transition: color .4s; }
.fc-check { color: var(--accent-2); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--ease-spring); }
.fc-check .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.fc-step.is-active { background: var(--surface-2); }
.fc-step.is-active .fc-num { background: var(--grad); color: var(--on-grad); border-color: transparent; box-shadow: 0 0 16px rgba(43, 212, 240, .6); }
.fc-step.is-done .fc-num { border-color: var(--accent-2); color: var(--accent-2); }
.fc-step.is-active .fc-text, .fc-step.is-done .fc-text { color: var(--text); }
.fc-step.is-done .fc-check { opacity: 1; transform: none; }

/* Orbit (landing-page heroes) */
.orbit { --size: min(500px, 86vw); --r: calc(var(--size) / 2 - 30px); position: relative; width: var(--size); aspect-ratio: 1; margin-inline: auto; }
.orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--border-strong); }
.orbit-ring.r2 { inset: 16%; border-style: solid; border-color: var(--border); }
.orbit-ring.r3 { inset: 28%; border: 0; background: radial-gradient(circle, rgba(43, 212, 240, .2), transparent 70%); }
.orbit-core { position: absolute; inset: 29%; display: grid; place-items: center; }
.orbit-core img { width: 100%; filter: drop-shadow(0 0 32px rgba(43, 212, 240, .5)); animation: float 9s ease-in-out infinite; }
.orbit-items { position: absolute; inset: 0; list-style: none; animation: spin 90s linear infinite; }
.orbit-items li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.orbit-item { position: absolute; left: 0; top: 0; display: grid; place-items: center; gap: 6px; width: 56px; height: 56px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--accent); box-shadow: var(--shadow-sm); animation: spin-rev-c 90s linear infinite; transition: color .3s; }
.orbit-item .ic { width: 24px; height: 24px; }
.orbit-item:hover { color: var(--accent-2); }
.orbit--labeled .orbit-item { width: auto; height: auto; padding: 14px 18px; border-radius: 18px; }
.orbit-label { font: 600 .9rem/1 var(--font-display); color: var(--text); white-space: nowrap; }

/* Step card (process step heroes) */
.stepcard { position: relative; max-width: 470px; margin-left: auto; padding: 12px; border-radius: var(--radius-lg); }
.stepcard-list { list-style: none; display: grid; gap: 6px; }
.stepcard-list a { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px; border: 1px solid transparent; border-radius: 16px; opacity: .72; transition: opacity .25s, background-color .25s, border-color .25s; }
.stepcard-list a:hover { opacity: 1; background: var(--surface-2); }
.stepcard-list .is-current a { opacity: 1; background: var(--surface-2); border-color: var(--border-strong); box-shadow: var(--shadow-glow); }
.sc-num { font: 600 .8rem/1 var(--font-display); color: var(--muted); }
.sc-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent); }
.is-current .sc-ic { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.sc-txt { display: grid; gap: 3px; }
.sc-txt strong { font: 600 1rem/1.25 var(--font-display); }
.sc-txt small { font-size: .84rem; line-height: 1.45; color: var(--muted); }

/* Logo stage (about) */
.logo-stage { position: relative; width: min(460px, 80vw); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.ls-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--border); }
.ls-ring.r1 { border-style: dashed; border-color: var(--border-strong); animation: spin 70s linear infinite; }
.ls-ring.r2 { inset: 11%; background: radial-gradient(circle, rgba(43, 212, 240, .18), transparent 70%); }
.ls-ring.r3 { inset: 23%; border-color: var(--border-strong); }
.logo-stage img { position: relative; width: 70%; filter: drop-shadow(0 0 50px rgba(43, 212, 240, .45)); animation: float 9s ease-in-out infinite; }

/* 404 */
.hero--404 { min-height: 88vh; display: grid; align-items: center; }
.nf-code { font: 700 clamp(6rem, 4rem + 10vw, 11rem)/1 var(--font-display); letter-spacing: -.06em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }
.nf-links-t { margin-top: 44px; }
.nf-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nf-links a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .9rem; color: var(--text-2); }
.nf-links a:hover { color: var(--text); border-color: var(--border-strong); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { position: relative; padding-block: clamp(60px, 8vw, 108px); }
.sec-head { max-width: 780px; margin-bottom: clamp(34px, 5vw, 54px); }
.sec-head .lead { margin-top: 16px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.systems-sec, .results-sec, .catalog-sec, .included-sec, .tools-sec, .faq-sec { background: linear-gradient(180deg, transparent, var(--band) 18%, var(--band) 82%, transparent); }

/* Value strip */
.strip { padding-block: 22px; border-block: 1px solid var(--border); background: linear-gradient(90deg, transparent, var(--surface), transparent); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.strip-list { list-style: none; display: flex; flex: none; gap: 56px; padding-right: 56px; }
.strip-list li { display: inline-flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; font: 600 .95rem/1.2 var(--font-display); color: var(--text-2); }
.strip-list .ic { width: 20px; height: 20px; color: var(--accent-2); }

/* Problem */
.problem-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.problem-copy .lead { margin-top: 18px; }
.problem-outro { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--grad-soft); font-weight: 500; }
.problem-outro .ic { margin-top: 2px; color: var(--accent-2); }
.tasks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.task { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); transition: border-color .5s, background-color .5s; }
.task-name { font-size: .95rem; font-weight: 500; line-height: 1.4; }
.task-state { display: grid; justify-items: start; }
.st { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; transition: opacity .45s, transform .45s var(--ease); }
.st .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.st-manual { opacity: 0; color: var(--warn); border: 1px solid rgba(255, 184, 107, .3); background: rgba(255, 184, 107, .1); }
.st-auto { color: var(--accent-2); border: 1px solid rgba(52, 230, 184, .3); background: rgba(52, 230, 184, .1); }
html.js .task .st-manual { opacity: 1; }
html.js .task .st-auto { opacity: 0; transform: translateY(8px); }
html.js .task.is-auto .st-manual { opacity: 0; transform: translateY(-8px); }
html.js .task.is-auto .st-auto { opacity: 1; transform: none; }
html.js .task.is-auto { border-color: rgba(52, 230, 184, .3); }

/* Card glow (follows the pointer) */
.svc-card, .ind-card, .card, .link-card, .guide, .case { position: relative; isolation: isolate; overflow: hidden; }
.svc-card::before, .ind-card::before, .card::before, .link-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .35s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(43, 212, 240, .13), transparent 62%);
}
.svc-card:hover::before, .ind-card:hover::before, .card:hover::before, .link-card:hover::before { opacity: 1; }

.icon-tile, .svc-ic, .ind-ic, .card-ic, .link-ic, .result-ic, .inc-ic, .cat-ic, .tool-tab-ic, .info-ic, .hub-ic {
  display: grid; place-items: center; flex: none; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--grad-soft); color: var(--accent); transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}

/* Services */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.svc-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.svc-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.svc-ic { width: 48px; height: 48px; margin-bottom: 4px; }
.svc-ic .ic, .ind-ic .ic, .card-ic .ic, .link-ic .ic { width: 24px; height: 24px; }
.svc-card:hover .svc-ic, .ind-card:hover .ind-ic, .link-card:hover .link-ic { background: var(--grad); color: var(--on-grad); border-color: transparent; box-shadow: 0 10px 26px -8px rgba(43, 212, 240, .6); }
.svc-card p { font-size: .93rem; line-height: 1.6; color: var(--text-2); }
.svc-card .more { margin-top: auto; padding-top: 4px; }
.svc-group + .svc-group { margin-top: 44px; }
.svc-group-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.svc-group-num { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border-strong); font: 600 .82rem/1 var(--font-display); color: var(--accent-2); }
.svc-group-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }

/* Systems (tabs) */
.systems { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 20px; align-items: start; }
.sys-tabs { display: grid; gap: 8px; }
.sys-tab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; text-align: left; transition: border-color .25s, background-color .25s, color .25s, box-shadow .25s; }
.sys-tab:hover { border-color: var(--border-strong); color: var(--text); }
.sys-tab[aria-selected="true"] { border-color: var(--accent); background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-glow); }
.sys-tab-ic { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent); transition: .25s; }
.sys-tab-ic .ic { width: 20px; height: 20px; }
.sys-tab[aria-selected="true"] .sys-tab-ic { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.sys-tab-txt { display: grid; gap: 4px; font: 600 1rem/1.25 var(--font-display); }
.sys-tab-txt small { font: 600 .68rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sys-tab-arrow { margin-left: auto; width: 18px; height: 18px; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: .25s; }
.sys-tab[aria-selected="true"] .sys-tab-arrow { opacity: 1; transform: none; }
.sys-panel { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--surface); }
.sys-panel::after { content: ""; position: absolute; right: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 212, 240, .14), transparent 70%); pointer-events: none; }
.sys-panel + .sys-panel { margin-top: 16px; }
.sys-panel-head { display: flex; align-items: center; gap: 18px; }
.sys-panel-head .eyebrow { margin-bottom: 6px; }
.sys-big-ic { width: 64px; height: 64px; display: grid; place-items: center; flex: none; border-radius: 18px; background: var(--grad); color: var(--on-grad); box-shadow: 0 14px 34px -10px rgba(43, 212, 240, .6); }
.sys-big-ic .ic { width: 30px; height: 30px; }
.sys-name { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); }
.sys-text { margin-top: 18px; font-size: 1.05rem; color: var(--text-2); }
.sys-pipeline { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
.sys-pipeline li { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); font-size: .92rem; font-weight: 500; animation: fadeUp .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.sp-n { font: 600 .72rem/1 var(--font-display); color: var(--accent-2); }

/* Industries */
.ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ind-card { display: flex; flex-direction: column; gap: 10px; min-height: 214px; padding: 24px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.ind-card::after { content: ""; position: absolute; right: -50px; bottom: -50px; z-index: -1; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 212, 240, .16), transparent 70%); transition: transform .5s var(--ease); }
.ind-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.ind-card:hover::after { transform: scale(1.6); }
.ind-ic { width: 48px; height: 48px; margin-bottom: 6px; }
.ind-card p { font-size: .92rem; color: var(--text-2); }
.ind-arrow { position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); color: var(--muted); transition: .35s var(--ease); }
.ind-arrow .ic { width: 16px; height: 16px; }
.ind-card:hover .ind-arrow { background: var(--grad); color: var(--on-grad); border-color: transparent; transform: rotate(45deg); }
.ind-card--cta { border-color: var(--border-strong); background: var(--grad-soft), var(--surface); }

/* Process */
.process { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.proc-step a { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 24px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.proc-step a:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.proc-step:not(:last-child) a::after { content: ""; position: absolute; right: -14px; top: 50px; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px rgba(43, 212, 240, .7); }
.proc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.proc-num { font: 700 2.5rem/1 var(--font-display); letter-spacing: -.05em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proc-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--accent); transition: .3s; }
.proc-step a:hover .proc-ic { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.proc-step p { font-size: .93rem; color: var(--text-2); }
.proc-step .more { margin-top: auto; padding-top: 4px; }
.process--detailed .proc-step p { font-size: .98rem; }

/* Results */
.results { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.result { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; min-height: 176px; padding: 22px 22px 56px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.result:first-child { grid-column: span 2; background: var(--grad-soft), var(--surface); border-color: var(--border-strong); }
.result:first-child .result-t { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.result-ic { width: 44px; height: 44px; border-radius: 12px; color: var(--accent-2); }
.result-t { font: 600 1.05rem/1.35 var(--font-display); }
.spark { position: absolute; left: 0; bottom: 0; width: 100%; height: 50px; fill: none; stroke: var(--accent-2); stroke-width: 2; opacity: .55; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; }
.spark path { vector-effect: non-scaling-stroke; }
html:not(.js) .spark, .result.in .spark { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease) .2s; }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-side { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-side .sec-head { margin-bottom: 26px; }
.faq-list { display: grid; gap: 10px; }
.faq-item { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); transition: border-color .3s, background-color .3s; }
.faq-item[open] { border-color: var(--border-strong); background: var(--surface-2); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font: 600 1.02rem/1.4 var(--font-display); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); transition: background .3s, border-color .3s, color .3s; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-toggle { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(0); }
.faq-a { overflow: hidden; color: var(--text-2); }
.faq-a > p { padding: 0 22px 22px; }
.faq-a a { color: var(--accent); text-decoration: underline; }

/* CTA band */
.cta-sec { padding-block: clamp(44px, 6vw, 88px); }
.cta-band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(48px, 7vw, 90px) clamp(20px, 5vw, 64px); border-radius: var(--radius-xl); border: 1px solid var(--border-strong); background: linear-gradient(160deg, #0d1d45 0%, #060f2a 60%, #041425 100%); text-align: center; color: var(--text); }
.cta-glow { position: absolute; inset: -45%; z-index: -1; background: conic-gradient(from 180deg, rgba(47, 107, 255, .42), rgba(43, 212, 240, .28), rgba(25, 227, 160, .34), rgba(47, 107, 255, .42)); filter: blur(70px); opacity: .5; animation: spin 26s linear infinite; }
.cta-grid-bg { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(140, 170, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 170, 255, .08) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); }
.cta-logo { width: 84px; margin: 0 auto 24px; filter: drop-shadow(0 0 26px rgba(43, 212, 240, .6)); animation: float 8s ease-in-out infinite; }
.cta-band .h2 { max-width: 840px; margin-inline: auto; }
.cta-band .lead { max-width: 640px; margin: 18px auto 0; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* Checklist & chips */
.checklist { list-style: none; display: grid; gap: 12px; }
.checklist.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checklist.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.checklist.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.check-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-weight: 500; line-height: 1.4; transition: border-color .25s, transform .25s var(--ease); }
.check-item:hover { border-color: var(--border-strong); transform: translateX(3px); }
.check-ic { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 9px; background: var(--grad); color: var(--on-grad); }
.check-ic .ic { width: 16px; height: 16px; stroke-width: 2.8; }
.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 920px; margin-inline: auto; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-weight: 500; transition: transform .25s var(--ease), border-color .25s; }
.chip:hover { transform: translateY(-2px); border-color: var(--accent); }
.chip .ic { width: 16px; height: 16px; stroke-width: 2.6; color: var(--accent-2); }

/* Flow */
.flow { position: relative; list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; }
.flow::before { content: ""; position: absolute; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); top: 27px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 16px); opacity: .55; animation: dash 1.1s linear infinite; }
@keyframes dash { to { background-position: 16px 0; } }
.flow-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.flow-node { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-solid); box-shadow: 0 0 0 6px var(--bg); transition: background .4s, border-color .4s, box-shadow .4s; }
.flow-num { font: 700 .95rem/1 var(--font-display); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flow-step.is-lit .flow-node { background: var(--grad); border-color: transparent; box-shadow: 0 0 0 6px var(--bg), 0 0 26px rgba(43, 212, 240, .6); }
.flow-step.is-lit .flow-num { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--on-grad); }
.flow-t { font: 600 1rem/1.35 var(--font-display); }
.flow-d { margin-top: 8px; font-size: .9rem; color: var(--text-2); }
.flow--detailed .flow-body { height: 100%; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }

/* Cards */
.cards { display: grid; gap: 16px; }
.cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); transition: transform .35s var(--ease), border-color .35s; }
.card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.card p { font-size: .95rem; color: var(--text-2); }
.card-ic { width: 48px; height: 48px; margin-bottom: 4px; }
.card-num { font: 700 2rem/1 var(--font-display); letter-spacing: -.04em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cards.cols-2 .card { padding: clamp(26px, 3vw, 36px); }
.cards.cols-2 .card p { font-size: 1rem; }

/* Callout */
.callout { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: clamp(20px, 4vw, 40px); padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-xl); border: 1px solid var(--border-strong); background: var(--grad-soft), var(--surface); }
.callout::after { content: ""; position: absolute; right: -140px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 212, 240, .16), transparent 70%); pointer-events: none; }
.callout-ic { width: 64px; height: 64px; display: grid; place-items: center; flex: none; border-radius: 18px; background: var(--grad); color: var(--on-grad); box-shadow: 0 14px 34px -10px rgba(43, 212, 240, .6); }
.callout-ic .ic { width: 30px; height: 30px; }
.callout-body { position: relative; z-index: 1; }
.callout-title { font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.45rem); }
.callout .lead { max-width: 780px; margin-top: 14px; }
.callout-points { list-style: none; display: grid; gap: 10px; margin-top: 22px; }
.callout-points li { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.callout-points .ic { margin-top: 3px; color: var(--accent-2); }
.callout .btn { margin-top: 26px; }

/* Compare */
.compare { max-width: 1040px; margin-inline: auto; }
.compare + .compare { margin-top: 44px; }
.compare-label { margin-bottom: 18px; text-align: center; font-size: 1.3rem; }
.compare-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; }
.compare-col { padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.compare-col.after { border-color: rgba(52, 230, 184, .35); background: linear-gradient(160deg, rgba(52, 230, 184, .08), transparent 60%), var(--surface); box-shadow: var(--shadow-glow); }
.compare-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font: 600 .76rem/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.before .compare-tag { color: var(--danger); }
.after .compare-tag { color: var(--accent-2); }
.chain { list-style: none; display: grid; }
.chain li { position: relative; padding: 11px 12px 11px 40px; font-weight: 500; }
.chain li::before { content: ""; position: absolute; left: 13px; top: 50%; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; transform: translateY(-50%); }
.chain li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: calc(50% + 8px); width: 2px; height: calc(100% - 16px); background: var(--border-strong); }
.before .chain li { color: var(--text-2); }
.before .chain li::before { color: var(--muted); }
.after .chain li::before { color: var(--accent-2); background: var(--accent-2); }
.after .chain li:not(:last-child)::after { background: linear-gradient(var(--accent-2), var(--accent)); }
.compare-mid { display: grid; place-items: center; }
.compare-mid .ic { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--grad); color: var(--on-grad); box-shadow: 0 0 24px rgba(43, 212, 240, .5); }

/* Hub (integrations) */
.hub { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; max-width: 1060px; margin-inline: auto; }
.hub-col { position: relative; list-style: none; display: grid; gap: 12px; }
.hub-l { padding-right: 56px; }
.hub-r { padding-left: 56px; }
.hub-col::after { content: ""; position: absolute; top: 25px; bottom: 25px; width: 2px; background: linear-gradient(180deg, transparent, var(--packet), transparent) no-repeat, var(--track); background-size: 2px 40px, auto; animation: packetDown 3.2s linear infinite; }
.hub-l::after { right: 28px; }
.hub-r::after { left: 28px; }
.hub-col::before { content: ""; position: absolute; top: 50%; width: 28px; height: 2px; background: linear-gradient(90deg, transparent, var(--packet), transparent) no-repeat, var(--track); background-size: 14px 2px, auto; animation: packetRight 1.6s linear infinite; }
.hub-r::before { animation-name: packetLeft; }
.hub-l::before { right: 0; }
.hub-r::before { left: 0; }
.hub-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-weight: 500; transition: border-color .25s; }
.hub-item:hover { border-color: var(--accent); }
.hub-l .hub-item { flex-direction: row-reverse; text-align: right; }
.hub-item::after { content: ""; position: absolute; top: 50%; width: 28px; height: 2px; background: linear-gradient(90deg, transparent, var(--packet), transparent) no-repeat, var(--track); background-size: 14px 2px, auto; animation: packetRight 2.4s linear infinite; animation-delay: calc(var(--i, 0) * -.43s); }
.hub-r .hub-item::after { animation-name: packetLeft; }
@keyframes packetRight { from { background-position: -14px 0, 0 0; } to { background-position: calc(100% + 14px) 0, 0 0; } }
@keyframes packetLeft { from { background-position: calc(100% + 14px) 0, 0 0; } to { background-position: -14px 0, 0 0; } }
@keyframes packetDown { from { background-position: 0 -40px, 0 0; } to { background-position: 0 calc(100% + 40px), 0 0; } }
.hub-l .hub-item::after { right: -29px; }
.hub-r .hub-item::after { left: -29px; }
.hub-ic { width: 34px; height: 34px; border-radius: 10px; }
.hub-ic .ic { width: 18px; height: 18px; }
.hub-core { position: relative; width: 210px; height: 210px; display: grid; place-items: center; }
.hub-core img { position: relative; width: 130px; filter: drop-shadow(0 0 30px rgba(43, 212, 240, .5)); animation: float 9s ease-in-out infinite; }
.hub-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--border-strong); animation: spin 50s linear infinite; }
.hub-ring.r2 { inset: 24px; border: 1px solid var(--border); background: radial-gradient(circle, rgba(43, 212, 240, .16), transparent 70%); animation: none; }

/* Loop */
.loop-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.loop-copy .sec-head { margin-bottom: 0; }
.loop { position: relative; width: min(440px, 84vw); aspect-ratio: 1; margin-inline: auto; }
.loop-ring { position: absolute; inset: 13%; border-radius: 50%; border: 2px dashed var(--border-strong); }
.loop-arc { position: absolute; inset: 13%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 62%, var(--accent) 84%, var(--accent-2) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 5s linear infinite; }
.loop-core { position: absolute; inset: 35%; display: grid; place-items: center; }
.loop-core img { width: 100%; filter: drop-shadow(0 0 24px rgba(43, 212, 240, .5)); }
.loop-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translate(-50%, -50%); font: 600 .95rem/1.2 var(--font-display); text-align: center; }
.loop-node.n0 { left: 50%; top: 13%; }
.loop-node.n1 { left: 87%; top: 50%; }
.loop-node.n2 { left: 50%; top: 87%; }
.loop-node.n3 { left: 13%; top: 50%; }
.loop-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--accent); box-shadow: var(--shadow-sm); }
.loop-ic .ic { width: 24px; height: 24px; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.plan-top { display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 26px; border-bottom: 1px solid var(--border); }
.plan-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--grad); color: var(--on-grad); font: 700 .7rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.plan-badge .ic { width: 13px; height: 13px; }
.plan-badge--muted { background: var(--surface-2); color: var(--accent-2); border: 1px solid var(--border-strong); }
.plan-name { font: 600 1.25rem/1.25 var(--font-display); }
.plan-desc { min-height: 3.2em; font-size: .94rem; color: var(--text-2); }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 4px 0 8px; }
.plan-price .amount { font: 700 clamp(1.65rem, 1.3rem + 1.1vw, 2.1rem)/1.1 var(--font-display); letter-spacing: -.03em; }
.plan-price .unit { font-size: .92rem; color: var(--muted); }
.plan-body { flex: 1; display: flex; flex-direction: column; padding: 24px 28px 30px; }
.plan-body > .mini-label:first-child { margin-top: 0; }
.plan-features { list-style: none; display: grid; gap: 11px; }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: .94rem; color: var(--text-2); }
.plan-features .ic { width: 16px; height: 16px; margin-top: 3px; stroke-width: 2.6; color: var(--accent-2); }
.plan-best { margin-top: auto; padding-top: 24px; }
.plan-best p:last-child { font-size: .9rem; color: var(--text-2); }
.plans .plan-top { padding-top: 62px; }
.plans .plan-badge { position: absolute; top: 22px; left: 28px; }
.plan--featured { border: 1.5px solid transparent; background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, conic-gradient(from var(--angle), #4d8bff, #2bd4f0, #2ee6a8, #2bd4f0, #4d8bff) border-box; box-shadow: var(--shadow-glow); animation: spinAngle 6s linear infinite; }
.plan--wide { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin-top: 18px; }
.plan--wide .plan-top { border-bottom: 0; border-right: 1px solid var(--border); justify-content: center; }
.plan--wide .plan-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plans-note { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px; padding: 20px 24px; border-radius: var(--radius); border: 1px dashed var(--border-strong); }
.plans-note > .ic { width: 24px; height: 24px; color: var(--accent); }
.plans-note p { flex: 1; min-width: 220px; font-weight: 500; }

/* Service catalog */
.catalog-wrap { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.catalog { width: 100%; border-collapse: collapse; }
.catalog thead th { padding: 18px 22px; border-bottom: 1px solid var(--border); background: var(--surface-2); text-align: left; font: 600 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.catalog tbody th, .catalog td { padding: 18px 22px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; font-weight: 400; }
.catalog tbody tr:last-child > * { border-bottom: 0; }
.catalog tbody tr { transition: background-color .2s; }
.catalog tbody tr:hover { background: var(--surface-2); }
.cat-name { display: flex; align-items: center; gap: 14px; min-width: 220px; font: 600 1rem/1.3 var(--font-display); transition: color .2s; }
.cat-name:hover { color: var(--accent); }
.cat-ic { width: 42px; height: 42px; border-radius: 12px; }
.cat-ic .ic { width: 20px; height: 20px; }
.cat-txt { display: grid; gap: 4px; }
.cat-txt small { font: 600 .68rem/1 var(--font-body); letter-spacing: .08em; color: var(--muted); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); font-size: .82rem; color: var(--text-2); }
.cat-out { min-width: 210px; }
.cat-out span { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; }
.cat-out .ic { color: var(--accent-2); }

/* Statement */
.statement { max-width: 980px; margin-inline: auto; text-align: center; }
.statement-ic { width: 60px; height: 60px; display: grid; place-items: center; margin: 0 auto 22px; border-radius: 18px; background: var(--grad); color: var(--on-grad); box-shadow: 0 14px 34px -10px rgba(43, 212, 240, .6); }
.statement-ic .ic { width: 28px; height: 28px; }
.statement-text { font: 600 clamp(1.55rem, 1.05rem + 2.2vw, 2.7rem)/1.28 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.statement .lead { max-width: 740px; margin: 24px auto 0; }
.statement-sec + .statement-sec::before { content: ""; position: absolute; top: 0; left: 50%; width: min(420px, 60%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-side .lead { margin-top: 12px; }
.promise { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--grad-soft); font-weight: 500; }
.promise .ic { margin-top: 2px; color: var(--accent-2); }
.next-steps { list-style: none; display: grid; gap: 10px; }
.next-steps li { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.ns-n { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); font: 600 .82rem/1 var(--font-display); color: var(--accent-2); }
.info-rows { display: grid; gap: 10px; }
.info-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); font-weight: 600; transition: border-color .25s; }
.info-row:hover { border-color: var(--accent); }
.info-row small { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); }
.info-ic { width: 42px; height: 42px; border-radius: 12px; }
.form-card { position: relative; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-xl); }
.form-intro { margin: 8px 0 26px; color: var(--text-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.span-2 { grid-column: span 2; }
.field label, .field legend { padding: 0; font-size: .9rem; font-weight: 600; }
.opt { font-size: .82rem; font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text); transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .85; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(106, 160, 255, .18); }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field-error { font-size: .82rem; color: var(--danger); }
.field-error:empty { display: none; }
.select-wrap { position: relative; }
.select-wrap select { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer; }
.select-wrap .ic { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
select option { background: var(--surface-solid); color: var(--text); }
.rchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rchip { position: relative; cursor: pointer; }
.rchip input { position: absolute; opacity: 0; pointer-events: none; }
.rchip span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--input-bg); font-size: .9rem; font-weight: 500; transition: .2s; }
.rchip:hover span { border-color: var(--accent); }
.rchip input:checked + span { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.rchip input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 18px; font-size: .84rem; color: var(--muted); }
.form-note .ic { margin-top: 2px; }
.form-note a { color: var(--accent); text-decoration: underline; }
.form-status { margin-top: 16px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface-2); animation: fadeUp .4s var(--ease); }
.form-status.is-success { border-color: rgba(52, 230, 184, .45); }
.form-status.is-error { border-color: var(--danger); }
.form-status strong { display: block; margin-bottom: 4px; font-family: var(--font-display); }
.form-status p { font-size: .92rem; color: var(--text-2); }

/* Legal & prose */
.legal-sec { padding-top: 20px; }
.legal-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 20px); }
.toc-card { max-height: calc(100vh - var(--header-h) - 60px); overflow: auto; padding: 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.toc-card .mini-label { margin-top: 0; }
.toc-card ol { list-style: none; display: grid; gap: 2px; }
.toc-card a { display: flex; gap: 8px; padding: 7px 10px; border-left: 2px solid transparent; border-radius: 8px; font-size: .88rem; line-height: 1.4; color: var(--text-2); transition: .2s; }
.toc-card a span { min-width: 22px; color: var(--muted); }
.toc-card a:hover { color: var(--text); background: var(--surface-2); }
.toc-card a.is-active { color: var(--text); background: var(--surface-2); border-left-color: var(--accent-2); }
.prose { max-width: 780px; font-size: 1.02rem; color: var(--text-2); }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 16px; }
.prose h2 { margin: 46px 0 16px; font-size: 1.45rem; }
.prose h3 { margin: 26px 0 12px; font-size: 1.12rem; }
.prose ul, .prose ol { list-style: none; display: grid; gap: 9px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.prose ol { counter-reset: li; }
.prose ol li { position: relative; padding-left: 40px; counter-increment: li; }
.prose ol li::before { content: counter(li); position: absolute; left: 0; top: 0; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); font: 600 .78rem/1 var(--font-display); color: var(--accent-2); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 600; color: var(--text); }
.prose blockquote { padding: 16px 20px; border-left: 3px solid var(--accent-2); border-radius: 0 12px 12px 0; background: var(--surface); color: var(--text); }
.legal-block h2 { scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-num { margin-right: 2px; color: var(--accent-2); }
.updated { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px !important; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .85rem; color: var(--muted); }
.updated .ic { width: 16px; height: 16px; }
.legal-intro { font-size: 1.1rem; color: var(--text); }

/* Links grid */
.links-grid { display: grid; gap: 16px; }
.links-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.links-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.links-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.link-card { display: flex; flex-direction: column; gap: 12px; min-height: 240px; padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.link-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.link-ic { width: 52px; height: 52px; margin-bottom: 6px; }
.link-card p { color: var(--text-2); }
.link-card .more { margin-top: auto; }

/* Timeline */
.tl-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.tl-side { position: sticky; top: calc(var(--header-h) + 24px); }
.timeline { position: relative; list-style: none; display: grid; gap: 14px; }
.timeline::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--border-strong); }
.timeline::after { content: ""; position: absolute; left: 27px; top: 28px; width: 2px; height: calc((100% - 56px) * var(--tl, 0)); border-radius: 2px; background: linear-gradient(var(--accent), var(--accent-2)); box-shadow: 0 0 12px rgba(43, 212, 240, .6); }
html:not(.js) .timeline { --tl: 1; }
.tl-item { display: flex; align-items: flex-start; gap: 20px; }
.tl-dot { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-solid); font: 700 .95rem/1 var(--font-display); color: var(--accent-2); transition: background .4s, color .4s, border-color .4s, box-shadow .4s, transform .4s var(--ease-spring); }
.tl-item.is-passed .tl-dot { background: var(--grad); color: var(--on-grad); border-color: transparent; box-shadow: 0 0 22px rgba(43, 212, 240, .5); transform: scale(1.06); }
.tl-body { flex: 1; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.tl-body p { margin-top: 4px; color: var(--text-2); }

/* Guides */
.guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide { display: flex; flex-direction: column; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.guide:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.guide-cover { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 25% 20%, rgba(47, 107, 255, .55), transparent 58%), radial-gradient(circle at 85% 90%, rgba(25, 227, 160, .42), transparent 55%), #081330; }
.guide-cover.gc-1 { background: radial-gradient(circle at 80% 15%, rgba(43, 212, 240, .5), transparent 58%), radial-gradient(circle at 15% 90%, rgba(47, 107, 255, .5), transparent 55%), #081330; }
.guide-cover.gc-2 { background: radial-gradient(circle at 50% 0%, rgba(25, 227, 160, .45), transparent 60%), radial-gradient(circle at 10% 80%, rgba(47, 107, 255, .45), transparent 55%), #081330; }
.guide-cover::before, .post-cover-grid { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 28px 28px; }
.guide-ic, .post-cover-ic { position: relative; display: grid; place-items: center; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .5s var(--ease); }
.guide-ic { width: 66px; height: 66px; }
.guide-ic .ic { width: 30px; height: 30px; }
.guide:hover .guide-ic { transform: scale(1.08) rotate(-4deg); }
.guide-tag { position: absolute; left: 16px; top: 16px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(3, 8, 23, .5); font: 600 .68rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.guide-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.guide-body > p { color: var(--text-2); }
.guide-body .mini-label { margin: 10px 0 4px; }
.guide-body .btn { align-self: flex-start; margin-top: auto; }
.mini-check { list-style: none; display: grid; gap: 8px; margin-bottom: 18px; }
.mini-check li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--text-2); }
.mini-check .ic { width: 16px; height: 16px; margin-top: 3px; stroke-width: 2.6; color: var(--accent-2); }

/* Cases */
.notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 28px; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); font-size: .93rem; color: var(--text-2); }
.notice .ic { margin-top: 2px; color: var(--accent); }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.case { display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.badge { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 184, 107, .32); background: rgba(255, 184, 107, .1); font: 600 .68rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--warn); }
.case-ind { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); font-size: .8rem; font-weight: 600; color: var(--accent); }
.case-ind .ic { width: 14px; height: 14px; }
.case-body { display: grid; gap: 14px; margin: 0; }
.case-row dt { margin-bottom: 6px; font: 600 .7rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.case-row dd { margin: 0; font-size: .93rem; color: var(--text-2); }
.case-results { padding: 16px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--grad-soft); }
.case-results .mini-label { margin-top: 0; }
.case-results .mini-check { margin: 0; }
.case .more { margin-top: auto; }

/* Included */
.included { display: grid; gap: 18px; }
.included.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inc-card { display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.inc-head { display: flex; align-items: center; gap: 14px; }
.inc-ic { width: 48px; height: 48px; }
.inc-ic .ic { width: 22px; height: 22px; }
.inc-out { display: grid; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.inc-out .mini-label { margin: 0; }
.inc-out strong { display: inline-flex; align-items: center; gap: 8px; font: 600 1.05rem/1.3 var(--font-display); }
.inc-out .ic { color: var(--accent-2); }

/* Step navigation */
.stepnav-sec { padding-block: 16px 48px; }
.stepnav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.stepnav-link { display: grid; gap: 4px; padding: 10px 14px; border-radius: 14px; transition: background-color .2s; }
.stepnav-link:hover { background: var(--surface-2); }
.stepnav-link.next { justify-items: end; text-align: right; }
.sn-label { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sn-label .ic { width: 15px; height: 15px; }
.sn-name { font: 600 1.05rem/1.25 var(--font-display); }
.stepnav-dots { list-style: none; display: flex; gap: 6px; }
.stepnav-dots a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: .85rem; font-weight: 600; color: var(--text-2); transition: .2s; }
.stepnav-dots a:hover { border-color: var(--border-strong); color: var(--text); }
.stepnav-dots a span { font-size: .72rem; color: var(--muted); }
.stepnav-dots a.is-current { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.stepnav-dots a.is-current span { color: inherit; opacity: .7; }

/* Blog */
.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 36px; }
.filter { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; font: 500 .88rem/1.2 var(--font-body); transition: .2s; }
.filter:hover { border-color: var(--border-strong); color: var(--text); }
.filter.is-active { background: var(--grad); color: var(--on-grad); border-color: transparent; font-weight: 600; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.post-card a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.post-card a:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.post-cover { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: #071230; }
.pc-0 { background: radial-gradient(circle at 20% 20%, rgba(47, 107, 255, .62), transparent 55%), radial-gradient(circle at 85% 85%, rgba(25, 227, 160, .45), transparent 55%), #071230; }
.pc-1 { background: radial-gradient(circle at 80% 20%, rgba(43, 212, 240, .55), transparent 55%), radial-gradient(circle at 15% 90%, rgba(47, 107, 255, .55), transparent 55%), #071230; }
.pc-2 { background: radial-gradient(circle at 50% 0%, rgba(25, 227, 160, .5), transparent 60%), radial-gradient(circle at 90% 90%, rgba(47, 107, 255, .5), transparent 55%), #071230; }
.pc-3 { background: radial-gradient(circle at 10% 90%, rgba(43, 212, 240, .5), transparent 55%), radial-gradient(circle at 90% 10%, rgba(25, 227, 160, .45), transparent 55%), #071230; }
.post-cover-ic { width: 76px; height: 76px; }
.post-cover-ic .ic { width: 34px; height: 34px; }
.post-card a:hover .post-cover-ic { transform: scale(1.08) rotate(-4deg); }
.post-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: .8rem; color: var(--muted); }
.post-meta > * + *::before { content: "·"; margin: 0 9px; }
.post-cat { font-weight: 600; color: var(--accent-2); }
.post-body > p:not(.post-meta) { font-size: .94rem; color: var(--text-2); }
.post-card .more { margin-top: auto; padding-top: 6px; }
.blog-empty { margin-top: 24px; text-align: center; color: var(--muted); }

/* Article */
.hero--article .hero-copy { max-width: 880px; }
.h1--article { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.3rem); }
.article-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; margin-top: 26px; font-size: .9rem; color: var(--muted); }
.article-meta > * + *::before { content: "·"; margin: 0 12px; }
.author { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); }
.author img { width: 28px; height: 28px; }
.article-sec { padding-top: 12px; }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; max-width: 1120px; margin-inline: auto; }
.article.prose { max-width: 740px; font-size: 1.08rem; line-height: 1.8; }
.article.prose > p:first-child { font-size: 1.22rem; line-height: 1.7; color: var(--text); }
.article.prose h2 { margin: 46px 0 14px; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem); }
.article-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
.aside-card { display: grid; gap: 12px; padding: 24px; border-radius: var(--radius-lg); }
.aside-card img { width: 48px; height: 48px; }
.aside-title { font: 600 1.15rem/1.3 var(--font-display); color: var(--text); }
.aside-card p:not(.aside-title) { font-size: .92rem; color: var(--text-2); }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--text-2); }
.back-link:hover { color: var(--text); }
.related-posts .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Tools */
.tool-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.tool-tab { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; text-align: left; transition: border-color .25s, background-color .25s, box-shadow .25s; }
.tool-tab:hover { border-color: var(--border-strong); }
.tool-tab[aria-selected="true"] { border-color: var(--accent); background: var(--surface-2); box-shadow: var(--shadow-glow); }
.tool-tab-ic { width: 46px; height: 46px; border-radius: 13px; }
.tool-tab-ic .ic { width: 22px; height: 22px; }
.tool-tab[aria-selected="true"] .tool-tab-ic { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.tool-tab-txt { display: grid; gap: 3px; }
.tool-tab-txt strong { font: 600 .98rem/1.25 var(--font-display); }
.tool-tab-txt small { font-size: .82rem; line-height: 1.4; color: var(--muted); }
.tool { position: relative; padding: clamp(22px, 4vw, 40px); border-radius: var(--radius-xl); }
.tool + .tool { margin-top: 20px; }
.tool:focus { outline: none; }
.tool-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.tool-head p { margin-top: 6px; color: var(--text-2); }
.tool-ic { width: 54px; height: 54px; display: grid; place-items: center; flex: none; border-radius: 16px; background: var(--grad); color: var(--on-grad); }
.tool-ic .ic { width: 26px; height: 26px; }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 40px); align-items: start; }
.tool-inputs { display: grid; gap: 20px; }
.tool-out { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--surface-2); }
.tool-out .mini-label { margin: 8px 0 0; }
.tool-out > .btn { align-self: flex-start; margin-top: 6px; }
.tool-out--center { align-items: center; text-align: center; }
.tool-out--center > .btn { align-self: center; }
.tool-note, .tool-empty { font-size: .86rem; color: var(--muted); }
.tool-disclaimer { display: flex; align-items: flex-start; gap: 10px; margin-top: 26px; font-size: .84rem; color: var(--muted); }
.tool-disclaimer .ic { margin-top: 1px; }
.result-title { font: 600 1.5rem/1.2 var(--font-display); color: var(--text); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.rf { display: grid; gap: 12px; }
.rf-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rf-top label { font-size: .94rem; font-weight: 500; }
.rf output { font: 600 1.1rem/1 var(--font-display); color: var(--accent-2); white-space: nowrap; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 8px 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent) 0 var(--fill, 50%), var(--border-strong) var(--fill, 50%)); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--accent); background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); transition: transform .2s; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 4px solid var(--accent); background: #fff; }
input[type="range"]:focus-visible { outline-offset: 6px; }

.kpi { display: grid; gap: 6px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.kpi-l { font-size: .8rem; font-weight: 500; line-height: 1.35; color: var(--muted); }
.kpi-v { font: 700 1.45rem/1.1 var(--font-display); letter-spacing: -.02em; }
.kpi--hero { padding: 22px; border-color: var(--border-strong); background: var(--grad-soft), var(--surface); }
.kpi--hero .kpi-v { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi--accent .kpi-v { color: var(--accent-2); }
.kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.opp-list { gap: 10px; }
.opp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.opp-row label { font-size: .93rem; font-weight: 500; }
.stepper { display: inline-flex; align-items: center; overflow: hidden; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--input-bg); }
.stepper button { width: 34px; height: 36px; border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; transition: background-color .2s; }
.stepper button:hover { background: var(--surface-2); }
.stepper input { width: 50px; height: 36px; border: 0; background: transparent; text-align: center; font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.opp-unit { font-size: .78rem; white-space: nowrap; color: var(--muted); }
.opp-top { list-style: none; display: grid; gap: 8px; counter-reset: o; }
.opp-top li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: .9rem; animation: fadeUp .35s var(--ease); }
.opp-top li::before { content: counter(o); counter-increment: o; width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--grad); color: var(--on-grad); font: 700 .75rem/1 var(--font-display); }
.opp-top li > div { display: grid; gap: 2px; min-width: 0; }
.opp-top a { font-size: .8rem; font-weight: 600; color: var(--accent); }
.opp-h { margin-left: auto; font-weight: 600; white-space: nowrap; color: var(--accent-2); }

.quiz-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.quiz-count { font-size: .85rem; font-weight: 600; white-space: nowrap; color: var(--muted); }
.quiz-bar { flex: 1; height: 6px; overflow: hidden; border-radius: 99px; background: var(--border-strong); }
.quiz-bar i { display: block; width: 0; height: 100%; background: var(--grad); transition: width .4s var(--ease); }
.quiz-q { min-width: 0; margin: 0; padding: 0; border: 0; }
.quiz-q + .quiz-q { margin-top: 28px; }
html.js .quiz-q { display: none; margin-top: 0; }
html.js .quiz-q.is-current { display: block; animation: fadeUp .35s var(--ease); }
.quiz-legend { margin-bottom: 20px; padding: 0; font: 600 clamp(1.2rem, 1rem + .8vw, 1.5rem)/1.3 var(--font-display); }
.quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quiz-opt { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; text-align: left; font: 500 .95rem/1.4 var(--font-body); transition: border-color .2s, transform .2s var(--ease), background-color .2s; }
.quiz-opt:hover { border-color: var(--accent); transform: translateY(-2px); }
.quiz-opt.is-selected { border-color: var(--accent-2); background: var(--surface-2); }
.qo-key { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface-2); font: 700 .8rem/1 var(--font-display); color: var(--accent); }
.quiz-opt.is-selected .qo-key { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.quiz-nav { margin-top: 18px; }
.quiz-nav .btn[disabled] { visibility: hidden; }
.quiz-result { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; animation: fadeUp .4s var(--ease); }
.quiz-result-txt .mini-label { margin-top: 0; }
.quiz-result-txt > p:not(.mini-label):not(.result-title) { color: var(--text-2); }

.gauge { position: relative; width: 150px; height: 150px; flex: none; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 10; }
.g-bg { stroke: var(--border-strong); }
.g-fg { stroke: var(--accent-2); stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke-dashoffset .9s var(--ease), stroke .4s; }
.gauge[data-grade="0"] .g-fg { stroke: var(--warn); }
.gauge[data-grade="1"] .g-fg { stroke: var(--accent); }
.gauge-v { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.9rem/1 var(--font-display); }

.lead-rows { gap: 12px; }
.lead-row { display: grid; gap: 12px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.lr-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.lr-name { font-weight: 600; }
.lr-hint { font-size: .84rem; color: var(--muted); }
.lr-ctrl { display: grid; grid-template-columns: minmax(0, 1fr) 30px auto; align-items: center; gap: 14px; }
.lr-rating { display: block; }
.lr-out { font: 700 1.1rem/1 var(--font-display); text-align: center; color: var(--accent-2); }
.lr-w { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.lr-w input { width: 62px; padding: 7px 8px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--input-bg); text-align: center; font-weight: 600; }

.tool-inputs .field textarea { min-height: 96px; }
.uc-svcs { display: grid; gap: 8px; }
.uc-svc { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); transition: border-color .2s; animation: fadeUp .4s var(--ease) both; }
.uc-svc:nth-child(2) { animation-delay: .08s; }
.uc-svc:nth-child(3) { animation-delay: .16s; }
.uc-svc:hover { border-color: var(--accent); }
.uc-svc > .ic { width: 22px; height: 22px; margin-top: 2px; color: var(--accent); }
.uc-svc strong { display: block; font: 600 .98rem/1.3 var(--font-display); }
.uc-svc small { font-size: .85rem; color: var(--text-2); }
.uc-ideas { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.uc-ideas li { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: .84rem; color: var(--text-2); }

.audit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.audit-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: .92rem; line-height: 1.45; transition: border-color .2s, background-color .2s; }
.audit-item:hover { border-color: var(--border-strong); }
.audit-item input { position: absolute; opacity: 0; pointer-events: none; }
.audit-box { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 7px; border: 1.5px solid var(--border-strong); color: transparent; transition: .2s; }
.audit-box .ic { width: 14px; height: 14px; stroke-width: 3; }
.audit-item.is-checked { border-color: var(--accent-2); background: var(--surface-2); }
.audit-item input:checked + .audit-box { background: var(--grad); border-color: transparent; color: var(--on-grad); }
.audit-item input:focus-visible + .audit-box { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.audit-count { font-weight: 600; }
.meter { display: block; height: 10px; overflow: hidden; border-radius: 99px; background: var(--border-strong); }
.meter i { display: block; width: 0; height: 100%; background: var(--grad); transition: width .5s var(--ease); }
.audit-matches { list-style: none; display: grid; gap: 8px; }
.audit-matches a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: .92rem; font-weight: 600; animation: fadeUp .35s var(--ease); }
.audit-matches a:hover { border-color: var(--accent); }
.audit-matches .ic { width: 18px; height: 18px; color: var(--accent); }

/* --------------------------------------------------------------------------
   Footer, cookie banner, toast, back-to-top
   -------------------------------------------------------------------------- */

.site-footer { position: relative; padding-top: clamp(44px, 6vw, 80px); border-top: 1px solid var(--border); background: linear-gradient(180deg, transparent, rgba(47, 107, 255, .05)); }
.footer-cta { display: grid; justify-items: start; gap: 12px; max-width: 320px; margin-top: 24px; padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--grad-soft), var(--surface); }
.footer-cta-t { font: 600 1.02rem/1.3 var(--font-display); }
.footer-cta .btn { white-space: normal; text-align: left; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding-bottom: 48px; }
.footer-brand p { max-width: 320px; margin: 16px 0; font-size: .94rem; color: var(--text-2); }
.footer-mail { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); }
.footer-h { margin-bottom: 16px; font: 600 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a, .linklike { font-size: .92rem; color: var(--text-2); transition: color .2s; }
.footer-col a:hover, .linklike:hover { color: var(--text); }
.linklike { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 0 32px; border-top: 1px solid var(--border); font-size: .86rem; color: var(--muted); }
.footer-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer-langs a:hover, .footer-langs a[aria-current] { color: var(--text); }
.footer-langs a[aria-current] { font-weight: 600; }

.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; display: flex; justify-content: center; pointer-events: none; }
.cookie-inner { pointer-events: auto; width: 100%; max-width: 900px; display: flex; align-items: center; gap: 20px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface-solid); animation: fadeUp .4s var(--ease); }
.cookie-t { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 600 1rem/1.3 var(--font-display); }
.cookie-t .ic { color: var(--accent-2); }
.cookie-txt p:last-child { font-size: .88rem; color: var(--text-2); }
.cookie-txt a { color: var(--accent); text-decoration: underline; }
.cookie-actions { display: flex; flex: none; gap: 8px; }

.toast { position: fixed; right: 16px; bottom: 16px; z-index: 75; display: grid; gap: 12px; max-width: 360px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface-solid); box-shadow: var(--shadow); animation: fadeUp .4s var(--ease); }
.toast p { display: flex; align-items: flex-start; gap: 10px; font-size: .93rem; }
.toast p .ic { margin-top: 2px; color: var(--accent); }
.toast-actions { display: flex; gap: 8px; }
body.has-cookie .toast { bottom: 150px; }

.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--text); box-shadow: var(--shadow); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s var(--ease), visibility .3s, border-color .2s; }
.to-top:hover { border-color: var(--accent); }
.to-top::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; background: conic-gradient(var(--accent-2) calc(var(--p, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
body.has-cookie .to-top { bottom: 150px; }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

@keyframes reveal { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
html.js .reveal { opacity: 0; }
html.js .reveal.in { animation: reveal .8s var(--ease) both; animation-delay: min(calc(var(--i, 0) * 70ms), 490ms); }

/* --------------------------------------------------------------------------
   Motion
   Everything here is decorative; "prefers-reduced-motion" switches it off.
   -------------------------------------------------------------------------- */

/* Hero entrance */
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes heroVisualIn { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
html.js .hero-copy > * { animation: heroIn .9s var(--ease) both; }
html.js .hero-copy > :nth-child(2) { animation-delay: .08s; }
html.js .hero-copy > :nth-child(3) { animation-delay: .16s; }
html.js .hero-copy > :nth-child(4) { animation-delay: .24s; }
html.js .hero-copy > :nth-child(5) { animation-delay: .32s; }
html.js .hero-copy > :nth-child(6) { animation-delay: .4s; }
html.js .hero-copy > :nth-child(n+7) { animation-delay: .48s; }
html.js .hero-visual { animation: heroVisualIn 1.1s var(--ease) .3s both; }

/* Hero ambience: drifting glows, light beams on the grid, pointer spotlight, soft network */
.hero-glow.g1 { animation: drift1 18s ease-in-out infinite alternate; }
.hero-glow.g2 { animation: drift2 22s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(120px, 70px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-110px, 90px) scale(.9); } }
.hero-beams { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%); }
.hero-beams i { position: absolute; background-repeat: no-repeat; }
.hero-beams i:nth-child(-n+3) { top: 0; bottom: 0; width: 1px; background-image: linear-gradient(180deg, transparent, var(--beam), transparent); background-size: 1px 160px; animation: beamY 7s linear infinite; }
.hero-beams i:nth-child(n+4) { left: 0; right: 0; height: 1px; background-image: linear-gradient(90deg, transparent, var(--beam), transparent); background-size: 240px 1px; animation: beamX 9s linear infinite; }
.hero-beams i:nth-child(1) { left: 192px; animation-delay: -1s; }
.hero-beams i:nth-child(2) { left: 704px; animation-duration: 9s; animation-delay: -5s; }
.hero-beams i:nth-child(3) { left: 1216px; animation-duration: 8s; animation-delay: -3s; }
.hero-beams i:nth-child(4) { top: 128px; animation-delay: -2s; }
.hero-beams i:nth-child(5) { top: 384px; animation-duration: 11s; animation-delay: -7s; }
@keyframes beamY { from { background-position: 0 -160px; } to { background-position: 0 calc(100% + 160px); } }
@keyframes beamX { from { background-position: -240px 0; } to { background-position: calc(100% + 240px) 0; } }
.hero-spot { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 40%), rgba(43, 212, 240, .1), transparent 62%); }
[data-theme="light"] .hero-spot { background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 40%), rgba(26, 90, 232, .08), transparent 62%); }
.hero.is-pointer .hero-spot { opacity: 1; }
.hero-canvas[data-network="soft"] { opacity: .5; -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 35%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 85% 80% at 50% 35%, #000 30%, transparent 80%); }
[data-theme="light"] .hero-canvas[data-network="soft"] { opacity: .4; }

/* Hero cards follow the pointer (3D tilt) */
.console, .flowcard, .stepcard { transition: transform .7s var(--ease); transform-style: preserve-3d; will-change: transform; }
.console-logo, .orbit-core, .logo-stage img { transition: translate .9s var(--ease); }

/* Console: scanning highlight on the running step */
html.js .console .cs.is-active { position: relative; overflow: hidden; }
html.js .console .cs.is-active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(142, 243, 255, .12) 50%, transparent 70%); animation: scan 1.3s var(--ease) infinite; pointer-events: none; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Ripples around the logo in orbit, logo stage, hub and loop */
@keyframes ripple { from { transform: scale(.55); opacity: .8; } to { transform: scale(1.55); opacity: 0; } }
.orbit-core::before, .orbit-core::after, .logo-stage::before, .logo-stage::after, .hub-core::before, .hub-core::after, .loop-core::before, .loop-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ripple); animation: ripple 3.8s var(--ease) infinite; pointer-events: none; }
.orbit-core::after, .logo-stage::after, .hub-core::after, .loop-core::after { animation-delay: 1.9s; }
.logo-stage::before, .logo-stage::after { inset: 18%; }

/* Gradient text slowly flows */
.stat-v { background-image: var(--grad-text-flow); background-size: 220% 100%; animation: gradFlow 7s ease-in-out infinite alternate; }
.accent { background-image: var(--shimmer); background-size: 200% 100%; background-repeat: repeat-x; animation: shimmerSweep 6s linear infinite; }
@keyframes shimmerSweep { from { background-position: 200% 50%; } to { background-position: 0% 50%; } }
@keyframes gradFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.stat-v { font-variant-numeric: tabular-nums; }

/* Buttons: light sweep (on hover, and now and then on the main calls to action) */
.btn-primary { overflow: hidden; }
.btn-primary::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--angle), var(--cyan), #c4f4ff 10%, #a78bfa 28%, var(--violet) 45%, #6d28d9 55%, var(--violet) 68%, var(--cyan) 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinAngle 3.2s linear infinite;
}
.btn-primary:hover::before { animation-duration: 1.6s; }
.btn-primary::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: -75%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.btn-primary:hover::after { animation: shine .85s var(--ease); }
.hero-actions .btn-primary::after, .cta-actions .btn-primary::after { animation: shineLoop 7s var(--ease) 2s infinite; }
.hero-actions .btn-primary:hover::after, .cta-actions .btn-primary:hover::after { animation: shine .85s var(--ease); }
@keyframes shine { from { left: -75%; opacity: 1; } to { left: 130%; opacity: 1; } }
@keyframes shineLoop { 0% { left: -75%; opacity: 1; } 14%, 100% { left: 130%; opacity: 1; } }

/* Icons bounce on hover */
@keyframes iconPop { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.2) rotate(-10deg); } 65% { transform: scale(.95) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
.svc-card:hover .svc-ic .ic, .ind-card:hover .ind-ic .ic, .card:hover .card-ic .ic, .link-card:hover .link-ic .ic, .tool-tab:hover .tool-tab-ic .ic, .proc-step a:hover .proc-ic .ic, .dd-link:hover .dd-ic .ic, .result:hover .result-ic .ic, .info-row:hover .info-ic .ic, .hub-item:hover .hub-ic .ic, .sys-tab:hover .sys-tab-ic .ic { animation: iconPop .65s var(--ease-spring); }

/* Section eyebrows draw their line in; check marks draw themselves */
html.js .reveal .eyebrow::before { width: 0; transition: width .8s var(--ease) .25s; }
html.js .reveal.in .eyebrow::before { width: 22px; }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
html.js .check-item .check-ic { transform: scale(.5); transition: transform .5s var(--ease-spring); }
html.js .check-item.in .check-ic { transform: none; transition-delay: calc(min(var(--i, 0) * 70ms, 490ms) + .15s); }
html.js .check-item .check-ic .ic { stroke-dasharray: 24; stroke-dashoffset: 24; }
html.js .check-item.in .check-ic .ic { animation: drawStroke .55s var(--ease) forwards; animation-delay: calc(min(var(--i, 0) * 70ms, 490ms) + .35s); }

/* Dropdown items cascade in */
@keyframes ddIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nav-item.is-open .dd-list > li, .nav-item.is-open .mega-feature { animation: ddIn .45s var(--ease) both; animation-delay: calc(var(--col, 0) * 55ms + var(--row, 0) * 35ms); }
.dd-list > li:nth-child(2) { --row: 1; } .dd-list > li:nth-child(3) { --row: 2; } .dd-list > li:nth-child(4) { --row: 3; }
.dd-list > li:nth-child(5) { --row: 4; } .dd-list > li:nth-child(6) { --row: 5; } .dd-list > li:nth-child(7) { --row: 6; } .dd-list > li:nth-child(8) { --row: 7; }
.mega-col:nth-child(2) { --col: 1; } .mega-col:nth-child(3) { --col: 2; } .mega-col:nth-child(4) { --col: 3; } .mega-feature { --col: 4; }

/* Feature cards: a cyan -> violet line draws in along the bottom edge */
.inc-card, .post-card a { position: relative; overflow: hidden; }
.feat-line { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px; pointer-events: none; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 10px rgba(139, 92, 246, .35); transform-origin: left center; transition: transform 1.1s var(--ease), box-shadow .35s, height .35s; }
html.js .feat-line { transform: scaleX(0); }
html.js .reveal.in > .feat-line, html.js .reveal.in > a > .feat-line { transform: scaleX(1); transition-delay: calc(min(var(--i, 0) * 70ms, 490ms) + .35s), 0s, 0s; }
.svc-card:hover .feat-line, .ind-card:hover .feat-line, .card:hover .feat-line, .link-card:hover .feat-line, .proc-step a:hover .feat-line, .result:hover .feat-line, .guide:hover .feat-line, .case:hover .feat-line, .inc-card:hover .feat-line, .post-card a:hover .feat-line { height: 3px; box-shadow: 0 0 16px rgba(139, 92, 246, .7), 0 0 8px rgba(34, 211, 238, .5); }

/* Process rail: a pulse runs across the four steps and lights each one */
.process { padding-top: 30px; }
.process::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--border-strong); }
.process::after { content: ""; position: absolute; top: -1px; left: -22%; width: 22%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2)); box-shadow: 0 0 16px rgba(43, 212, 240, .8); opacity: 0; }
html.js .process.is-running::after { opacity: 1; animation: railPulse 4.4s linear infinite; }
@keyframes railPulse { from { left: -22%; } to { left: 100%; } }
.proc-step a, .proc-ic { transition: transform .35s var(--ease), border-color .35s, box-shadow .35s, background .35s, color .35s; }
.proc-step.is-active a { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.proc-step.is-active .proc-ic { background: var(--grad); color: var(--on-grad); border-color: transparent; }

/* Syntrize Systems: autoplay progress and components processing in turn */
.sys-tab { position: relative; overflow: hidden; }
.sys-tab-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.systems.is-autoplay .sys-tab[aria-selected="true"] .sys-tab-progress { animation: tabProgress 6s linear forwards; }
.systems.is-paused .sys-tab[aria-selected="true"] .sys-tab-progress, .systems.is-offscreen .sys-tab[aria-selected="true"] .sys-tab-progress { animation-play-state: paused; }
.faq-item.is-closing .faq-toggle { background: none; color: inherit; border-color: var(--border-strong); }
.faq-item.is-closing .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
@keyframes tabProgress { to { transform: scaleX(1); } }
.sys-pipeline li { animation: fadeUp .5s var(--ease) both, pipePulse 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * .7s + .6s); }
@keyframes pipePulse { 0%, 22%, 100% { border-color: var(--border); box-shadow: none; } 7%, 14% { border-color: var(--accent-2); box-shadow: 0 0 24px -6px rgba(52, 230, 184, .75), inset 0 0 0 1px rgba(52, 230, 184, .25); } }

/* Workflow diagrams: lit nodes pulse */
.flow-step.is-lit .flow-node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--ripple); animation: ripple 1s var(--ease) both; }

/* Before / after: automated steps light up in order, manual steps stall */
html.js .compare .after .chain li { opacity: .38; transition: opacity .45s; }
html.js .compare .after .chain li::before { background: transparent; transition: background .35s, box-shadow .35s; }
html.js .compare .after .chain li.is-on { opacity: 1; }
html.js .compare .after .chain li.is-on::before { background: var(--accent-2); box-shadow: 0 0 12px rgba(52, 230, 184, .85); }
html.js .compare .after .chain li:not(:last-child)::after { transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
html.js .compare .after .chain li.is-on:not(:last-child)::after { transform: scaleY(1); }
.before .chain li::before { animation: stall 2.6s ease-in-out infinite; }
.before .chain li:nth-child(2)::before { animation-delay: .5s; } .before .chain li:nth-child(3)::before { animation-delay: 1s; } .before .chain li:nth-child(4)::before { animation-delay: 1.5s; }
@keyframes stall { 0%, 100% { color: var(--muted); } 45%, 55% { color: var(--warn); box-shadow: 0 0 10px rgba(255, 184, 107, .45); } }
.compare-mid .ic { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { translate: 6px 0; } }
@keyframes nudgeY { 50% { translate: 0 6px; } }

/* Continuous loop: the node under the arc lights up */
.loop-ic { transition: background .35s, color .35s, border-color .35s, box-shadow .35s, transform .45s var(--ease-spring); }
.loop-node.is-active .loop-ic { background: var(--grad); color: var(--on-grad); border-color: transparent; box-shadow: 0 0 26px rgba(43, 212, 240, .6); transform: scale(1.1); }

/* Blog and guide covers drift; their icons float */
.post-card .post-cover, .guide .guide-cover { background-size: 170% 170%, 170% 170%, auto; animation: coverDrift 14s ease-in-out infinite alternate; }
@keyframes coverDrift { from { background-position: 0% 0%, 100% 100%, 0 0; } to { background-position: 100% 70%, 0% 30%, 0 0; } }
.post-cover-ic, .guide-ic { animation: floatT 6s ease-in-out infinite; }
@keyframes floatT { 50% { translate: 0 -8px; } }

/* Results: the icon breathes */
.result-ic { animation: breathe 4s ease-in-out infinite; }
.result:nth-child(2n) .result-ic { animation-delay: -2s; }
@keyframes breathe { 50% { box-shadow: 0 0 22px -4px rgba(52, 230, 184, .55); } }

/* 404 */
.nf-code { background-image: var(--grad-text-flow); background-size: 220% 100%; animation: gradFlow 6s ease-in-out infinite alternate, floatT 7s ease-in-out infinite; }

/* Reading progress (legal pages and articles) */
.read-progress { position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 49; height: 2px; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: var(--grad); transform: scaleX(var(--p, 0)); transform-origin: left; box-shadow: 0 0 10px rgba(43, 212, 240, .6); }
/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
  .nav-link { padding: 9px 9px; font-size: .86rem; }
  .header-actions { gap: 6px; }
}

@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .header-actions { margin-left: auto; }
  .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 560px; width: 100%; margin-inline: auto; }
  .flowcard, .stepcard { margin-inline: auto; }
  .console-stage { padding-top: 40px; }
  .svc-grid, .ind-grid, .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid.cols-3, .posts, .guides, .cases, .links-grid.cols-3, .links-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc-step:nth-child(2n) a::after { display: none; }
  .cards.cols-4, .cards.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checklist.cols-3, .checklist.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .systems { grid-template-columns: minmax(0, 1fr); }
  .sys-tabs { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .sys-tab { flex: 0 0 auto; width: auto; scroll-snap-align: start; }
  .sys-tab-arrow { display: none; }
  .faq-layout, .tl-layout, .loop-layout, .contact-grid, .problem-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-side, .tl-side { position: static; }
  .legal-grid, .article-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
  .toc-card { max-height: none; }
  .article-aside { position: static; max-width: 740px; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
  .plans .plan-top { padding-top: 30px; }
  .plans .plan-badge { position: static; }
  .plan--wide { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
  .plan--wide .plan-top { border-right: 0; border-bottom: 1px solid var(--border); }
  .plans-note { max-width: 620px; margin-inline: auto; }
  .tool-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-out { position: static; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: span 2; }
  .flow { grid-template-columns: repeat(min(var(--n), 4), minmax(0, 1fr)); row-gap: 32px; }
  .flow::before { display: none; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .h1 { letter-spacing: -.03em; }
  .h1, .h2, .statement-text, .callout-title { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  .hero-stats { gap: 18px 28px; }
  .stat-v { font-size: 1.6rem; }
  .hero-actions .btn { flex: 1 1 auto; }
  .console-logo { width: 200px; right: -10px; top: -10px; }
  .cs { grid-template-columns: 34px minmax(0, 1fr); }
  .cs-ic { width: 34px; height: 34px; }
  .cs-badge { grid-column: 2; justify-self: start; }
  .svc-grid, .svc-grid.cols-3, .ind-grid, .results, .posts, .related-posts .posts, .guides, .cases, .links-grid.cols-2, .links-grid.cols-3, .links-grid.cols-4, .included.cols-2 { grid-template-columns: minmax(0, 1fr); }
  .result:first-child { grid-column: auto; }
  .process { grid-template-columns: minmax(0, 1fr); }
  .proc-step a::after { display: none; }
  .process { padding-top: 0; }
  .process::before, .process::after { display: none; }
  .compare-mid .ic { animation-name: nudgeY; }
  .cards.cols-2, .cards.cols-3, .cards.cols-4, .cards.cols-5 { grid-template-columns: minmax(0, 1fr); }
  .checklist.cols-2, .checklist.cols-3, .checklist.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .tasks { grid-template-columns: minmax(0, 1fr); }
  .task { flex-direction: row; align-items: center; }
  .task-state { flex: none; justify-items: end; }
  .sys-pipeline { grid-template-columns: minmax(0, 1fr); }
  .sys-panel-head { align-items: flex-start; }
  .sys-big-ic { width: 52px; height: 52px; }
  .flow { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .flow-step { flex-direction: row; align-items: flex-start; gap: 16px; padding-bottom: 20px; text-align: left; }
  .flow-step:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 12px); opacity: .5; }
  .flow-body { padding-top: 14px; }
  .flow--detailed .flow-body { padding: 16px; }
  .compare-grid { grid-template-columns: minmax(0, 1fr); }
  .compare-mid .ic { transform: rotate(90deg); }
  .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hub-core { order: -1; grid-column: 1 / -1; margin: 0 auto 10px; width: 170px; height: 170px; }
  .hub-core img { width: 104px; }
  .hub-col { display: contents; }
  .hub-col::before, .hub-col::after, .hub-item::after { display: none; }
  .hub-l .hub-item { flex-direction: row; text-align: left; }
  .hub-item { font-size: .9rem; padding: 10px 12px; min-width: 0; overflow-wrap: anywhere; }
  .hub-item > span:last-child { min-width: 0; }
  .loop-node { font-size: .85rem; }
  .loop-ic { width: 46px; height: 46px; }
  .callout { flex-direction: column; }
  .catalog thead { display: none; }
  .catalog, .catalog tbody, .catalog tr, .catalog th, .catalog td { display: block; width: 100%; }
  .catalog tbody tr { padding: 18px; border-bottom: 1px solid var(--border); }
  .catalog tbody tr:last-child { border-bottom: 0; }
  .catalog tbody th, .catalog td { padding: 0; border: 0; }
  .catalog td { margin-top: 14px; }
  .catalog td::before { content: attr(data-label); display: block; margin-bottom: 8px; font: 600 .68rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .cat-name, .cat-out { min-width: 0; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  .stepnav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stepnav-dots { display: none; }
  .tool-picker { grid-template-columns: minmax(0, 1fr); }
  .tool-tab-txt small { display: none; }
  .kpi-row { grid-template-columns: minmax(0, 1fr); }
  .opp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .opp-unit { display: none; }
  .quiz-opts, .audit-list { grid-template-columns: minmax(0, 1fr); }
  .quiz-result { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .quiz-result .btn-row { justify-content: center; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-brand { grid-column: auto; }
  .footer-cta { max-width: none; }
  .cookie-inner { flex-direction: column; align-items: stretch; }
  .cookie-actions .btn { flex: 1; }
  .toast { left: 16px; max-width: none; }
  .dd--wide { min-width: 0; }
}

@media (max-width: 560px) {
  .header-cta { display: none; }
  .brand-name { font-size: 1.18rem; }
  .lang-btn span { display: none; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .orbit { --size: min(340px, 88vw); --r: calc(var(--size) / 2 - 26px); }
  .orbit-item { width: 46px; height: 46px; border-radius: 13px; }
  .orbit-item .ic { width: 20px; height: 20px; }
  .orbit--labeled .orbit-item { padding: 10px 12px; }
  .orbit-label { font-size: .8rem; }
  .stepcard-list a { padding: 12px; gap: 10px; }
  .plan--wide .plan-features { grid-template-columns: minmax(0, 1fr); }
  .rf-top { flex-direction: column; gap: 6px; }
  .lr-ctrl { grid-template-columns: minmax(0, 1fr) 30px; }
  .lr-w { grid-column: span 2; }
}

@media (max-width: 400px) {
  .task { flex-direction: column; align-items: flex-start; }
  .task-state { justify-items: start; }
}

@media (max-width: 360px) {
  .h1 { font-size: 2rem; }
  .hero--page .h1 { font-size: 1.95rem; }
}

@media (hover: none) {
  .svc-card:hover, .ind-card:hover, .card:hover, .link-card:hover, .guide:hover, .post-card a:hover, .proc-step a:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-beams, .hero-spot, .process::after, .strip-list--clone, .strip-list .dup { display: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: auto; justify-content: center; }
  .strip-list { flex-wrap: wrap; justify-content: center; gap: 14px 42px; padding-right: 0; }
  html.js .check-item .check-ic .ic { stroke-dasharray: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.js .reveal { opacity: 1; }
}

@media print {
  .site-header, .mnav, .site-footer, .cookie, .toast, .to-top, .hero-bg, .bg-aurora, .cta-sec { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { padding-top: 24px; }
  html.js .reveal { opacity: 1; }
}