/* InterviewReady AI — light design system (aced-inspired) */
:root{
  --accent:#7c3aed; --accent2:#a855f7;
  --ink:#ffffff; --panel:#f6f7fb; --line:#e9ebf3;
  --body:#1a1526; --muted:#5f6b7d;
}
html{ scrollbar-width:thin; scrollbar-color:#c9cede transparent; }
body{ background:#fff; color:var(--body); }
::selection{ background:rgba(124,58,237,.22); }

/* ---------- ambient blobs (very subtle) ---------- */
.bg-orbs{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.orb{ position:absolute; border-radius:9999px; filter:blur(120px); opacity:.35; will-change:transform; }
.orb-a{ width:560px;height:560px; left:-160px; top:-140px;
  background:radial-gradient(circle,rgba(124,58,237,.16),transparent 65%);
  animation:drift 22s ease-in-out infinite alternate; }
.orb-b{ width:520px;height:520px; right:-140px; top:22%;
  background:radial-gradient(circle,rgba(168,85,247,.14),transparent 65%);
  animation:drift 26s ease-in-out infinite alternate-reverse; }
.orb-c{ width:640px;height:640px; left:30%; bottom:-260px;
  background:radial-gradient(circle,rgba(124,58,237,.10),transparent 65%);
  animation:drift 30s ease-in-out infinite alternate; }
@keyframes drift{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(60px,40px) scale(1.12);} }

/* ---------- nav ---------- */
#nav .nav-inner{
  background:rgba(255,255,255,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line); box-shadow:0 4px 24px rgba(26,21,38,.05);
}
#nav.scrolled .nav-inner{ background:rgba(255,255,255,.95); box-shadow:0 12px 40px rgba(26,21,38,.10); }
.logo-mark{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); font-size:17px; color:#fff;
  box-shadow:0 6px 18px rgba(124,58,237,.35);
}

/* ---------- buttons / text ---------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--accent); color:#fff; font-weight:600;
  padding:.7rem 1.4rem; border-radius:999px;
  box-shadow:0 8px 24px rgba(124,58,237,.30); transition:transform .25s ease, box-shadow .25s ease, background .25s;
}
.btn-primary:hover{ transform:translateY(-2px); background:#6d28d9; box-shadow:0 14px 32px rgba(124,58,237,.38); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border:1px solid var(--line); color:var(--body); font-weight:500;
  padding:.7rem 1.4rem; border-radius:999px; background:#fff;
  transition:all .25s ease;
}
.btn-ghost:hover{ border-color:#c9cede; background:var(--panel); transform:translateY(-2px); }
.grad-text{ background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.glass{ background:#fff; border:1px solid var(--line); box-shadow:0 6px 28px rgba(26,21,38,.06); }
.card-hover{ transition:transform .35s cubic-bezier(.2,.7,.3,1.2), box-shadow .35s ease, border-color .35s ease; }
.card-hover:hover{ transform:translateY(-6px); border-color:rgba(124,58,237,.35); box-shadow:0 24px 50px rgba(26,21,38,.10); }

/* ---------- hero ---------- */
.hero-title{ font-size:clamp(2.3rem,6.5vw,4.6rem); line-height:1.05; letter-spacing:-.03em; color:var(--body); }
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--muted);
  border:1px solid var(--line); background:#fff; padding:.45rem 1rem; border-radius:999px;
  box-shadow:0 4px 16px rgba(26,21,38,.05);
}
.pulse-dot{ width:8px;height:8px;border-radius:99px;background:#34d399; box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }

/* floating chat mock */
.chat-mock{ transform:perspective(1200px) rotateY(-7deg) rotateX(3deg); transition:transform .6s ease; }
.chat-mock:hover{ transform:perspective(1200px) rotateY(-2deg) rotateX(1deg); }
@media (max-width:640px){
  .chat-mock, .chat-mock:hover{ transform:none; }  /* no 3D tilt on small screens */
}
.msg{ max-width:82%; padding:.7rem 1rem; border-radius:1.1rem; font-size:.88rem; line-height:1.5; color:var(--body); }
.msg-ai{ background:#f1f2f7; border:1px solid var(--line); border-bottom-left-radius:.3rem; }
.msg-user{ background:var(--accent); color:#fff; border-bottom-right-radius:.3rem; margin-left:auto; }
.msg-user strong{ color:#fff; }
.typing-dots span{ display:inline-block; width:7px;height:7px;margin-right:4px;border-radius:99px;background:#a78bfa; animation:blink 1.2s infinite; }
.typing-dots span:nth-child(2){ animation-delay:.2s } .typing-dots span:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-4px);} }
.float-chip{ animation:floaty 5s ease-in-out infinite; }
.float-chip.d2{ animation-delay:2.2s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

/* ---------- marquee ---------- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:1rem; width:max-content; animation:marquee 28s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%);} }
.role-chip{ display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap;
  border:1px solid var(--line); background:#fff; padding:.7rem 1.2rem; border-radius:999px; font-size:.9rem; color:var(--body);
  box-shadow:0 3px 12px rgba(26,21,38,.04); }

/* ---------- steps ---------- */
.step-num{
  font-family:Sora,sans-serif; font-weight:800; font-size:5rem; line-height:1;
  background:linear-gradient(180deg,rgba(124,58,237,.35),rgba(124,58,237,.03));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- faq ---------- */
.faq-item{ border:1px solid var(--line); border-radius:1rem; background:#fff; overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.faq-item.open{ border-color:rgba(124,58,237,.45); box-shadow:0 10px 30px rgba(124,58,237,.08); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-a{ max-height:220px; }
.faq-chevron{ transition:transform .35s ease; }
.faq-item.open .faq-chevron{ transform:rotate(180deg); }

/* ---------- blog cards ---------- */
.post-card img, .post-cover{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.post-card:hover .post-cover{ transform:scale(1.04) rotate(.4deg); }
.prose-custom h2{ font-family:Sora,sans-serif; font-weight:700; font-size:1.5rem; margin:2rem 0 .8rem; letter-spacing:-.01em; color:var(--body); }
.prose-custom p{ color:#3d4657; line-height:1.85; margin-bottom:1.1rem; }
.prose-custom ul{ color:#3d4657; line-height:1.85; margin:0 0 1.1rem 1.2rem; list-style:disc; }
.prose-custom strong{ color:var(--body); }

/* ---------- interview chat ---------- */
#chatBox{ scrollbar-width:thin; }
.chat-in{ animation:msgIn .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes msgIn{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{ opacity:1; transform:none;} }
.progress-ring{ transition:stroke-dashoffset 1s ease; }

/* score ring */
.score-ring{ transform:rotate(-90deg); }
.score-ring circle{ transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1); }

/* ---------- practice cards (aced-style) ---------- */
.practice-card{ cursor:pointer; }
.practice-card .start-link{ color:var(--accent); font-weight:600; }
.practice-card.selected{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,58,237,.18), 0 18px 44px rgba(124,58,237,.12); }
.icon-badge{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:14px; font-size:22px; }

/* ---------- misc ---------- */
.tick{ color:#059669; }
.divider-glow{ height:1px; background:linear-gradient(90deg,transparent,rgba(124,58,237,.35),transparent); }
input:focus, textarea:focus, select:focus{ outline:none; }
.field{ width:100%; background:#fff; border:1px solid var(--line); border-radius:.8rem; padding:.8rem 1rem; font-size:15px; color:var(--body); transition:border-color .2s, box-shadow .2s; }
.field:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.field::placeholder{ color:#9aa3b5; }
select.field option{ background:#fff; color:var(--body); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}