/* ============================================================
   Planacts — Nikita Chudasama, Web Development
   Palette derived from the Planacts logo mark (deep maroon-red
   swoosh + charcoal wordmark). Design tokens (mirrored in
   tailwind.config in index.html):
   --ink:      #2B2F32  (charcoal, matches logo wordmark)
   --ink-soft: #656C70  (secondary text)
   --red-900:  #5C1A17  (deep maroon, dark sections)
   --red-600:  #8E231D  (primary action — logo's core red)
   --red-400:  #E9565B  (coral — logo's gradient tip)
   --canvas:   #FFFFFF
   --canvas-soft: #F8F6F5 (warm off-white)
   Type: display = "Space Grotesk", body = "Inter", mono = "JetBrains Mono"
   Signature element: animated code-editor hero panel
   ============================================================ */

:root{
  color-scheme: light;
  --ink:#2B2F32; --ink-soft:#656C70;
  --red-900:#5C1A17; --red-600:#8E231D; --red-400:#E9565B;
  --canvas:#FFFFFF; --canvas-soft:#F8F6F5;
  --ring: rgba(142,35,29,.35);
}
html.dark{
  color-scheme: dark;
  --ink:#F3ECEB; --ink-soft:#C9BFBD;
  --canvas:#181414; --canvas-soft:#221B1A;
  --ring: rgba(233,86,91,.4);
}

*{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  transition:background-color .35s ease, color .35s ease;
}
.font-display{ font-family:'Space Grotesk', 'Inter', sans-serif; }
.font-mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }

/* Visible keyboard focus everywhere, on top of Tailwind resets */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--red-600);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Signature: code-editor hero panel ---------- */
.code-window{
  background:#0B1220;
  border-radius:16px;
  box-shadow: 0 30px 60px -20px rgba(92,26,23,.35), 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
}
.code-window__bar{
  background:#111a30;
  padding:.65rem .9rem;
  display:flex; align-items:center; gap:.4rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.code-dot{ width:.6rem; height:.6rem; border-radius:999px; display:inline-block; }
.code-window__body{
  padding:1.35rem 1.5rem 1.6rem;
  font-size:.85rem; line-height:1.65;
}
.tok-kw{ color:#ff7ab6; } .tok-fn{ color:#5B8DEF; } .tok-str{ color:#84e6c9; }
.tok-com{ color:#5b6b8c; } .tok-var{ color:#e9c46a; } .tok-punc{ color:#8fa3c8; }

.type-caret{
  display:inline-block; width:2px; height:1em; background:#E9565B;
  vertical-align:-2px; margin-left:2px; animation: blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- Section reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Marquee for trust logos / tech stack ---------- */
.marquee-track{
  display:flex; gap:3.5rem; width:max-content;
  animation: scroll-x 28s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Card hover lift ---------- */
.lift{ transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease; }
.lift:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -20px rgba(92,26,23,.22); }

/* ---------- Star rating ---------- */
.stars{ color:#F5A623; letter-spacing:2px; }

/* ---------- Gradient text for emphasis ---------- */
.grad-text{
  background:linear-gradient(90deg, var(--red-600), var(--red-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Underline-grow link ---------- */
.link-grow{ position:relative; }
.link-grow::after{
  content:''; position:absolute; left:0; bottom:-3px; height:2px; width:0;
  background:currentColor; transition:width .25s ease;
}
.link-grow:hover::after{ width:100%; }

/* ---------- Blob backdrop (used once, subtly, behind hero) ---------- */
.hero-glow{
  background: radial-gradient(60% 60% at 70% 20%, rgba(142,35,29,.08), transparent 70%),
              radial-gradient(45% 45% at 15% 75%, rgba(233,86,91,.10), transparent 70%);
}

/* ---------- Portfolio filter buttons ---------- */
.filter-btn[aria-pressed="true"]{
  background:var(--red-600); color:#fff; border-color:var(--red-600);
}

/* ---------- Testimonial slider ---------- */
.t-slide{ display:none; }
.t-slide.is-active{ display:block; animation: fade-in .5s ease; }
@keyframes fade-in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Timeline connector for Process ---------- */
.process-line{
  background: linear-gradient(180deg, var(--red-600), var(--red-400));
}

/* Utility: skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto;
  background:var(--red-600); color:#fff; padding:.6rem 1rem; border-radius:8px; z-index:100;
}
.skip-link:focus{ left:1rem; top:1rem; }