/* ForgeInt — onboarding.css: the flow layer (loader, header, void). Screen 1:
   loader + void; later screens add the intro + form. Monochrome + molten. */
html, body { margin:0; height:100%; background:#060606; overflow:hidden; }
body.onboarding { color:var(--ink, #F4F1EC); font-family:var(--font-sans, ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif); }

#ob-gl { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block; }
#atmo {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(rgba(0,0,0,0.14), transparent 13%, transparent 87%, rgba(0,0,0,0.2)),
    radial-gradient(120% 90% at 50% 44%, transparent 50%, rgba(0,0,0,0.46) 100%);
}
#atmo::before { content:""; position:absolute; inset:0; mix-blend-mode:screen; background:radial-gradient(142% 112% at 50% 50%, transparent 84%, rgba(255,120,60,0.045) 96%, rgba(255,88,30,0.08) 100%); }
/* soft radial scrim directly behind the centered content so text stays legible
   over the detailed chrome brain (text-always-wins). Fades in past the loader. */
body.onboarding::after { content:""; position:fixed; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity 700ms; background:radial-gradient(ellipse 60% 62% at 50% 50%, rgba(6,6,6,0.9), rgba(6,6,6,0.6) 46%, rgba(6,6,6,0) 78%); }
body.onboarding.ob-ready::after { opacity:1; }

/* ---------- header ---------- */
.ob-head { position:fixed; top:0; left:0; right:0; z-index:6; display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,44px); }
.ob-wordmark { font:600 18px/1 var(--font-sans,sans-serif); letter-spacing:-0.01em; color:var(--ink,#F4F1EC); text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.ob-wordmark i { width:6px; height:6px; border-radius:50%; background:var(--molten,#FF5A1E); display:inline-block; }
/* Το ob-head είναι ελαφρύτερο από το κύριο nav: ψηλότερο παιδί 20,5px, όχι
   το 42px pill. Στα 22px που παίρνει αλλού σε desktop, το header μεγάλωνε
   64,5 -> 66px, δηλαδή κατέβαινε όλη η σκηνή onboarding. Καρφί στα 18px. */
.ob-wordmark .fi-mark { width:18px; height:18px; }
.ob-back { font:400 11px/1 var(--font-mono,ui-monospace,monospace); letter-spacing:0.16em; text-transform:uppercase; color:var(--dim,#B9BEC7); text-decoration:none; transition:color 240ms; }
.ob-back:hover { color:var(--ink,#F4F1EC); }
.ob-right { display:flex; align-items:center; gap:22px; }

/* ---------- loader ---------- */
#ob-loader { position:fixed; inset:0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background:#060606; transition:opacity 700ms cubic-bezier(0.44,0,0.56,1), visibility 700ms; }
#ob-loader.gone { opacity:0; visibility:hidden; pointer-events:none; }
#ob-loader { transition:opacity 450ms cubic-bezier(0.44,0,0.56,1), visibility 450ms; }
.ob-count { font:300 clamp(64px,12vw,140px)/0.9 var(--font-sans,sans-serif); letter-spacing:-0.03em; color:var(--ink,#F4F1EC); font-variant-numeric:tabular-nums; }
.ob-count::after { content:"%"; font-size:0.3em; color:var(--amber,#FF8A4C); margin-left:0.15em; vertical-align:super; }
.ob-loadlabel { font:400 11px/1 var(--font-mono,ui-monospace,monospace); letter-spacing:0.32em; text-transform:uppercase; color:rgba(244,241,236,0.45); }

/* ---------- void resting state (screen 1) — a quiet centered marker ---------- */
.ob-void-note { position:fixed; left:0; right:0; bottom:8vh; z-index:5; text-align:center;
  font:400 11px/1 var(--font-mono,ui-monospace,monospace); letter-spacing:0.3em; text-transform:uppercase; color:rgba(244,241,236,0.4);
  opacity:0; transition:opacity 900ms 300ms; }
body.ob-ready .ob-void-note { opacity:1; }

@media (prefers-reduced-motion: reduce) { #ob-loader { transition:none; } .ob-void-note { transition:none; } }

/* ---------- intro (mission briefing) ---------- */
.ob-stage { position:fixed; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 clamp(22px,6vw,80px); pointer-events:none; }
.ob-brief { max-width:900px; width:100%; margin:0 auto; }
.ob-eyebrow { font:400 11px/1 var(--font-mono,ui-monospace,monospace); letter-spacing:0.3em; text-transform:uppercase; color:var(--amber,#FF8A4C); margin:0 0 26px; opacity:0; transform:translateY(14px); }
.ob-title { font:600 clamp(42px,9vw,124px)/0.98 var(--font-sans,sans-serif); letter-spacing:-0.03em; margin:0 0 30px; }
.ob-solid { color:var(--ink,#F4F1EC); display:block; opacity:0; transform:translateY(22px); }
.ob-outline { color:transparent; -webkit-text-stroke:1.4px rgba(244,241,236,0.82); text-stroke:1.4px rgba(244,241,236,0.82); display:block; opacity:0; transform:translateY(22px); }
.ob-sub { font:400 clamp(15px,2.1vw,20px)/1.6 var(--font-sans,sans-serif); color:var(--dim,#B9BEC7); max-width:44ch; margin:0 auto 42px; opacity:0; transform:translateY(14px); }
.ob-start { pointer-events:auto; opacity:0; transform:translateY(14px); }
/* staggered reveal after the loader clears (brain settles -> headline -> sub -> CTA) */
body.ob-ready .ob-eyebrow { transition:opacity 500ms 40ms, transform 500ms 40ms; opacity:1; transform:none; }
body.ob-ready .ob-solid { transition:opacity 560ms 120ms cubic-bezier(0.2,0,0.1,1), transform 560ms 120ms cubic-bezier(0.2,0,0.1,1); opacity:1; transform:none; }
body.ob-ready .ob-outline { transition:opacity 560ms 220ms cubic-bezier(0.2,0,0.1,1), transform 560ms 220ms cubic-bezier(0.2,0,0.1,1); opacity:1; transform:none; }
body.ob-ready .ob-sub { transition:opacity 500ms 320ms, transform 500ms 320ms; opacity:1; transform:none; }
body.ob-ready .ob-start { transition:opacity 500ms 420ms, transform 500ms 420ms; opacity:1; transform:none; }
/* advancing to the form fades the intro out */
body.ob-form .ob-stage { opacity:0; pointer-events:none; transition:opacity 480ms cubic-bezier(0.44,0,0.56,1); }
@media (prefers-reduced-motion: reduce) { .ob-eyebrow,.ob-solid,.ob-outline,.ob-sub,.ob-start { transition:none !important; opacity:1; transform:none; } }

/* ---------- form (4 steps) ---------- */
.ob-form-stage { position:fixed; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 clamp(22px,6vw,80px); opacity:0; pointer-events:none; transition:opacity 460ms cubic-bezier(0.44,0,0.56,1); }
body.ob-form .ob-form-stage { opacity:1; pointer-events:auto; }
body.ob-submit .ob-form-stage { opacity:0; pointer-events:none; }
.ob-step { position:absolute; left:0; right:0; margin:0 auto; width:100%; max-width:660px; padding:0 clamp(22px,6vw,80px); box-sizing:border-box; opacity:0; transform:translateY(26px); pointer-events:none;
  transition:opacity 560ms cubic-bezier(0.2,0,0.1,1), transform 560ms cubic-bezier(0.2,0,0.1,1); }
.ob-step.active { opacity:1; transform:none; pointer-events:auto; }
.ob-step.back { transform:translateY(-26px); }
.ob-prog { font:400 11px/1 var(--font-mono,ui-monospace,monospace); letter-spacing:0.22em; text-transform:uppercase; color:var(--amber,#FF8A4C); margin:0 0 22px; }
.ob-prog span { color:rgba(244,241,236,0.4); letter-spacing:0.14em; }
.ob-q { font:600 clamp(28px,4.6vw,52px)/1.05 var(--font-sans,sans-serif); letter-spacing:-0.02em; color:var(--ink,#F4F1EC); margin:0 0 12px; }
.ob-help { font:400 clamp(14px,1.8vw,17px)/1.5 var(--font-sans,sans-serif); color:var(--dim,#B9BEC7); margin:0 0 30px; }
.ob-field { display:block; margin:0 auto 20px; max-width:520px; text-align:left; }
.ob-field span { display:block; font:400 10px/1 var(--font-mono,ui-monospace,monospace); letter-spacing:0.2em; color:rgba(244,241,236,0.5); margin:0 0 10px; }
.ob-field input, .ob-field textarea { width:100%; box-sizing:border-box; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.14); border-radius:12px; padding:14px 16px; color:var(--ink,#F4F1EC); font:400 16px/1.4 var(--font-sans,sans-serif); outline:none; resize:none; transition:border-color 240ms, background 240ms; }
.ob-field input:focus, .ob-field textarea:focus { border-color:rgba(255,138,76,0.6); background:rgba(255,138,76,0.04); }
.ob-field.err input { border-color:var(--molten,#FF5A1E); }
.ob-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 30px; }
.ob-chip { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.16); color:var(--dim,#B9BEC7); border-radius:999px; padding:10px 18px; font:400 12px/1 var(--font-mono,ui-monospace,monospace); letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:border-color 200ms, color 200ms, background 200ms; }
.ob-chip:hover { border-color:rgba(255,138,76,0.5); color:var(--ink,#F4F1EC); }
.ob-chip.on { background:rgba(255,90,30,0.14); border-color:var(--molten,#FF5A1E); color:var(--ink,#F4F1EC); }
.ob-nav { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:6px; }
.ob-back-step { background:none; border:0; cursor:pointer; font:400 11px/1 var(--font-mono,ui-monospace,monospace); letter-spacing:0.16em; text-transform:uppercase; color:var(--dim,#B9BEC7); transition:color 220ms; }
.ob-back-step:hover { color:var(--ink,#F4F1EC); }
.ob-next[disabled] { opacity:0.38; pointer-events:none; }
/* ---------- progress bar (spans the 4 form steps) ---------- */
.ob-pbar { position:fixed; left:0; right:0; top:0; height:2px; z-index:7; background:rgba(255,255,255,0.07); opacity:0; transition:opacity 420ms; pointer-events:none; }
.ob-pbar #ob-pfill { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--molten,#FF5A1E), var(--amber,#FF8A4C)); box-shadow:0 0 12px rgba(255,90,30,0.5); transition:width 620ms cubic-bezier(0.2,0,0.1,1); }
body.ob-form .ob-pbar { opacity:1; }
body.ob-submit .ob-pbar { opacity:0; }
@media (prefers-reduced-motion: reduce) { .ob-pbar #ob-pfill { transition:width 200ms; } }
@media (prefers-reduced-motion: reduce) { .ob-step { transition:opacity 200ms; } .ob-step.back { transform:none; } }

/* ---------- submit confirmation ---------- */
.ob-done-stage { position:fixed; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 clamp(22px,6vw,80px); opacity:0; pointer-events:none; transition:opacity 620ms 220ms cubic-bezier(0.2,0,0.1,1); }
body.ob-submit .ob-done-stage { opacity:1; pointer-events:auto; }
/* on submit the confirmation shows ALONE — force intro + steps fully hidden */
body.ob-submit .ob-stage, body.ob-submit .ob-form-stage { opacity:0 !important; pointer-events:none !important; }
.ob-done { max-width:680px; margin:0 auto; }
.ob-lit { color:var(--amber,#FF8A4C); }
.ob-strip { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:34px 0 42px; }
.ob-node { font:400 11px/1.3 var(--font-mono,ui-monospace,monospace); letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,241,236,0.32); border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:9px 15px; transition:color 420ms, border-color 420ms, background 420ms; }
.ob-node.lit { color:var(--ink,#F4F1EC); border-color:var(--molten,#FF5A1E); background:rgba(255,90,30,0.12); }
.ob-strip i { width:20px; height:1px; background:rgba(255,255,255,0.18); }
.ob-done .ob-nav { gap:24px; }
/* ---------- MOBILE PASS (≤600px): calmer, tighter, thumb-friendly ---------- */
@media (max-width:600px) {
  .ob-head { padding:16px 18px; }
  .ob-wordmark { font-size:16px; }
  .ob-back { font-size:10px; letter-spacing:0.12em; }
  .ob-right { gap:16px; }
  .ob-count { font-size:clamp(72px,26vw,110px); }
  /* brain fills more of a small screen — pull the scrim in so text stays legible */
  body.onboarding::after { background:radial-gradient(ellipse 88% 56% at 50% 50%, rgba(6,6,6,0.94), rgba(6,6,6,0.66) 52%, rgba(6,6,6,0) 82%); }
  .ob-stage, .ob-form-stage, .ob-done-stage { padding:0 20px; }
  .ob-title { margin:0 0 22px; }
  .ob-outline { -webkit-text-stroke-width:1px; text-stroke-width:1px; }
  .ob-sub { margin:0 auto 32px; }
  .ob-step { padding:0 20px; }
  .ob-prog { margin:0 0 16px; font-size:10px; letter-spacing:0.16em; }
  .ob-q { margin:0 0 10px; }
  .ob-help { margin:0 0 24px; }
  .ob-field { margin:0 auto 16px; }
  .ob-field input, .ob-field textarea { padding:13px 15px; border-radius:11px; }  /* 16px font kept — no iOS zoom */
  .ob-chips { gap:8px; margin:0 0 24px; }
  .ob-chip { padding:12px 16px; }   /* ≥44px tall touch target */
  .ob-nav { gap:16px; margin-top:4px; }
  /* confirmation strip stacks vertically on a phone — reads cleaner than wrapped pills */
  .ob-strip { flex-direction:column; gap:10px; margin:26px 0 32px; }
  .ob-strip i { width:1px; height:14px; }
  .ob-void-note { bottom:6vh; letter-spacing:0.24em; }
}


/* Stage 1 - honest hand-off: the brief is composed into a mailto:. The address
   stays visible and copyable so a visitor with no mail client is not stranded. */
.ob-mail { display:inline-block; font:500 clamp(15px,2vw,19px)/1 var(--font-mono,ui-monospace,monospace); letter-spacing:0.04em; color:var(--ink,#F4F1EC); text-decoration:none; border:1px solid var(--molten,#FF5A1E); background:rgba(255,90,30,0.12); border-radius:999px; padding:13px 21px; -webkit-user-select:all; user-select:all; }
.ob-mail:hover, .ob-mail:focus-visible { background:rgba(255,90,30,0.2); }
.ob-copy { font:400 11px/1.3 var(--font-mono,ui-monospace,monospace); letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,241,236,0.55); background:none; border:1px solid rgba(255,255,255,0.18); border-radius:999px; padding:10px 16px; cursor:pointer; }
.ob-copy:hover, .ob-copy:focus-visible { color:var(--ink,#F4F1EC); border-color:rgba(255,255,255,0.4); }
.ob-copy.done { color:var(--amber,#FF8A4C); border-color:var(--amber,#FF8A4C); }

/* ---------- legal access (this page has no footer) ---------- */
.ob-legal { position:fixed; left:clamp(18px,4vw,44px); bottom:calc(env(safe-area-inset-bottom,0px) + 16px); z-index:7;
  display:flex; align-items:center; gap:9px; font:400 9.5px/1 var(--font-mono,ui-monospace,monospace);
  letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,241,236,0.30); }
.ob-legal a { color:inherit; text-decoration:none; transition:color 240ms cubic-bezier(0.44,0,0.56,1); }
.ob-legal a:hover { color:var(--molten,#ff5a1e); }
/* 0.42 -> 0.62: i enimerosi ar.13 sto simeio syllogis itan 3.68:1 se rgb(6,6,6),
   kato apo to WCAG AA (4.5:1) gia 11.5px. To 0.62 dinei ~7:1 kai menei optika
   defterevon. Idia katigoria me to in-canvas badge tou services (8b44d46). */
.ob-legal-note { margin:-14px 0 26px; font:400 11.5px/1.6 var(--font-sans,sans-serif); color:rgba(244,241,236,0.62); }
.ob-legal-note span { display:block; }
.ob-legal-note a { color:rgba(244,241,236,0.70); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.22); }
.ob-legal-note a:hover { color:var(--molten,#ff5a1e); border-bottom-color:var(--molten,#ff5a1e); }
@media (max-width: 700px) {
  .ob-legal { font-size:9px; gap:7px; bottom:calc(env(safe-area-inset-bottom,0px) + 12px); }
  .ob-legal-note { font-size:11px; margin:-10px 0 20px; }
}

/* ── hidden form stage must be inert ─────────────────────────────────────────
   .ob-form-stage is pointer-events:none until body.ob-form, but .ob-step.active
   (and .pill-cta/.ob-chip inside it) re-enable pointer-events, so the invisible
   form kept stealing taps from the intro's "Start your project" button. At
   390x844 the two overlap and onboarding could not be started at all on mobile
   (pre-existing: before the business-type chips were removed, a chip was the
   thief; after, it was .ob-nav). Keep the whole stage out of hit-testing until
   it is actually shown. */
body:not(.ob-form) .ob-form-stage,
body:not(.ob-form) .ob-form-stage * { pointer-events: none; }