/* ==========================================================================
   Cosara.in — Template: Home (v0.4)
   White / minimal. Colour interest comes from floating orbs, circular photos,
   the spectrum bar and product accents — not from grey background blocks.
   Content = homepage handoff doc v4.
   ========================================================================== */

/* ---- Utility top bar: quiet credibility marks (ISO + Powered by Co-Dx) ---- */
.utility { display: none; }
.utility__inner {
  display: flex; align-items: center; gap: var(--s-6);
  max-width: var(--w-container-wide); margin-inline: auto;
  padding: 6px var(--s-6); min-height: 40px;
}
.utility__powered { display: inline-flex; align-items: baseline; gap: 5px; color: var(--c-grey); }
.utility__powered strong { color: var(--c-slate); font-weight: var(--fw-bold); }
.utility__spacer { margin-left: auto; }
.utility__iso { display: inline-flex; align-items: center; gap: 8px; color: var(--c-slate); }
.utility__iso-ring {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--c-cyan); color: var(--c-cyan-deep); font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .04em;
}
[data-asset-pending] { outline: 1px dashed var(--c-line); outline-offset: 3px; }
@media (max-width: 600px){ .utility__powered span { display:none; } .utility__inner{ gap: var(--s-4); } }

/* ---- Hero ---- */
.hero { position: relative; padding-block: var(--s-15) 0; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: var(--s-12); align-items: center; }
.hero__display { font-size: clamp(40px, 5.6vw, 74px); line-height: 1.0; letter-spacing: -0.02em; font-weight: var(--fw-light); }
.hero__display strong { font-weight: var(--fw-bold); color: var(--c-slate); }
.hero__sub { margin-top: var(--s-6); max-width: 520px; }
.hero__cta { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; margin-top: var(--s-8); }
.hero__disclaimer { margin-top: var(--s-4); max-width: 460px; }
.hero__stagewrap { position: relative; }
.hero__pad { height: var(--s-15); }
/* Gradient spectrum bar at the very bottom edge of the hero */
.hero__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--grad-brand); }

@media (max-width: 900px){
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero__stagewrap { order: -1; }
}

/* ---- Rotating-instrument stage (space reserved for Co-Dx 360° asset) ---- */
.stage {
  position: relative; width: 100%; max-width: 520px; margin-inline: auto;
  aspect-ratio: 1; display: grid; place-items: center; perspective: 1600px;
}
.stage::before { content:""; position:absolute; inset:6%; border-radius:50%;
  background: radial-gradient(circle at 50% 45%, rgba(0,166,193,.10), transparent 62%); }
.stage__product { position: relative; z-index: 2; width: 74%; }
.stage__product img { width: 100%; height: auto; filter: drop-shadow(0 20px 34px rgba(0,0,0,.16)); animation: turntable 8s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes turntable { 0%{transform:rotateY(-18deg) translateY(0)} 50%{transform:rotateY(18deg) translateY(-8px)} 100%{transform:rotateY(-18deg) translateY(0)} }
.stage__pending { position:absolute; z-index:3; bottom:-2%; left:0; right:0; text-align:center; }
@media (prefers-reduced-motion: reduce){ .stage__product img { animation:none; } }

/* ==========================================================================
   Floating colour orbs (glossy 3D spheres, gently drifting)
   ========================================================================== */
.orbs { position: absolute; inset: -6%; pointer-events: none; z-index: 3; }
.orb3d {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.92), rgba(255,255,255,0) 38%),
    radial-gradient(circle at 65% 72%, var(--orb), color-mix(in srgb, var(--orb) 62%, #000) 100%);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
  animation: drift var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(6px,-12px) scale(1.03); }
  66%     { transform: translate(-8px,6px) scale(.98); }
}
@media (prefers-reduced-motion: reduce){ .orb3d { animation: none; } }
.orb-y { --orb:#EAAB00; } .orb-m { --orb:#CE0060; } .orb-c { --orb:#00A6C1; }
.orb-g { --orb:#A4D866; } .orb-p { --orb:#8E50A7; } .orb-o { --orb:#E87722; }

/* ---- Circular photo with orbs (the co-dx-style treatment) ---- */
.circlefig { position: relative; width: 100%; max-width: 500px; margin-inline: auto; aspect-ratio: 1; }
.circlefig__img {
  position: relative; z-index: 2; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden; background: var(--c-grey-50);
}
.circlefig__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Section 2/5/6/7 media splits share .split (base.css). Extra breathing. */
.mediasplit__body > * + * { margin-top: var(--s-6); }
.eyebrow-accent { color: var(--c-cyan-deep); }
/* Understated inline link (Why CoSara): brand teal, underline on hover only */
.link-inline { color: var(--c-cyan-deep); text-decoration: none; font-weight: var(--fw-semi); }
.link-inline:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Section 3: video ---- */
.videoblock { text-align: center; }
.videoblock__head { max-width: 680px; margin: 0 auto var(--s-12); }
.videoblock__head p { margin-inline: auto; }
.videoframe {
  position: relative; max-width: 580px; margin-inline: auto;
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-card);
  background: var(--c-grey-50); aspect-ratio: 1 / 1;
}
.videoframe video, .videoframe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.videoframe__ph { display:grid; place-items:center; width:100%; height:100%;
  background: linear-gradient(150deg,#E8EDF1,#DDE4EA 55%,#CFD8E0); color: var(--c-grey); text-align:center; }
.videoframe__play { width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.9); display:grid; place-items:center; margin-bottom: var(--s-4); box-shadow: var(--sh-card); }
.videoframe__play svg { width: 26px; height: 26px; color: var(--c-cyan-deep); margin-left: 4px; }
.videoblock__disclaimer { margin-top: var(--s-4); margin-inline: auto; }

/* ---- Section 4: Open Platform — 4 product cards ---- */
.openhead { text-align: center; max-width: 720px; margin: 0 auto var(--s-12); }
.openhead p { margin-inline: auto; }
.openmotif { display:inline-flex; align-items:center; gap:8px; color: var(--c-cyan-deep); font-weight: var(--fw-semi); font-size: var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; margin-bottom: var(--s-3); }
.openmotif svg { width: 18px; height: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-6); }
.pcard {
  display: flex; flex-direction: column; padding: var(--s-8) var(--s-6);
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-card);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.pcard:hover { box-shadow: var(--sh-card); transform: translateY(-3px); border-color: var(--c-cyan); }
.pcard__tick { width: 40px; height: 6px; border-radius: 100px; margin-bottom: var(--s-6); background: var(--pc, var(--c-cyan)); }
.pcard__name { font-size: 20px; font-weight: var(--fw-bold); line-height: 1.25; }
.pcard__sub { font-size: var(--fs-meta); color: var(--c-grey); margin-top: 2px; }
.pcard__desc { font-size: var(--fs-meta); color: #555; margin-top: var(--s-3); flex: 1; }
.pcard__cta { margin-top: var(--s-6); }
.pcard__cta a { color: var(--c-cyan-deep); font-weight: var(--fw-semi); text-decoration: none; display:inline-flex; align-items:center; gap:6px; }
.pcard__cta svg { width: 13px; height: 13px; }
@media (max-width: 1024px){ .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .grid-4 { grid-template-columns: 1fr; } }

/* ---- Section 8: fact tiles ---- */
.facts { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-8); margin-top: var(--s-10); }
.fact { text-align: center; padding-inline: var(--s-3); }
.fact__num { font-size: clamp(26px,2.6vw,34px); font-weight: var(--fw-light); color: var(--c-cyan-deep); line-height:1.05; }
.fact__label { margin-top: var(--s-2); font-size: var(--fs-meta); line-height:1.35; color: var(--c-slate); }
.fact + .fact { border-left: 1px solid var(--c-line); }
@media (max-width: 767px){ .facts{ grid-template-columns:1fr 1fr; gap: var(--s-6);} .fact:nth-child(odd){border-left:0;} .fact:nth-child(3),.fact:nth-child(4){border-top:1px solid var(--c-line); padding-top: var(--s-6);} }

/* ---- Section 9: final CTA (dark) ---- */
.finalcta { background: var(--c-slate); color: #fff; text-align: center; }
.finalcta h2 { color: #fff; }
.finalcta p { margin-inline: auto; max-width: 560px; color: rgba(255,255,255,.86); }
.finalcta__logo { height: 52px; width:auto; margin: 0 auto var(--s-8); }
.finalcta__cta { display:flex; gap: var(--s-4); justify-content:center; flex-wrap:wrap; margin-top: var(--s-8); }
.finalcta .btn { background: transparent; color:#fff; border-color:#fff; }
.finalcta .btn:hover { background:#fff; color: var(--c-slate); border-color:#fff; }
.finalcta .btn--solid { background: var(--c-cyan); border-color: var(--c-cyan); color:#fff; }
.finalcta .btn--solid:hover { background:#fff; color: var(--c-slate); border-color:#fff; }

/* Full-bleed spectrum bar at the very bottom of the page */
.page-rule { height: 12px; background: var(--grad-brand); }

/* ==========================================================================
   v0.5 — leaner homepage to match Co-Dx minimalism
   (7 sections; more negative space; India reach map; portfolio tiles)
   ========================================================================== */

/* More breathing room between sections (Co-Dx essence: open, uncluttered) */
.section--spacious { padding-block: clamp(64px, 8.5vw, 132px); }

/* ---- Section 2: emphasised callout stat ---- */
.reach__body .eyebrow { margin-bottom: var(--s-3); }
.callout-stat {
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.32; font-weight: var(--fw-light); color: var(--c-slate);
  padding-left: var(--s-6); border-left: 3px solid var(--c-cyan);
  margin-block: var(--s-6);
}

/* ---- Section 2: India reach map ---- */
.reach__map { width: 100%; }
.reach__mapwrap { position: relative; width: 100%; max-width: 520px; margin-inline: auto; }
.reach__india-img { width: 100%; height: auto; display: block; }
.reach__overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.reach__lines line { stroke: var(--c-cyan); stroke-width: 3; stroke-dasharray: 6 10; opacity: .5; }
.reach__halo { opacity: .18; transform-box: fill-box; transform-origin: center; animation: reachPulse 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
.reach__pins g { transform-box: fill-box; }
.reach__pulse { transform-box: fill-box; transform-origin: center; opacity: .35; animation: reachRing 2.8s ease-out infinite; }
@keyframes reachPulse { 0%,100% { transform: scale(1); opacity:.18; } 50% { transform: scale(1.5); opacity:.05; } }
@keyframes reachRing  { 0% { transform: scale(.6); opacity:.5; } 70%,100% { transform: scale(2.1); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .reach__halo, .reach__pulse { animation: none; } }
.reach__caption { text-align: center; margin-top: var(--s-4); }

/* ---- Section 4: Explore Our Portfolio (image tiles) ---- */
.portfolio__head { max-width: 900px; margin: 0 auto var(--s-12); text-align: center; }
.ptiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.ptile {
  position: relative; display: block; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 3 / 2; text-decoration: none; color: #fff;
  border: 1px solid var(--c-line); background: var(--c-grey-50);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.ptile:hover { box-shadow: var(--sh-card); transform: translateY(-4px); }
.ptile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms ease; }
.ptile:hover .ptile__img { transform: scale(1.05); }
.ptile__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-15) var(--s-6) var(--s-6);
  font-size: 19px; font-weight: var(--fw-semi); line-height: 1.25; color: #fff;
  background: linear-gradient(180deg, rgba(20,28,38,0), rgba(20,28,38,.72) 72%);
}
.ptile__arrow { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--c-cyan); color: #fff; transition: transform var(--t-base); }
.ptile__arrow svg { width: 15px; height: 15px; }
.ptile:hover .ptile__arrow { transform: translateX(3px); }
@media (max-width: 900px){ .ptiles { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---- Section 5: Technology motif ---- */
.tech__figure { display: grid; place-items: center; perspective: 900px; }
.tech__figure svg { width: 100%; max-width: 360px; height: auto; }
/* Gentle 3D rotation gives the double helix depth */
.dna { transform-origin: 50% 50%; animation: dnaSpin 16s linear infinite; }
@keyframes dnaSpin { 0% { transform: rotateY(0deg);} 100% { transform: rotateY(360deg);} }
@media (prefers-reduced-motion: reduce){ .dna { animation: none; } }

/* ---- Section 6: Roots & Reach ---- */
.rootsreach { max-width: 760px; margin-inline: auto; }
.rootsreach__lead { font-size: clamp(20px, 2.1vw, 26px); font-weight: var(--fw-light); color: var(--c-slate); line-height: 1.4; }
.rootsreach .link-chevron { justify-content: center; }

/* ---- Hero rotating instrument video (Co-Dx-branded interim; CoSara render to replace) ---- */
/* Wide crop holds the full instrument swing (it drifts sideways as it turns),
   background levelled to pure white so it dissolves into the hero — no cut. */
.stage__product--video { width: 100%; max-width: 100%; }
.stage__product--video video { width: 100%; height: auto; display: block; }
/* Right-align the rotation; let the stage hug the (wide) video, drop the square glow */
.hero__stagewrap .stage { margin-left: auto; margin-right: 0; max-width: 640px; }
.stage:has(.stage__product--video) { aspect-ratio: auto; }
.stage:has(.stage__product--video)::before { display: none; }
@media (max-width: 900px){ .hero__stagewrap .stage { margin-inline: auto; max-width: 560px; } }

/* Technology: circular real photo (Co-Dx Co-Primers style) */
.circlefig--tech { max-width: 440px; }
.circlefig--tech .circlefig__img { background: var(--c-grey-50); }