/* ==========================================================================
   STIQ AI — landing page styles
   ========================================================================== */

:root {
  --blue:        #1c22e0;   /* electric royal blue */
  --blue-bright: #2a30ff;
  --blue-soft:   #5b78ff;   /* light accent (gradient word) */
  --blue-link:   #3a55ff;   /* eyebrows / links */
  --navy:        #080a17;   /* near-black section bg */
  --navy-2:      #0c0f22;
  --cream:       #f3eee3;   /* off-white sections */
  --cream-2:     #efe9dc;
  --ink:         #0a0b12;   /* dark text on cream */
  --lime:        #c2ef4a;   /* accent dot */
  --white:       #f7f4ee;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 20px;

  --font-display: "Objektiv Mk2 Trial", "Inter", system-ui, sans-serif;
  --font-body: "Objektiv Mk2 Trial", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* keep anchored sections clear of the sticky header */
#brands, #technology, #careers, #footer, #locations { scroll-margin-top: 96px; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--white);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: #fff; color: #000; padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- shared type ---------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
}
.section-title em { font-style: italic; font-weight: 600; }
.section-sub {
  color: rgba(247, 244, 238, 0.72);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  margin: 18px 0 0;
  max-width: 34ch;
}
.eyebrow {
  font-family: var(--font-body);
  color: var(--blue-link);
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  margin: 0 0 22px;
  text-transform: uppercase;
}
.eyebrow--center { text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; cursor: pointer;
  border: none; transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn--pill {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.45);
  color: var(--white);
  padding: 11px 12px 11px 22px;
  border-radius: 999px;
}
.btn--pill:hover { background: #fff; color: var(--blue); }
.btn__icon {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--blue); font-size: 0.9rem;
}
.btn--pill:hover .btn__icon { background: var(--blue); color: #fff; }

/* ---------- brand lockups ---------- */
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em;
  font-size: 1.25rem;
}
.brand__mark {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 22%, transparent 23%),
              linear-gradient(150deg, var(--blue-bright), #0a1080);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset;
}

.logo-pg {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
}
.logo-dinas {
  font-family: var(--font-body); font-weight: 300; letter-spacing: 0.28em;
}
.logo-dinas sub {
  font-size: 0.42em; letter-spacing: 0.02em; font-weight: 500;
  vertical-align: baseline; margin-left: 6px;
}
.brand-link { transition: opacity .2s ease; }
.brand-link:hover { opacity: 0.6; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding: 16px var(--pad) 0;
  background: linear-gradient(180deg, var(--blue) 0%, rgba(28,34,224,0.86) 70%, rgba(28,34,224,0) 100%);
  backdrop-filter: blur(2px);
}
.nav {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 12px 10px 22px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
}
.nav__links { display: flex; gap: 30px; font-weight: 500; }
.nav__links a { opacity: 0.92; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
.nav__cta { flex: none; }

.nav__toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 8px; cursor: pointer;
}
.nav__toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu[hidden] { display: none; }
.mobile-menu {
  position: fixed; inset: 0 0 auto 0; z-index: 99;
  top: 84px;
  background: var(--blue);
  padding: 24px var(--pad) 34px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.mobile-menu ul { display: flex; flex-direction: column; }
.mobile-menu a { padding: 14px 4px; font-size: 1.15rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.14); }
.mobile-menu .btn--pill { margin-top: 18px; justify-content: center; padding: 14px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -10%, #3339ff 0%, var(--blue) 30%, #10154e 62%, var(--navy) 100%);
  padding: clamp(70px, 14vh, 150px) 0 clamp(60px, 10vh, 120px);
  margin-top: -84px;      /* pull under the transparent-bottom header */
  padding-top: clamp(150px, 22vh, 260px);
}
.hero::after {          /* subtle film grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.hero__inner { position: relative; z-index: 1; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.9rem, 9vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 15ch;
}
.hero__title .grad {
  background: linear-gradient(100deg, var(--blue-soft), #8ea2ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  margin-top: clamp(28px, 5vw, 48px);
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: rgba(247,244,238,0.85);
}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats { background: var(--cream); color: var(--ink); padding: clamp(40px, 6vw, 68px) 0; }
.stats__eyebrow { color: var(--blue-link); margin: 0 0 clamp(26px, 4vw, 40px); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat {
  padding: 8px clamp(16px, 2.4vw, 40px);
  border-left: 1px solid rgba(10,11,18,0.18);
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat__num {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -0.03em;
}
.stat__label { display: block; margin-top: 12px; font-size: clamp(0.85rem, 1.1vw, 1.05rem); color: rgba(10,11,18,0.72); }

/* ==========================================================================
   BRANDS
   ========================================================================== */
.brands { background: var(--navy); padding: clamp(70px, 11vw, 130px) 0; }
.brands__head { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 6vw, 70px); }
.brand-tiles {
  display: flex; justify-content: center; gap: 16px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.brand-tile {
  width: clamp(122px, 13vw, 168px); aspect-ratio: 1;
  border-radius: 14px; display: grid; place-items: center;
  transition: transform .2s ease;
}
.brand-tile:hover { transform: translateY(-3px); }
.brand-tile--dn { background: #1546d6; }
.brand-tile--pg { background: #023c3a; }
.brand-tile__logo { display: block; }
.brand-tile--dn .brand-tile__logo {
  width: 82%; height: 82%; background: #fff;
  -webkit-mask: url(../assets/dinas-logo.webp) center/contain no-repeat;
          mask: url(../assets/dinas-logo.webp) center/contain no-repeat;
}
.brand-tile--pg .brand-tile__logo {
  width: 78%; height: 34%; background: var(--lime);
  -webkit-mask: url(../assets/pg-logo.svg) center/contain no-repeat;
          mask: url(../assets/pg-logo.svg) center/contain no-repeat;
}
.brands__head .section-title { font-weight: 600; }
.brands__head .section-sub { margin-inline: auto; max-width: 52ch; text-align: center; }

.brand-block { margin-top: clamp(40px, 6vw, 64px); }
.brand-block__name { font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin: 0 0 22px; }

/* full-bleed horizontal filmstrip ("rollout") */
.gallery {
  --rowh: clamp(240px, 21vw, 320px);
  display: flex;
  gap: 16px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}
.gallery::-webkit-scrollbar { display: none; }
.gallery__item {
  flex: 0 0 auto;
  height: var(--rowh);
  aspect-ratio: 1.4;                 /* all tiles same rectangle; images zoom/crop via object-fit */
  margin: 0; border-radius: var(--radius); overflow: hidden;
  background: #14151f; scroll-snap-align: start;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* OS divider */
.os-divider { display: flex; align-items: center; margin: clamp(50px, 7vw, 80px) 0; position: relative; }
.os-divider::before, .os-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.16);
}
.os-divider__pill {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 22px; padding: 10px 22px;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 999px;
  font-size: 0.82rem; letter-spacing: 0.14em; white-space: nowrap;
}
.os-divider__pill strong { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; }
.os-divider__pill span:last-child { color: rgba(255,255,255,0.55); }

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue-link); display: inline-block; flex: none; }
.dot--lime { background: var(--lime); box-shadow: 0 0 10px rgba(194,239,74,0.6); }

/* ==========================================================================
   TECHNOLOGY
   ========================================================================== */
.tech {
  padding: clamp(60px, 9vw, 110px) 0;
  background:
    radial-gradient(85% 70% at 12% 78%, rgba(42,48,255,0.6), transparent 58%),
    linear-gradient(180deg, var(--navy) 0%, #16193f 20%, #171bce 66%, #12153a 100%);
}
.tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.tech__title { font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.5rem); }
.tech__sub { max-width: 40ch; }
.tech__intro { position: sticky; top: 120px; }

.features { display: flex; flex-direction: column; gap: 34px; }
.feature { display: grid; grid-template-columns: 48px 1fr; gap: 20px; }
.feature__icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(58,85,255,0.12); border: 1px solid rgba(91,120,255,0.25);
  color: var(--blue-soft);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0 0 8px; }
.feature__text { margin: 0; color: rgba(247,244,238,0.68); font-size: 1rem; }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  background: var(--navy); overflow: hidden;
  border-block: 1px solid rgba(255,255,255,0.1);
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 34px; width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee__track span:not(.dot) {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1rem, 1.8vw, 1.5rem); color: rgba(247,244,238,0.6); white-space: nowrap;
}
.marquee .dot { background: var(--blue-link); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ==========================================================================
   VISION
   ========================================================================== */
.vision { background: var(--navy); padding: clamp(60px, 9vw, 120px) 0; }
.vision__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.vision__text .section-sub { max-width: 42ch; }
.legend { display: flex; gap: 28px; margin-top: 34px; font-size: 0.95rem; color: rgba(247,244,238,0.8); }
.legend span { display: inline-flex; align-items: center; gap: 9px; }
.dot--active { background: var(--blue-link); }
.dot--future { background: transparent; border: 1.5px solid rgba(255,255,255,0.4); }

.vision__map {
  background: linear-gradient(160deg, #0e1024, #0a0b16);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 24px;
  padding: clamp(18px, 3vw, 38px);
}
.map { position: relative; }
.map__img {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 99%);
          mask-image: linear-gradient(90deg, #000 86%, transparent 99%);
}
.map__pin { position: absolute; width: 0; height: 0; transform: translate(-50%, -50%); }
.map__dot {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px;
  border-radius: 50%; background: var(--blue-link);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(58,85,255,0.25);
}
.map__ring {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--blue-link);
  transform: translate(-50%, -50%);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  70%  { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .map__ring { animation: none; } }

/* ==========================================================================
   VALIDATION
   ========================================================================== */
.validation { background: var(--cream); color: var(--ink); padding: clamp(70px, 11vw, 130px) 0; }
.validation__inner { text-align: center; max-width: 900px; margin: 0 auto; }
.validation__title { color: var(--ink); font-weight: 600; font-size: clamp(2.1rem, 5vw, 4rem); }
.validation__sub { color: rgba(10,11,18,0.72); margin: 26px auto 0; max-width: 58ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }

/* ==========================================================================
   CAREERS
   ========================================================================== */
.careers {
  background: linear-gradient(180deg, var(--navy) 0%, #141a52 55%, #0c1030 100%);
  padding: clamp(60px, 9vw, 120px) 0 clamp(40px, 6vw, 70px);
}
.careers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.careers__title { font-weight: 600; font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: clamp(30px, 5vw, 50px); }
.careers__card {
  display: block; padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 22px;
  background: rgba(255,255,255,0.03); transition: background .2s, transform .2s;
}
.careers__card:hover { background: rgba(255,255,255,0.07); transform: translateY(-3px); }
.careers__card-head { display: flex; align-items: center; justify-content: space-between; }
.careers__card .eyebrow { margin: 0; }
.careers__arrow {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.3); font-size: 1.1rem;
}
.careers__card-text { color: rgba(247,244,238,0.78); margin: 22px 0 26px; }
.careers__link { font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 3px; }
.careers__photo { margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 1499 / 1023; }
.careers__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   LOCATIONS
   ========================================================================== */
.locations {
  background: #171bce;                 /* flows from careers bottom into footer */
  color: var(--white);
  padding: clamp(56px, 8vw, 100px) 0 clamp(50px, 7vw, 90px);
}
.locations .eyebrow { color: #a9b8ff; }
.loc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 60px); margin-top: clamp(28px, 4vw, 48px);
}
.loc-brand__head {
  display: flex; align-items: baseline; gap: 12px;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 0 0 18px;
}
.loc-count {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px; padding: 2px 10px;
}
.loc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.loc-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px; background: rgba(255,255,255,0.04);
  color: var(--white); transition: background .2s ease, transform .2s ease;
}
.loc-item:hover { background: rgba(255,255,255,0.10); transform: translateX(3px); }
.loc-area { font-weight: 600; min-width: 130px; display: flex; align-items: center; }
.loc-addr { color: rgba(255,255,255,0.6); font-size: 0.92rem; flex: 1; }
.loc-go { color: rgba(255,255,255,0.5); font-size: 1.1rem; }
.loc-item:hover .loc-go { color: var(--white); }
.loc-soon {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #0a0b12; background: var(--lime); border-radius: 999px;
  padding: 2px 7px; margin-left: 8px;
}
.loc-soon--new { background: var(--white); color: var(--blue); }

/* ==========================================================================
   LOCATIONS PAGE (locations.html)
   ========================================================================== */
.locpage { background: var(--navy); color: var(--white); }
.locpage__hero { padding: clamp(96px, 13vw, 150px) 0 clamp(28px, 4vw, 44px); }
.locpage__hero .eyebrow { color: #a9b8ff; }
.loc-intro { max-width: 620px; color: rgba(255,255,255,0.72); font-size: 1.05rem; }
.brandlinks { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.brandlink {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.04);
  color: var(--white); font-weight: 600; transition: background .2s ease, transform .2s ease;
}
.brandlink:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.brandlink .leg-dot { margin: 0; }

.map-card { margin-top: clamp(30px, 4vw, 48px); }
#map {
  height: clamp(360px, 52vh, 540px);
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  position: relative; z-index: 0;               /* contain Leaflet's internal z-indexes */
}
.leaflet-container { background: #e6e9ef; font-family: var(--font-body); }
.map-legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; font-size: 0.92rem; color: rgba(255,255,255,0.75); }
.leg-dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: -1px; }
.leg-dot--pg { background: #023c3a; } .leg-dot--dn { background: #1546d6; }

.mpin {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  border: 2px solid #fff; box-shadow: 0 2px 7px rgba(0,0,0,0.4);
}
.mpin--pg { background: #023c3a; } .mpin--dn { background: #1546d6; }

.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content { margin: 12px 14px; }
.pop { display: flex; flex-direction: column; gap: 2px; }
.pop-brand { font-size: 0.7rem; font-weight: 700; letter-spacing: .01em; }
.pop b { font-size: 1rem; color: #0a0b12; }
.pop-addr { color: #5b6270; font-size: 0.85rem; }
.pop a { color: #1546d6; font-weight: 600; margin-top: 5px; font-size: 0.85rem; }
.pop-tag { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.pop-tag--soon { background: var(--lime); color: #0a0b12; }
.pop-tag--new { background: #1546d6; color: #fff; }

.locpage__lists { padding: clamp(40px, 6vw, 70px) 0 clamp(56px, 8vw, 96px); }
@media (max-width: 760px) {
  .loc-grid { grid-template-columns: 1fr; }
  .loc-area { min-width: 108px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: linear-gradient(180deg, var(--navy) 0%, #14183c 26%, var(--blue) 100%);
  padding: clamp(28px, 4vw, 56px) var(--pad) clamp(36px, 6vw, 72px);
}
.footer__card {
  position: relative; overflow: hidden;
  max-width: var(--maxw); margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 28px;
  background: rgba(255,255,255,0.02);
  padding: clamp(34px, 5vw, 60px) clamp(26px, 4vw, 56px) 0;
}
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px;
  position: relative; z-index: 2;
}
.footer__tag { margin: 20px 0 0; max-width: 34ch; color: rgba(255,255,255,0.8); font-size: 1.05rem; line-height: 1.5; }
.footer__copy { margin-top: 18px; color: rgba(255,255,255,0.6); font-size: 0.9rem; }
.footer__col h4 { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 20px; }
.footer__col a { display: block; padding: 6px 0; font-size: 1.05rem; opacity: 0.92; transition: opacity .2s; }
.footer__col a:hover { opacity: 1; text-decoration: underline; }
.footer__watermark {
  font-family: "Poppins", var(--font-display); font-weight: 700; white-space: nowrap;
  font-size: clamp(3rem, 18.5vw, 13.5rem); line-height: 0.9;
  text-align: center; color: rgba(255,255,255,0.11);
  letter-spacing: -0.02em; margin: clamp(20px, 4vw, 46px) 0 -0.1em; user-select: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .tech__grid { grid-template-columns: 1fr; }
  .tech__intro { position: static; }
  .vision__grid { grid-template-columns: 1fr; }
  .vision__map { order: -1; }
  .careers__grid { grid-template-columns: 1fr; }
  .careers__photo { order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) { .gallery { --rowh: clamp(240px, 42vw, 300px); } }
@media (max-width: 560px) { .gallery { --rowh: 280px; } }

@media (max-width: 560px) {
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .stat { border-left: none; padding-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid rgba(10,11,18,0.18); padding-left: clamp(16px, 5vw, 40px); }
  .os-divider__pill { font-size: 0.7rem; margin: 0 10px; padding: 9px 14px; }
  .legend { flex-direction: column; gap: 12px; }
  .footer__grid { grid-template-columns: 1fr; }
}