/* YOM Group, maquette v2. Layout: dark aurora stage, floating liquid-glass surfaces,
   services first; one light chapter (marketing) reached through a contrast-inverting passage. */

/* Geist and Geist Mono (SIL Open Font License 1.1, fonts/OFL.txt), served by the site itself: no request to Google. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/geist-latin.v5.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/geist-latin-ext.v5.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/geist-mono-latin.v6.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/geist-mono-latin-ext.v6.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* The arrows used in the copy (→ ↔) sit outside those subsets: without these the browser loads a system font for a dozen glyphs. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/geist-sym.v5.woff2") format("woff2"); unicode-range: U+2192, U+2194; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/geist-mono-sym.v6.woff2") format("woff2"); unicode-range: U+2192, U+2194; }

:root {
  --bg: #07070B; --bg2: #0E0E15; --fg: #F5F4F2; --mut: #A3A1AC; --line: rgba(255,255,255,.10);
  --g-bd: rgba(255,255,255,.14); --g-hi: rgba(255,255,255,.22); --g-tint: rgba(255,255,255,.06);
  --brand: #FF9900; --brand-hi: #FFB547; --brand-lo: #F07A00; --on-brand: #140A00;
  --violet: #7B61FF; --pink: #FF4FA3; --cyan: #35D0FF; --danger: #FF7A7A;
  --grad: linear-gradient(100deg, #FFC46B 0%, #FF9900 45%, #FF6A00 100%);
  --grad-dev: linear-gradient(100deg, #C9BDFF 0%, #8F78FF 45%, #35D0FF 100%);
  --f: "Geist", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 24px; --r-s: 14px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --nav-h: 88px;
  color-scheme: dark;
}
.tone-dark { --bg: #07070B; --fg: #F5F4F2; --mut: #A3A1AC; --line: rgba(255,255,255,.10); --g-bd: rgba(255,255,255,.14); --g-hi: rgba(255,255,255,.22); --g-tint: rgba(255,255,255,.06); background: var(--bg); color: var(--fg); }
.tone-light {
  --bg: #F5F3EF; --fg: #0B0B10; --mut: #56535F; --line: rgba(11,11,16,.10);
  --g-bd: rgba(11,11,16,.09); --g-hi: rgba(255,255,255,.95); --g-tint: rgba(255,255,255,.62);
  --grad: linear-gradient(100deg, #C25E00 0%, #9A4700 100%);
  background: var(--bg); color: var(--fg); color-scheme: light;
}

/* ---------- Base ---------- */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--f); font-kerning: normal; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button, a, [role="button"], label { touch-action: manipulation; }
button, .btn, .opt, .nav-link { -webkit-user-select: none; user-select: none; }
img { display: block; }
p { margin: 0 0 14px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 120; padding: 10px 14px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-weight: 600; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
.wrap { max-width: 1240px; margin-inline: auto; padding-left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right, 0px)); }
.sec { position: relative; padding-block: clamp(80px, 11vw, 150px); }
.sec-tight { padding-block: clamp(48px, 7vw, 90px); }

/* Aurora backdrop + cursor light */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .5; animation: drift 28s ease-in-out infinite alternate; }
.b1 { left: -25vmax; top: -30vmax; background: radial-gradient(circle, rgba(255,153,0,.55), transparent 62%); }
.b2 { right: -30vmax; top: 10vh; background: radial-gradient(circle, rgba(123,97,255,.5), transparent 62%); animation-duration: 34s; animation-delay: -8s; }
.b3 { left: 10vw; bottom: -45vmax; background: radial-gradient(circle, rgba(255,79,163,.32), transparent 62%); animation-duration: 40s; animation-delay: -14s; }
@keyframes drift { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.12); } }
.glow { position: fixed; left: -280px; top: -280px; z-index: 0; width: 560px; height: 560px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255,153,0,.13), transparent 62%); transition: opacity 400ms ease; will-change: transform; }
.glow.is-on { opacity: 1; }
main, .foot { position: relative; z-index: 1; }

/* ---------- Type ---------- */
.eyebrow { margin: 0 0 16px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.eb-dev { color: #A99BFF; }
.eb-mkt { color: var(--brand); }
.tone-light .eb-mkt { color: #A34E00; }
.h1 { margin: 0 0 24px; font: 760 clamp(46px, 7.4vw, 112px)/.94 var(--f); letter-spacing: -0.055em; text-wrap: balance; }
.h1-page { font-size: clamp(40px, 6.2vw, 88px); max-width: 16ch; }
.h2 { margin: 0 0 22px; max-width: 22ch; font: 720 clamp(34px, 4.8vw, 68px)/1 var(--f); letter-spacing: -0.045em; text-wrap: balance; }
.h3 { margin: 0 0 12px; font: 650 clamp(20px, 2vw, 26px)/1.2 var(--f); letter-spacing: -0.02em; text-wrap: balance; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .02em; }
.grad-dev { background: var(--grad-dev); -webkit-background-clip: text; background-clip: text; }
.lede { max-width: 58ch; margin: 0 0 30px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.todo { display: inline-block; margin: 10px 0 0; padding: 4px 8px; border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--brand) 60%, transparent); font: 500 11px/1.3 var(--f-mono); color: var(--brand); }
.tone-light .todo { color: #A34E00; }
.tag { padding: 3px 8px; border-radius: 999px; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--mut); }

/* ---------- Glass ---------- */
.glass {
  background: linear-gradient(135deg, color-mix(in srgb, var(--g-tint) 170%, transparent), color-mix(in srgb, var(--g-tint) 40%, transparent) 50%, var(--g-tint));
  box-shadow: inset 0 0 0 1px var(--g-bd), inset 0 1px 0 var(--g-hi), 0 24px 60px -30px rgba(0,0,0,.6);
}
.nav-in, .mega, .pill, .fcard, .cfg, .final, .presence, .dash, .mdock, .msheet, .nudge, .ccard, .toast {
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
}
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity 300ms ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,153,0,.16), transparent 45%); }
@media (hover: hover) and (pointer: fine) { .spot:hover::before { opacity: 1; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
  min-height: 48px; padding: 0 22px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font: 600 15px/1 var(--f); letter-spacing: -0.01em;
  transition: translate 360ms var(--ease-out), transform 140ms var(--ease-out), box-shadow 250ms ease, background-color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn-brand { background: linear-gradient(180deg, #FFB547, #FF9900 55%, #F58F00); color: var(--on-brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.18), 0 12px 32px -10px rgba(255,153,0,.65); }
.btn-glass { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); box-shadow: inset 0 0 0 1px var(--g-bd), inset 0 1px 0 var(--g-hi); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-l { min-height: 58px; padding: 0 30px; font-size: 16.5px; }
.btn-s { min-height: 40px; padding: 0 16px; font-size: 14px; }
.arr { display: inline-block; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn-brand:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.18), 0 16px 44px -10px rgba(255,153,0,.85); }
  .btn:hover .arr { transform: translateX(4px); }
  .btn-glass:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Navigation ---------- */
.nav { position: fixed; z-index: 50; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); pointer-events: none; }
.nav-in { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: min(1180px, 100%); height: 62px; padding: 0 9px 0 12px; border-radius: 999px; background: rgba(14,14,21,.55); transition: height 300ms var(--ease-out), background-color 300ms ease; }
.nav.is-scrolled .nav-in { height: 56px; background: rgba(14,14,21,.72); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo img { width: 38px; height: 38px; }
.logo span { font: 760 18px/1 var(--f); letter-spacing: -0.03em; }
.logo b { margin-left: 1px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--brand); }
.links { position: relative; margin: 0 auto; }
.links ul { position: relative; z-index: 1; display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-link { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 17px; border-radius: 999px; text-decoration: none; font: 500 15px/1 var(--f); color: var(--mut); transition: color 200ms ease; }
.nav-link[aria-current="page"], .nav-link[aria-expanded="true"] { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .nav-link:hover { color: var(--fg); } }
.nav-link svg { transition: transform 220ms var(--ease-out); }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-ind { position: absolute; z-index: 0; left: 0; top: 0; height: 42px; width: 60px; border-radius: 999px; background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.18); opacity: 0; transition: transform 460ms var(--ease-out), width 460ms var(--ease-out), opacity 200ms ease; }
.nav-cta { flex: none; }
.mega { pointer-events: auto; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 6px; box-sizing: border-box; width: min(960px, 100%); margin-top: 10px; padding: 10px; border-radius: 28px; background: rgba(14,14,21,.78); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: 30% 0; transition: opacity 180ms var(--ease-out), transform 240ms var(--ease-out); }
.mega.is-open { opacity: 1; transform: none; }
.mega-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px; border-radius: 20px; text-decoration: none; transition: background-color 160ms ease; }
.mega-item .ico { grid-row: span 2; }
.mega-item b { font: 650 16px/1.2 var(--f); }
.mega-item span:last-child { font-size: 13.5px; color: var(--mut); line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { .mega-item:hover { background: rgba(255,255,255,.07); } }
.mega-offer { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px; border-radius: 20px; background: radial-gradient(120% 120% at 100% 0%, rgba(255,153,0,.32), transparent 60%), rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,153,0,.25); }
.mega-offer p { margin: 0; }
.mega-offer .eyebrow { color: var(--brand); }
.mega-offer .btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 899px) { .links, .mega { display: none !important; } .nav-in { justify-content: space-between; } }
@media (max-width: 559px) { .nav-cta { display: none; } .nav-in { height: 58px; } }

/* ---------- Icons (glossy tiles) ---------- */
.ico { position: relative; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--ib, linear-gradient(135deg, #FFB547, #FF6A00)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -8px 16px -8px rgba(0,0,0,.25), 0 10px 22px -8px var(--is, rgba(255,153,0,.6)); }
.ico::after { content: ""; position: absolute; inset: 11px; background: #FFFFFF; -webkit-mask: var(--im) center / contain no-repeat; mask: var(--im) center / contain no-repeat; }
.ico-dev { --ib: linear-gradient(135deg, #A897FF, #5A3DF5); --is: rgba(123,97,255,.6); --im: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6 2 12l6 6M16 6l6 6-6 6M14 4l-4 16'/></svg>"); }
.ico-mkt { --im: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l6-6 4 4 8-8M15 7h6v6'/></svg>"); }
.ico-des { --ib: linear-gradient(135deg, #FF8CC4, #E52E7E); --is: rgba(255,79,163,.55); --im: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2l2.6 6.4L21 11l-6.4 2.6L12 20l-2.6-6.4L3 11l6.4-2.6z'/></svg>"); }
.ico-con { --ib: linear-gradient(135deg, #7BE3FF, #1E7CF2); --is: rgba(53,208,255,.5); --im: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M15.5 8.5 13 13l-4.5 2.5L11 11z'/></svg>"); }
.ico-auto { --ib: linear-gradient(135deg, #FFE07A, #FF9900); --im: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13 2 4 14h7l-1 8 9-12h-7z'/></svg>"); }
.ico-rgpd { --ib: linear-gradient(135deg, #6EF0B4, #12A26A); --is: rgba(18,162,106,.5); --im: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/><path d='m8.5 12 2.5 2.5 4.5-5'/></svg>"); }
.ico-wa { --ib: linear-gradient(135deg, #5BE38E, #129C4B); --is: rgba(18,156,75,.5); --im: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20l1.3-3.9A8 8 0 1 1 8 19.1z'/></svg>"); }
.ico-mail { --ib: linear-gradient(135deg, #A897FF, #5A3DF5); --is: rgba(123,97,255,.55); --im: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>"); }
.ico-cal { --im: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>"); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(100svh, 940px); display: flex; align-items: center; padding: calc(var(--nav-h) + 24px) 0 96px; overflow: hidden; }
#scene { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.hero-fallback { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 600ms ease; background: radial-gradient(40% 50% at 75% 45%, rgba(255,153,0,.35), transparent 70%), radial-gradient(35% 40% at 88% 70%, rgba(123,97,255,.35), transparent 70%); }
.no-webgl .hero-fallback { opacity: 1; }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; width: 100%; box-sizing: border-box; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
.hero-copy { min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 9px 16px 9px 12px; border-radius: 999px; font: 500 13px/1.2 var(--f-mono); letter-spacing: .02em; color: color-mix(in srgb, var(--fg) 86%, transparent); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(255,153,0,.2), 0 0 14px var(--brand); }
.rotator { margin: -6px 0 30px; font: 500 clamp(16px, 1.5vw, 19px)/1.4 var(--f-mono); color: var(--mut); min-height: 1.4em; }
.rot-word { display: inline-block; color: #C3B6FF; transition: opacity 240ms var(--ease-out), transform 360ms var(--ease-out); }
.rot-word.is-out { opacity: 0; transform: translateY(-8px); }
.rot-word.is-in { opacity: 0; transform: translateY(8px); transition: none; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: color-mix(in srgb, var(--fg) 80%, transparent); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,153,0,.18) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FF9900' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m4.5 8.3 2.3 2.2 4.7-5'/></svg>") center / 12px no-repeat; }
.hero-cards { position: relative; min-height: 460px; pointer-events: none; }
.fcard { position: absolute; display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; background: rgba(20,20,30,.38); font-size: 14px; will-change: transform; }
.fc-k { font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.fcard b { font-weight: 650; }
.fc-s { font-size: 12px; color: var(--mut); }
.fcard svg { width: 140px; height: 40px; margin-top: 4px; }
.fcard code { font: 500 13px/1.3 var(--f-mono); }
.c1 { color: #A99BFF; } .c2 { color: var(--cyan); } .c3 { color: #5BE38E; }
.fc-1 { top: 2%; right: 4%; }
.fc-2 { top: 46%; left: -2%; }
.fc-2 b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #5BE38E; box-shadow: 0 0 10px #5BE38E; vertical-align: 1px; }
.fc-3 { bottom: 4%; right: 10%; }
@media (max-width: 979px) {
  .hero { min-height: auto; padding-bottom: 72px; }
  .hero-cards { min-height: 380px; }
  .fc-1 { top: 4%; right: 0; } .fc-2 { top: 50%; left: 0; } .fc-3 { bottom: 0; right: 4%; }
}
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.scroll-cue span { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--fg); animation: cue 1.8s var(--ease-in-out) infinite; }
@keyframes cue { 60% { transform: translateY(12px); opacity: 0; } 61% { transform: none; opacity: 0; } }
@media (max-width: 979px) { .scroll-cue { display: none; } }

/* ---------- Marquee ---------- */
.marquee { position: relative; z-index: 1; overflow: hidden; padding: 26px 0; border-block: 1px solid var(--line); -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 56px; animation: marquee 48s linear infinite; }
.marquee span { font: 650 clamp(18px, 2vw, 26px)/1 var(--f); letter-spacing: -0.02em; color: color-mix(in srgb, var(--fg) 52%, transparent); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Bento ---------- */
.bento { display: grid; gap: 14px; margin-top: 46px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bcard { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 220px; padding: 26px; box-sizing: border-box; border-radius: var(--r); overflow: hidden; text-decoration: none; transition: transform 320ms var(--ease-out); }
.bcard h3 { margin: 6px 0 0; font: 680 22px/1.15 var(--f); letter-spacing: -0.025em; }
.bcard p { margin: 0; color: color-mix(in srgb, var(--fg) 76%, transparent); font-size: 15.5px; line-height: 1.5; }
.bc-dev, .bc-mkt { grid-column: span 2; grid-row: span 2; min-height: 380px; padding: 34px; }
.bc-dev h3, .bc-mkt h3 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.04em; }
.bc-dev p, .bc-mkt p { font-size: 17px; max-width: 40ch; }
.bc-dev::after, .bc-mkt::after { content: ""; position: absolute; z-index: -1; right: -20%; bottom: -40%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(123,97,255,.45), transparent 65%); }
.bc-mkt::after { background: radial-gradient(circle, rgba(255,153,0,.45), transparent 65%); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.chips li { padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--g-bd); font: 500 12px/1.2 var(--f-mono); color: color-mix(in srgb, var(--fg) 84%, transparent); }
.tone-light .chips li { background: rgba(255,255,255,.7); }
.more { margin-top: auto; padding-top: 8px; font: 600 14.5px/1 var(--f); color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .bcard:hover { transform: translateY(-4px); } }
@media (max-width: 999px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bc-dev, .bc-mkt { grid-row: auto; min-height: 320px; } }
@media (max-width: 639px) { .bento { grid-template-columns: minmax(0, 1fr); } .bc-dev, .bc-mkt { grid-column: auto; padding: 26px; } }

/* ---------- Le chantier (kanban) ---------- */
.scrolly { position: relative; }
.scrolly-kb { height: 420vh; }
.scrolly-pass { height: 260vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage-in { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + 10px); padding-bottom: 22px; }
.stage-h { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.stage-h .eyebrow { margin: 0; }
.kb-count { margin: 0; font: 500 13px/1 var(--f-mono); color: var(--mut); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kb-count b { font: 650 30px/1 var(--f); color: var(--fg); }
.kb { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .95fr); gap: 14px; }
.kb-col { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 14px; border-radius: var(--r); }
.kb-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.kb-col h3 small { margin-left: auto; font-size: 10.5px; letter-spacing: .06em; }
.kb-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--fg); font-variant-numeric: tabular-nums; }
.kb-area { position: relative; flex: 1; min-height: 0; }
.kb-col-phone .kb-area { display: grid; place-items: center; }
.tk { position: absolute; left: 0; top: 0; z-index: 2; height: 66px; box-sizing: border-box; padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 3px 8px; align-items: center; border-radius: 16px; background: linear-gradient(135deg, rgba(40,38,58,.92), rgba(24,23,34,.92)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.16), 0 12px 26px -14px rgba(0,0,0,.7); opacity: 0; overflow: hidden; font-size: 13px; line-height: 1.25; will-change: transform, opacity; }
.tk-id { font: 500 10.5px/1 var(--f-mono); color: var(--mut); }
.tk-tag { justify-self: end; font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #A99BFF; }
.tk b { grid-column: 1 / -1; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.tk.is-doing::after { transform: scaleX(1); animation: work 1.6s linear infinite; }
@keyframes work { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
.phone { position: relative; height: min(100%, 540px); aspect-ratio: 9 / 19; box-sizing: border-box; padding: 7px; border-radius: 36px; background: linear-gradient(145deg, #2A2A36, #0E0E14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 70px -24px rgba(0,0,0,.8); transition: transform 1000ms var(--ease-out), box-shadow 600ms ease; }
.phone.shipped { transform: perspective(900px) rotateY(-16deg) rotateX(5deg); box-shadow: inset 0 0 0 1px rgba(255,153,0,.6), 0 0 80px rgba(255,153,0,.5), 0 30px 70px -24px rgba(0,0,0,.8); }
.ph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 30px; background: #F7F5F1; color: #111118; font-family: var(--f); }
.ly { position: absolute; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity 360ms var(--ease-out), transform 520ms var(--ease-out); }
.ly.on { opacity: 1; transform: none; }
.ly-wire { inset: 0; }
.ly-wire i { position: absolute; left: 7%; right: 7%; border: 1px dashed rgba(17,17,24,.22); border-radius: 12px; }
.ly-wire i:nth-child(1) { top: 9%; height: 13%; } .ly-wire i:nth-child(2) { top: 31%; height: 30%; } .ly-wire i:nth-child(3) { top: 64%; height: 9%; } .ly-wire i:nth-child(4) { bottom: 13%; height: 9%; }
.ly-wire.on { opacity: .55; }
.ly-shell { inset: 0; }
.ph-status { position: absolute; top: 2.5%; left: 9%; font: 600 9px/1 var(--f-mono); }
.ph-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; display: flex; justify-content: space-around; align-items: center; background: #FFFFFF; border-top: 1px solid rgba(17,17,24,.08); }
.ph-tabs i { width: 14%; height: 4px; border-radius: 4px; background: rgba(17,17,24,.2); }
.ph-tabs i:first-child { background: var(--brand); }
.ly-head { top: 8.5%; left: 7%; right: 7%; display: grid; gap: 7px; }
.ly-head b { font: 750 15px/1.1 var(--f); }
.ph-search { display: block; padding: 7px 10px; border-radius: 999px; background: #EAE6E0; font-size: 9.5px; color: #6B6672; }
.ly-sync { top: 24.5%; left: 7%; }
.ly-sync span, .ly-rgpd span, .ly-ci span { display: inline-flex; align-items: center; gap: 5px; font: 600 8.5px/1 var(--f-mono); }
.ly-sync span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1FA463; }
.ly-live { top: 30.5%; left: 7%; right: 7%; height: 30%; border-radius: 16px; background: radial-gradient(90% 80% at 80% 10%, #FFD08A, transparent 60%), linear-gradient(140deg, #FF9900, #7B61FF); }
.ph-live { position: absolute; top: 9px; left: 9px; padding: 3px 6px; border-radius: 4px; background: #E5242B; color: #FFFFFF; font: 700 8px/1 var(--f-mono); letter-spacing: .08em; }
.ly-rgpd { top: 64%; left: 7%; right: 7%; padding: 8px 10px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(17,17,24,.07); }
.ly-pay { left: 7%; right: 7%; bottom: 12.5%; height: 9%; display: grid; place-items: center; border-radius: 12px; background: #111118; color: #FFFFFF; font: 650 10.5px/1 var(--f); }
.ly-ci { top: 1.6%; left: 22%; right: 22%; display: flex; justify-content: center; }
.ly-ci span { padding: 4px 8px; border-radius: 999px; background: #111118; color: #FFFFFF; }
.ly-store { inset: 0; display: grid; place-items: center; background: rgba(247,245,241,.35); }
.ly-store span { display: grid; place-items: center; width: 64%; aspect-ratio: 1; box-sizing: border-box; padding: 10%; border-radius: 50%; border: 2px solid #D97A00; color: #B86400; background: rgba(247,245,241,.88); text-align: center; font: 700 9px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-12deg); }
.stage-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 759px) {
  .scrolly-kb { height: 380vh; }
  .stage-in { padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)); }
  .kb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px; }
  .kb-col-phone { grid-column: 1 / -1; }
  .kb-col { padding: 10px; border-radius: 18px; }
  .kb-col h3 small { display: none; }
  .tk { height: 54px; padding: 8px 9px; font-size: 12px; border-radius: 12px; }
  .tk-tag { display: none; }
  .phone { border-radius: 22px; padding: 5px; } .ph-screen { border-radius: 18px; }
  .ly-head b { font-size: 10px; } .ph-search, .ly-pay { font-size: 7px; }
  .ly-sync span, .ly-rgpd span, .ly-ci span, .ly-store span { font-size: 6px; }
  .stage-cta { display: none; }
}

/* ---------- Passage ---------- */
.pass-stage { isolation: isolate; }
.pass-layer { position: absolute; inset: 0; }
.pass-inv { clip-path: circle(0px at 50% 72%); }
.pass-in { position: relative; height: 100%; box-sizing: border-box; padding-top: calc(var(--nav-h) + 60px); }
.pass-title { margin: 0; font: 760 clamp(64px, 13vw, 200px)/.9 var(--f); letter-spacing: -0.06em; }
.pass-code { position: absolute; left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px)); bottom: 30%; margin: 0; font: 500 clamp(22px, 4.6vw, 64px)/1 var(--f-mono); letter-spacing: .04em; white-space: nowrap; }
.pass-code span { color: var(--brand); }
.tone-light .pass-code span { color: #A34E00; }
.pass-layer.tone-dark::after { content: ""; position: absolute; left: 50%; top: 0; height: 72%; border-left: 1px dashed rgba(255,255,255,.2); }
.pass-node { position: absolute; z-index: 3; left: 50%; top: 72%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 6px rgba(255,153,0,.22), 0 0 26px 6px rgba(255,153,0,.6); }
.pass-ring { position: absolute; z-index: 2; left: 50%; top: 72%; width: 0; height: 0; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px #FFC46B, 0 0 40px 8px rgba(255,153,0,.5), 0 0 140px 40px rgba(123,97,255,.28); }
.pass-cap { position: absolute; z-index: 4; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 10px 16px; border-radius: 14px; background: rgba(14,14,21,.72); color: #F5F4F2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 12.5px/1.4 var(--f-mono); text-align: center; }
@media (max-width: 759px) { .pass-cap { bottom: calc(98px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Marketing chapter (light) ---------- */
.mkt { overflow: hidden; }
.mkt::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 90% 10%, rgba(255,153,0,.22), transparent 70%), radial-gradient(40% 50% at 5% 90%, rgba(123,97,255,.14), transparent 70%); }
.mkt .wrap { position: relative; }
.mkt-grid { display: grid; gap: 28px; margin: 44px 0 36px; align-items: center; }
@media (min-width: 980px) { .mkt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 48px; } }
.funnel { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.funnel li { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 14px; box-sizing: border-box; width: var(--w); margin-inline: auto; padding: 20px 24px; border-radius: 20px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(11,11,16,.07), inset 0 1px 0 #FFFFFF, 0 16px 34px -22px rgba(30,20,0,.35); opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); }
.funnel li b { font: 680 19px/1.1 var(--f); letter-spacing: -0.02em; }
.funnel li span { font-size: 13.5px; color: var(--mut); text-align: right; }
.funnel li:nth-child(4) { background: linear-gradient(180deg, #FFB547, #FF9900); color: var(--on-brand); box-shadow: 0 18px 40px -16px rgba(255,153,0,.7); }
.funnel li:nth-child(4) span { color: rgba(20,10,0,.75); }
.funnel li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,153,0,.22) 50%, transparent 70%); transform: translateX(-110%); }
.funnel.in li { opacity: 1; transform: none; }
.funnel.in li::after { animation: sweep 3.4s var(--ease-in-out) infinite; }
.funnel li:nth-child(2) { transition-delay: 90ms; } .funnel li:nth-child(3) { transition-delay: 180ms; } .funnel li:nth-child(4) { transition-delay: 270ms; }
.funnel.in li:nth-child(2)::after { animation-delay: .35s; } .funnel.in li:nth-child(3)::after { animation-delay: .7s; } .funnel.in li:nth-child(4)::after { animation-delay: 1.05s; }
@keyframes sweep { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(110%); } }
@media (max-width: 559px) { .funnel li { width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; } .funnel li span { text-align: left; } }
.dash { padding: 22px; border-radius: var(--r); }
.tone-light .dash { background: rgba(255,255,255,.6); }
.dash-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dash-chart { width: 100%; height: auto; display: block; }
.dash-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1800ms var(--ease-in-out); }
.dash-area { opacity: 0; transition: opacity 900ms ease 900ms; }
.dash.in .dash-line { stroke-dashoffset: 0; }
.dash.in .dash-area { opacity: 1; }
.dash-kpis { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.dash-kpis li { display: grid; gap: 6px; font-size: 13.5px; color: var(--mut); }
.dash-kpis i { display: block; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--violet), var(--brand)); transform-origin: left; transform: scaleX(0); transition: transform 1200ms var(--ease-out) 300ms; }
.dash.in .dash-kpis i { transform: scaleX(var(--v)); }

/* ---------- Cases ---------- */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; }
.cases { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cases-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 999px) { .cases-all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .cases, .cases-all { grid-template-columns: minmax(0, 1fr); } }
.case { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r); overflow: hidden; transition: transform 320ms var(--ease-out); }
.case-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(70% 90% at 80% 10%, var(--c1), transparent 65%), radial-gradient(60% 80% at 10% 100%, var(--c2), transparent 65%), #12121A; }
.case-cover b { position: absolute; left: 22px; bottom: 16px; font: 760 clamp(44px, 5vw, 72px)/1 var(--f); letter-spacing: -0.05em; color: rgba(255,255,255,.92); }
.case-cover i { position: absolute; right: 16px; top: 16px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.35); color: #FFFFFF; font: 500 10.5px/1.3 var(--f-mono); font-style: normal; letter-spacing: .06em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.case-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.case-body h3 { margin: 0; font: 680 20px/1.2 var(--f); letter-spacing: -0.02em; }
.case-meta { margin: 0; font: 500 12px/1.4 var(--f-mono); color: var(--mut); }
.case-body p { margin: 0; font-size: 15px; color: color-mix(in srgb, var(--fg) 80%, transparent); }
.case-res { margin-top: 4px; font: 500 11.5px/1.3 var(--f-mono); color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .case:hover { transform: translateY(-4px); } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { min-height: 42px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--g-bd); font: 500 14px/1 var(--f); color: var(--mut); transition: background-color 200ms ease, color 200ms ease; }
.filters button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); box-shadow: none; }

/* ---------- Configurator ---------- */
.cfg { display: grid; gap: 0; margin-top: 36px; border-radius: 30px; overflow: hidden; background: rgba(18,18,27,.55); }
@media (min-width: 900px) { .cfg { grid-template-columns: minmax(0, 1fr) 300px; } }
.cfg-main { position: relative; min-width: 0; padding: clamp(22px, 3vw, 36px); }
.cfg-progress { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.cfg-progress i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(.2); transition: transform 500ms var(--ease-out); }
.cfg-count { margin: 12px 0 18px; font: 500 12px/1 var(--f-mono); color: var(--mut); }
.cfg-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.cfg-step legend { padding: 0; margin-bottom: 20px; font: 680 clamp(22px, 2.6vw, 32px)/1.15 var(--f); letter-spacing: -0.03em; }
.cfg-step legend small { font: 500 11px/1 var(--f-mono); color: var(--brand); letter-spacing: 0; vertical-align: middle; }
.cfg-step.is-enter { animation: stepIn 380ms var(--ease-out) both; }
.cfg-step.is-back { animation: stepBack 380ms var(--ease-out) both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(24px); } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-24px); } }
.opts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { display: flex; align-items: center; min-height: 58px; box-sizing: border-box; padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--g-bd); font-weight: 550; transition: background-color 160ms ease, box-shadow 160ms ease, transform 140ms var(--ease-out); }
.opt:active span { transform: scale(.98); }
.opt input:checked + span { background: rgba(255,153,0,.14); box-shadow: inset 0 0 0 2px var(--brand); }
.opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .opt:hover span { background: rgba(255,255,255,.09); } }
.fields { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 639px) { .fields { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 550; }
.field small { color: var(--mut); font-weight: 400; }
.field input, .field textarea { box-sizing: border-box; width: 100%; min-height: 50px; padding: 12px 14px; border: 0; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--g-bd); color: var(--fg); font: 400 16px/1.4 var(--f); }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.field.has-err input { box-shadow: inset 0 0 0 2px var(--danger); }
.field-check { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px; }
.field-check input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--brand); }
.field-check .err { grid-column: 1 / -1; }
.err { margin: 0; font-size: 13px; color: var(--danger); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cfg-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; }
.cfg-nav [data-next] { margin-left: auto; }
.cfg-done { text-align: left; padding: 10px 0; }
.cfg-done h3 { margin: 18px 0 8px; font: 700 28px/1.15 var(--f); letter-spacing: -0.03em; }
.cfg-done p { color: var(--mut); max-width: 52ch; }
.check { display: block; width: 64px; height: 64px; border-radius: 50%; background: var(--grad); box-shadow: 0 12px 34px -8px rgba(255,153,0,.7); animation: pop 520ms var(--ease-out) both; position: relative; }
.check::after { content: ""; position: absolute; left: 22px; top: 16px; width: 14px; height: 26px; border: solid var(--on-brand); border-width: 0 4px 4px 0; transform: rotate(45deg); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.cfg-sum { padding: clamp(22px, 3vw, 32px); background: rgba(255,255,255,.035); box-shadow: inset 1px 0 0 var(--g-bd); }
@media (max-width: 899px) { .cfg-sum { box-shadow: inset 0 1px 0 var(--g-bd); } }
.cfg-sum dl { display: grid; gap: 14px; margin: 0 0 20px; }
.cfg-sum dt { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.cfg-sum dd { margin: 3px 0 0; font-weight: 600; color: color-mix(in srgb, var(--fg) 45%, transparent); transition: color 200ms ease; }
.cfg-sum dd.is-set { color: var(--fg); }
.cfg-promise { margin: 0; font: 500 12px/1.4 var(--f-mono); color: var(--brand); }

/* ---------- Presence, FAQ, final ---------- */
.presence { display: grid; gap: 22px; align-items: center; padding: 26px 28px; border-radius: var(--r); background: rgba(18,18,27,.5); }
@media (min-width: 980px) { .presence { grid-template-columns: minmax(0, 1fr) auto auto; } }
.presence .h3 { margin: 0; }
.presence-l { grid-template-columns: minmax(0, 1fr); margin: 20px 0; }
.presence-l p { color: var(--mut); max-width: 60ch; margin: 10px 0 0; }
.cities { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cities li { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--g-bd); font-size: 14px; }
.cities time { font: 500 12px/1 var(--f-mono); color: var(--brand); font-variant-numeric: tabular-nums; }
.faq-wrap { display: grid; gap: 36px; }
@media (min-width: 980px) { .faq-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 20px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--g-bd); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font: 620 17px/1.35 var(--f); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 22px/1 var(--f-mono); color: var(--brand); transition: transform 240ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 22px 20px; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.faq details[open] .ans { animation: fadeUp 280ms var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(-4px); } }
.final { overflow: hidden; padding: clamp(36px, 6vw, 72px); border-radius: 36px; background: radial-gradient(60% 90% at 100% 0%, rgba(255,153,0,.35), transparent 60%), radial-gradient(50% 80% at 0% 100%, rgba(123,97,255,.3), transparent 60%), rgba(18,18,27,.5); }
.final .h2 { max-width: 18ch; }

/* ---------- Inner pages ---------- */
.page-hero { padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 110px)); padding-bottom: clamp(28px, 4vw, 48px); }
.svc-hero { display: grid; gap: 36px; align-items: end; }
@media (min-width: 980px) { .svc-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.svc-hero .ico { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 26px; }
.svc-hero .ico::after { inset: 16px; }
.svc-points { display: grid; gap: 10px; margin: 0; padding: 22px; border-radius: var(--r); list-style: none; }
.svc-points li { display: flex; gap: 10px; font-size: 15.5px; }
.svc-points li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: rgba(255,153,0,.2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FF9900' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m4.5 8.3 2.3 2.2 4.7-5'/></svg>") center / 12px no-repeat; }
.svc-grid { display: grid; gap: 14px; margin: 24px 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 999px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }
.svc-card { min-width: 0; padding: 24px; border-radius: var(--r); }
.svc-card h3 { margin: 0 0 8px; font: 650 19px/1.2 var(--f); letter-spacing: -0.02em; }
.svc-card p { margin: 0; font-size: 15px; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.svc-sec { padding-block: clamp(48px, 7vw, 90px); }
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: clamp(48px, 7vw, 90px) 0; padding: 26px 30px; border-radius: var(--r); background: radial-gradient(80% 140% at 100% 50%, rgba(255,153,0,.28), transparent 60%), rgba(18,18,27,.5); }
.band p { margin: 0; font-size: 18px; }
.values { display: grid; gap: 14px; margin: 10px 0 20px; padding: 0; list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 999px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .values { grid-template-columns: minmax(0, 1fr); } }
.values li { padding: 24px; border-radius: var(--r); }
.values h3 { margin: 0 0 8px; font: 650 19px/1.2 var(--f); }
.values p { margin: 0; color: color-mix(in srgb, var(--fg) 78%, transparent); font-size: 15px; }
.team { padding: 26px 28px; border-radius: var(--r); }
.contact-grid { display: grid; gap: 20px; padding-bottom: clamp(60px, 8vw, 120px); }
@media (min-width: 1100px) { .contact-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .contact-grid .cfg { margin-top: 0; } }
.contact-side { display: grid; gap: 12px; }
.ccard { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 18px; border-radius: 20px; text-decoration: none; background: rgba(18,18,27,.5); }
.ccard .ico { grid-row: span 2; }
.ccard b { font-weight: 650; }
.ccard span:not(.ico) { font-size: 13.5px; color: var(--mut); overflow-wrap: anywhere; }
.copy { grid-column: 2; justify-self: start; margin-top: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--g-bd); font: 500 12px/1 var(--f-mono); }
.sel { -webkit-user-select: all; user-select: all; }

/* ---------- Footer ---------- */
.foot { overflow: hidden; padding-top: clamp(60px, 8vw, 110px); border-top: 1px solid var(--line); }
.foot-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
.foot-brand p { margin: 16px 0 18px; max-width: 34ch; color: var(--mut); }
.foot nav { display: grid; align-content: start; gap: 10px; }
.foot nav a { text-decoration: none; color: color-mix(in srgb, var(--fg) 80%, transparent); }
@media (hover: hover) and (pointer: fine) { .foot nav a:hover { color: var(--brand); } }
.foot-grid > div p { margin: 0 0 8px; color: color-mix(in srgb, var(--fg) 80%, transparent); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 48px; padding-block: 20px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mut); }
.foot-word { margin: 0 0 -0.18em; text-align: center; font: 800 clamp(120px, 30vw, 440px)/.8 var(--f); letter-spacing: -0.07em; background: linear-gradient(180deg, rgba(255,153,0,.55), rgba(255,153,0,0) 78%); -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; }

/* ---------- Mobile dock, sheet, nudge, toasts ---------- */
.mdock { display: none; position: fixed; z-index: 55; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 8px; border-radius: 26px; background: rgba(14,14,21,.6); }
@media (max-width: 899px) { .mdock { display: grid; } .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
.mdock-menu { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: 20px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--g-bd); font-weight: 600; font-size: 15px; transition: transform 120ms var(--ease-out); }
.burger { display: grid; gap: 4px; } .burger i { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
.mdock-cta { display: grid; place-items: center; min-height: 52px; border-radius: 20px; text-decoration: none; background: linear-gradient(180deg, #FFB547, #FF9900 55%, #F58F00); color: var(--on-brand); font-weight: 700; font-size: 15.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px -10px rgba(255,153,0,.8); transition: transform 120ms var(--ease-out); }
.mdock-wa { display: grid; place-items: center; width: 52px; min-height: 52px; border-radius: 20px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--g-bd); transition: transform 120ms var(--ease-out); }
.mdock-wa .ico { width: 34px; height: 34px; border-radius: 11px; } .mdock-wa .ico::after { inset: 8px; }
.mdock-menu:active, .mdock-cta:active, .mdock-wa:active { transform: scale(.96); }
.scrim { position: fixed; inset: 0; z-index: 56; background: rgba(4,4,8,.55); opacity: 0; }
.msheet { position: fixed; z-index: 57; left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88svh; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 0 max(20px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); border-radius: 30px 30px 0 0; background: rgba(14,14,21,.86); transform: translateY(100%); will-change: transform; }
.grip { position: sticky; top: 0; height: 32px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.grip i { width: 42px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.3); }
.msheet-h { margin: 0 0 6px; font: 720 30px/1 var(--f); letter-spacing: -0.04em; }
.msheet-h:focus { outline: none; }
.mlinks { margin: 0 0 18px; padding: 0; list-style: none; }
.mlinks a { display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid var(--line); text-decoration: none; font: 620 21px/1 var(--f); letter-spacing: -0.02em; }
.mlinks a[aria-current="page"] { color: var(--brand); }
.msheet-cta { width: 100%; }
.nudge { position: fixed; z-index: 54; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; max-width: 380px; padding: 14px 14px 14px 18px; border-radius: 20px; background: rgba(18,18,27,.72); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out); }
.nudge.is-on { opacity: 1; transform: none; }
.nudge p { margin: 0; font-size: 14px; line-height: 1.4; }
.nudge-x { flex: none; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; color: var(--mut); }
@media (max-width: 899px) { .nudge { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); max-width: none; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }
.toaster { position: fixed; z-index: 95; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; width: min(420px, calc(100% - 24px)); pointer-events: none; }
@media (max-width: 899px) { .toaster { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(22,22,32,.88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 40px -16px rgba(0,0,0,.7); font-size: 14px; line-height: 1.4; transform: translateY(14px); opacity: 0; transition: transform 400ms var(--ease-out), opacity 300ms ease; pointer-events: auto; }
.toast.is-on { transform: none; opacity: 1; }
.toast::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }

/* ---------- Views ---------- */
.view.is-enter { animation: viewIn 460ms var(--ease-out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(16px); } }
@media (min-width: 900px) { @keyframes viewIn { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Calm and solid fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blob, .marquee-track, .scroll-cue span, .tk.is-doing::after, .funnel.in li::after { animation: none; }
  .reveal, .funnel li { opacity: 1; transform: none; transition: opacity 200ms ease; }
  .view.is-enter { animation: none; }
  .phone.shipped { transform: none; }
  .ly, .tk { transition: opacity 200ms ease; transform: none; }
  .scrolly-kb, .scrolly-pass { height: auto; }
  .stage { position: relative; height: auto; overflow: visible; }
  .kb { min-height: 540px; }
  .pass-stage { height: 100vh; height: 100svh; overflow: hidden; }
  .glow { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-in, .mega, .fcard, .cfg, .final, .presence, .dash, .mdock, .msheet, .nudge, .ccard, .toast, .pill, .btn-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: #15151E; }
}

/* ---------- Hero, centered: horizon arc + product reveal (from the Vetra / RichPath references) ---------- */
.hero { min-height: min(100svh, 980px); padding: calc(var(--nav-h) + 40px) 0 clamp(150px, 20vh, 230px); text-align: center; }
.hero-copy { position: relative; z-index: 2; max-width: 1060px; }
.hero-copy::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: min(960px, 130%); aspect-ratio: 1.7; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(7,7,11,.74), transparent); pointer-events: none; }
.hero .h1 { max-width: 13ch; margin-inline: auto; }
.hero .lede { margin-inline: auto; }
.hero .cta-row, .hero .trust { justify-content: center; }
.horizon { position: absolute; z-index: 1; left: 50%; top: calc(100% - clamp(120px, 17vh, 190px)); width: max(1400px, 150vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #07070B; pointer-events: none; box-shadow: 0 0 0 1px rgba(255,205,150,.55), 0 -6px 30px 2px rgba(255,170,60,.65), 0 -40px 120px 20px rgba(255,120,0,.38), 0 -120px 260px 60px rgba(255,90,0,.18), inset 0 40px 90px -30px rgba(255,153,0,.5); }
.hero-cards { position: absolute; inset: 0; z-index: 2; min-height: 0; }
.fc-1 { top: 24%; left: 4%; right: auto; bottom: auto; }
.fc-2 { top: 36%; right: 4%; left: auto; bottom: auto; }
.fc-3 { top: auto; bottom: 27%; left: 8%; right: auto; }
@media (max-width: 1179px) { .fcard { display: none; } }
.nav-in { background: rgba(8,8,12,.82); }
.nav.is-scrolled .nav-in { background: rgba(8,8,12,.9); }

.dash3d-wrap { position: relative; z-index: 2; margin-top: clamp(-150px, -12vh, -80px); padding: 0 max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px)) 30px; perspective: 1400px; }
.dash3d { display: grid; grid-template-columns: 64px minmax(0, 1fr); max-width: 1120px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: rgba(16,15,22,.74); transform-origin: 50% 0; will-change: transform; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.2), 0 -20px 80px -20px rgba(255,153,0,.35), 0 50px 120px -40px rgba(0,0,0,.85); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.d3-side { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 0; box-shadow: inset -1px 0 0 rgba(255,255,255,.08); }
.d3-side img { width: 30px; height: 30px; }
.d3-side i { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.08); }
.d3-side i.on { background: var(--brand); box-shadow: 0 0 16px rgba(255,153,0,.6); }
.d3-main { min-width: 0; padding: 20px; }
.d3-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 16px; }
.d3-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1fr); }
.d3-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); text-align: left; }
.d3-k { font: 500 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.d3-s { font-size: 12.5px; color: var(--mut); }
.ring { position: relative; width: 104px; aspect-ratio: 1; margin: 2px auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring-bg { stroke: rgba(255,255,255,.08); }
.ring-fg { stroke: var(--brand); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1600ms var(--ease-out); filter: drop-shadow(0 0 6px rgba(255,153,0,.6)); }
.dash3d.in .ring-fg { stroke-dashoffset: 28; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 104px; }
.bars i { flex: 1; height: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, rgba(255,153,0,.55), rgba(255,153,0,.08)); transform-origin: bottom; transform: scaleY(.05); transition: transform 1100ms var(--ease-out); }
.bars i:nth-child(2) { transition-delay: 50ms; } .bars i:nth-child(3) { transition-delay: 100ms; } .bars i:nth-child(4) { transition-delay: 150ms; }
.bars i:nth-child(5) { transition-delay: 200ms; } .bars i:nth-child(6) { transition-delay: 250ms; } .bars i:nth-child(7) { transition-delay: 300ms; } .bars i:nth-child(8) { transition-delay: 350ms; }
.bars i.hi { background: linear-gradient(180deg, #FFC46B, #FF9900); box-shadow: 0 0 20px rgba(255,153,0,.5); }
.dash3d.in .bars i { transform: scaleY(var(--h)); }
.d3-camp ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.d3-camp li { display: flex; align-items: center; gap: 8px; }
.d3-camp li span { margin-left: auto; font: 500 11px/1 var(--f-mono); color: var(--mut); }
.d3-camp li i { width: 8px; height: 8px; border-radius: 50%; background: #F5C04A; }
.d3-camp li i.on { background: #5BE38E; box-shadow: 0 0 10px #5BE38E; }
.d3-next b { font-size: 17px; }
.dash3d-cap { max-width: 1120px; margin: 18px auto 0; text-align: center; font-size: 14.5px; color: var(--mut); }
@media (max-width: 899px) { .dash3d { grid-template-columns: minmax(0, 1fr); } .d3-side { display: none; } .d3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .d3-leads { grid-column: 1 / -1; order: -1; } }
@media (max-width: 479px) { .d3-grid { grid-template-columns: minmax(0, 1fr); } .ring { width: 88px; } }
@media (prefers-reduced-motion: reduce) { .ring-fg, .bars i { transition: none; } }
#scene { opacity: 0; transition: opacity 900ms ease; }
#scene.is-ready { opacity: 1; }
.no-webgl #scene { display: none; }