/* ══════════════════════════════════════════════
   ROOT / RESET
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:        #03020a;
  --bg2:       #07050f;
  --surface:   #0e0c1a;
  --glass:     rgba(255,255,255,0.04);
  --glass-b:   rgba(255,255,255,0.08);
  --glass-h:   rgba(255,255,255,0.10);
  --border:    rgba(255,255,255,0.08);
  --border2:   rgba(255,255,255,0.14);
  --neon:      #a259ff;
  --neon2:     #c084fc;
  --neon3:     #7c3aed;
  --cyan:      #22d3ee;
  --cyan2:     #06b6d4;
  --green:     #4ade80;
  --green2:    #16a34a;
  --amber:     #fbbf24;
  --red:       #f87171;
  --pink:      #f472b6;
  --blue:      #60a5fa;
  --text:      #f0eeff;
  --muted:     #9488b8;
  --muted2:    #6b6490;
  --radius:    16px;
  --radius-sm: 10px;
  --glow-purple: 0 0 40px rgba(162,89,255,0.18), 0 0 80px rgba(162,89,255,0.08);
  --glow-cyan:   0 0 40px rgba(34,211,238,0.15), 0 0 80px rgba(34,211,238,0.06);
  --glow-green:  0 0 30px rgba(74,222,128,0.20);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neon3); border-radius: 99px; }

/* ══════════════════════════════════════════════
   AMBIENT BACKGROUND ORBS
══════════════════════════════════════════════ */
.bg-orbs {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
  animation: orbFloat 14s ease-in-out infinite alternate;
}
.orb-1 { width:600px;height:600px;top:-200px;left:-200px;background:radial-gradient(circle,#7c3aed55,transparent); animation-duration:18s; }
.orb-2 { width:400px;height:400px;top:40%;right:-150px;background:radial-gradient(circle,#22d3ee44,transparent); animation-duration:14s; animation-delay:-6s; }
.orb-3 { width:350px;height:350px;bottom:-100px;left:35%;background:radial-gradient(circle,#a259ff33,transparent); animation-duration:20s; animation-delay:-3s; }
@keyframes orbFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,40px) scale(1.08); }
}

/* ══════════════════════════════════════════════
   GLASS UTILITY
══════════════════════════════════════════════ */
.glass {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--border2);
}
.glass-card {
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
}
.glass-card:hover { border-color: rgba(162,89,255,0.35); box-shadow: var(--glow-purple); }
.glass-surface {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════ */
h1 { font-size: clamp(2rem,5vw,3.2rem); font-weight: 900; letter-spacing: -.04em; line-height:1.1; }
h2 { font-size: 1.5rem; font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 700; }
p  { color: var(--muted); }

.gradient-text {
  background: linear-gradient(120deg, var(--neon2), var(--cyan), var(--neon2));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

.neon-text  { color: var(--neon2); text-shadow: 0 0 20px rgba(192,132,252,.6); }
.cyan-text  { color: var(--cyan);  text-shadow: 0 0 20px rgba(34,211,238,.5); }
.green-text { color: var(--green); text-shadow: 0 0 20px rgba(74,222,128,.5); }

/* ══════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════ */
.page { display: none; position: relative; z-index: 1; min-height: 100vh; }
.page.active { display: block; }
.page.active#page-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 58px;
  padding-bottom: 5rem;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }

/* ══════════════════════════════════════════════
   NAV
══════════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 58px;
  background: rgba(3,2,10,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem;
}
.nav-logo {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1rem; font-weight: 900; letter-spacing: -.02em;
}
.nav-logo-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--neon3), var(--cyan2));
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; box-shadow: 0 0 16px rgba(162,89,255,.5);
}
.nav-logo span { background: linear-gradient(90deg,var(--neon2),var(--cyan)); -webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.nav-steps { display: flex; align-items: center; gap: .15rem; }
.nav-step-btn {
  display: flex; align-items: center; gap: .45rem;
  padding: .38rem .85rem; border-radius: 8px;
  font-size: .78rem; font-weight: 700;
  color: var(--muted2); cursor: pointer;
  border: 1px solid transparent; transition: all .2s;
  background: none;
}
.nav-step-btn .step-n {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--glass-b); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 900; transition: all .2s;
}
.nav-step-btn.active { color: var(--text); background: var(--glass); border-color: var(--border2); }
.nav-step-btn.active .step-n { background: var(--neon3); border-color: var(--neon3); color: #fff; box-shadow: 0 0 10px rgba(124,58,237,.6); }
.nav-step-btn.done   { color: var(--muted); }
.nav-step-btn.done   .step-n { background: var(--green2); border-color: var(--green2); color: #fff; }
.nav-step-btn:hover:not(.active) { color: var(--text); background: var(--glass); }
.nav-divider { width: 20px; height: 1px; background: var(--border2); }
.nav-right { display: flex; gap: .5rem; align-items: center; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--neon3), var(--cyan2));
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 900; cursor: pointer;
  border: 1px solid rgba(162,89,255,.4);
  box-shadow: 0 0 14px rgba(162,89,255,.3);
}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.3rem; border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 800;
  cursor: pointer; border: none; transition: all .18s;
  white-space: nowrap; letter-spacing: -.01em;
}
.btn-neon {
  background: linear-gradient(135deg, var(--neon3), #5b21b6);
  color: #fff; box-shadow: 0 0 28px rgba(124,58,237,.4), 0 2px 8px rgba(0,0,0,.4);
}
.btn-neon:hover { box-shadow: 0 0 40px rgba(124,58,237,.7), 0 2px 8px rgba(0,0,0,.4); transform: translateY(-1px); }
.btn-cyan {
  background: linear-gradient(135deg, var(--cyan2), #0891b2);
  color: #fff; box-shadow: 0 0 28px rgba(6,182,212,.35);
}
.btn-cyan:hover { box-shadow: 0 0 44px rgba(6,182,212,.6); transform: translateY(-1px); }
.btn-green {
  background: linear-gradient(135deg, var(--green2), #15803d);
  color: #fff; box-shadow: var(--glow-green);
}
.btn-green:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-glass {
  background: var(--glass); color: var(--text);
  border: 1px solid var(--border2);
  backdrop-filter: blur(10px);
}
.btn-glass:hover { background: var(--glass-h); border-color: rgba(162,89,255,.4); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--glass); color: var(--text); }
.btn-sm { padding: .4rem .9rem; font-size: .78rem; }
.btn-lg { padding: .9rem 2.2rem; font-size: 1rem; }
.btn-icon { padding: .45rem; }
.w-full { width: 100%; }

/* ══════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .65rem; border-radius: 99px;
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid transparent;
}
.badge-neon  { background:#a259ff18;color:var(--neon2);border-color:#a259ff44; }
.badge-cyan  { background:#22d3ee18;color:var(--cyan); border-color:#22d3ee44; }
.badge-green { background:#4ade8018;color:var(--green);border-color:#4ade8044; }
.badge-amber { background:#fbbf2418;color:var(--amber);border-color:#fbbf2444; }
.badge-red   { background:#f8717118;color:var(--red);  border-color:#f8717144; }
.badge-pink  { background:#f472b618;color:var(--pink); border-color:#f472b644; }
.badge-muted { background:rgba(255,255,255,.05);color:var(--muted);border-color:var(--border2); }

/* ══════════════════════════════════════════════
   FORM
══════════════════════════════════════════════ */
.form-group  { display: flex; flex-direction: column; gap: .45rem; }
.form-label  { font-size: .75rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.form-input, .form-select, .form-textarea {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text); padding: .65rem .9rem;
  font-size: .9rem; font-family: inherit;
  transition: border .15s, box-shadow .15s;
  width: 100%;
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
  outline: none; border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(162,89,255,.15), 0 0 20px rgba(162,89,255,.1);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-select { appearance: none; cursor: pointer; }

/* Range */
input[type="range"] {
  -webkit-appearance:none; width:100%; height:4px;
  background:var(--glass-b); border-radius:99px; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--neon); box-shadow:0 0 12px rgba(162,89,255,.7);
}

/* Toggle */
.toggle-wrap { display:flex;align-items:center;gap:.65rem;cursor:pointer;user-select:none; }
.toggle { position:relative;width:40px;height:22px;background:var(--glass-b);border-radius:99px;transition:background .2s;flex-shrink:0;border:1px solid var(--border2); }
.toggle.on { background:var(--neon3);border-color:var(--neon3);box-shadow:0 0 14px rgba(124,58,237,.5); }
.toggle::after { content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 6px #0006; }
.toggle.on::after { transform:translateX(18px); }

/* Progress */
.progress-bar { height:5px;border-radius:99px;background:var(--glass-b);overflow:hidden; }
.progress-fill { height:100%;border-radius:99px;background:linear-gradient(90deg,var(--neon),var(--cyan));transition:width .6s ease; }
.progress-fill-green { background:linear-gradient(90deg,var(--green),var(--cyan)); }

/* ══════════════════════════════════════════════
   STEP PROGRESS RAIL (top of pages)
══════════════════════════════════════════════ */
.step-rail {
  display: flex; align-items: center; gap: 0;
  margin: 84px auto 0; max-width: 700px;
  padding: 0 2rem; position: relative; z-index: 1;
}
.rail-step {
  display: flex; flex-direction: column; align-items: center; flex: 1;
  cursor: pointer;
}
.rail-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--glass); border: 2px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 900; color: var(--muted2);
  transition: all .3s; position: relative; z-index: 1;
}
.rail-step.active .rail-num {
  background: var(--neon3); border-color: var(--neon3); color: #fff;
  box-shadow: 0 0 20px rgba(124,58,237,.7);
}
.rail-step.done .rail-num {
  background: var(--green2); border-color: var(--green2); color: #fff;
  box-shadow: var(--glow-green);
}
.rail-label { font-size: .65rem; font-weight: 700; color: var(--muted2); margin-top: .4rem; text-align:center; white-space:nowrap; }
.rail-step.active .rail-label { color: var(--neon2); }
.rail-step.done  .rail-label { color: var(--green); }
.rail-line { flex: 1 1 0; height: 2px; background: var(--border2); margin-bottom: 24px; transition: background .3s; }
.rail-line.done { background: linear-gradient(90deg,var(--green2),var(--neon3)); }

/* ══════════════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════════════ */
.page-head {
  text-align: center; padding: 2.5rem 2rem 0;
  position: relative; z-index: 1;
}
.page-head .eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--neon2); padding: .28rem .75rem; border-radius: 99px;
  background: rgba(162,89,255,.1); border: 1px solid rgba(162,89,255,.3);
  margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════
   STEP 1 — AI CHAT
══════════════════════════════════════════════ */
#page-1 {
  min-height: 100vh;
}
.chat-container {
  max-width: 780px; margin: 0 auto; padding: 0 2rem 2rem;
  position: relative; z-index: 1;
}
.chat-messages {
  display: flex; flex-direction: column; gap: 1.25rem;
  min-height: 280px; max-height: 55vh; overflow-y: auto;
  padding-right: .5rem; margin-bottom: 1.5rem;
}
.chat-msg { display: flex; gap: .75rem; align-items: flex-start; animation: msgIn .3s ease; }
@keyframes msgIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.chat-msg.user { flex-direction: row-reverse; }
.chat-bubble {
  max-width: 75%; padding: .85rem 1.1rem;
  border-radius: 16px; font-size: .9rem; line-height: 1.55;
}
.chat-msg.ai .chat-bubble {
  background: rgba(162,89,255,.1);
  border: 1px solid rgba(162,89,255,.25);
  border-radius: 4px 16px 16px 16px;
  color: var(--text);
}
.chat-msg.user .chat-bubble {
  background: linear-gradient(135deg,rgba(124,58,237,.4),rgba(6,182,212,.25));
  border: 1px solid rgba(162,89,255,.3);
  border-radius: 16px 4px 16px 16px;
  color: var(--text);
}
.chat-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 900;
}
.chat-avatar.ai  { background:linear-gradient(135deg,var(--neon3),var(--cyan2));box-shadow:0 0 14px rgba(162,89,255,.5); }
.chat-avatar.user{ background:linear-gradient(135deg,#1e1b4b,#312e81); border:1px solid var(--border2); font-size: .75rem; }

/* Typing indicator */
.typing-indicator { display:none; }
.typing-indicator.visible { display:flex; }
.typing-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--neon2); margin: 0 2px;
  animation: typingBounce .8s infinite;
}
.typing-dot:nth-child(2) { animation-delay:.15s; }
.typing-dot:nth-child(3) { animation-delay:.3s; }
@keyframes typingBounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-7px);opacity:1} }

/* Chat input */
.chat-input-wrap {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  padding: 1rem 2rem 1.5rem;
  background: linear-gradient(to top, rgba(3,2,10,.95) 70%, transparent);
  backdrop-filter: blur(10px);
}
.chat-input-inner {
  max-width: 780px; margin: 0 auto;
  display: flex; gap: .75rem; align-items: flex-end;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
  border-radius: 14px; padding: .75rem .75rem .75rem 1rem;
  box-shadow: 0 0 30px rgba(162,89,255,.12), 0 8px 32px rgba(0,0,0,.4);
  transition: border .2s, box-shadow .2s;
}
.chat-input-inner:focus-within {
  border-color: rgba(162,89,255,.5);
  box-shadow: 0 0 40px rgba(162,89,255,.2), 0 8px 32px rgba(0,0,0,.4);
}
#chat-input {
  flex: 1; background: transparent; border: none; color: var(--text);
  font-size: .92rem; font-family: inherit; resize: none;
  min-height: 24px; max-height: 140px; line-height: 1.5;
}
#chat-input:focus { outline: none; }
#chat-input::placeholder { color: var(--muted2); }
.chat-send-btn {
  width: 36px; height: 36px; border-radius: 10px; border: none;
  background: linear-gradient(135deg,var(--neon3),var(--cyan2));
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0; transition: all .2s;
  box-shadow: 0 0 18px rgba(162,89,255,.5);
}
.chat-send-btn:hover { transform: scale(1.08); box-shadow: 0 0 28px rgba(162,89,255,.7); }

/* Quick prompts */
.quick-prompts { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1rem; }
.quick-prompt {
  padding: .4rem .9rem; border-radius: 99px;
  font-size: .78rem; font-weight: 700;
  background: rgba(162,89,255,.08); color: var(--neon2);
  border: 1px solid rgba(162,89,255,.25);
  cursor: pointer; transition: all .2s;
}
.quick-prompt:hover { background: rgba(162,89,255,.18); border-color: rgba(162,89,255,.5); transform: translateY(-1px); }

/* ══════════════════════════════════════════════
   STEP 2 — BLUEPRINT RESULTS
══════════════════════════════════════════════ */
.results-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  max-width: 1000px; margin: 2rem auto 0; padding: 0 2rem 3rem;
  position: relative; z-index: 1;
}
@media(max-width:680px){.results-layout{grid-template-columns:1fr;}}

.result-card {
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border2);
  overflow: hidden; transition: all .3s;
}
.result-card:hover { border-color: rgba(162,89,255,.4); box-shadow: var(--glow-purple); }
.result-card-head {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem;
}
.result-icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.icon-diy  { background:linear-gradient(135deg,#1e1b4b,#312e81);box-shadow:0 0 20px rgba(124,58,237,.4); }
.icon-bp   { background:linear-gradient(135deg,#0c4a6e,#0e7490);box-shadow:0 0 20px rgba(6,182,212,.4); }
.result-card-body { padding: 1.25rem 1.5rem; }

/* DIY plan steps */
.plan-step {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .75rem 0; border-bottom: 1px solid var(--border);
  animation: fadeSlide .35s ease both;
}
.plan-step:last-child { border-bottom: none; }
@keyframes fadeSlide {
  from{opacity:0;transform:translateX(-12px)}
  to{opacity:1;transform:translateX(0)}
}
.plan-step-num {
  min-width: 24px; height: 24px; border-radius: 8px;
  background: rgba(162,89,255,.15); border: 1px solid rgba(162,89,255,.3);
  color: var(--neon2); font-size: .72rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.plan-step-text { font-size: .86rem; color: var(--text); line-height: 1.5; flex: 1; }
.plan-step-time { font-size: .7rem; color: var(--muted2); white-space: nowrap; }

/* Blueprint card inside results */
.mini-bp-card {
  background: rgba(255,255,255,.03); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); overflow: hidden;
  cursor: pointer; transition: all .2s;
  margin-bottom: .75rem;
}
.mini-bp-card:hover { border-color: rgba(34,211,238,.4); box-shadow: var(--glow-cyan); transform: translateY(-2px); }
.mini-bp-cover {
  height: 70px; display:flex; align-items:center; justify-content:center;
  font-size: 2rem;
}
.mini-bp-body { padding: .75rem; }
.rating-stars { color: var(--amber); font-size: .75rem; }

/* ══════════════════════════════════════════════
   STEP 3 — BLUEPRINT TAILOR
══════════════════════════════════════════════ */
.tailor-layout {
  display: grid; grid-template-columns: 1fr 340px; gap: 1.75rem;
  max-width: 1060px; margin: 2rem auto 0; padding: 0 2rem 3rem;
  position: relative; z-index: 1;
}
@media(max-width:860px){.tailor-layout{grid-template-columns:1fr;}}

.tailor-section {
  background: var(--glass); backdrop-filter: blur(20px);
  border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 1.4rem; margin-bottom: 1.25rem;
}
.section-eyebrow {
  font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .09em;
  color: var(--neon2); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.section-eyebrow::before {
  content:''; display:block; width:3px; height:12px;
  background:var(--neon); border-radius:99px; box-shadow:0 0 8px var(--neon);
}

.step-builder-item {
  display: flex; align-items: center; gap: .65rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .6rem .85rem;
  margin-bottom: .5rem; cursor: grab; transition: border .2s;
}
.step-builder-item:hover { border-color: rgba(162,89,255,.3); }
.drag-handle { color: var(--muted2); font-size:.9rem;cursor:grab; }
.step-inp { flex:1;background:transparent;border:none;color:var(--text);font-size:.85rem;font-family:inherit; }
.step-inp:focus { outline:none; }
.remove-btn { color:var(--muted2);cursor:pointer;border:none;background:none;font-size:.85rem;padding:0 .2rem;transition:color .15s; }
.remove-btn:hover { color:var(--red); }

/* Live preview card (sticky) */
.preview-sticky { position: sticky; top: 72px; }
.preview-glass {
  background: var(--glass); backdrop-filter: blur(24px);
  border: 1px solid var(--border2); border-radius: var(--radius);
  overflow: hidden;
}
.preview-cover-strip {
  height: 100px; display:flex;align-items:center;justify-content:center;
  font-size: 2.8rem; position: relative;
  background: linear-gradient(135deg,#110827,#0d1f3c);
}
.preview-cover-strip::after {
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(3,2,10,.6),transparent);
}
.preview-body-inner { padding: 1rem; }

/* publish checklist */
.chk-row { display:flex;align-items:center;gap:.65rem;font-size:.83rem;color:var(--muted2);padding:.38rem 0; }
.chk-icon { width:18px;height:18px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.6rem;transition:all .2s; }
.chk-icon.done { background:var(--green);border-color:var(--green);color:#fff;box-shadow:var(--glow-green); }

/* ══════════════════════════════════════════════
   STEP 4 — STAFFING
══════════════════════════════════════════════ */
.staffing-layout {
  max-width: 1060px; margin: 2rem auto 0; padding: 0 2rem 3rem;
  position: relative; z-index: 1;
}
.role-slots {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1rem;
  margin-bottom: 1.75rem;
}
.role-slot {
  background: var(--glass); backdrop-filter: blur(20px);
  border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 1.1rem; transition: all .25s; position: relative;
}
.role-slot.filled { border-color: rgba(74,222,128,.3); box-shadow: 0 0 20px rgba(74,222,128,.1); }
.role-slot.empty  { border-style: dashed; }
.role-slot.empty:hover { border-color: rgba(162,89,255,.5); background: rgba(162,89,255,.06); cursor: pointer; }
.role-slot-title { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .8rem; }
.role-slot.filled .role-slot-title { color: var(--muted); }

.worker-profile { display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem; }
.worker-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; border: 2px solid var(--border2);
  position: relative; margin-bottom: .25rem;
}
.worker-avatar .online-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--bg);
}
.dot-green-s { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot-amber-s { background: var(--amber); }
.worker-name  { font-size: .88rem; font-weight: 700; color: var(--text); }
.worker-role  { font-size: .72rem; color: var(--muted); }
.worker-stars { color: var(--amber); font-size: .72rem; }
.worker-rate  { font-size: .75rem; font-weight: 700; color: var(--neon2); }
.assign-btn   { margin-top: .65rem; }

.assign-self-btn {
  width: 100%; padding: .65rem; border-radius: var(--radius-sm);
  background: rgba(162,89,255,.08); border: 2px dashed rgba(162,89,255,.3);
  color: var(--neon2); font-size: .8rem; font-weight: 800;
  cursor: pointer; transition: all .2s; text-align:center;
}
.assign-self-btn:hover { background:rgba(162,89,255,.18); border-color:rgba(162,89,255,.6); }

/* Talent pool */
.talent-grid {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: .85rem;
}
.talent-card {
  background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  padding: .9rem; cursor: pointer; transition: all .2s;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;
}
.talent-card:hover { border-color:rgba(162,89,255,.45); box-shadow:var(--glow-purple); transform:translateY(-2px); }
.talent-card.hired { border-color:rgba(74,222,128,.4); box-shadow:0 0 20px rgba(74,222,128,.12); }
.talent-avatar { width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem; }
.talent-skills { display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center;margin-top:.25rem; }

/* ══════════════════════════════════════════════
   STEP 5 — LAUNCH HUB
══════════════════════════════════════════════ */
.launch-layout {
  max-width: 1060px; margin: 2rem auto 0; padding: 0 2rem 3rem;
  position: relative; z-index: 1;
}
.launch-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem; }

.launch-module {
  background: var(--glass); backdrop-filter: blur(22px);
  border: 1px solid var(--border2); border-radius: var(--radius);
  overflow: hidden; transition: all .3s;
}
.launch-module:hover { border-color:rgba(162,89,255,.4); box-shadow:var(--glow-purple); }
.launch-module-head {
  padding: 1.1rem 1.25rem .85rem;
  display:flex;align-items:center;gap:.75rem;
  border-bottom: 1px solid var(--border);
}
.launch-module-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;
}
.launch-module-body { padding:1.1rem 1.25rem; }

.checklist-item {
  display:flex;align-items:center;gap:.75rem;
  padding:.6rem 0; border-bottom:1px solid var(--border); cursor:pointer;
  transition:background .15s; border-radius:4px;
  font-size:.86rem;
}
.checklist-item:last-child { border-bottom:none; }
.checklist-item:hover { color:var(--text); }
.c-check {
  width:20px;height:20px;border-radius:6px;flex-shrink:0;
  border:2px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
  transition:all .2s;
}
.c-check.done { background:var(--green);border-color:var(--green);color:#fff;box-shadow:var(--glow-green); }
.c-label.done { text-decoration:line-through;color:var(--muted2); }

/* Website builder preview */
.site-preview {
  background: rgba(0,0,0,.4); border:1px solid var(--border2);
  border-radius: var(--radius-sm); overflow: hidden; margin-top: .75rem;
}
.site-browser-bar {
  background: rgba(255,255,255,.05); padding:.5rem .75rem;
  display:flex;align-items:center;gap:.5rem;
  border-bottom:1px solid var(--border);
}
.browser-dot { width:8px;height:8px;border-radius:50%; }
.site-content { padding:1rem; min-height:100px; }

/* Tools grid */
.tools-list { display:flex;flex-direction:column;gap:.55rem; }
.tool-row {
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.65rem .85rem;transition:border .2s;
}
.tool-row:hover { border-color:rgba(162,89,255,.35); }
.tool-icon-s { font-size:1.1rem;width:28px;text-align:center; }

/* Launch button big */
.launch-cta {
  text-align:center;margin-top:2.5rem;
  background:var(--glass);backdrop-filter:blur(20px);
  border:1px solid rgba(74,222,128,.25);border-radius:var(--radius);
  padding:2.5rem;
  box-shadow:0 0 60px rgba(74,222,128,.08);
}
.launch-btn-big {
  display:inline-flex;align-items:center;gap:.75rem;
  padding:1.1rem 3rem;border-radius:12px;
  background:linear-gradient(135deg,var(--green2),#15803d);
  color:#fff;font-size:1.1rem;font-weight:900;
  border:none;cursor:pointer;
  box-shadow:0 0 40px rgba(74,222,128,.4),0 2px 16px rgba(0,0,0,.5);
  transition:all .2s;letter-spacing:-.01em;
}
.launch-btn-big:hover { box-shadow:0 0 70px rgba(74,222,128,.6),0 2px 16px rgba(0,0,0,.5);transform:translateY(-2px) scale(1.02); }

/* ══════════════════════════════════════════════
   HUB TABS
══════════════════════════════════════════════ */
.hub-tabs-wrap { display:flex; justify-content:center; padding:.85rem 2rem 0; }
.hub-tabs { display:flex; gap:.3rem; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--radius); padding:.3rem; }
.hub-tab { flex:1; padding:.55rem 1.1rem; border-radius:9px; background:transparent; border:none; cursor:pointer; font-size:.82rem; font-weight:700; color:var(--muted); transition:all .2s; white-space:nowrap; }
.hub-tab:hover { color:var(--text); background:rgba(255,255,255,.05); }
.hub-tab.active { background:rgba(162,89,255,.15); color:var(--neon2); border:1px solid rgba(162,89,255,.3); }
.hub-panel { display:none; }
.hub-panel.active { display:block; }

/* ══════════════════════════════════════════════
   SITE BUILDER
══════════════════════════════════════════════ */
.builder-outer { max-width:1160px; margin:1.25rem auto 0; padding:0 1.5rem 3rem; }
.builder-layout { display:grid; grid-template-columns:1fr 320px; gap:1rem; align-items:start; }
@media(max-width:900px){ .builder-layout { grid-template-columns:1fr; } }
.builder-preview-wrap { background:var(--glass); backdrop-filter:blur(20px); border:1px solid var(--border2); border-radius:var(--radius); overflow:hidden; }
.theme-strip { display:flex; gap:.45rem; align-items:center; padding:.65rem 1rem; border-bottom:1px solid var(--border); overflow-x:auto; flex-wrap:nowrap; }
.theme-strip-label { font-size:.68rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; flex-shrink:0; margin-right:.25rem; }
.theme-swatch { display:flex; align-items:center; gap:.35rem; padding:.3rem .65rem; border-radius:20px; border:1.5px solid var(--border2); cursor:pointer; font-size:.72rem; font-weight:700; color:var(--muted); transition:all .18s; flex-shrink:0; white-space:nowrap; }
.theme-swatch:hover { color:var(--text); border-color:rgba(162,89,255,.5); transform:translateY(-1px); }
.theme-swatch.active { color:var(--text); border-color:rgba(162,89,255,.7); background:rgba(162,89,255,.12); }
.theme-swatch-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.preview-topbar { padding:.55rem 1rem; background:rgba(255,255,255,.04); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.65rem; }
.preview-dots { display:flex; gap:5px; flex-shrink:0; }
.preview-dot { width:9px; height:9px; border-radius:50%; }
.preview-url-bar { flex:1; background:rgba(0,0,0,.25); border:1px solid var(--border); border-radius:6px; padding:.28rem .65rem; font-size:.7rem; color:var(--muted); font-family:monospace; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.preview-iframe { width:100%; height:520px; border:none; display:block; background:#fff; }
.export-bar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; padding:.65rem 1rem; border-top:1px solid var(--border); }
.builder-sidebar { display:flex; flex-direction:column; gap:.85rem; }
.site-cmd-panel { background:var(--glass); backdrop-filter:blur(20px); border:1px solid var(--border2); border-radius:var(--radius); overflow:hidden; }
.site-cmd-head { padding:.85rem 1.1rem .6rem; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:.55rem; }
.site-cmd-title { font-size:.85rem; font-weight:800; }
.site-cmd-sub { font-size:.7rem; color:var(--muted); margin-top:.1rem; }
.site-chat-msgs { height:200px; overflow-y:auto; padding:.7rem .9rem; display:flex; flex-direction:column; gap:.45rem; }
.site-chat-msgs::-webkit-scrollbar{width:3px;} .site-chat-msgs::-webkit-scrollbar-thumb{background:rgba(162,89,255,.3);}
.site-msg { max-width:90%; padding:.45rem .65rem; border-radius:10px; font-size:.77rem; line-height:1.45; }
.site-msg.user { align-self:flex-end; background:rgba(162,89,255,.18); border:1px solid rgba(162,89,255,.3); color:var(--text); }
.site-msg.ai { align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--text); }
.site-chat-pills { display:flex; gap:.3rem; flex-wrap:wrap; padding:.45rem .9rem; border-top:1px solid var(--border); }
.site-chat-pill { padding:.25rem .6rem; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid var(--border2); font-size:.68rem; color:var(--muted); cursor:pointer; transition:all .15s; }
.site-chat-pill:hover { border-color:rgba(162,89,255,.5); color:var(--neon2); }
.site-chat-row { display:flex; gap:.45rem; padding:.55rem .75rem; border-top:1px solid var(--border); }
.site-chat-input { flex:1; background:rgba(0,0,0,.2); border:1px solid var(--border2); border-radius:8px; padding:.45rem .65rem; font-size:.77rem; color:var(--text); outline:none; font-family:inherit; resize:none; }
.site-chat-input:focus { border-color:rgba(162,89,255,.5); }
.site-send-btn { padding:.45rem .7rem; background:rgba(162,89,255,.2); border:1px solid rgba(162,89,255,.4); border-radius:8px; color:var(--neon2); cursor:pointer; font-size:.8rem; font-weight:700; transition:all .2s; }
.site-send-btn:hover { background:rgba(162,89,255,.35); }
.sections-panel { background:var(--glass); backdrop-filter:blur(20px); border:1px solid var(--border2); border-radius:var(--radius); overflow:hidden; }
.sections-head { padding:.7rem 1.1rem .5rem; border-bottom:1px solid var(--border); font-size:.82rem; font-weight:800; display:flex; align-items:center; gap:.45rem; }
.section-toggle-list { padding:.6rem .9rem; display:flex; flex-direction:column; gap:.4rem; }
.section-toggle-row { display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--muted); padding:.18rem 0; }
.s-toggle { position:relative; width:30px; height:17px; cursor:pointer; flex-shrink:0; }
.s-toggle input { opacity:0; width:0; height:0; }
.s-track { position:absolute; inset:0; border-radius:9px; background:rgba(255,255,255,.08); border:1px solid var(--border2); transition:all .2s; }
.s-track.on { background:rgba(162,89,255,.35); border-color:rgba(162,89,255,.5); }
.s-thumb { position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:var(--muted); transition:all .2s; }
.s-thumb.on { left:15px; background:var(--neon2); box-shadow:0 0 5px rgba(162,89,255,.5); }

/* ══════════════════════════════════════════════
   TOOLS HUB
══════════════════════════════════════════════ */
.tools-hub-outer { max-width:1060px; margin:1.25rem auto 0; padding:0 1.5rem 3rem; }
.tools-hub-intro { font-size:.85rem; color:var(--muted); margin-bottom:1.25rem; max-width:520px; line-height:1.6; }
.tools-hub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.tool-hub-card { background:var(--glass); backdrop-filter:blur(20px); border:1px solid var(--border2); border-radius:var(--radius); padding:1.3rem 1.2rem; cursor:pointer; transition:all .25s; display:flex; flex-direction:column; gap:.55rem; }
.tool-hub-card:hover { border-color:rgba(162,89,255,.45); box-shadow:var(--glow-purple); transform:translateY(-3px); }
.tool-hub-icon { font-size:1.75rem; }
.tool-hub-name { font-size:.95rem; font-weight:800; }
.tool-hub-desc { font-size:.79rem; color:var(--muted); line-height:1.45; flex:1; }
/* Tool modal */
.tool-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); z-index:900; display:flex; align-items:center; justify-content:center; padding:1rem; }
.tool-modal-overlay.hidden { display:none; }
.tool-modal { background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); width:100%; max-width:620px; max-height:86vh; overflow-y:auto; box-shadow:0 24px 80px rgba(0,0,0,.7),var(--glow-purple); }
.tm-head { position:sticky; top:0; background:var(--surface); padding:1rem 1.35rem .8rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; z-index:1; }
.tm-title { font-size:1rem; font-weight:900; display:flex; align-items:center; gap:.55rem; }
.tm-close { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.15rem; padding:.2rem .4rem; border-radius:6px; transition:all .15s; }
.tm-close:hover { background:rgba(255,255,255,.08); color:var(--text); }
.tm-body { padding:1.15rem 1.35rem; display:flex; flex-direction:column; gap:.9rem; }
.tm-form-group { display:flex; flex-direction:column; gap:.4rem; }
.tm-label { font-size:.73rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.tm-input, .tm-select, .tm-textarea { background:rgba(0,0,0,.25); border:1px solid var(--border2); border-radius:8px; padding:.6rem .8rem; font-size:.87rem; color:var(--text); outline:none; font-family:inherit; width:100%; box-sizing:border-box; transition:border .15s; }
.tm-input:focus, .tm-select:focus, .tm-textarea:focus { border-color:rgba(162,89,255,.5); }
.tm-textarea { min-height:88px; resize:vertical; }
.tm-select { appearance:none; cursor:pointer; }
.tool-out { background:rgba(0,0,0,.3); border:1px solid var(--border2); border-radius:var(--radius-sm); padding:.9rem 1rem; font-size:.83rem; line-height:1.65; color:var(--text); white-space:pre-wrap; font-family:inherit; min-height:72px; }
.tool-out.empty { color:var(--muted2); font-style:italic; }
.tm-actions { display:flex; gap:.6rem; flex-wrap:wrap; }

/* ══════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════ */
.toast {
  position:fixed;bottom:2rem;right:2rem;z-index:999;
  background:rgba(14,12,26,.92);backdrop-filter:blur(20px);
  border:1px solid var(--border2);border-radius:var(--radius);
  padding:.85rem 1.25rem;display:flex;align-items:center;gap:.7rem;
  font-size:.86rem;font-weight:600;
  box-shadow:0 8px 32px rgba(0,0,0,.5),var(--glow-purple);
  animation:toastIn .3s ease;min-width:220px;max-width:340px;
}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════════════
   MISC
══════════════════════════════════════════════ */
.divider { border:none;height:1px;background:var(--border);margin:1.25rem 0; }
.flex   {display:flex;}
.col    {flex-direction:column;}
.gap2   {gap:.5rem;}
.gap3   {gap:.75rem;}
.gap4   {gap:1rem;}
.gap6   {gap:1.5rem;}
.wrap   {flex-wrap:wrap;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.grow   {flex:1 1 0;}
.text-sm{font-size:.83rem;}
.text-xs{font-size:.72rem;}
.text-lg{font-size:1.15rem;}
.font-bold{font-weight:700;}
.font-semi{font-weight:600;}
.text-center{text-align:center;}
.text-muted{color:var(--muted);}
.text-right{text-align:right;}
.mt2{margin-top:.5rem;}.mt4{margin-top:1rem;}.mt6{margin-top:1.5rem;}
.mb2{margin-bottom:.5rem;}.mb4{margin-bottom:1rem;}
.hidden{display:none!important;}
.pointer{cursor:pointer;}
.w-full{width:100%;}

/* Scrollbar on chat */
.chat-messages::-webkit-scrollbar{width:4px;}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(162,89,255,.3);}

@media(max-width:640px){
  nav{padding:0 1rem;}
  .nav-steps{display:none;}
  .step-rail{display:none;}
  .page-head h1{font-size:1.6rem;}
}