/* ==========================================================================
   BHARATEDGE — SECTION REDESIGN
   Scope: #solutions (Our Solutions), #industries (Industries We Serve),
          #why-bharatedge (Why Bharatedge)
   This file is fully additive. It does not modify or override any selector
   in style.css / responsive.css / animations.css, so every other page
   (including industrial-networking.html, which reuses .industry-card /
   .industries-grid) keeps working exactly as before.
   Tokens reused from style.css :root — --primary, --primary-dark, --accent,
   --secondary, --gray, --white, --shadow-* — so the new sections stay on
   brand automatically if the palette is ever tuned.
   ========================================================================== */

:root {
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --blueprint-line: rgba(255, 255, 255, .07);
  --blueprint-line-soft: rgba(11, 60, 93, .08);
}

/* --------------------------------------------------------------------------
   1. OUR SOLUTIONS — capability pillars (vertical standing accordion)
   -------------------------------------------------------------------------- */
.solutions-home { position: relative; overflow: hidden; }

.pillars-stage { margin-top: 56px; }

.pillars-rail {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 620px;
  box-shadow: var(--shadow-lg);
}

.pillar {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 30px 24px;
  color: #eaf3fb;
  cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, .06);
  background:
    linear-gradient(180deg, rgba(4, 16, 28, 0) 0%, rgba(4, 16, 28, .82) 78%),
    repeating-linear-gradient(0deg, var(--blueprint-line) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--blueprint-line) 0 1px, transparent 1px 34px),
    linear-gradient(160deg, #10527d 0%, var(--primary) 45%, var(--primary-dark) 78%, #04101c 100%);
  transition: flex-grow .68s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}
.pillar:last-child { border-right: none; }

/* blueprint corner brackets, drawn with 8 tiny gradients on ::before */
.pillar::before {
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  opacity: .34;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(#f59e0b, #f59e0b), linear-gradient(#f59e0b, #f59e0b),
    linear-gradient(#f59e0b, #f59e0b), linear-gradient(#f59e0b, #f59e0b),
    linear-gradient(#f59e0b, #f59e0b), linear-gradient(#f59e0b, #f59e0b),
    linear-gradient(#f59e0b, #f59e0b), linear-gradient(#f59e0b, #f59e0b);
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  transition: opacity .4s ease;
}

.pillar-face { display: contents; }

.pillar-index {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: rgba(234, 243, 251, .55);
}

.pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--accent);
  font-size: 19px;
  background: rgba(4, 16, 28, .35);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), border-color .4s ease, color .4s ease;
}

.pillar-name {
  margin: 0;
  margin-top: auto;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  align-self: flex-start;
  transition: font-size .4s ease;
}

.pillar-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.22, .61, .36, 1), opacity .3s ease .05s, margin-top .5s ease;
}
.pillar-detail p { margin: 0 0 14px; color: rgba(234, 243, 251, .82); font-size: 14.5px; line-height: 1.7; max-width: 30ch; }
.pillar-link { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); font-weight: 700; font-size: 14px; letter-spacing: .01em; white-space: nowrap; }
.pillar-link i { transition: transform .3s ease; font-size: 12px; }
.pillar-link:hover i { transform: translateX(4px); }

.pillar-art {
  position: absolute;
  right: -18px;
  bottom: 54px;
  width: 78%;
  max-width: 220px;
  opacity: .16;
  pointer-events: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  transform: translateY(10px) scale(.96);
}
.pillar-art svg { width: 100%; height: auto; display: block; stroke: #eaf3fb; }
.pillar.is-active .pillar-art,
.pillar:focus-within .pillar-art { opacity: .32; transform: translateY(0) scale(1); }
@media (hover: hover) and (pointer: fine) {
  .pillar:hover .pillar-art { opacity: .32; transform: translateY(0) scale(1); }
}

.pillar-code {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .28);
  opacity: 0;
  transition: opacity .4s ease .1s;
}

/* Expanded state — desktop hover, keyboard focus, or JS-applied .is-active */
.pillar.is-active,
.pillar:focus-within {
  flex-grow: 2.5;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3);
}
.pillar.is-active::before,
.pillar:focus-within::before { opacity: .68; }
.pillar.is-active .pillar-icon,
.pillar:focus-within .pillar-icon { transform: translateY(-4px) scale(1.06); border-color: var(--accent); color: #ffd28a; }
.pillar.is-active .pillar-name,
.pillar:focus-within .pillar-name {
  writing-mode: horizontal-tb;
  transform: none;
  margin-top: 20px;
  font-size: 25px;
  white-space: normal;
}
.pillar.is-active .pillar-detail,
.pillar:focus-within .pillar-detail { max-height: 180px; opacity: 1; margin-top: 14px; }
.pillar.is-active .pillar-code,
.pillar:focus-within .pillar-code { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .pillar:hover { flex-grow: 2.5; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3); }
  .pillar:hover::before { opacity: .68; }
  .pillar:hover .pillar-icon { transform: translateY(-4px) scale(1.06); border-color: var(--accent); color: #ffd28a; }
  .pillar:hover .pillar-name { writing-mode: horizontal-tb; transform: none; margin-top: 20px; font-size: 25px; white-space: normal; }
  .pillar:hover .pillar-detail { max-height: 180px; opacity: 1; margin-top: 14px; }
  .pillar:hover .pillar-code { opacity: 1; }
}

/* --------------------------------------------------------------------------
   2. INDUSTRIES WE SERVE — hub-and-spoke sector orbit (dark, node network)
   -------------------------------------------------------------------------- */
.industries-home {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: 132px;
  background:
    radial-gradient(circle at 20% 20%, rgba(245, 158, 11, .10), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(68, 184, 231, .14), transparent 42%),
    linear-gradient(160deg, #051726 0%, #04101c 55%, #030c16 100%);
}
.industries-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .12;
  background-image:
    linear-gradient(var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 46%, #000, transparent 72%);
}
.industries-home .section-title span,
.industries-home .section-tag { color: var(--accent); }
.industries-home .section-title h2 { color: #fff; }
.industries-home .section-title p { color: rgba(226, 240, 252, .72); }

/* India silhouette watermark — sits behind the orbit ecosystem to read as a
   national-presence backdrop. Path geometry is a simplified, decorative
   derivative of the accurate boundary data used later in #pan-india-presence;
   it carries no ids/classes/interactivity of its own. */
.industries-india-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.industries-india-backdrop svg {
  width: min(1180px, 96%);
  height: auto;
  max-height: 108%;
}
.industries-india-backdrop path {
  fill: #4d84ac;
  opacity: .07;
}
@media (max-width: 760px) {
  .industries-india-backdrop svg { width: min(720px, 130%); opacity: .8; }
}

/* .container needs to sit in its own stacking context above the backdrop
   (an absolutely-positioned z-index:0 layer paints after in-flow static
   content, so without this the watermark would cover everything above it). */
.industries-home > .container { position: relative; z-index: 1; }

.orbit-stage {
  position: relative;
  width: min(980px, 94%);
  aspect-ratio: 1 / 1;
  margin: 112px auto 0;
}

.orbit-spokes { position: absolute; inset: 0; }
.orbit-spoke {
  position: absolute;
  left: 50%;
  top: calc(50% - 1px);
  width: 38%;
  height: 2px;
  transform-origin: 0 50%;
  transform: rotate(var(--angle));
  background: linear-gradient(90deg, rgba(255, 255, 255, .38), rgba(245, 158, 11, .12));
  opacity: .4;
  transition: opacity .4s ease, background .4s ease;
}
.orbit-spoke::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  width: 26%;
  animation: spokePulse 3.6s linear infinite;
  animation-delay: calc(var(--pulse-delay, 0) * 1s);
}
.orbit-spoke.is-active { opacity: 1; background: linear-gradient(90deg, rgba(245, 158, 11, .9), rgba(245, 158, 11, .18)); }

@keyframes spokePulse {
  0% { transform: translateX(0%); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(280%); opacity: 0; }
}

.orbit-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 176px;
  height: 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #12557e, var(--primary-dark) 70%);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .3), 0 24px 60px rgba(0, 0, 0, .5);
  z-index: 2;
}
.orbit-hub-ring, .orbit-hub-ring::before {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(245, 158, 11, .55);
}
.orbit-hub-ring { animation: hubPing 3.2s cubic-bezier(.22, .61, .36, 1) infinite; }
.orbit-hub-ring::before { content: ""; animation: hubPing 3.2s cubic-bezier(.22, .61, .36, 1) infinite 1.6s; }
@keyframes hubPing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

.orbit-hub-mark { font-family: var(--mono); font-size: 34px; font-weight: 600; color: var(--accent); line-height: 1; }
.orbit-hub-label { margin-top: 8px; font-size: 12.5px; letter-spacing: .06em; text-align: center; color: rgba(255, 255, 255, .78); line-height: 1.4; }

/* Per-node outward direction for the connector + hover panel. Kept in CSS
   (rather than inline styles) so the travel distance can be scaled down at
   narrower desktop widths without inline styles winning the cascade. */
.orbit-node[data-node="1"] { --px: 0px;    --py: 150px;  --pangle: 90deg; }
.orbit-node[data-node="2"] { --px: 104px;  --py: -160px; --pangle: -57deg; }
.orbit-node[data-node="3"] { --px: 104px;  --py: 160px;  --pangle: 57deg; }
.orbit-node[data-node="4"] { --px: 0px;    --py: 150px;  --pangle: 90deg; }
.orbit-node[data-node="5"] { --px: -104px; --py: 160px;  --pangle: 123deg; }
.orbit-node[data-node="6"] { --px: -104px; --py: -160px; --pangle: -123deg; }
.orbit-node {
  position: absolute;
  left: var(--nx);
  top: var(--ny);
  transform: translate(-50%, -50%);
  width: clamp(168px, 21vw, 218px);
  text-align: center;
  z-index: 1;
}
.orbit-node:hover,
.orbit-node.is-active,
.orbit-node:focus-within {
  z-index: 6;
}

/* Hex + its connector/panel share one positioning context sized to the hex
   itself, so the callout always radiates from the true visual center of the
   icon rather than the node's full text column. */
.orbit-hex-wrap {
  position: relative;
  width: 104px;
  margin: 0 auto 14px;
}
.orbit-hex {
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: linear-gradient(160deg, #12547d, #071e30);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: var(--accent);
  font-size: 29px;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}
.orbit-node h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; }
.orbit-node p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(226, 240, 252, .62); }

.orbit-node:hover .orbit-hex,
.orbit-node:focus-within .orbit-hex,
.orbit-node.is-active .orbit-hex {
  transform: scale(1.1);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .9), 0 0 16px rgba(245, 158, 11, .55), 0 0 38px rgba(245, 158, 11, .3);
}

/* ---- Connector line: thin, glowing, draws in from the hex toward the panel ---- */
.orbit-connector {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 2px;
  border-radius: 2px;
  transform-origin: 0 50%;
  transform: rotate(var(--pangle)) scaleX(0);
  opacity: 0;
  background: linear-gradient(90deg, rgba(245, 158, 11, .95), rgba(94, 196, 255, .3));
  box-shadow: 0 0 8px rgba(245, 158, 11, .6), 0 0 16px rgba(94, 196, 255, .35);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .25s ease;
  pointer-events: none;
  z-index: 4;
}

/* ---- Hover info panel: dark translucent glass card, never a plain white card ---- */
.orbit-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(180px, 19vw, 214px);
  padding: 16px 18px 17px;
  border-radius: 14px;
  text-align: left;
  background:
    linear-gradient(160deg, rgba(21, 74, 108, .58), rgba(4, 13, 22, .92));
  border: 1px solid rgba(94, 196, 255, .28);
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, .10),
    0 22px 44px rgba(0, 0, 0, .5),
    0 0 28px rgba(94, 196, 255, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.92);
  transition: opacity .3s ease, transform .38s cubic-bezier(.22, .61, .36, 1);
  transition-delay: 0s;
  pointer-events: none;
  z-index: 5;
}
.orbit-panel h4 {
  margin: 0 0 9px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
}
.orbit-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.orbit-panel li {
  position: relative;
  padding-left: 15px;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(226, 240, 252, .88);
}
.orbit-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(94, 196, 255, .95);
  box-shadow: 0 0 6px rgba(94, 196, 255, .75);
}

.orbit-node:hover .orbit-connector,
.orbit-node:focus-within .orbit-connector,
.orbit-node.is-active .orbit-connector {
  transform: rotate(var(--pangle)) scaleX(1);
  opacity: 1;
}
.orbit-node:hover .orbit-panel,
.orbit-node:focus-within .orbit-panel,
.orbit-node.is-active .orbit-panel {
  opacity: 1;
  transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(1);
  pointer-events: auto;
  transition-delay: .08s;
}

/* Narrower desktop / tablet-landscape range: the radial hover panel needs a
   smaller footprint and shorter travel to clear the hex, hub, title and
   viewport edges without overlapping anything. Placed after the base rules
   above so it can actually win the cascade at this width. */
@media (max-width: 1180px) and (min-width: 761px) {
  .orbit-connector { width: 66px; }
  .orbit-panel { width: clamp(160px, 19vw, 186px); padding: 11px 13px 12px; }
  .orbit-panel h4 { margin: 0 0 6px; }
  .orbit-panel ul { gap: 4px; }
  .orbit-panel li { font-size: 11.5px; line-height: 1.4; padding-left: 13px; }

  .orbit-node[data-node="1"] { --px: 0px;   --py: 164px;  --pangle: 90deg; }
  .orbit-node[data-node="2"] { --px: 0px;   --py: 152px;  --pangle: 90deg; }
  .orbit-node[data-node="3"] { --px: 58px;  --py: 151px;  --pangle: 69deg; }
  .orbit-node[data-node="4"] { --px: 152px; --py: 123px;  --pangle: 39deg; }
  .orbit-node[data-node="5"] { --px: -58px; --py: 145px;  --pangle: 112deg; }
  .orbit-node[data-node="6"] { --px: 0px;   --py: 164px;  --pangle: 90deg; }
}

/* --------------------------------------------------------------------------
   3. WHY BHARATEDGE — horizontal engineering-process trust timeline
   -------------------------------------------------------------------------- */
.why-bharatedge { position: relative; }
.trust-timeline { position: relative; margin-top: 78px; padding-top: 6px; }

.trust-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--blueprint-line-soft) 0 8px, transparent 8px 16px);
}
.trust-track-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #d98208);
  transition: width 1.5s cubic-bezier(.22, .61, .36, 1);
}
.trust-timeline.is-visible .trust-track-fill { width: 100%; }

.trust-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}
.trust-step { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; text-align: center; }

.trust-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 26px;
  border: 2px solid rgba(11, 60, 93, .3);
  background: var(--white);
  color: var(--primary);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  transform: rotate(45deg);
  transition: background .5s ease, border-color .5s ease, color .5s ease;
  transition-delay: calc(var(--i) * 220ms);
}
.trust-marker span { transform: rotate(-45deg); display: block; }
.trust-timeline.is-visible .trust-step .trust-marker {
  background: var(--accent);
  border-color: var(--accent);
  color: #071827;
}

.trust-content i { font-size: 26px; color: var(--primary); margin-bottom: 14px; }
.trust-content h3 { margin: 0 0 10px; font-size: 19px; color: var(--secondary); }
.trust-content p { margin: 0 0 16px; max-width: 30ch; color: var(--gray); font-size: 14.5px; line-height: 1.7; }
.trust-stat {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid rgba(11, 60, 93, .18);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--primary);
  background: rgba(11, 60, 93, .05);
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll compatibility (uses the site's existing .reveal system)
   -------------------------------------------------------------------------- */
.pillar.reveal.active { transform: none; }
.orbit-node.reveal.active,
.trust-step.reveal.active { transform: none; }

/* ==========================================================================
   RESPONSIVE — all three redesigned sections
   ========================================================================== */

/* ---- Solutions pillars: tablet ---- */
@media (max-width: 1000px) {
  .pillars-rail { height: 560px; }
  .pillar-name { font-size: 17px; }
  .pillar.is-active .pillar-name, .pillar:focus-within .pillar-name { font-size: 22px; }
}
@media (hover: hover) and (pointer: fine) {
  @media (max-width: 1000px) { .pillar:hover .pillar-name { font-size: 22px; } }
}

/* ---- Solutions pillars: stacked accordion on touch / narrow screens ---- */
@media (max-width: 860px) {
  .pillars-rail { flex-direction: column; height: auto; box-shadow: none; }
  .pillar { flex: none; width: 100%; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 20px 22px; }
  .pillar:last-child { border-bottom: none; }
  .pillar::before { inset: 10px; }
  .pillar-face { display: flex; flex-direction: row; align-items: center; gap: 16px; }
  .pillar-index { order: 3; margin-left: auto; }
  .pillar-icon { order: 1; margin-top: 0; width: 42px; height: 42px; font-size: 17px; flex-shrink: 0; }
  .pillar-name { order: 2; writing-mode: horizontal-tb; transform: none; margin-top: 0; font-size: 18px; white-space: normal; }
  .pillar-detail { margin-top: 0; }
  .pillar.is-active .pillar-detail { margin-top: 16px; }
  .pillar-code { position: static; display: block; margin-top: 12px; text-align: right; opacity: .5; }
  .pillar.is-active .pillar-icon { transform: none; }
  .pillar.is-active .pillar-name { font-size: 18px; margin-top: 0; }
}

/* ---- Industries orbit: collapse to sector tile grid below 760px ---- */
@media (max-width: 760px) {
  .industries-home { padding-block: 88px; }
  .orbit-stage { width: 100%; aspect-ratio: auto; margin-top: 48px; }
  .orbit-spokes, .orbit-hub { display: none; }
  .orbit-nodes { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .orbit-node { position: static; transform: none; width: auto; text-align: left; padding: 22px 18px; background: linear-gradient(160deg, rgba(18, 84, 125, .35), rgba(4, 16, 28, .55)); border: 1px solid rgba(255, 255, 255, .08); }
  .orbit-hex-wrap { margin: 0 0 14px; width: 58px; }
  .orbit-hex { width: 58px; height: 58px; font-size: 18px; }

  /* The radial connector doesn't make sense in a static tile grid; the panel
     becomes permanent supplementary detail inside each card instead of a
     hover-triggered callout. */
  .orbit-connector { display: none; }
  .orbit-panel {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    width: auto;
    margin-top: 14px;
    padding: 12px 0 0;
    background: none;
    border: none;
    border-top: 1px dashed rgba(255, 255, 255, .12);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (max-width: 460px) {
  .orbit-nodes { grid-template-columns: 1fr; }
}

/* ---- Why Bharatedge timeline: vertical on narrow screens ---- */
@media (max-width: 860px) {
  .trust-timeline { margin-top: 56px; }
  .trust-track { left: 19px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--blueprint-line-soft) 0 8px, transparent 8px 16px); }
  .trust-track-fill { width: 2px; height: 0%; transition: height 1.5s cubic-bezier(.22, .61, .36, 1); }
  .trust-timeline.is-visible .trust-track-fill { height: 100%; width: 2px; }
  .trust-steps { flex-direction: column; gap: 46px; }
  .trust-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 22px; }
  .trust-marker { flex-shrink: 0; margin-bottom: 0; }
  .trust-content p { max-width: none; }
}
@media (max-width: 480px) {
  .pillars-rail, .trust-timeline, .orbit-stage { margin-top: 40px; }
}