/* ============================================================
   base.css — shared foundation, design system, animation
   Loaded on every page (before index.css / page css).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
  color: #1B1929;                 /* accent */
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid #2638D9; outline-offset: 2px; border-radius: 4px; }

/* Utility aliases used in older markup */
.font-inter { font-family: 'Inter', system-ui, sans-serif; }

/* ============================================================
   SCROLL-REVEAL ANIMATION SYSTEM
   Add data-animate="up|left|right|zoom|fade" to any element.
   Optional data-delay="120" (ms). site.js adds .in-view.
   Falls back to visible if JS/IO is unavailable.
   ============================================================ */
html.js [data-animate] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--rvl-delay, 0ms);
}
html.js [data-animate="up"]    { transform: translateY(26px); }
html.js [data-animate="left"]  { transform: translateX(-32px); }
html.js [data-animate="right"] { transform: translateX(32px); }
html.js [data-animate="zoom"]  { transform: scale(.94); }
html.js [data-animate="fade"]  { transform: none; }

[data-animate].in-view {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Soft entrance for the fixed navbar on first load */
@keyframes chNavIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ============================================================
   CONSISTENT PAGE GUTTER  (matches "Our Subsidiaries" / the hero)
   Use on the inner wrapper of every section:
     <section ...><div class="container-x"> … </div></section>
   ============================================================ */
.container-x {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1rem;                 /* 16px  — px-4  */
}
@media (min-width: 640px)  { .container-x { padding-inline: 1.5rem; } }  /* 24px — sm:px-6 */
@media (min-width: 1024px) { .container-x { padding-inline: 2rem; } }    /* 32px — lg:px-8 */

/* ============================================================
   SHARED HERO CARD  (homepage-hero concept, reused site-wide)
   ============================================================ */
.hero-shell { padding: 76px 16px 28px; }
@media (min-width: 640px)  { .hero-shell { padding: 84px 24px 32px; } }
@media (min-width: 1024px) { .hero-shell { padding: 92px 32px 40px; } }

.hero-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  background: #0f1e35;            /* pri-deep */
  color: #fff;
}
@media (min-width: 640px) { .hero-card { border-radius: 28px; } }
.hero-card__glow {
  position: absolute; z-index: 0; width: 15rem; height: 15rem; border-radius: 999px;
  background: rgba(38, 56, 217, .28); filter: blur(90px); pointer-events: none;
  top: -4rem; left: -3rem;
}
@media (min-width: 640px) {
  .hero-card__glow { width: 22rem; height: 22rem; filter: blur(120px); top: -6rem; left: -4rem; }
}
.hero-card__media::after {           /* blend photo into the panel */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #0f1e35 0%, rgba(15,30,53,.55) 22%, rgba(15,30,53,0) 55%);
}
@media (max-width: 1023px) {
  .hero-card__media::after {
    background: linear-gradient(180deg, rgba(15,30,53,.35) 0%, rgba(15,30,53,0) 45%);
  }
}

/* --- Light variant: every page except the homepage --- */
.hero-card.is-light {
  background: linear-gradient(152deg, #eef2ff 0%, #f4f5ff 46%, #ffffff 100%);
  color: #1B1929;                                   /* accent */
  border: 1px solid #e2e8f0;                        /* border */
}
.hero-card.is-light .hero-card__glow { background: rgba(38, 56, 217, .16); }
.hero-card.is-light .hero-card__media::after {
  background: linear-gradient(90deg, #eef2ff 0%, rgba(238,242,255,.55) 20%, rgba(238,242,255,0) 52%);
}
@media (max-width: 1023px) {
  .hero-card.is-light .hero-card__media::after {
    background: linear-gradient(180deg, rgba(238,242,255,.5) 0%, rgba(238,242,255,0) 42%);
  }
}

/* Hero text bits — theme aware */
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 999px; padding: .375rem 1rem;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff;
}
@media (min-width: 640px) { .hero-badge { font-size: 12px; } }
.hero-card.is-light .hero-badge {
  border-color: rgba(38,56,217,.16); background: #fff; color: #2638D9;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.hero-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: #2638D9; flex: none; }

.hero-lead { color: rgba(255,255,255,.65); }
.hero-card.is-light .hero-lead { color: #64748b; }            /* muted */

.hero-stats { border-top: 1px solid rgba(255,255,255,.1); }
.hero-card.is-light .hero-stats { border-top-color: #e2e8f0; }
.hero-stat-num   { color: #fff; }
.hero-stat-label { color: rgba(255,255,255,.5); }
.hero-card.is-light .hero-stat-num   { color: #1B1929; }
.hero-card.is-light .hero-stat-label { color: #64748b; }

/* Buttons */
.btn-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 999px; padding: .875rem 1.75rem;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.btn-pill--solid { background: #2638D9; color: #fff; box-shadow: 0 12px 30px -8px rgba(38,56,217,.5); }
.btn-pill--solid:hover { background: #000EA3; transform: translateY(-2px); }
.btn-pill--ghost { border: 1px solid rgba(255,255,255,.25); color: #fff; }
.btn-pill--ghost:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.1); }
.hero-card.is-light .btn-pill--ghost { border-color: rgba(27,25,41,.2); color: #1B1929; }
.hero-card.is-light .btn-pill--ghost:hover { border-color: rgba(27,25,41,.45); background: rgba(27,25,41,.04); }

/* On the smallest screens, stack hero buttons full-width */
@media (max-width: 420px) {
  .hero-shell .btn-pill { flex: 1 1 100%; justify-content: center; padding-left: 1.25rem; padding-right: 1.25rem; }
}