/* Oriva Ojas — neo-brutalist pastel D2C design system
   Rules: hard offset shadows (zero blur), thick ink outlines,
   heavily rounded corners, pastel fills. No gradients, no blur. */
:root{
  --ink:#2E2118;
  --cream:#FFF9F4;
  --card:#FFFFFF;
  --pink:#F9C5D5;
  --mint:#C9EFC0;
  --sky:#C4DFF6;
  --peach:#FAD9A6;
  --sun:#FFC53D;
  --blush:#FDEEF2;
  --muted:#6E594B;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-xs:3px 3px 0 var(--ink);
}
/* Lenis smooth-scroll required CSS */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
html{ scrollbar-width:thin; scrollbar-color:var(--ink) transparent; }
html, body{ overflow-x:clip; max-width:100%; }
body{ background:var(--cream); color:var(--ink); position:relative; }
::selection{ background:var(--sun); color:var(--ink); }

/* ambient blobs removed for brutalist flat look */
.bg-orbs{ display:none; }

/* ---------- nav ---------- */
#nav .nav-inner{
  background:#fff; border:2px solid var(--ink); border-radius:999px;
  box-shadow:var(--shadow-sm);
}
#nav.scrolled .nav-inner{ box-shadow:var(--shadow); }
.logo-mark{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:var(--sun); border:2px solid var(--ink); box-shadow:var(--shadow-xs);
  font-size:17px; color:var(--ink); font-weight:900;
}

/* ---------- buttons / text ---------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--pink); color:var(--ink); font-weight:800;
  padding:.8rem 1.6rem; border-radius:999px; border:2px solid var(--ink);
  box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn-primary:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border:2px solid var(--ink); color:var(--ink); font-weight:700;
  padding:.8rem 1.6rem; border-radius:999px; background:#fff;
  box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease;
}
.btn-ghost:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); background:var(--blush); }
.btn-ghost:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
/* highlighter marker (replaces gradient text) */
.grad-text{ color:inherit; box-shadow:inset 0 -0.32em var(--sun); border-radius:3px; padding:0 .06em; }
.glass{ background:#fff; border:2px solid var(--ink); border-radius:24px; box-shadow:var(--shadow); }
.card-hover{ transition:transform .2s ease, box-shadow .2s ease; }
.card-hover:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }

/* ---------- hero ---------- */
.hero-title{ font-size:clamp(2.1rem,10vw,4.6rem); line-height:1.06; letter-spacing:-.02em; color:var(--ink); font-weight:900; text-wrap:balance; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; color:var(--ink);
  border:2px solid var(--ink); background:#fff; padding:.5rem 1.1rem; border-radius:999px;
  box-shadow:var(--shadow-xs);
}
.pulse-dot{ width:8px;height:8px;border-radius:99px;background:#1E9E6A; animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.35);} }

/* floating chat mock */
.chat-mock{ transform:perspective(1200px) rotateY(-6deg) rotateX(2deg); 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; }
}
.msg{ max-width:82%; padding:.7rem 1rem; border-radius:1.1rem; font-size:.88rem; line-height:1.5; color:var(--ink); border:2px solid var(--ink); }
.msg-ai{ background:#fff; border-bottom-left-radius:.35rem; }
.msg-user{ background:var(--pink); border-bottom-right-radius:.35rem; margin-left:auto; }
.msg-user strong{ color:var(--ink); }
.typing-dots span{ display:inline-block; width:7px;height:7px;margin-right:4px;border-radius:99px;background:var(--ink); 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; background:#fff; border:2px solid var(--ink); box-shadow:var(--shadow-xs); }
.float-chip.d2{ animation-delay:2.2s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

/* ---------- marquee (solid pastel strip, no mask gradient) ---------- */
.marquee{ overflow:hidden; background:var(--sun); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.marquee-track{ display:flex; gap:0; width:max-content; animation:marquee 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%);} }
.marquee-item{ display:inline-flex; align-items:center; gap:1.4rem; padding:.85rem 1.4rem .85rem 0; white-space:nowrap; font-weight:800; font-size:.95rem; letter-spacing:.06em; color:var(--ink); }
.role-chip{ display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap;
  border:2px solid var(--ink); background:#fff; padding:.7rem 1.2rem; border-radius:999px;
  font-size:.9rem; font-weight:700; color:var(--ink); box-shadow:var(--shadow-xs); }

/* ---------- steps ---------- */
.step-num{
  font-weight:900; font-size:4.2rem; line-height:1; color:var(--blush);
  -webkit-text-stroke:2px var(--ink);
}

/* ---------- faq ---------- */
.faq-item{ border:2px solid var(--ink); border-radius:20px; background:#fff; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.faq-item.open{ box-shadow:var(--shadow); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-a{ max-height:260px; }
.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-weight:800; font-size:1.5rem; margin:2rem 0 .8rem; letter-spacing:-.01em; color:var(--ink); }
.prose-custom h3{ font-weight:800; font-size:1.18rem; margin:1.5rem 0 .6rem; color:var(--ink); }
.prose-custom img{ width:100%; height:auto; border-radius:20px; border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); margin:1.4rem 0; }
.prose-custom p{ color:#4a3d33; line-height:1.85; margin-bottom:1.1rem; }
.prose-custom ul{ color:#4a3d33; line-height:1.85; margin:0 0 1.1rem 1.2rem; list-style:disc; }
.prose-custom strong{ color:var(--ink); }
.prose-custom a{ color:var(--ink); font-weight:700; box-shadow:inset 0 -0.3em var(--sun); }

/* ---------- 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 ---------- */
.practice-card{ cursor:pointer; background:#fff; border:2px solid var(--ink); border-radius:24px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.practice-card:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow); }
.practice-card .start-link{ color:var(--ink); font-weight:800; box-shadow:inset 0 -0.3em var(--sun); }
.practice-card.selected{ box-shadow:var(--shadow); background:var(--blush); }
.icon-badge{ display:inline-grid; place-items:center; width:48px; height:48px; border-radius:16px; font-size:24px; border:2px solid var(--ink); box-shadow:var(--shadow-xs); }

/* ---------- misc ---------- */
.tick{ color:#1E9E6A; font-weight:900; }
.divider-glow{ height:2px; background:var(--ink); opacity:.12; }
input:focus, textarea:focus, select:focus{ outline:none; }
.field{ width:100%; background:#fff; border:2px solid var(--ink); border-radius:14px; padding:.85rem 1.1rem; font-size:15px; color:var(--ink); font-weight:600; transition:box-shadow .15s; }
.field:focus{ box-shadow:var(--shadow-xs); }
.field::placeholder{ color:#b3a08f; font-weight:500; }
select.field option{ background:#fff; color:var(--ink); }
.pill-badge{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:2px solid var(--ink); border-radius:999px; padding:.35rem .95rem; font-size:.75rem; font-weight:800; letter-spacing:.08em; box-shadow:var(--shadow-xs); }
.price-pill{ display:inline-flex; align-items:center; background:var(--sun); border:2px solid var(--ink); border-radius:999px; padding:.4rem 1rem; font-weight:900; box-shadow:var(--shadow-xs); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}