/* =============================================================
   TechVistaar — Homepage-only sections
   Hero (with the signature radiating-network graphic), Search bar,
   Process steps. (Service/quote/category cards live in
   components/cards.css since they're reused elsewhere too.)
============================================================= */

.hero{
  position:relative; z-index:1;
  padding:96px 0 80px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;
}
@media (max-width:940px){ .hero{ grid-template-columns:1fr; padding:56px 0 40px; } }
.hero h1{ font-size:clamp(36px, 5vw, 58px); max-width:660px; }
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero p.lead{ margin-top:22px; max-width:480px; font-size:17px; color:var(--slate); }

.hero-strip{
  display:flex; gap:28px; margin-top:52px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--line);
  max-width:520px;
}
.hero-strip div b{ display:block; font-family:'Space Grotesk'; font-size:23px; color:var(--ink); }
.hero-strip div span{ font-size:12.5px; color:var(--slate); }

/* Signature graphic CSS (.radiate-wrap, .ring, .node, .link, .pulse,
   .glow) now lives in the global style.css — it's used on both the
   homepage and the About page, so it needs to always be loaded. */

/* ---------- Search bar ---------- */
.home-search{ padding:20px 0 70px; }
.home-search-form{ display:flex; gap:14px; max-width:640px; margin:0 auto; flex-wrap:wrap; }
.home-search-form .search-box{
  flex:1; min-width:240px; display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:14px 20px;
}
.home-search-form .search-box input{
  border:none; outline:none; background:none; font-family:'Inter'; font-size:15px; color:var(--ink); width:100%;
}

/* ---------- Process ---------- */
.process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
@media (max-width:900px){ .process-row{ grid-template-columns:1fr; gap:34px; } }
.process-row::before{ content:''; position:absolute; top:23px; left:0; right:0; height:1px; background:var(--line); }
@media (max-width:900px){ .process-row::before{ display:none; } }
.process-step{ padding-right:24px; position:relative; }
.process-step .num{
  width:46px; height:46px; border-radius:50%;
  background:var(--panel); border:1px solid var(--amber);
  color:var(--amber-ink); font-family:'IBM Plex Mono'; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; position:relative; z-index:2;
}
.process-step h4{ font-size:17px; margin-bottom:8px; }
.process-step p{ color:var(--slate); font-size:14px; }