/* Allora website. Brand colours (docs/branding.md): night blue background, royal blue at the top,
   sky blue glows, gold for buttons, "you" and highlights, lavender and sunrise peach as extra glows.
   Dark only, like the app. The 404 page uses the same file. */
:root {
  --bg: #060c33; --surface: #0c1747; --surface2: #13215c; --line: #22337a;
  --fg: #f5f9ff; --muted: #b6c5ec; --faint: #8796c4;
  --royal: #1a22e8; --sky: #9fdcff; --sky-pale: #d9f2ff; --sea: #4cb6ec; --lav: #a8b4ff; --peach: #ffc9a8;
  --gold: #e9c46f; --gold-pale: #f7e2a6; --gold-ink: #1d1500;
  --accent: var(--sky); --accent-ink: #06123a;
  --blush: var(--gold); --blush-ink: var(--gold-ink); /* the 3D demo's guide */
  --ok: #7fe0b0;
  --glass: rgba(255,255,255,.07); --glass-edge: rgba(255,255,255,.16);
  --display: "Inter", -apple-system, "SF Pro Display", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", -apple-system, "SF Pro Text", ui-sans-serif, system-ui, sans-serif;
  --wrap: 72rem; --radius: 24px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.65 var(--body); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--sky); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--fg); color: var(--bg); padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
html[lang="ro"] [data-en], html[lang="en"] [data-ro] { display: none !important; }

/* Slow glows behind the whole page */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky i { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .22; animation: drift 30s ease-in-out infinite alternate; }
.sky i:nth-child(1) { width: 50vmax; height: 50vmax; left: -15vmax; top: 30vh; background: var(--lav); }
.sky i:nth-child(2) { width: 40vmax; height: 40vmax; right: -12vmax; top: 60vh; background: var(--sea); animation-duration: 38s; }
.sky i:nth-child(3) { width: 34vmax; height: 34vmax; left: 30vw; top: 10vh; background: var(--peach); opacity: .1; animation-duration: 44s; }
@keyframes drift { to { transform: translate(6vmax, -8vmax) scale(1.1); } }

/* ---------- Top bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.08); }
.bar-in { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font: 700 1.45rem/1 var(--display); letter-spacing: -.045em; margin-right: auto; }
.mark { width: 30px; height: 30px; border-radius: 22.5%; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 4px 16px -4px rgba(159,220,255,.6); }
.links { display: flex; gap: 2px; }
.links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 9px 13px; border-radius: 999px; transition: color .2s, background-color .2s; }
.links a:hover { color: var(--fg); background: rgba(255,255,255,.07); }
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.seg button { position: relative; z-index: 1; border: 0; background: none; color: var(--muted); font: 700 .85rem/1 var(--body); padding: 9px 13px; border-radius: 999px; cursor: pointer; transition: color .3s; }
.seg button[aria-pressed="true"] { color: var(--gold-ink); }
.seg button:hover:not([aria-pressed="true"]) { color: var(--fg); }
.seg .knob { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--gold); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), width .45s ease; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 700 1rem/1 var(--body); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.btn.primary { background: linear-gradient(180deg, var(--gold-pale), var(--gold)); color: var(--gold-ink); box-shadow: 0 10px 34px -12px var(--gold), inset 0 1px 0 rgba(255,255,255,.6); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px var(--gold), inset 0 1px 0 rgba(255,255,255,.6); }
.btn.ghost { background: rgba(255,255,255,.08); color: var(--fg); border-color: rgba(255,255,255,.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn.ghost:hover { border-color: rgba(255,255,255,.45); }
.btn.small { min-height: 44px; padding: 0 18px; font-size: .93rem; }
.btn svg { width: 19px; height: 19px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: var(--muted); font-size: .88rem; font-weight: 600; }
.pill svg { width: 15px; height: 15px; color: var(--sky); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Hero: the living field ---------- */
.hero { position: relative; min-height: min(100svh, 980px); display: grid; align-items: center; isolation: isolate; overflow: hidden;
  background: radial-gradient(70% 60% at 70% 45%, rgba(159,220,255,.28), transparent 70%), linear-gradient(180deg, var(--royal) 0%, #1520c4 45%, #0c157a 78%, rgba(6,12,51,0) 100%);
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; touch-action: pan-y; }
/* a soft shade behind the headline, so the glows never fight the text */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 22% 48%, rgba(12,20,150,.55), transparent 70%); }
@media (hover: hover) { .field { cursor: none; } }
.hero-in { position: relative; padding-block: 72px 110px; pointer-events: none; }
.hero-in a, .hero-in button { pointer-events: auto; }
.caps { font-size: .85rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.hero h1 { font-size: clamp(3rem, 8.4vw, 6.6rem); line-height: .95; letter-spacing: -.055em; margin: 18px 0 24px; max-width: 11ch; text-shadow: 0 6px 40px rgba(6,12,80,.35); }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--gold-pale), var(--gold) 50%, var(--peach)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.28rem); color: var(--sky-pale); max-width: 32rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 26px; }
.field-hint { display: inline-flex; align-items: center; gap: 10px; color: var(--sky-pale); font-size: .92rem; font-weight: 500; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(6,12,51,.35); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: 100%; }
.field-hint i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: breathe 2s ease-in-out infinite; }
.field-toast { position: absolute; left: 50%; bottom: 92px; transform: translate(-50%, 16px); z-index: 2; padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: .95rem; white-space: nowrap;
  background: rgba(6,12,51,.72); border: 1px solid rgba(233,196,111,.5); color: var(--fg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s; }
.field-toast.show { opacity: 1; transform: translate(-50%, 0); }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 26px; height: 42px; border-radius: 14px; border: 2px solid rgba(255,255,255,.4); }
.scroll-cue i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--fg); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(12px); opacity: .3; } }

/* ---------- Three words ---------- */
.words { padding: 80px 0 30px; }
.big-words { display: flex; flex-wrap: wrap; gap: .1em .35em; font: 700 clamp(3.2rem, 11vw, 9rem)/1 var(--display); letter-spacing: -.06em; }
.big-words .w { display: inline-block; color: transparent; -webkit-text-stroke: 1.5px rgba(217,242,255,.55); transition: color .8s ease, -webkit-text-stroke-color .8s ease; }
.big-words .w.in { color: var(--fg); -webkit-text-stroke-color: transparent; }
.big-words .w.gold.in { background: linear-gradient(100deg, var(--gold-pale), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Sections ---------- */
section { padding: 100px 0; position: relative; }
.head { max-width: 46rem; margin-bottom: 48px; }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker { color: var(--gold); font-weight: 600; font-size: .82rem; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 14px; }
.title { font-size: clamp(2.1rem, 4.8vw, 3.6rem); line-height: 1.03; letter-spacing: -.045em; }
.intro { color: var(--muted); font-size: 1.12rem; margin-top: 18px; }
.head.center .intro { margin-left: auto; margin-right: auto; max-width: 36rem; }

/* ---------- How it works: pinned scene + scrolling steps ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.scene-wrap { position: sticky; top: 96px; display: grid; justify-items: center; gap: 14px; }
.scene { width: min(460px, 100%); aspect-ratio: 1; overflow: visible; }
.scene text { font: 700 18px var(--body); fill: #0a1450; text-anchor: middle; }
.scene .me-t { fill: var(--gold-ink); font-size: 15px; }
html[lang="ro"] .scene [data-en], html[lang="en"] .scene [data-ro] { display: none; }
.s-range { fill: none; stroke: rgba(159,220,255,.35); stroke-width: 1.5; stroke-dasharray: 3 7; transform-origin: 200px 200px; transform: scale(0); transition: transform 1s cubic-bezier(.2, 1.2, .3, 1); }
.s-range.r2 { stroke: rgba(159,220,255,.2); transition-delay: .1s; }
.s-far circle { opacity: .5; }
.s-person { opacity: .25; transform-box: fill-box; transform-origin: center; transition: opacity .6s, transform .6s; }
.s-me circle { transform-box: fill-box; transform-origin: center; animation: breathe 2.4s ease-in-out infinite; }
.s-bubble, .s-chat, .s-wave, .s-lens { opacity: 0; transition: opacity .5s, transform .6s; }
.s-bubble { transform: translateY(14px); }
.s-bubble rect { fill: rgba(233,196,111,.95); }
.s-bubble text { fill: var(--gold-ink); font-size: 15px; }
/* step 2: people nearby see what you're up for (sky ripples), then someone taps "I'm in" */
.s-see, .s-in { opacity: 0; transition: opacity .5s; }
.s-see circle { fill: none; stroke: var(--sky); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.s-in rect { fill: rgba(255,255,255,.94); }
.s-in text { fill: #0a1450; font-size: 13px; }
.s-wave circle { fill: none; stroke: var(--gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.s-link { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 70; stroke-dashoffset: 70; filter: drop-shadow(0 0 6px var(--gold)); transition: stroke-dashoffset 1s ease .3s; }
.s-lens { fill: #fffbea; filter: drop-shadow(0 0 10px var(--gold)); }
.s-chat rect { fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.35); }
.s-chat rect.c2 { fill: rgba(233,196,111,.9); stroke: none; }
.s-chat text { fill: var(--fg); font-size: 15px; font-weight: 600; }
.s-chat text.c2 { fill: var(--gold-ink); }
.s-chat .c2 { opacity: 0; transition: opacity .5s .9s; }
/* step 1: you appear, your range opens, people nearby light up */
.scene[data-step] .s-range { transform: scale(1); }
.scene[data-step="1"] .s-range { animation: rangepulse 2.6s ease-in-out infinite; }
.scene[data-step] .s-person { opacity: 1; }
/* step 2: what you're up for floats above you, with its 3-hour ring */
.scene[data-step="2"] .s-bubble { opacity: 1; transform: none; }
.scene[data-step="2"] .s-see { opacity: 1; }
.scene[data-step="2"] .s-see circle { animation: ripple 2.4s ease-out infinite; }
.scene[data-step="2"] .s-see circle + circle { animation-delay: 1.2s; }
.scene[data-step="2"] .s-in { opacity: 1; transition-delay: 1.6s; }
.scene[data-step="2"] .p1 { transform: scale(1.12); transition-delay: 1.6s; }
/* step 3: a wave travels to Ioana; she waves back */
.scene[data-step="3"] .s-wave { opacity: 1; }
.scene[data-step="3"] .s-wave circle { animation: ripple 1.8s ease-out infinite; }
.scene[data-step="3"] .s-wave circle + circle { animation-delay: .9s; }
.scene[data-step="3"] .p1, .scene[data-step="4"] .p1 { transform: scale(1.25); }
.scene[data-step="3"] .p2, .scene[data-step="3"] .p3, .scene[data-step="4"] .p2, .scene[data-step="4"] .p3 { opacity: .35; }
.scene[data-step="3"] .s-link, .scene[data-step="4"] .s-link { stroke-dashoffset: 0; }
.scene[data-step="3"] .s-lens, .scene[data-step="4"] .s-lens { opacity: 1; animation: lens 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
/* step 4: you talk */
.scene[data-step="4"] .s-chat, .scene[data-step="4"] .s-chat .c2 { opacity: 1; }
.scene-cap { color: var(--muted); font-size: .95rem; text-align: center; min-height: 1.5em; }
@keyframes rangepulse { 50% { stroke: rgba(159,220,255,.6); } }
@keyframes ripple { from { transform: scale(.9); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
@keyframes lens { 50% { transform: scale(1.5); } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 0 24px 28px; border-left: 2px solid rgba(255,255,255,.1); opacity: .35; transition: opacity .5s, border-color .5s; }
.step.on { opacity: 1; border-color: var(--gold); }
.step .n { font: 600 .9rem/1 var(--display); color: var(--gold); letter-spacing: .2em; }
.step h3 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.05; letter-spacing: -.04em; }
.step p { color: var(--muted); font-size: 1.12rem; max-width: 28rem; }

/* ---------- Up for: bubbles orbiting you ---------- */
.orbit { position: relative; width: min(640px, 100%); aspect-ratio: 1.35; margin: 0 auto; }
.orbit-ring { position: absolute; inset: 8% 4%; border-radius: 50%; border: 1px dashed rgba(159,220,255,.25); }
.orbit-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 12px; text-align: center; width: 15rem; }
.core-orb { width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff8e0, var(--gold) 55%, rgba(233,196,111,.15) 75%); box-shadow: 0 0 40px rgba(233,196,111,.6); animation: breathe 2.6s ease-in-out infinite; position: relative; }
.core-orb::after { content: attr(data-emoji); position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; }
.orbit.picked .core-orb::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 3px solid var(--gold); border-right-color: transparent; animation: spin 3s linear infinite; }
.core-txt { font-weight: 600; color: var(--fg); min-height: 3em; }
.core-txt small { display: block; color: var(--muted); font-weight: 400; }
.ob { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; font: 600 .98rem/1 var(--body); color: var(--fg); cursor: pointer; white-space: nowrap;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background-color .25s, border-color .25s, box-shadow .25s; will-change: transform; }
.ob:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.14); }
.ob[aria-pressed="true"] { background: linear-gradient(180deg, var(--gold-pale), var(--gold)); color: var(--gold-ink); border-color: transparent; box-shadow: 0 0 30px rgba(233,196,111,.6); }

/* ---------- Try it: the 3D phone (classes used by phone3d.js) ---------- */
.stage { position: relative; margin-top: 36px; }
.stage::before { content: ""; position: absolute; inset: 8% 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(159,220,255,.38), transparent); filter: blur(30px); pointer-events: none; }
#phone3d { position: relative; height: min(760px, 86vh); min-height: 520px; margin: 0 auto; max-width: 720px; touch-action: pan-y; cursor: grab; border-radius: var(--radius); }
#phone3d:active { cursor: grabbing; }
#phone3d canvas { display: block; width: 100%; height: 100%; }
#phone3d.ready .stage-wait { display: none; }
.stage-wait { position: absolute; inset: 0; display: grid; place-items: center; }
.stage-wait i { width: min(300px, 64vw); aspect-ratio: 7.76 / 15.99; border-radius: 46px; background: var(--surface); border: 10px solid #111; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
#phone3d.flat { display: grid; place-items: center; cursor: pointer; }
#phone3d .flat-screen { width: auto; height: 92%; max-width: 92%; aspect-ratio: 700 / 1490; border-radius: 44px; border: 10px solid #111; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.stage-state { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: min(300px, calc(100% - 40px)); padding: 24px 22px; border-radius: var(--radius); text-align: center;
  background: color-mix(in srgb, var(--surface2) 92%, transparent); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.4); display: grid; gap: 10px; justify-items: center; }
.stage-state[hidden] { display: none; }
.stage-state b { font: 700 1.15rem/1.3 var(--display); }
.stage-state p { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.stage-state .btn { margin-top: 6px; }
.stage-state[data-kind="loading"] { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
#phone3d[data-state] canvas { opacity: .25; }
.guide { max-width: 640px; margin: 14px auto 0; text-align: center; }
.guide ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.guide li { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--muted); font-weight: 600; font-size: .95rem; transition: background-color .3s, color .3s, border-color .3s; }
.guide li i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--surface2); color: var(--fg); font-size: .85rem; }
.guide li.now { color: var(--fg); border-color: var(--gold); }
.guide li.now i { background: var(--gold); color: var(--gold-ink); }
.guide li.done { color: var(--fg); }
.guide li.done i { background: var(--ok); color: #06281a; font-size: 0; }
.guide li.done i::before { content: "✓"; font-size: .9rem; font-weight: 800; }
.guide-done { display: none; margin-top: 12px; color: var(--fg); font-weight: 600; }
.guide.all-done .guide-done { display: block; }
.guide.all-done .guide-drag { display: none; }
.guide-foot { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; color: var(--faint); font-size: .9rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: none) { .guide-drag { display: none; } }
.hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }

/* ---------- Safety: a mini radar with real switches ---------- */
.safety { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.mini { margin-top: 30px; padding: 22px; border-radius: 28px; background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: grid; gap: 14px; justify-items: center; }
.mini svg { width: min(300px, 100%); }
.m-ring { fill: none; stroke: rgba(159,220,255,.4); stroke-dasharray: 3 6; }
.m-sweep { fill: none; stroke: var(--sky); stroke-width: 2; opacity: 0; transform-origin: 150px 150px; animation: sweep 3s ease-out infinite; }
.m-p { transition: opacity .6s; }
.m-me { transform-origin: 150px 150px; transition: opacity .8s, transform .8s; }
.m-me circle { animation: breathe 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mini[data-ghost="true"] .m-me { opacity: .22; }
.mini[data-ghost="true"] .m-sweep { animation: none; }
.mini[data-closed="true"] .m-me { opacity: 0; transform: scale(.2); }
.mini[data-closed="true"] .m-sweep { animation: none; }
.mini-state { font-weight: 600; text-align: center; min-height: 1.6em; }
.switches { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sw { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--fg); font: 600 .95rem/1 var(--body); cursor: pointer; }
.sw:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.1); }
.sw i { position: relative; width: 42px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.18); transition: background-color .3s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.sw[aria-checked="true"] i { background: var(--gold); }
.sw[aria-checked="true"] i::after { transform: translateX(16px); }
.sw svg { width: 17px; height: 17px; color: var(--sky); }
@keyframes sweep { from { transform: scale(.15); opacity: .8; } to { transform: scale(1); opacity: 0; } }
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.promises li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-edge); }
.promises li:last-child { background: none; border: 0; padding: 4px 0; }
.promises svg { flex: none; width: 22px; height: 22px; color: var(--gold); margin-top: 3px; }
.promises b { display: block; font-weight: 650; }
.promises span span { color: var(--muted); }
.promises .btn svg { color: inherit; margin: 0; width: 18px; height: 18px; }

/* ---------- And also: glass cards that tilt toward the pointer ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { position: relative; overflow: hidden; padding: 28px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease, border-color .25s; }
.card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(159,220,255,.16), transparent 60%); opacity: 0; transition: opacity .3s; }
.card:hover { border-color: rgba(255,255,255,.3); }
.card:hover::before { opacity: 1; }
.card.big { grid-row: span 2; display: flex; flex-direction: column; }
.card .ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: rgba(159,220,255,.14); color: var(--sky); margin-bottom: 18px; }
.card .ico svg { width: 24px; height: 24px; }
.card h3 { font-size: 1.3rem; letter-spacing: -.025em; margin-bottom: 8px; }
.card p { color: var(--muted); }
.bt { position: relative; flex: 1; min-height: 180px; margin-top: 20px; }
.bt i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 2px solid var(--sky); opacity: 0; animation: sweep2 3s ease-out infinite; }
.bt i:nth-child(2) { animation-delay: 1s; } .bt i:nth-child(3) { animation-delay: 2s; }
.bt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 20px var(--gold); }
@keyframes sweep2 { from { transform: scale(.5); opacity: .9; } to { transform: scale(5); opacity: 0; } }

/* ---------- Romania map ---------- */
.map-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; align-items: center; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 32px; padding: 40px; overflow: hidden; }
.map { position: relative; }
.map svg { width: 100%; height: auto; overflow: visible; }
.map .land { fill: rgba(16,32,94,.8); stroke: rgba(159,220,255,.45); stroke-width: 1.5; }
.map .city .halo { animation: cityping 3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.map .city .dotc { stroke: var(--bg); stroke-width: 2; }
.map .city text { fill: var(--muted); font: 600 13px var(--body); }
.map .city.capital text { fill: var(--fg); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { max-width: 50rem; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-edge); padding: 4px 22px; transition: border-color .3s; }
.faq details[open] { border-color: rgba(233,196,111,.45); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 650; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-pale); }
.faq summary:hover::after { background: rgba(233,196,111,.18); }
.faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--gold); font: 600 1.2rem/1 var(--body); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 18px; }

/* ---------- Join ---------- */
.cta { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 80px 28px; border-radius: 40px; display: grid; justify-items: center; gap: 4px;
  background: linear-gradient(180deg, var(--royal), #0d1680); border: 1px solid rgba(255,255,255,.18); }
.cta .title { font-size: clamp(2.6rem, 7vw, 5rem); }
.cta .intro { color: var(--sky-pale); max-width: 32rem; margin: 14px auto 28px; }
.cta .facts { justify-content: center; margin-top: 26px; }
.cta-glows { position: absolute; inset: 0; z-index: -1; }
.cta-glows i { position: absolute; top: 50%; width: 360px; height: 360px; margin-top: -180px; border-radius: 50%; opacity: .45; animation: meet 8s ease-in-out infinite; }
.cta-glows i:nth-child(1) { left: calc(50% - 330px); --dx: 40px; background: radial-gradient(circle, rgba(217,242,255,.7), rgba(159,220,255,.25) 50%, transparent 70%); }
.cta-glows i:nth-child(2) { right: calc(50% - 330px); --dx: -40px; background: radial-gradient(circle, rgba(255,241,230,.7), rgba(255,201,168,.25) 50%, transparent 70%); }
.cta-glows b { position: absolute; left: 50%; top: 50%; width: 120px; height: 260px; margin: -130px 0 0 -60px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,251,234,.6), rgba(233,196,111,.25) 45%, transparent 70%); animation: breathe 4s ease-in-out infinite; }
@keyframes meet { 50% { transform: translateX(var(--dx, 40px)); } }

/* ---------- Footer ---------- */
footer { border-top: 1px solid rgba(255,255,255,.08); padding: 32px 0 calc(44px + env(safe-area-inset-bottom)); }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; color: var(--faint); font-size: .92rem; }
.foot .brand { margin-right: 0; font-size: 1.2rem; }
.foot .mark { width: 26px; height: 26px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--fg); }
.brand:hover .mark { box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 4px 20px -2px rgba(159,220,255,.8); }

/* ---------- Things slide in once, as they come into view ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease var(--d, 0s), transform .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), color .8s ease, -webkit-text-stroke-color .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }
/* The top of the page is never hidden, even for a moment: it only slides up into place. */
.js .hero .reveal { opacity: 1; transform: none; animation: rise .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) backwards; }
@keyframes rise { from { transform: translateY(22px); } }

@keyframes breathe { 50% { transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cityping { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .big-words .w { color: var(--fg); -webkit-text-stroke-color: transparent; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) { .links { display: none; } }
@media (max-width: 900px) {
  section { padding: 72px 0; }
  .story, .safety, .map-card { grid-template-columns: minmax(0, 1fr); }
  .story { gap: 0; }
  .scene-wrap { top: 64px; z-index: 2; padding: 10px 0 8px; background: linear-gradient(180deg, var(--bg) 82%, transparent); }
  .scene { width: min(260px, 66vw); }
  .step { min-height: 52vh; padding-left: 20px; }
  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .card.big { grid-row: auto; grid-column: span 2; }
  .map-card { padding: 28px 22px; }
}
@media (max-width: 640px) {
  .hero { min-height: 100svh; align-items: start; }
  .hero-in { padding-block: 40px 150px; }
  .hero h1 { margin: 14px 0 18px; }
  .field-hint { font-size: .85rem; }
  .field-toast { white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 40px); bottom: 84px; }
  .bar .cta-top { display: none; }
  .bar-in { gap: 8px; }
  .orbit { aspect-ratio: .82; }
  .orbit-core { width: 11rem; }
  .core-orb { width: 72px; height: 72px; }
  .ob { padding: 9px 13px; font-size: .9rem; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .card.big { grid-column: auto; }
  .bt { min-height: 130px; }
  .cta { padding: 60px 18px; border-radius: 30px; }
  .foot nav { margin-left: 0; }
  .map .city text { font-size: 24px; }
  .map .city.capital text { font-size: 26px; }
  .map .city:not(.capital):not(.big) text { display: none; }
  #phone3d { height: min(640px, 78svh); min-height: 460px; }
  .stage { margin-top: 20px; }
}
@media (max-width: 360px) {
  .brand span { display: none; }
  .seg button { padding: 8px 8px; }
}