/* ============================================================
   Reagan Soft Innovation Limited — Engineering Design Layer
   3D · blueprint grids · HUD readouts · scanlines · orbits
   Loaded after style.css. Keeps the white/navy professional base
   and adds a "built by engineers" finishing layer.
   ============================================================ */

:root {
  --font-disp: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --pg: #0a7bce;          /* per-page accent          (light surfaces) */
  --pgl: #8fd8ff;         /* per-page accent          (dark surfaces) */
  --grid: rgba(10, 123, 206, .09);
  --grid-lg: rgba(10, 123, 206, .16);
  --grid-dk: rgba(143, 216, 255, .12);
  --grid-dk-lg: rgba(143, 216, 255, .22);
}

/* Per-page accent themes --------------------------------------- */
.page-home      { --pg: #0a7bce; --pgl: #8fd8ff; }
.page-services  { --pg: #0e7490; --pgl: #7fe3e0; }
.page-pricing   { --pg: #6a4fb8; --pgl: #b9a7ff; }
.page-process   { --pg: #a06a10; --pgl: #ffd596; }
.page-about     { --pg: #157f5a; --pgl: #7fe0b4; }
.page-portfolio { --pg: #0a5da0; --pgl: #8fd8ff; }
.page-faq       { --pg: #0e7490; --pgl: #7fe3e0; }
.page-contact   { --pg: #0a7bce; --pgl: #8fd8ff; }
.page-checkout  { --pg: #0a7bce; --pgl: #8fd8ff; }
.page-default   { --pg: #0a7bce; --pgl: #8fd8ff; }

/* ---------- Typography upgrades ---------- */
.eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 2.6px;
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pg));
  border-radius: 2px;
}
.eyebrow::after {
  content: '//';
  color: var(--faint);
  letter-spacing: 0;
  font-weight: 600;
}

.hero h1, .page-hero h1, .cta h2 { font-family: var(--font-disp); font-weight: 700; letter-spacing: -.028em; }
.auth-card h2 { font-family: var(--font-disp); font-weight: 700; }

.lead, .auth-sub { font-size: 17px; }

/* ---------- Buttons: glossy engineering sheen ---------- */
.btn { will-change: transform; }
.btn::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.36), transparent);
  transform: skewX(-18deg);
  transition: left .5s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn-ghost::after, .btn-outline::after { background: linear-gradient(100deg, transparent, rgba(10,123,206,.10), transparent); }
.btn svg { flex-shrink: 0; }

/* ---------- Public inner page hero: blueprint grid ---------- */
.page-hero {
  position: relative;
  /* Two decorative layers deliberately sit outside their own boxes:
     .page-img::before hangs at right:-18px, and the gridDrift animation
     below slides .page-hero::after 28px to the right. On a phone, where
     the hero spans the full viewport width, that overhang pushed the whole
     document sideways by up to 8px. `clip` contains the decoration
     without creating a scroll container, so sticky descendants and the
     vertical page scroll are unaffected. */
  overflow-x: clip;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(720px 300px at 82% 0%, rgba(30,158,234,.14), transparent 68%);
  background-size: 44px 44px, 44px 44px, auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 62%, transparent 100%);
}
.page-hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 64px;
  background: linear-gradient(180deg, var(--grid-lg), transparent);
  --drift: 0px;
  animation: gridDrift 9s linear infinite alternate;
}
@keyframes gridDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(28px); }
}
.page-hero .container { position: relative; z-index: 2; }

/* Glow orbs injected behind page heroes */
.fx-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-orb {
  position: absolute; border-radius: 50%;
  filter: blur(64px);
  opacity: .5;
  will-change: transform;
}
.fx-orb.o1 { width: 340px; height: 340px; right: -90px; top: -120px; background: radial-gradient(circle at 32% 32%, var(--pgl), transparent 72%); animation: floatA 16s ease-in-out infinite alternate; }
.fx-orb.o2 { width: 280px; height: 280px; left: -110px; bottom: -130px; background: radial-gradient(circle at 60% 40%, rgba(30,158,234,.5), transparent 70%); animation: floatB 20s ease-in-out infinite alternate; }
@keyframes floatA { to { transform: translate(-34px, 26px) scale(1.08); } }
@keyframes floatB { to { transform: translate(30px, -22px) scale(1.12); } }

/* Mono readout strips injected into page heroes */
.fx-readout {
  position: absolute; right: 24px; bottom: 16px; z-index: 2;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--pg); display: flex; gap: 14px; align-items: center;
  padding: 6px 10px; border: 1px solid var(--grid-lg); border-radius: 8px;
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-transform: uppercase;
}
.fx-readout .ro-blink { width: 7px; height: 7px; border-radius: 50%; background: var(--pg); box-shadow: 0 0 0 3px rgba(10,123,206,.18); animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* HUD corner brackets injected around heroes */
.fx-corners { position: absolute; inset: 14px; pointer-events: none; z-index: 1; }
.fx-corners span {
  position: absolute; width: 18px; height: 18px; border: 2px solid var(--pg);
  opacity: .55;
}
.fx-corners .c1 { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.fx-corners .c2 { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.fx-corners .c3 { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.fx-corners .c4 { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

/* ---------- Home hero: HUD + particle canvas + orbit stage ---------- */
/* Home hero is intentionally left out: the particle network fought with
   centred copy. Inner-page heroes keep it. */
.page-hero .fx-canvas,
.auth-page .fx-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  opacity: .8;
}

/* ---------- Auth pages: data-centre grid + card rail ---------- */
.auth-page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(10,123,206,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,123,206,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(760px 460px at 50% 46%, #000, transparent 78%);
  mask-image: radial-gradient(760px 460px at 50% 46%, #000, transparent 78%);
}
.auth-card {
  position: relative; z-index: 2;
  border: 1px solid rgba(10,123,206,.18);
  box-shadow:
    0 26px 60px rgba(8,59,102,.16),
    0 2px 0 rgba(255,255,255,.9) inset;
}
.auth-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--blue));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.auth-sysbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  padding: 0 2px 14px; margin-bottom: 6px;
}
.auth-sysbar .sys-led {
  display: inline-flex; align-items: center; gap: 7px; color: var(--pg);
  font-weight: 600;
}
.auth-sysbar .sys-led::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px rgba(21,127,90,.6);
}
.auth-sysbar .sys-slots { color: var(--faint); }

/* ---------- CTA: neon grid + orbs ---------- */
.cta { z-index: 0; }
.cta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--grid-dk) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dk) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(700px 360px at 50% 50%, #000, transparent 86%);
  mask-image: radial-gradient(700px 360px at 50% 50%, #000, transparent 86%);
}
.cta > * { position: relative; z-index: 1; }

/* ---------- Panels & cards: precision hairlines ---------- */
.panel { position: relative; }
.panel::after {
  content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,123,206,.22), transparent);
  border-radius: 1px;
}

.program-card, .svc-card, .value-card, .price-card, .folio-card, .faq-item {
  position: relative;
}
.program-card::before, .svc-card::before, .value-card::before,
.price-card::before, .folio-card::before {
  content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pg), transparent);
  opacity: .35; border-radius: 1px;
}

.svc-card, .value-card, .price-card, .program-card, .folio-card, .split-media, .founder-card {
  box-shadow: 0 1px 2px rgba(8,59,102,.06), 0 12px 30px rgba(8,59,102,.07);
}

/* ---------- Portfolio cover: blueprint field + depth ----------
   Three drawn layers inside .folio-cover, in paint order:
     0  .folio-scene       the sector backdrop (inline SVG)
     0  .folio-gridlines   the blueprint grid
     0  ::after            a soft light pool in the top-right corner
     1  .folio-devices     the browser window and the phone
     3  .folio-status / .folio-glyph / .folio-meta
   The layers are all drawn in currentColor, so the same artwork
   serves the pale covers and the dark featured one. */
.folio-cover { isolation: isolate; }
.folio-cover::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 82% 8%, rgba(255,255,255,.55), transparent 58%);
}
.folio-cover.is-featured::after { background: radial-gradient(120% 90% at 82% 8%, rgba(143,216,255,.16), transparent 60%); }

.folio-gridlines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 72%);
  mask-image: linear-gradient(200deg, #000, transparent 72%);
}
.folio-cover.is-featured .folio-gridlines {
  background:
    linear-gradient(var(--grid-dk) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dk) 1px, transparent 1px);
}

/* Depth: the artwork and the browser/phone lean away from the cursor
   together, so the cover reads as one object rather than two decals. */
.folio-scene, .folio-devices { will-change: transform; }
.folio-card:hover .folio-glyph { transform: translateY(-2px); }
.folio-glyph { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; }

/* A visitor who asked for less motion still gets the cover — it is
   content, not decoration — they just do not get it moving. */
@media (prefers-reduced-motion: reduce) {
  .folio-scene, .folio-devices, .folio-glyph, .folio-card, .folio-live .fl-go { transition: none; }
  .folio-card:hover .folio-scene,
  .folio-card:hover .folio-devices,
  .folio-card:hover .folio-glyph { transform: none; }
}

/* Section watermark numbers */
.section-head { position: relative; }
.sec-mark {
  position: absolute; top: -20px; right: 2px;
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(40px, 6vw, 64px); line-height: 1;
  color: var(--grid-lg);
  -webkit-user-select: none; user-select: none;
  pointer-events: none;
  letter-spacing: -.04em;
}

/* ---------- Scroll reveal (JS adds .reveal.in) ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 3D tilt (JS tracks pointer) ---------- */
.tilt {
  will-change: transform;
  transition: transform .18s ease-out, box-shadow .18s ease-out, opacity .55s ease;
}

/* ---------- Counters ---------- */
.ctr { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- Sticky nav shrink ---------- */
.topbar { transition: box-shadow .25s ease, background .25s ease; }
.topbar.scrolled {
  box-shadow: 0 10px 30px rgba(8,59,102,.10);
  background: rgba(255,255,255,.97);
}
.topbar.scrolled .nav { height: 66px; }
.nav { transition: height .25s ease; }

/* ---------- Hero trust counters ---------- */
.hero-trust b.ctr { font-weight: 800; color: var(--navy); }

/* ---------- Checkout accents ---------- */
.page-checkout .page-hero {
  background:
    linear-gradient(180deg, var(--sky-50) 0%, rgba(241,249,254,0) 78%),
    radial-gradient(760px 420px at 100% 0%, rgba(30,158,234,.18), transparent 70%),
    linear-gradient(180deg, var(--sky-50), #fff);
}
.cs-step .cs-dot { border-width: 1.6px; }
.cs-step.next .cs-dot { border-style: dashed; color: var(--muted); }
.cs-step.next b { color: var(--muted); }
.checkout-auth { border-top: 3px solid var(--pg); }
.checkout-auth .panel-head h3 { color: var(--navy); }
.db-amount strong { font-family: var(--font-disp); }

/* Deposit ribbon (used on pricing/services) */
.deposit-ribbon .dr-chip, .hero-price-item .hp-value, .stat strong, .sidebar-stat b {
  font-variant-numeric: tabular-nums;
}

/* ---------- Footer: gradient hairline ---------- */
.site-footer { position: relative; border-top: 1px solid transparent; }
.site-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(30,158,234,.65), transparent);
}

/* ---------- Dashboard: polite engineering polish ---------- */
.sidebar::after {
  content: ''; position: absolute; right: 0; top: 8%; bottom: 8%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(143,216,255,.28), transparent);
}
.side-nav a { position: relative; }
.side-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-nav a.active { background: linear-gradient(90deg, rgba(10,123,206,.34), rgba(10,123,206,.10)); color: #fff; }
.stat { position: relative; overflow: hidden; }
.stat::after {
  content: ''; position: absolute; right: -34px; top: -34px; width: 96px; height: 96px;
  border-radius: 50%; background: radial-gradient(circle, rgba(30,158,234,.14), transparent 70%);
}

/* ---------- Footer: bigger brand mark ---------- */
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.25fr; gap: 44px; }
.footer-brand .brand { gap: 20px; }
.footer-brand .brand img {
  width: 96px; height: 96px; border-radius: 22px; flex-shrink: 0;
  border: 1px solid rgba(143,216,255,.32);
  box-shadow: 0 12px 32px rgba(0,0,0,.38), 0 0 0 6px rgba(143,216,255,.06);
  transition: box-shadow .25s ease, transform .25s ease;
}
.footer-brand .brand:hover img { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 8px rgba(143,216,255,.12); }
.footer-brand .brand-text { font-size: 22px; letter-spacing: -.01em; }
.footer-brand p { max-width: 320px; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* ---------- Footer: Uganda flag ribbon with crest cranes ---------- */
.footer-flag {
  position: relative; height: 22px; overflow: hidden;
  background: linear-gradient(180deg,
    #101417 0 33.334%,
    #fbcf0d 33.334% 66.667%,
    #c8102e 66.667% 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.28), 0 4px 18px rgba(0,0,0,.25);
  z-index: 1;
}
.footer-flag::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.16), transparent 16%, transparent 84%, rgba(0,0,0,.16));
}
.flag-bird { position: absolute; top: 50%; margin-top: -20px; z-index: 2; will-change: transform; pointer-events: none; }
.flag-bird .crane { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.fb-bob { display: block; animation: birdBob 2.8s ease-in-out infinite; }
.flag-bird .crane .wing {
  transform-box: fill-box; transform-origin: 24% 80%;
  animation: wingFlap .9s ease-in-out infinite;
}
.fb-r .crane .wing { animation-delay: .45s; }
@keyframes flyRtoL {
  from { transform: translateX(0) scaleX(-1); }
  to   { transform: translateX(calc(-1 * (100vw + 220px))) scaleX(-1); }
}
@keyframes flyLtoR {
  from { transform: translateX(0) scaleX(1); }
  to   { transform: translateX(calc(100vw + 220px)) scaleX(1); }
}
@keyframes wingFlap {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-34deg); }
}
@keyframes birdBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.fb-l { right: -86px; animation: flyRtoL 18s linear infinite; }
.fb-r { left: -86px; animation: flyLtoR 23s linear infinite; animation-delay: -10s; }

/* ---------- In-page framed visual (inner pages, not a hero) ---------- */
.page-img {
  position: relative; margin: 36px 0 0; max-width: 640px;
  animation: pageImgIn .8s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: .15s;
}
@keyframes pageImgIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.page-img::before {
  content: ''; position: absolute; z-index: 0; right: -18px; top: -18px;
  width: 160px; height: 160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--pgl), transparent 72%);
  opacity: .5; filter: blur(8px);
}
.page-img-frame {
  position: relative; z-index: 1; border-radius: 22px; overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(10,123,206,.22);
  background: var(--navy);
  box-shadow: 0 30px 70px rgba(8,59,102,.22), 0 8px 20px rgba(8,59,102,.12);
}
.page-img-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-img-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(143,216,255,.28) 50%, transparent 50.3%),
    linear-gradient(180deg, transparent 49.7%, rgba(143,216,255,.18) 50%, transparent 50.3%);
  background-size: 34px 34px;
  opacity: .32;
}
.page-img-frame::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(158deg, rgba(255,255,255,.18), transparent 40%);
}
.pi-c { position: absolute; z-index: 3; width: 18px; height: 18px; border: 2px solid #fff; opacity: .9; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.pi-c.c1 { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.pi-c.c2 { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.pi-c.c3 { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.pi-c.c4 { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.page-img-cap {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.pi-led { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--pg); box-shadow: 0 0 0 4px rgba(10,123,206,.14); }

/* ---------- Inner pages that pair copy + framed visual ---------- */
@media (min-width: 1000px) {
  .page-hero.pi-grid { padding-bottom: 88px; }
  .page-hero.pi-grid .container {
    display: grid;
    grid-template-columns: 1.05fr .92fr;
    gap: 52px;
    align-items: center;
  }
  .page-hero.pi-grid .page-img { margin: 0; max-width: none; }
  .page-hero.pi-grid .fx-readout { right: auto; left: 24px; }
}

/* ---------- Section graphic polish (nothing ugly, all sized well) ---------- */
.service-block { gap: 54px; }
.service-block .svc-grid { margin-top: -4px; }
.price-card { position: relative; }
.price-card .amount { font-size: 30px; letter-spacing: -.02em; }
.svc-card .amount { font-size: 26px; }
.price-card .deliver { margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(140,180,205,.22); }
.pricing-grid .price-card { box-shadow: var(--shadow-sm); }
.pricing-grid .price-card:hover { border-color: rgba(10,123,206,.3); }
.program-card { position: relative; overflow: hidden; }
.program-card::before { content: ''; position: absolute; inset: auto -30% -40% auto; width: 70%; height: 120%; background: radial-gradient(circle, rgba(30,158,234,.14), transparent 70%); pointer-events: none; }
.value-card b, .stats-grid b { font-family: var(--font-disp); letter-spacing: -.02em; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .fx-readout { right: 14px; bottom: 10px; font-size: 9px; gap: 8px; }
  .fx-corners { inset: 10px; }
}
@media (max-width: 640px) {
  .fx-readout { display: none; }
  .page-hero.fx-live::before { background-size: 34px 34px, 34px 34px, auto; }
  .sec-mark { top: -8px; }
  .hero .hero-title, .page-hero h1 { letter-spacing: -.02em; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-orb, .page-hero::after, .eyebrow::before, .btn::after, .topbar, .nav,
  .flag-bird, .flag-bird .crane .wing, .fb-bob, .page-img {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .tilt { transform: none !important; }
}

/* ============================================================
   Home hero — full crossfade slider layer
   (composes on top of the .hero/.hero-inner base in style.css)
   ============================================================ */
.hero-slider {
  position: relative; width: 100%; min-height: var(--hero-min-height);
  touch-action: pan-y pinch-zoom;
}
.hero-slides {
  position: relative; display: grid; width: 100%;
  min-height: var(--hero-min-height);
}
.hero-slide {
  grid-area: 1 / 1; position: relative;
  display: flex; align-items: center;
  min-width: 0; min-height: var(--hero-min-height);
  opacity: 0; visibility: hidden; z-index: 1;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.hero-slide.s-active {
  opacity: 1; visibility: visible; z-index: 2;
  transition: opacity .9s ease, visibility 0s;
}
/* `margin: 0` here would beat `.container`'s `margin: 0 auto` and push the
   centred copy hard left, so only the inline axis is reset. */
.hero-slide .hero-inner { margin-inline: auto; }

/* Hero slider arrows */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(4, 26, 48, .40);
  border: 1px solid rgba(255, 255, 255, .40);
  box-shadow: 0 8px 24px rgba(4, 26, 48, .30);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: pointer; transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.hero-arrow:hover { background: rgba(10, 123, 206, .88); border-color: rgba(255,255,255,.7); transform: translateY(-50%) scale(1.07); }
.hero-arrow:focus-visible { outline: 2px solid #8fd8ff; outline-offset: 3px; }
.hero-arrow svg { width: 21px; height: 21px; }
.hero-prev { left: 26px; }
.hero-next { right: 26px; }

/* Hero slider dots, on a frosted pill so they read over any photo */
.hero-dots {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 5; display: flex; align-items: center; gap: 0;
  padding: 7px 11px; border-radius: 100px;
  background: rgba(4, 26, 48, .32);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgba(4, 26, 48, .26);
}
.hero-dot {
  /* The visible dot is 8px, which is far below a usable tap target. The
     button is sized for the finger and the dot is drawn inside it, so the
     control keeps its proportions and gains a 26px hit area. The dot
     spacing moved into the buttons, which is why the gap is 0 above. */
  width: 26px; height: 26px; border-radius: 8px;
  background: transparent; border: 0; padding: 0;
  display: grid; place-items: center;
}
.hero-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .7);
  transition: width .32s cubic-bezier(.2, .7, .3, 1), background .3s ease;
}
.hero-dot { cursor: pointer; }
.hero-dot:hover::before { transform: scale(1.3); background: rgba(255, 255, 255, .9); }
.hero-dot:focus-visible { outline: 2px solid #8fd8ff; outline-offset: 3px; }
.hero-dot.s-active { width: 26px; }
.hero-dot.s-active::before {
  width: 28px; border-radius: 5px; background: #56c7ff; border-color: #56c7ff;
  box-shadow: 0 0 12px rgba(86, 199, 255, .7);
}

/* Autoplay progress bar (driven by JS) */
.hero-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; z-index: 6;
  width: 0; background: linear-gradient(90deg, #56c7ff, #8fd8ff);
  box-shadow: 0 0 12px rgba(86, 199, 255, .65);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.hero-progress.is-running { opacity: .95; }

/* Keyboards-friendly: keep controls reachable but never cover text on small hero */
@media (max-width: 720px) {
  .hero-slide .hero-inner { padding-top: 96px; padding-bottom: 108px; }
  .hero-arrow { width: 42px; height: 42px; top: auto; bottom: 22px; transform: none; }
  .hero-arrow svg { width: 17px; height: 17px; }
  .hero-arrow:active { transform: scale(.94); }
  .hero-prev { left: 14px; }
  .hero-next { right: 14px; }
  .hero-dots { bottom: 30px; gap: 0; }
  /* Shrink the drawn dot, never the button: the button is the tap target. */
  .hero-dot, .hero-dot.s-active { width: 24px; height: 24px; }
  .hero-dot::before { width: 8px; height: 8px; }
  .hero-dot.s-active::before { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.s-active { transition: none; }
  .hero-arrow { transition: none; }
  .hero-dot { transition: none; }
}

/* ===================================================================
   Footer responsive collapse
   -------------------------------------------------------------------
   This file is loaded AFTER style.css, so its footer rules win the
   cascade regardless of source order in the other file. style.css
   already collapsed .footer-grid to 1fr at 640px, but the 5-column and
   4-column declarations above silently overrode it on every phone:
   measured 244.9px + 75.1px + 68.6px + 73.4px of track inside a 301px
   container, overflowing the page by up to 284px at 320px wide.

   Repeating the collapse here, at winning specificity, is the fix.
   The 96px brand mark is also too large to sit beside four columns of
   links, so it steps down with the rest.
   =================================================================== */
.footer-grid > * { min-width: 0; }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; }
  .footer-brand .brand img { width: 74px; height: 74px; border-radius: 18px; }
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-brand .brand img { width: 62px; height: 62px; border-radius: 16px; }
  .footer-brand .brand-text { font-size: 19px; }
  .footer-col > b { margin-bottom: 6px; }
}
@media (max-width: 360px) {
  .footer-grid { gap: 22px; }
  .footer-brand .brand img { width: 54px; height: 54px; }
}