/* ==========================================================================
   BhavaniAI Inc. — Page Components
   Hero · Trust bar · Sectors · Process · Stats · Job cards · Accordion · CTA
   ========================================================================== */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink-900);
  color: var(--on-dark-soft);
  overflow: hidden;
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem);
}

/* Layered gradient mesh — pure CSS, no images, no CLS */
.hero::before {
  content: "";
  position: absolute; inset: -20%;
  z-index: -2;
  background:
    radial-gradient(42rem 32rem at 78% 12%, rgba(245,166,35,.20), transparent 62%),
    radial-gradient(38rem 30rem at 12% 78%, rgba(47,95,147,.42), transparent 60%),
    radial-gradient(50rem 36rem at 50% 105%, rgba(29,68,112,.55), transparent 65%),
    linear-gradient(155deg, var(--ink-900) 0%, var(--ink-700) 55%, #10365c 100%);
}
/* Engineering grid overlay */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 65% 35%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 65% at 65% 35%, #000 25%, transparent 78%);
}

.hero-inner { position: relative; display: grid; gap: var(--sp-xl); }
@media (min-width: 62rem) {
  .hero-inner { grid-template-columns: 1.15fr .85fr; align-items: center; }
}

.hero h1 { color: #fff; max-width: 18ch; }
.hero h1 .accent {
  background: linear-gradient(105deg, var(--amber-400), var(--amber-500) 55%, #ffd089);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: var(--sp-sm);
}
.hero-kicker .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber-400);
  box-shadow: 0 0 0 0 rgba(245,166,35,.65);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,166,35,.6); }
  70%  { box-shadow: 0 0 0 12px rgba(245,166,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}
.hero p.sub {
  margin-top: var(--sp-sm);
  font-size: var(--fs-md);
  color: var(--on-dark-soft);
  max-width: 54ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-lg); }

.hero-points { display: grid; gap: var(--sp-xs); margin-top: var(--sp-lg); }
@media (min-width: 30rem) { .hero-points { grid-template-columns: 1fr 1fr; } }
.hero-point {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: var(--fs-sm); font-weight: 650; color: var(--on-dark-soft);
}
.hero-point svg { flex-shrink: 0; margin-top: 3px; width: 18px; height: 18px; }

/* Dual-audience chooser card */
.audience-card {
  border-radius: var(--radius-xl);
  padding: var(--sp-md);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
}
@supports (backdrop-filter: blur(16px)) {
  .audience-card { backdrop-filter: blur(16px) saturate(150%); }
}
.audience-card h2 {
  color: #fff; font-size: var(--fs-md);
  letter-spacing: .01em; margin-bottom: var(--sp-sm);
}
.audience-option {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.05);
  text-decoration: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease-out);
  min-height: 76px;
}
.audience-option + .audience-option { margin-top: var(--sp-xs); }
@media (hover: hover) and (pointer: fine) {
  .audience-option:hover {
    background: rgba(245,166,35,.14);
    border-color: rgba(245,166,35,.55);
    transform: translateX(4px);
  }
  .audience-option:hover .ao-arrow { transform: translateX(4px); }
}
.audience-option:active { background: rgba(245,166,35,.14); transform: scale(.99); }
.audience-option .ao-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: rgba(245,166,35,.16);
  flex-shrink: 0;
}
.audience-option .ao-icon svg { width: 22px; height: 22px; stroke: var(--amber-400); fill: none; stroke-width: 2; }
.audience-option strong { display: block; color: #fff; font-size: var(--fs-base); line-height: 1.3; }
.audience-option span { display: block; color: var(--on-dark-faint); font-size: var(--fs-xs); margin-top: 2px; }
.audience-option .ao-arrow { color: var(--amber-400); font-size: 1.3rem; transition: transform .25s var(--ease-out); }

/* ---------- LAUNCH STATUS BANNER ---------- */
.status-banner {
  background: linear-gradient(100deg, #1a2f4a, var(--ink-700));
  color: var(--on-dark-soft);
  border-block: 1px solid rgba(255,255,255,.09);
  padding-block: var(--sp-sm);
  font-size: var(--fs-sm);
}
.status-banner .wrap { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; }
.status-chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .3em 1em; border-radius: var(--radius-pill);
  background: rgba(245,166,35,.16);
  border: 1px solid rgba(245,166,35,.42);
  color: var(--amber-400);
  font-weight: 800; font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.status-banner p { flex: 1 1 22rem; margin: 0; }
.status-banner a { color: #fff; font-weight: 700; }

/* ---------- TRUST BAR ---------- */
.trust-bar {
  background: var(--ink-800);
  color: var(--on-dark-soft);
  padding-block: var(--sp-md);
}
.trust-items {
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.trust-item { display: flex; align-items: flex-start; gap: .7rem; }
.trust-item svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px; stroke: var(--amber-500); fill: none; stroke-width: 2; }
.trust-item strong { display: block; color: #fff; font-size: var(--fs-sm); font-weight: 750; }
.trust-item span { display: block; color: var(--on-dark-faint); font-size: var(--fs-xs); margin-top: 1px; }

/* ---------- SECTOR CARD ---------- */
.sector-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  text-decoration: none;
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.sector-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--amber-500), var(--ink-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.sector-card h3 { margin-bottom: var(--sp-2xs); color: var(--ink-800); }
.sector-card p { color: var(--text-soft); font-size: var(--fs-sm); flex-grow: 1; }
.sector-card .link-arrow { margin-top: var(--sp-sm); }

/* The card is an <article> styled like a link and it lifts on touch, so the
   whole body reads as tappable — but only the small arrow link was clickable.
   Stretch that anchor's hit area over the entire card. */
.sector-card { cursor: pointer; }
.sector-card .link-arrow::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.sector-card .link-arrow { position: static; }

@media (hover: hover) and (pointer: fine) {
  .sector-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
  .sector-card:hover::before { transform: scaleX(1); }
}
.sector-card:active { transform: scale(.99); }
.sector-card:focus-within { box-shadow: var(--shadow-lg); border-color: var(--amber-500); }

/* ---------- PROCESS STEPS ---------- */
.steps { counter-reset: step; display: grid; gap: var(--sp-md); }
.step {
  position: relative;
  padding-left: 4.2rem;
  min-height: 3rem;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  font-weight: 850; font-size: var(--fs-sm);
  color: var(--ink-600);
}
.step::after {
  content: "";
  position: absolute; left: 1.5rem; top: 3.1rem; bottom: -1.6rem;
  width: 2px;
  background: linear-gradient(var(--line-strong), transparent);
}
.step:last-child::after { display: none; }
.step h3 { font-size: var(--fs-md); margin-bottom: .3rem; }
.step p { color: var(--text-soft); font-size: var(--fs-sm); }

.section--dark .step::before { background: var(--ink-700); border-color: rgba(255,255,255,.2); color: var(--amber-400); }
.section--dark .step p { color: var(--on-dark-soft); }
.section--dark .step::after { background: linear-gradient(rgba(255,255,255,.2), transparent); }

/* ---------- STAT / FACT ROW ---------- */
.facts { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.fact { text-align: center; padding: var(--sp-sm); }
.fact .num {
  display: block;
  font-size: var(--fs-2xl); font-weight: 850; line-height: 1;
  color: var(--amber-500);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.fact .lbl { display: block; margin-top: .5rem; font-size: var(--fs-sm); font-weight: 650; color: var(--on-dark-soft); }
.fact .sub { display: block; margin-top: .25rem; font-size: var(--fs-xs); color: var(--on-dark-faint); }

/* ---------- ROLE / JOB CARD ---------- */
.role-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s;
}
@media (hover: hover) and (pointer: fine) {
  .role-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
}
.role-card .role-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-sm); }
.role-card h3 { font-size: var(--fs-base); }
.role-rate {
  font-weight: 800; font-size: var(--fs-sm);
  color: var(--ok); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.role-card .role-meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  margin-top: .5rem;
  font-size: var(--fs-xs); color: var(--text-faint);
}
.role-card .role-meta span { display: inline-flex; align-items: center; gap: .3em; }
.role-card p { margin-top: .6rem; font-size: var(--fs-sm); color: var(--text-soft); }

.rate-note {
  margin-top: var(--sp-md);
  font-size: var(--fs-xs); color: var(--text-faint);
  border-left: 3px solid var(--line-strong);
  padding-left: var(--sp-xs); line-height: 1.7;
}

/* Filter chips */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-md); }
.filter-chip {
  min-height: 44px;
  padding: .5em 1.15em;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700);
  transition: all .2s var(--ease);
}
.filter-chip:hover { border-color: var(--ink-500); }
.filter-chip[aria-pressed="true"] {
  background: var(--ink-700); border-color: var(--ink-700); color: #fff;
}

/* ---------- ACCORDION / FAQ ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.accordion + .accordion { margin-top: var(--sp-xs); }
.accordion summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  min-height: 56px;
  font-weight: 750; font-size: var(--fs-base); color: var(--ink-800);
  cursor: pointer; list-style: none;
  transition: background-color .2s var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { background: var(--paper-alt); }
.accordion summary::after {
  content: ""; flex-shrink: 0;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--amber-600);
  border-bottom: 2.5px solid var(--amber-600);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .28s var(--ease-out);
}
.accordion[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.accordion .acc-body { padding: 0 var(--sp-md) var(--sp-md); color: var(--text-soft); font-size: var(--fs-sm); }
.accordion .acc-body > * + * { margin-top: .7rem; }

/* ---------- CTA BAND ---------- */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(2.2rem, 1.5rem + 3vw, 4rem);
  background: linear-gradient(125deg, var(--ink-900), var(--ink-600) 62%, #14456f);
  color: var(--on-dark-soft);
  display: flex; flex-wrap: wrap; gap: var(--sp-md);
  align-items: center; justify-content: space-between;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(28rem 20rem at 88% 8%, rgba(245,166,35,.26), transparent 60%);
}
.cta-band h2 { color: #fff; }
.cta-band p { margin-top: .5rem; color: var(--on-dark-soft); max-width: 46ch; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink-900);
  color: var(--on-dark-soft);
  padding-block: clamp(2.6rem, 2rem + 4vw, 4.6rem);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(34rem 24rem at 82% 22%, rgba(245,166,35,.17), transparent 60%),
    linear-gradient(140deg, var(--ink-900), var(--ink-700) 70%, #123a61);
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero p { margin-top: var(--sp-sm); max-width: 58ch; font-size: var(--fs-md); color: var(--on-dark-soft); }

.crumbs { font-size: var(--fs-xs); color: var(--on-dark-faint); margin-bottom: var(--sp-sm); }
.crumbs a {
  color: var(--amber-400); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover { text-decoration: underline; }
}
.crumbs span[aria-current] { color: var(--on-dark-soft); }

/* ---------- SERVICE DETAIL BLOCK ---------- */
.service-block {
  display: grid; gap: var(--sp-md);
  padding-block: var(--sp-lg);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
@media (min-width: 48rem) { .service-block { grid-template-columns: 5.5rem 1fr; } }
.service-block:last-of-type { border-bottom: 0; }
.service-block .sb-icon {
  width: 68px; height: 68px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--ink-700), var(--ink-500));
  box-shadow: 0 8px 20px rgba(14,37,64,.24);
}
.service-block .sb-icon svg { width: 32px; height: 32px; stroke: var(--amber-500); fill: none; stroke-width: 2; }
.service-block h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-2xs); }
.service-block p { color: var(--text-soft); }

/* ---------- VALUE PILL ---------- */
.value {
  border-left: 3px solid var(--amber-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper);
  padding: var(--sp-sm) var(--sp-md);
  box-shadow: var(--shadow-sm);
}
.value h3 { font-size: var(--fs-base); margin-bottom: .3rem; }
.value p { font-size: var(--fs-sm); color: var(--text-soft); }

/* ---------- COMPARISON / CHECK LIST ---------- */
.check-list li {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem;
  align-items: start;
}
.check-list li + li { margin-top: var(--sp-sm); }
.check-list svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.check-list strong { color: var(--ink-800); }
.section--dark .check-list strong { color: #fff; }

/* ---------- PROSE (legal pages) ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-lg); margin-bottom: var(--sp-xs); }
.prose h3 { font-size: var(--fs-md); margin-top: var(--sp-md); margin-bottom: var(--sp-2xs); }
.prose p, .prose li { color: var(--text-soft); }
.prose p + p { margin-top: .9rem; }
.prose ul { margin-top: .7rem; }
.prose ul li {
  position: relative; padding-left: 1.5rem;
}
.prose ul li::before {
  content: ""; position: absolute; left: .35rem; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber-500);
}
.prose ul li + li { margin-top: .5rem; }
.prose a { color: var(--ink-600); font-weight: 650; }
.prose strong { color: var(--ink-800); }
/* body{overflow-x:hidden} clips rather than scrolls, so a wide table would be
   permanently unreachable on a narrow phone. Give it its own scroll container. */
.prose table {
  width: 100%; border-collapse: collapse; margin-top: var(--sp-sm); font-size: var(--fs-sm);
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.prose table th, .prose table td { white-space: nowrap; }
@media (min-width: 40rem) { .prose table { display: table; } .prose table th, .prose table td { white-space: normal; } }
.prose th, .prose td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.prose th { background: var(--paper-alt); font-weight: 750; color: var(--ink-800); }

.toc {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.toc h2 { font-size: var(--fs-base); margin: 0 0 var(--sp-xs); }
.toc li + li { margin-top: .4rem; }
.toc a { font-size: var(--fs-sm); }

/* ---------- CONTACT ---------- */
.contact-panel {
  background: var(--ink-800);
  color: var(--on-dark-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  height: 100%;
}
.contact-panel h2 { color: #fff; font-size: var(--fs-lg); margin-bottom: var(--sp-md); }
.contact-row { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.contact-row + .contact-row { margin-top: var(--sp-md); }
.contact-row svg { width: 22px; height: 22px; stroke: var(--amber-500); fill: none; stroke-width: 2; margin-top: 2px; }
.contact-row .k {
  display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--on-dark-faint); font-weight: 750; margin-bottom: 2px;
}
.contact-row .v { color: #fff; font-size: var(--fs-sm); font-style: normal; }
.contact-row a.v:hover { color: var(--amber-400); }

/* ---------- FORM STATUS (AJAX submit feedback) ---------- */
.form-status {
  margin-top: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 650;
  display: none;
}
.form-status:focus-visible { outline: 3px solid var(--amber-500); outline-offset: 3px; }
.form-status[data-state="pending"] {
  display: block; background: var(--paper-alt);
  border: 1px solid var(--line-strong); color: var(--text-soft);
}
.form-status[data-state="ok"] {
  display: block; background: #f1faf6;
  border: 1px solid #b3ded0; color: #0b5c3d;
}
.form-status[data-state="error"] {
  display: block; background: #fdf3f2;
  border: 1px solid #f0c4c0; color: #8c1d18;
}

/* ---------- COOKIE BANNER ---------- */
.cookie-banner {
  position: fixed; z-index: 200;
  left: var(--sp-sm); right: var(--sp-sm); bottom: var(--sp-sm);
  max-width: 46rem; margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-md);
  padding-right: calc(var(--sp-md) + 40px);   /* room for the close button */
  display: none;
}
/* Explicit dismiss. Without it the only way out is understanding that
   "Essential only" means decline — and the banner covers ~38% of a
   360x640 screen at the highest z-index until then. */
.cookie-close {
  position: absolute; top: 6px; right: 6px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1;
  color: var(--text-soft);
  border-radius: var(--radius-sm);
}
.cookie-close:active { background: var(--paper-alt); }
@media (hover: hover) and (pointer: fine) {
  .cookie-close:hover { background: var(--paper-alt); color: var(--ink-800); }
}
.cookie-banner[data-show="true"] { display: block; }
.cookie-banner h2 { font-size: var(--fs-base); margin-bottom: .4rem; }
.cookie-banner p { font-size: var(--fs-sm); color: var(--text-soft); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--sp-sm); }
.cookie-actions .btn { min-height: 44px; padding: .55em 1.3em; font-size: var(--fs-sm); }

/* ---------- 404 / THANK YOU ---------- */
.centered-page {
  min-height: 62vh;
  display: grid; place-items: center; text-align: center;
  padding-block: var(--sp-2xl);
}
.centered-page .big {
  font-size: clamp(4rem, 3rem + 8vw, 8rem);
  font-weight: 850; line-height: 1;
  color: var(--amber-500); letter-spacing: -.04em;
}