/* ==========================================================================
   GENI TECH — inner.css · content redesign for the inner marketing pages
   (about-us, what-we-do, markets, contact-us). Loaded AFTER the base CSS on
   these pages only, so it restyles the MAIN CONTENT while the header (nav)
   and footer keep using the base stylesheet, unchanged. Reuses global.css
   tokens (--navy, --blue, --sky, --g-blue, --g-navy, --font-display …).
   ========================================================================== */

/* ============================ PAGE BANNER → navy hero ============================ */
.pbanner{
  background: var(--g-navy) !important;
  text-align: left;
  padding-top: clamp(66px, 8vw, 118px);
  padding-bottom: clamp(66px, 8vw, 118px);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.pbanner .blob--blue{ background: radial-gradient(circle, rgba(47,134,240,.55), transparent 70%) !important; opacity:.55; }
.pbanner .blob--navy{ background: radial-gradient(circle, rgba(107,176,255,.32), transparent 70%) !important; opacity:.5; }
.pbanner::after{ /* faint dot matrix, bottom-right */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image: radial-gradient(rgba(255,255,255,.11) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(520px 300px at 92% 128%, #000, transparent 70%);
          mask-image: radial-gradient(520px 300px at 92% 128%, #000, transparent 70%);
}
.pbanner__inner{ position: relative; z-index: 1; text-align: left; margin: 0; max-width: 840px; }
.pbanner .crumb{ justify-content: flex-start; color: rgba(219,230,255,.6); }
.pbanner .crumb a{ color: var(--sky-2); }
.pbanner .crumb .sep{ color: rgba(255,255,255,.25); }
.pbanner h1{ color: #fff; }
.pbanner .pbanner__lead{ color: #c3d0f2; margin: 20px 0 0; max-width: 60ch; }
.pbanner .eyebrow{ background: rgba(255,255,255,.12) !important; color: #cfe0ff !important; }

/* ============================ Section headings → left, with accent ============================ */
.section .shead{ text-align: left; margin: 0 0 46px; max-width: 860px; }
.section .shead .lead{ margin: 16px 0 0; }
.section .shead h2{ position: relative; }
.section .shead h2::after{
  content:""; display: block; width: 60px; height: 4px; margin-top: 18px;
  border-radius: 3px; background: var(--g-blue);
}

/* ============================ Feature cards → numbered + accent bar ============================ */
.gcards{ counter-reset: gcard; }
.gcard{
  position: relative; overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 34px 30px 30px !important;
  box-shadow: var(--sh-sm) !important;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s !important;
}
.gcard::after{ /* big faint index number */
  counter-increment: gcard; content: "0" counter(gcard);
  position: absolute; top: 20px; right: 26px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.75rem;
  color: rgba(1,85,202,.16); letter-spacing: -.02em; line-height: 1;
}
.gcard::before{ /* left accent that grows on hover */
  content:""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--g-blue); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease);
}
.gcard:hover{ transform: translateY(-6px); border-color: var(--wash-2) !important; box-shadow: var(--sh) !important; }
.gcard:hover::before{ transform: scaleY(1); }

/* ============================ About story stat panel → light tiles ============================ */
.statcard{ background: #fff !important; border: 1px solid var(--line); box-shadow: var(--sh); }
.statcard .statcard__glow{ display: none !important; }
.statcard__grid{ position: relative; gap: 14px !important; }
.statcard__cell{
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px;
}
.statcard__cell strong{
  background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.statcard__cell span{ color: var(--ink-soft) !important; }

/* ============================ Markets snapshot → connected terminal board ============================ */
.mcards{
  gap: 0 !important;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh);
}
.mcard{
  background: transparent !important; border: none !important;
  border-right: 1px solid var(--line) !important; border-radius: 0 !important;
  box-shadow: none !important; transition: background .25s var(--ease) !important;
}
.mcard:last-child{ border-right: none !important; }
.mcard:hover{ transform: none !important; background: var(--mist) !important; box-shadow: none !important; }
@media (max-width: 860px){
  .mcard:nth-child(2n){ border-right: none !important; }
  .mcard{ border-bottom: 1px solid var(--line) !important; }
}
@media (max-width: 460px){ .mcard{ border-right: none !important; } }

/* ============================ Insight cards → hover accent ============================ */
.icard{ position: relative; border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.icard__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(2,12,45,.45), transparent 55%); }
.icard::after{
  content:""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--g-blue); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.icard:hover::after{ transform: scaleX(1); }

/* ============================ Contact → form accent + spacing ============================ */
.contact__grid{ gap: 22px; }
.contact__form{ position: relative; overflow: hidden; }
.contact__form::before{
  content:""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--g-blue);
}

/* ============================ CTA → left-aligned + dot matrix ============================ */
.cta__inner{ text-align: left; }
.cta__inner .eyebrow{ margin-bottom: 2px; }
.cta__inner h2{ margin: 16px 0 0; max-width: 22ch; }
.cta__inner p{ margin: 14px 0 0; }
.cta__inner .cta__actions{ justify-content: flex-start; margin-top: 30px; }
.cta__inner::after{
  content:""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(460px 300px at 100% 120%, #000, transparent 70%);
          mask-image: radial-gradient(460px 300px at 100% 120%, #000, transparent 70%);
}
.cta__inner > *{ position: relative; z-index: 1; }
@media (max-width: 560px){ .cta__inner h2{ max-width: none; } }