/* ══════════════════════════════════════════════════════
   AURIVANTEQ — styles.css
   Rebuilt for performance, precision, and premium UI
   ══════════════════════════════════════════════════════ */

/* ── RESET ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; }
body {
  background: #000000;
  color: #e8eaf0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.no-scroll { overflow: hidden; }
/* html now owns viewport propagation (overflow-x: clip), so the scroll lock
   must also land on html — :has keeps it in sync without touching the JS. */
html:has(body.no-scroll) { overflow-y: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── TOKENS ────────────────────────────────── */
:root {
  --bg:        #000000;
  --bg2:       #000000;
  --panel:     rgba(11, 11, 14, 0.75);
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.04);
  --blue:      #1d4ed8;
  --blue-l:    #3b82f6;
  --blue-xl:   #60a5fa;
  --gold:      #c9960e;
  --gold-l:    #c9960e;
  --gold-xl:   #f5d062;
  --gold-d:    #7c5c08;
  --white:     #ffffff;
  --w90:       rgba(255,255,255,0.9);
  --w60:       rgba(255,255,255,0.6);
  --w50:       rgba(255,255,255,0.5);
  --w30:       rgba(255,255,255,0.3);
  --w08:       rgba(255,255,255,0.06);
  --w04:       rgba(255,255,255,0.03);
  --fh:        'Outfit', sans-serif;
  --fb:        'Space Grotesk', sans-serif;
  --ease:      cubic-bezier(.4,0,.2,1);
  --r:         10px;
  --r2:        16px;
}

/* ── UTILITIES ─────────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.gold { background: linear-gradient(120deg,var(--gold-xl),var(--gold-l),var(--gold-xl)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .35em;
  color: var(--gold-l);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Keyboard skip link — visually hidden until focused */
.skip-link {
  position: fixed; top: 10px; left: 12px; z-index: 9500;
  transform: translateY(-220%);
  background: var(--gold-l); color: #050709;
  font-family: var(--fh); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  padding: 10px 16px; border-radius: var(--r);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ── ANIMATIONS ────────────────────────────── */
.fade-up { opacity:0; transform:translateY(28px); transition: opacity .65s var(--ease), transform .65s var(--ease); transition-delay: var(--d, 0s); }
.fade-left { opacity:0; transform:translateX(-36px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.fade-right { opacity:0; transform:translateX(36px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.in { opacity:1 !important; transform:none !important; }

/* ═══════════════════════════════════════════════
   SPLASH
═══════════════════════════════════════════════ */
#splash {
  position: fixed; inset: 0; z-index: 9000;
  background: #000000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
  overflow: hidden;
}
#splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
#splashCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.splash-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 0; text-align: center;
}

.splash-emblem {
  position: relative; width: 120px; height: 120px; margin-bottom: 28px;
  animation: sEmb .8s var(--ease) .1s both;
}
@keyframes sEmb { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } }

.s-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(201,150,14,.25);
  animation: sRot linear infinite;
}
.s-r1 { animation-duration: 9s; }
.s-r2 { inset: -16px; border-color: rgba(201,150,14,.12); animation-duration: 15s; animation-direction: reverse; }

@keyframes sRot { to { transform: rotate(360deg); } }

.splash-emblem img {
  position: absolute; inset: 12px;
  width: calc(100% - 24px); height: calc(100% - 24px);
  object-fit: contain; border-radius: 50%;
  filter: drop-shadow(0 0 20px rgba(201,150,14,.5));
}
/* Pulsing gold halo BEHIND the emblem. It animates opacity + transform only
   (composited properties) — the old rule animated `filter` on the img, which
   forced a repaint of the logo every frame (PageSpeed: non-composed animation). */
.splash-emblem::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,208,98,.5) 0%, rgba(201,150,14,.22) 45%, transparent 72%);
  animation: sGlow 2.5s ease-in-out infinite;
}
@keyframes sGlow { 0%,100% { opacity:.35; transform:scale(.96); } 50% { opacity:.9; transform:scale(1.06); } }

.splash-wordmark {
  font-family: var(--fh);
  font-weight: 700;
  font-size: clamp(22px,5vw,40px);
  letter-spacing: .12em;
  line-height: 1;
  animation: sFade .9s var(--ease) .35s both;
}
@keyframes sFade { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

.sw-a {
  background: linear-gradient(135deg,var(--gold-xl),var(--gold-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 10px rgba(245,208,98,.4));
}
.sw-b {
  background: linear-gradient(135deg,var(--gold-d),var(--gold-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.sw-c {
  background: linear-gradient(135deg,var(--gold-xl),var(--gold-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 10px rgba(245,208,98,.4));
}

.splash-rule {
  width: 120px; height: 1px;
  background: linear-gradient(90deg,transparent,var(--gold-l),transparent);
  margin: 20px 0 16px;
  animation: sFade .9s var(--ease) .55s both;
}

.splash-tag {
  font-family: var(--fh); font-size: 10px; font-weight: 600;
  letter-spacing: .35em; color: var(--gold-l); text-transform: uppercase;
  animation: sFade .9s var(--ease) .65s both;
}

.splash-progress {
  width: 160px; height: 1.5px;
  background: rgba(201,150,14,.15);
  border-radius: 2px; margin-top: 32px; overflow: hidden;
  animation: sFade .5s var(--ease) .9s both;
}
.splash-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg,var(--gold-d),var(--gold-xl));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .1s linear;
}

/* ═══════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
/* Retracts while scrolling down; returns on scroll-up (JS toggles .hide). */
#nav.hide {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

/* Floating glass island — detached from the top edge, content on a
   1fr / auto / 1fr grid so the links sit dead-center of the pill
   (and the pill is centered on the viewport). */
.nav-inner {
  width: calc(100% - 32px); max-width: 1160px; margin: 16px auto 0;
  height: 68px; padding: 0 20px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  box-shadow: 0 14px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
#nav.solid .nav-inner {
  background: rgba(0,0,0,.86);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
}

.nav-brand {
  display: flex; align-items: center; gap: 11px; flex-shrink: 0;
  justify-self: start;
}
.nav-brand img {
  width: 48px; height: 48px; object-fit: contain; border-radius: 50%;
  filter: drop-shadow(0 0 5px rgba(201,150,14,.35));
  transition: transform .5s var(--ease);
}
.nav-brand:hover img { transform: scale(1.08); }
.nav-brand span {
  font-family: var(--fh); font-size: 12px; font-weight: 700;
  letter-spacing: .18em;
  background: linear-gradient(120deg,var(--gold-xl),var(--gold-l));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  white-space: nowrap;
}

.nav-links {
  display: flex; align-items: center; gap: 2px;
  justify-self: center;
  position: relative;
}
/* Sliding selection pill — glides to the hovered/focused/active link.
   JS writes --pill-x / --pill-w / --pill-o on the list (hidden without JS). */
.nav-links::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0;
  z-index: -1; pointer-events: none;
  width: var(--pill-w, 0px);
  transform: translateX(var(--pill-x, 0px));
  border-radius: 999px;
  background: rgba(201,150,14,.13);
  box-shadow: inset 0 0 0 1px rgba(201,150,14,.22);
  opacity: var(--pill-o, 0);
  transition: transform .38s cubic-bezier(.16,1,.3,1),
              width .38s cubic-bezier(.16,1,.3,1),
              opacity .3s ease;
}
.nav-links a {
  font-family: var(--fh); font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; line-height: 1.2;
  color: var(--w60); display: block;
  padding: 9px 14px; border-radius: 999px;
  transition: color .3s var(--ease);
}
.nav-links a:hover { color: var(--w90); }
.nav-links a:focus-visible { outline: 1px solid rgba(201,150,14,.7); outline-offset: 2px; }
/* Active section label — class instead of an inline style so the pill and
   the colour are set together (rule after :hover so active wins on hover). */
.nav-links a.active { color: var(--gold-l); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 15px 4px 15px 18px; margin-left: auto;
  grid-column: 3; justify-self: end;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px;
  background: var(--w60); border-radius: 2px; transition: all .3s var(--ease);
}
.nav-brand:focus-visible, .nav-toggle:focus-visible { outline: 1px solid rgba(201,150,14,.7); outline-offset: 3px; }

.nav-drawer {
  display: flex; flex-direction: column;
  /* Absolute so the (closed) drawer never inflates #nav's measured height —
     the smooth-scroll offset reads nav.offsetHeight. */
  position: absolute; top: calc(100% + 10px); left: 16px; right: 16px;
  background: rgba(0,0,0,.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  padding: 6px 16px 12px;
  /* Animated entrance; visibility keeps links unfocusable when closed
     (same a11y contract as the old display:none). */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px) scale(.985);
  transform-origin: 50% 0;
  transition: opacity .3s var(--ease), transform .45s cubic-bezier(.16,1,.3,1),
              visibility 0s linear .45s;
}
.nav-drawer.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition: opacity .35s var(--ease), transform .5s cubic-bezier(.16,1,.3,1),
              visibility 0s;
}
.nav-drawer a {
  font-family: var(--fh); font-size: 13px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--w60); padding: 13px 12px; border-radius: 10px;
  border-bottom: 1px solid var(--border2);
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .55s cubic-bezier(.16,1,.3,1),
              color .25s var(--ease), background .25s var(--ease);
}
.nav-drawer.open a { opacity: 1; transform: none; }
/* Staggered entrance — delays exist only while open, so closing is instant. */
.nav-drawer.open a:nth-child(1) { transition-delay: 50ms; }
.nav-drawer.open a:nth-child(2) { transition-delay: 100ms; }
.nav-drawer.open a:nth-child(3) { transition-delay: 150ms; }
.nav-drawer.open a:nth-child(4) { transition-delay: 200ms; }
.nav-drawer.open a:nth-child(5) { transition-delay: 250ms; }
.nav-drawer.open a:nth-child(6) { transition-delay: 300ms; }
.nav-drawer.open a:nth-child(7) { transition-delay: 350ms; }
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer a:hover { color: var(--gold-l); background: rgba(201,150,14,.06); }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden; padding: 120px 0 80px;
}
#heroCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .55;
}
.hero-fog {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 62% 38%, rgba(29,78,216,.14) 0%,transparent 65%),
    radial-gradient(ellipse 40% 40% at 18% 75%, rgba(201,150,14,.05) 0%,transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 45%, rgba(0,0,0,.65) 100%);
}

/* Home hero backdrop — gold monogram render (page-scoped), shown beneath
   the slideshow (and fully if slides are disabled or fail to load) */
.hero-home {
  background: url('hero.webp') center / cover no-repeat #000000;
}
/* Static hero: no idle motion on home (canvas removed, reveals off, pulse
   off) — the crossfading slides below are the only hero animation */
.hero-home .scroll-hint div { animation: none; }

/* Hero slideshow — shared by home + studios (js/hero-slideshow.js).
   Slides fade over the monogram backdrop; each page's scrim/fog layer
   (.hero-fog here, .hero-media-shade on studios) sits above them. */
.hero-slides { position: absolute; inset: 0; }
.hero-slides .slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  /* explicit — with `cover` the repeat was invisible, but the mobile
     `contain` fit exposes letterbox area, where `repeat` would tile
     the picture vertically (duplicate copies on phones) */
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-slides .slide.is-active { opacity: 1; }

.hero-body {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  max-width: 720px; padding-left: 24px;
  /* Words sit on the site's content grid (left edge of .wrap), not in a
     centered column — width/padding untouched, so line breaks stay put. */
  margin-left: 0;
  margin-left: max(0px, calc((100% - 1200px) / 2));
  margin-right: auto;
}

.hero-h1 {
  font-family: var(--fh); font-weight: 700;
  font-size: clamp(30px,4.5vw,60px);
  line-height: 1.12; letter-spacing: -.01em;
  color: var(--white); margin-bottom: 20px;
}
.hero-h1 em {
  font-style: normal;
  background: linear-gradient(120deg,var(--blue-xl),var(--blue-l),#818cf8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.hero-sub {
  font-size: 15px; color: var(--w60); margin-bottom: 28px;
  font-family: var(--fh); font-weight: 400; letter-spacing: .06em;
}

/* ── SYSTEMS HERO — exact reference typography (page-scoped) ─ */
.hero-systems .eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  letter-spacing: .32em;
  color: rgba(244,244,246,.55);
}
.hero-systems .hero-h1 {
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.hero-systems .hero-h1 em {
  font-style: normal;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
}
.hero-systems .hero-sub {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.75;
  margin-bottom: 32px;
}
.hero-systems .btn-line {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: .1em;
  border-color: rgba(244,244,246,.1);
}
.hero-systems .btn-line:hover { border-color: rgba(201,150,14,.5); }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── BUTTONS ───────────────────────────────── */
.btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 28px; border-radius: var(--r);
  background: var(--gold); color: var(--bg);
  border: none; cursor: pointer;
  transition: filter .25s, transform .25s var(--ease), box-shadow .25s var(--ease);
  text-decoration: none; white-space: nowrap;
}
.btn-gold:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(201,150,14,.3);
}

.btn-solid {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fh); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 13px 28px; border-radius: var(--r);
  background: linear-gradient(135deg,var(--blue),var(--blue-l));
  color: #fff; border: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 4px 18px rgba(29,78,216,.3);
  text-decoration: none;
}
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(29,78,216,.45); }

/* Home hero primary CTA in gold (#c9960e) with dark label for contrast
   (7.4:1). The contact-form submit follows the same gold treatment. */
.hero-home .btn-solid {
  background: var(--gold);
  color: var(--bg);
  box-shadow: 0 4px 18px rgba(201,150,14,.3);
}
.hero-home .btn-solid:hover { box-shadow: 0 8px 28px rgba(201,150,14,.45); }

.btn-line {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fh); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 28px; border-radius: var(--r);
  background: transparent; color: var(--w90);
  border: 1px solid rgba(201,150,14,.3); cursor: pointer;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
  text-decoration: none;
}
.btn-line:hover { border-color: rgba(201,150,14,.6); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(201,150,14,.12); }

.btn-aurimart {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fh); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 30px; border-radius: var(--r);
  background: linear-gradient(135deg,var(--gold-d),var(--gold),var(--gold-xl));
  background-size: 200% auto; color: #050709; border: none; cursor: pointer;
  transition: background-position .4s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 4px 22px rgba(201,150,14,.3); text-decoration: none;
}
.btn-aurimart:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(201,150,14,.45); }

.btn-full { width: 100%; justify-content: center; }

.btn-wa {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fh); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; padding: 13px 26px; border-radius: var(--r);
  background: #25d366; color: #052e16; text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 4px 18px rgba(37,211,102,.25); margin-top: 10px;
}
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,.38); }
.btn-wa i { font-size: 17px; }

/* scroll hint */
.scroll-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; z-index: 2;
  width: 20px; height: 32px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 12px;
  justify-content: center;
}
.scroll-hint div {
  width: 3px; height: 6px; background: rgba(255,255,255,.45);
  border-radius: 2px; animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{transform:translateY(0);opacity:1;} 50%{transform:translateY(7px);opacity:.3;} }

/* ═══════════════════════════════════════════════
   SECTIONS SHARED
═══════════════════════════════════════════════ */
.section { position: relative; padding: 110px 0; }
.about { background: var(--bg2); }
.aurimart { background: var(--bg2); }
.industries { background: var(--bg); }
.why { background: var(--bg2); }
.social { background: var(--bg); }
.contact { background: var(--bg2); }

/* HOME + SYSTEMS — black page background + small golden line between sections */
.page-dark { background: #000; }
.page-dark .industries, .page-dark .why, .page-dark .social, .page-dark .contact, .page-dark .aurimart { background: #000; }
.page-dark .section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 72px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-l), transparent);
}

.sec-head { text-align: center; margin-bottom: 60px; }
.sec-head h2 { font-family: var(--fh); font-size: clamp(22px,3vw,38px); font-weight: 700; color: var(--white); margin-bottom: 12px; }
.sec-head p { font-size: 15px; color: var(--w60); max-width: 520px; margin: 0 auto; }

/* ── ABOUT ─────────────────────────────────── */
.about-grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center;
}
.about-text h2 { font-family: var(--fh); font-size: clamp(22px,3vw,38px); font-weight: 700; color: var(--white); margin-bottom: 18px; line-height: 1.2; }
.about-text p { font-size: 15px; color: var(--w60); margin-bottom: 16px; font-weight: 300; line-height: 1.75; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips span {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fh); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  color: var(--w60); background: var(--w08); border: 1px solid var(--border);
  padding: 7px 14px; border-radius: 100px;
  transition: background .25s, border-color .25s, color .25s;
}
.chips span i { color: var(--blue-l); font-size: 11px; }
.chips span:hover { background: rgba(29,78,216,.1); border-color: rgba(59,130,246,.3); color: var(--w90); }

/* Orbit diagram */
.about-vis { display: flex; align-items: center; justify-content: center; }
.orbit-diagram { position: relative; width: 320px; height: 320px; }

.od-core {
  position: absolute; width: 66px; height: 66px;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: linear-gradient(135deg,var(--blue),var(--blue-l));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: 12px; font-weight: 700; color: #fff;
  z-index: 4; box-shadow: 0 0 24px rgba(29,78,216,.45);
}
.od-pulse {
  position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid rgba(59,130,246,.4);
  animation: odPulse 2s ease-in-out infinite;
}
@keyframes odPulse { 0%,100%{transform:scale(1);opacity:.8;} 50%{transform:scale(1.2);opacity:.15;} }

.od-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(59,130,246,.12);
  animation: odSpin linear infinite;
}
.od-ring1 { animation-duration: 18s; }
.od-ring2 { inset: 32px; border-color: rgba(201,150,14,.1); animation-duration: 28s; animation-direction: reverse; }
@keyframes odSpin { to { transform: rotate(360deg); } }

.od-node {
  position: absolute; width: 38px; height: 38px;
  background: var(--panel); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-l); font-size: 13px;
  top: 50%; left: 50%;
  transform:
    translate(-50%,-50%)
    rotate(calc(var(--i) * 72deg))
    translateY(-130px)
    rotate(calc(var(--i) * -72deg));
  transition: background .25s, color .25s;
}
.od-node:hover { background: rgba(29,78,216,.2); color: #fff; }

.od-dot {
  position: absolute; width: 6px; height: 6px;
  background: var(--gold-l); border-radius: 50%; opacity: .55;
  top: 50%; left: 50%;
  transform:
    translate(-50%,-50%)
    rotate(calc(var(--i) * 120deg))
    translateY(-90px);
}

/* Brand emblem — home "who we are" visual (replaces the orbit there).
   Plain circular-cropped monogram on black — glow pulse only, no rings.
   Orbit CSS above stays for the systems page. */
.emblem {
  position: relative;
  width: min(92%, 460px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.emblem-mark {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1;
  /* contain = show the COMPLETE artwork (both A tips included), like the preloader */
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 0 38px rgba(201,150,14,.15);
  animation: emblemGlow 3.6s var(--ease) infinite;
}
@keyframes emblemGlow {
  0%, 100% { box-shadow: 0 0 34px rgba(201,150,14,.13); }
  50%      { box-shadow: 0 0 62px rgba(201,150,14,.34); }
}
/* Breathing room so the emblem sits comfortably in its column */
.about-vis { padding: 18px 14px; }
@media (prefers-reduced-motion: reduce) {
  .emblem-mark { animation: none; }
}

/* ── ONE ECOSYSTEM ──────────────────────────── */
.eco { background: #000; }
.eco-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
  max-width: 1040px; margin: 0 auto;
}
.eco-card {
  position: relative; display: block; text-decoration: none;
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(201,150,14,.07), transparent 55%),
    var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px; padding: 42px 38px; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.eco-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(201,150,14,.55), transparent);
  opacity: .55; transition: opacity .3s var(--ease);
}
/* Corner bracket — reveals on hover like a viewfinder closing in */
.eco-card::after {
  content: ''; position: absolute; right: 20px; bottom: 20px; z-index: 2;
  width: 26px; height: 26px;
  border-right: 1px solid rgba(201,150,14,.45);
  border-bottom: 1px solid rgba(201,150,14,.45);
  opacity: 0; transform: translate(6px, 6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.eco-card:hover {
  /* !important out-specifies the reveal system's `.in { transform:none !important }` */
  transform: translateY(-8px) !important;
  border-color: rgba(201,150,14,.38);
  box-shadow: 0 28px 62px -18px rgba(0,0,0,.75), 0 0 46px rgba(201,150,14,.10);
}
.eco-card:hover::before { opacity: 1; }
.eco-card:hover::after { opacity: 1; transform: translate(0, 0); }
.eco-card:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; }

/* Photo-free division cards — editorial layout: index row up top, the
   division name and label anchored to the bottom, deep-black surface with
   a restrained gold wash (both cards are covered by .eco-bare). */
.eco-bare {
  display: flex; flex-direction: column;
  min-height: 300px;
  background:
    radial-gradient(120% 85% at 100% 0%, rgba(201,150,14,.07), transparent 55%),
    radial-gradient(90% 75% at 0% 100%, rgba(201,150,14,.045), transparent 60%),
    #07070a;
  padding: 44px 40px 42px;
}
.eco-bare .eco-top { margin-bottom: 0; }
.eco-bare h3 {
  margin-top: auto;
  font-size: clamp(20px, 2.5vw, 26px);
  letter-spacing: .06em;
}
.eco-bare .eco-num { font-size: 12px; color: rgba(201,150,14,.85); }
.eco-bare .eco-arrow { width: 46px; height: 46px; font-size: 14px; }
.eco-bare .eco-tag { color: rgba(244,244,246,.6); }

/* Header row (number + arrow) */
.eco-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px;
}
.eco-top .eco-num { margin-bottom: 0; }
.eco-top .eco-arrow { position: static; display: flex; }
.eco-num {
  display: block; font-family: var(--fh); font-size: 11px; font-weight: 600;
  letter-spacing: .3em; color: rgba(201,150,14,.7); margin-bottom: 36px;
  transition: color .3s var(--ease);
}
.eco-card:hover .eco-num { color: var(--gold-l); }
.eco-arrow {
  position: absolute; top: 40px; right: 38px;
  display: flex;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(201,150,14,.35);
  align-items: center; justify-content: center;
  color: var(--gold-l); font-size: 13px;
  transition: color .3s var(--ease), transform .3s var(--ease),
              background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.eco-card:hover .eco-arrow {
  background-color: var(--gold-l); border-color: var(--gold-l);
  color: #050709; transform: translateX(4px);
  box-shadow: 0 8px 22px rgba(201,150,14,.35);
}
.eco-card h3 {
  font-family: var(--fh); font-size: clamp(18px,2.1vw,23px); font-weight: 700;
  letter-spacing: .07em; color: var(--white); margin-bottom: 18px;
}
.eco-hr {
  display: block; width: 100%; height: 1px;
  background: linear-gradient(90deg, rgba(201,150,14,.35), rgba(255,255,255,.10) 45%, transparent);
  margin-bottom: 16px;
  transition: background .3s var(--ease);
}
.eco-card:hover .eco-hr {
  background: linear-gradient(90deg, rgba(201,150,14,.75), rgba(255,255,255,.12) 55%, transparent);
}
.eco-card p { font-size: 13.5px; color: var(--w60); font-weight: 300; letter-spacing: .04em; margin: 0; }
/* Home cards: subtitle under the hairline reads as a premium label */
.eco-card .eco-tag {
  font-size: 11.5px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .18em; transition: color .3s var(--ease);
}
.eco-card:hover .eco-tag { color: rgba(244,244,246,.78); }

.eco-fit { max-width: 800px; margin: 96px auto 0; text-align: center; }
.eco-hair {
  display: block; width: 72px; height: 1px; margin: 0 auto 36px;
  background: linear-gradient(90deg, transparent, var(--gold-l), transparent);
}
.eco-fit h3 {
  font-family: var(--fh); font-size: clamp(22px,2.6vw,30px); font-weight: 700;
  color: var(--white); margin-bottom: 16px;
}
.eco-fit-sub {
  font-size: clamp(17px,2vw,21px); font-weight: 300; color: var(--w90);
  line-height: 1.55; max-width: 560px; margin: 0 auto 48px;
}
.eco-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-bottom: 48px;
}
.eco-cols p {
  font-size: 15px; font-weight: 300; color: var(--w60); line-height: 1.7;
  margin: 0; padding: 4px 36px;
}
.eco-cols p:first-child { border-right: 1px solid var(--border); }
.eco-small {
  font-size: 13px; font-weight: 300; color: var(--w50);
  line-height: 1.7; max-width: 560px; margin: 0 auto;
}

/* ── SOLUTIONS ─────────────────────────────── */
.sol-foot {
  font-family: var(--fh); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; color: var(--blue-l); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
  transition: gap .25s, color .25s;
}
.sol-foot-gold { color: var(--gold-l) !important; }

/* ── SOLUTION · SERVICE ROWS ────────────────── */
.svc-list { display: grid; gap: 14px; }
.svc-row {
  display: flex; align-items: center; gap: 22px;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 12px; padding: 24px 26px;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.svc-row:hover {
  transform: translateY(-3px);
  border-color: rgba(201,150,14,.3);
  box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(201,150,14,.1);
}
.svc-ic {
  flex: none; width: 52px; height: 52px; border-radius: 12px;
  background: rgba(201,150,14,.1); border: 1px solid rgba(201,150,14,.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-l); font-size: 19px;
  transition: background .25s, color .25s;
}
.svc-row:hover .svc-ic { background: rgba(201,150,14,.18); color: var(--gold-xl); }
.svc-body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.svc-eb {
  font-family: var(--fh); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l);
}
.svc-title { font-family: var(--fh); font-size: 18px; font-weight: 700; color: var(--white); }
.svc-desc { font-size: 13.5px; font-weight: 300; color: var(--w60); line-height: 1.6; }
.svc-meta { flex: none; display: flex; align-items: center; gap: 18px; text-align: right; }
.svc-price { font-family: var(--fh); font-size: 17.5px; font-weight: 700; color: var(--gold-l); }
.svc-cta {
  font-family: var(--fh); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; color: #050709;
  background: var(--gold-l); border-radius: 7px; padding: 11px 20px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: gap .25s, filter .25s;
}
.svc-row:hover .svc-cta { gap: 10px; filter: brightness(1.1); }
.svc-row:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }

/* ── HOW WE WORK ────────────────────────────── */
.ww-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.ww-card {
  background: rgba(10,10,14,.72); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 28px 24px 30px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .3s var(--ease), border-color .3s;
}
.ww-card:hover { transform: translateY(-4px); border-color: rgba(201,150,14,.3); }
.ww-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.ww-ic {
  width: 46px; height: 46px; border-radius: 10px;
  border: 1px solid rgba(201,150,14,.35); background: rgba(201,150,14,.07);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-l); font-size: 17px;
}
.ww-num { font-family: var(--fh); font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--gold-l); }
.ww-card h3 { font-family: var(--fh); font-size: 19px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.ww-card p { font-size: 13.5px; font-weight: 300; color: var(--w60); line-height: 1.68; margin: 0; }

/* ── AURIMART ───────────────────────────────── */
.aurimart-panel {
  background: #000; border: 1px solid rgba(201,150,14,.18);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(201,150,14,.06);
  position: relative;
}
.am-badge {
  position: absolute; top: 24px; right: 24px;
  font-family: var(--fh); font-size: 10px; font-weight: 600;
  letter-spacing: .25em; color: var(--gold-l);
  background: rgba(201,150,14,.1); border: 1px solid rgba(201,150,14,.2);
  padding: 5px 13px; border-radius: 100px;
}
.am-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.am-left {
  padding: 56px 52px; border-right: 1px solid rgba(201,150,14,.1);
}
.am-title {
  font-family: var(--fh); font-size: clamp(28px,4vw,50px); font-weight: 700;
  color: var(--white); letter-spacing: .02em; margin-bottom: 6px;
}
.am-sub {
  font-family: var(--fh); font-size: 11px; font-weight: 500; letter-spacing: .28em;
  color: var(--w50); text-transform: uppercase; margin-bottom: 20px;
}
.am-desc { font-size: 14px; color: var(--w60); line-height: 1.75; margin-bottom: 28px; font-weight: 300; }
.am-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 36px; }
.am-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--fh); font-size: 13px; font-weight: 500; color: var(--w90);
}
.am-list i { color: var(--gold-l); font-size: 12px; flex-shrink: 0; margin-top: 4px; }

/* AURIMART launch countdown — 24 October 2026 */
.am-count { margin-top: -6px; margin-bottom: 30px; }
.am-count-tag {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--fh); font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-l); margin-bottom: 14px;
}
.am-count-tag::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-l);
  animation: amPulse 2s ease-in-out infinite;
}
@keyframes amPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,150,14,.5); }
  50%      { box-shadow: 0 0 0 7px rgba(201,150,14,0); }
}
.am-count-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(8px, 2vw, 14px);
}
.am-count-cell {
  background: linear-gradient(180deg, rgba(201,150,14,.10), rgba(201,150,14,.03));
  border: 1px solid rgba(201,150,14,.35);
  border-radius: 14px;
  padding: clamp(12px, 2.4vw, 18px) 4px clamp(10px, 2vw, 14px);
  text-align: center;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.am-count-cell::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,208,98,.8), transparent);
}
.am-count-num {
  display: block;
  font-family: var(--fh); font-weight: 700;
  font-size: clamp(24px, 5vw, 38px);
  line-height: 1;
  color: #c9960e;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  text-shadow: 0 0 24px rgba(201,150,14,.4);
}
.am-count-lbl {
  display: block; margin-top: 7px;
  font-family: var(--fh); font-size: clamp(8.5px, 1.6vw, 10px);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--w60);
}
.am-count.is-live .am-count-grid { display: none; }
.am-count.is-live .am-count-live { display: block; }
.am-count-live {
  display: none;
  font-family: var(--fh); font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #c9960e; text-align: center;
  padding: clamp(16px, 3vw, 22px);
  border: 1px solid rgba(201,150,14,.4);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(201,150,14,.12), rgba(201,150,14,.04));
}

/* AURIMART UI mockup */
.am-right { padding: 56px 48px; display: flex; align-items: center; justify-content: center; }
.am-ui {
  width: 100%; max-width: 360px;
  background: rgba(4,7,18,.85); border: 1px solid rgba(201,150,14,.18);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,.45), 0 0 30px rgba(201,150,14,.05);
}
.amui-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; background: rgba(201,150,14,.04);
  border-bottom: 1px solid rgba(201,150,14,.1);
}
.amui-dots { display: flex; gap: 5px; }
.amui-dots span { width: 9px; height: 9px; border-radius: 50%; }
.amui-dots span:nth-child(1) { background: #ff5f57; }
.amui-dots span:nth-child(2) { background: #ffbd2e; }
.amui-dots span:nth-child(3) { background: #28c840; }
.amui-topbar span {
  font-family: var(--fh); font-size: 10px; color: var(--w50);
  letter-spacing: .08em; margin-left: 4px;
}
.amui-content { padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; }

.amui-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 8px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
  transition: background .25s;
}
.amui-row.active { background: rgba(201,150,14,.06); border-color: rgba(201,150,14,.12); }

.amui-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(29,78,216,.15); border: 1px solid rgba(59,130,246,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-l); font-size: 12px; flex-shrink: 0;
}
.amui-row.active .amui-icon { background: rgba(201,150,14,.12); border-color: rgba(201,150,14,.2); color: var(--gold-l); }

.amui-info { flex: 1; }
.amui-info span {
  display: block; font-family: var(--fh); font-size: 11px; font-weight: 600;
  color: var(--w90); margin-bottom: 5px; letter-spacing: .03em;
}
.amui-bar { height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.amui-prog {
  height: 100%; width: var(--w);
  background: linear-gradient(90deg,var(--blue),var(--blue-l));
  border-radius: 2px;
  animation: progLoad 1.4s var(--ease) both;
}
.amui-row.active .amui-prog { background: linear-gradient(90deg,var(--gold-d),var(--gold-xl)); }
@keyframes progLoad { from { width: 0 !important; } }

.amui-num { font-family: var(--fh); font-size: 11px; font-weight: 600; color: var(--w50); flex-shrink: 0; }

.amui-status {
  display: flex; gap: 8px; padding-top: 4px;
}
.amui-status span {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--fh); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  color: var(--gold-l); background: rgba(201,150,14,.08);
  border: 1px solid rgba(201,150,14,.15); padding: 4px 10px; border-radius: 100px;
}

/* ── INDUSTRIES ────────────────────────────── */
.ind-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ind-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 32px 26px; text-align: center;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  position: relative; overflow: hidden;
}
.ind-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg,transparent,rgba(201,150,14,.4),transparent);
  opacity: 0; transition: opacity .3s;
}
.ind-card:hover { transform: translateY(-4px); border-color: rgba(201,150,14,.18); box-shadow: 0 14px 40px rgba(0,0,0,.3); }
.ind-card:hover::after { opacity: 1; }
.ind-card i {
  font-size: 26px; color: var(--blue-l); margin-bottom: 14px; display: block;
  transition: color .25s;
}
.ind-card:hover i { color: var(--gold-l); }
.ind-card h3 { font-family: var(--fh); font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--w90); margin-bottom: 8px; }
.ind-card p { font-size: 13px; color: var(--w60); line-height: 1.65; font-weight: 300; }

/* ── SOCIAL ────────────────────────────────── */
.social-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
  max-width: 780px; margin: 0 auto;
}
.soc-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 26px 22px;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  text-decoration: none;
}
.soc-card:hover { transform: translateY(-4px); }
.soc-card > i:first-child { font-size: 28px; flex-shrink: 0; }
.soc-card div { flex: 1; }
.soc-card div span { display: block; font-family: var(--fh); font-size: 14px; font-weight: 600; color: var(--w90); margin-bottom: 3px; }
.soc-card div small { font-size: 12px; color: var(--w50); font-family: var(--fh); }
.soc-ext { font-size: 12px; color: var(--w50); transition: color .25s, transform .25s; }
.soc-card:hover .soc-ext { color: var(--w60); transform: translate(2px,-2px); }

.soc-fb { border-color: rgba(24,119,242,.15); }
.soc-fb > i:first-child { color: #1877f2; }
.soc-fb:hover { border-color: rgba(24,119,242,.35); box-shadow: 0 14px 40px rgba(24,119,242,.1); }

.soc-wa { border-color: rgba(37,211,102,.15); }
.soc-wa > i:first-child { color: #25d366; }
.soc-wa:hover { border-color: rgba(37,211,102,.35); box-shadow: 0 14px 40px rgba(37,211,102,.1); }

.soc-tt { border-color: rgba(37,244,238,.15); }
.soc-tt > i:first-child { color: #25f4ee; }
.soc-tt:hover { border-color: rgba(37,244,238,.35); box-shadow: 0 14px 40px rgba(37,244,238,.1); }

/* ── CONTACT ───────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }

.contact-info { display: flex; flex-direction: column; gap: 12px; }
.ci {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--w08); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px;
  transition: border-color .25s, background .25s;
}
.ci:hover { border-color: rgba(59,130,246,.2); background: rgba(29,78,216,.06); }
.ci i { font-size: 18px; color: var(--blue-l); margin-top: 1px; flex-shrink: 0; }
.ci-green { color: #25d366 !important; }
.ci div span { display: block; font-family: var(--fh); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--w50); margin-bottom: 4px; }
.ci div strong { font-size: 14px; font-weight: 500; color: var(--w90); font-family: var(--fh); }

.form-glass {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r2); overflow: hidden;
}
.form-top {
  padding: 24px 28px 20px; border-bottom: 1px solid var(--border2);
}
.form-top h3 { font-family: var(--fh); font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 3px; }
.form-top p { font-size: 13px; color: var(--w50); font-weight: 300; }

#contactForm { padding: 24px 28px; }
/* Submit follows the gold primary treatment (dark label = 7.4:1). script.js
   swaps inline colours for sent/failed, which clear back to this. */
#contactForm .btn-solid {
  background: linear-gradient(135deg, var(--gold-xl), var(--gold));
  color: var(--bg);
  box-shadow: 0 4px 18px rgba(201,150,14,.28);
}
#contactForm .btn-solid:hover { box-shadow: 0 8px 28px rgba(201,150,14,.45); }
#contactForm .btn-solid:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(201,150,14,.35); }
#contactForm .btn-solid:focus-visible { outline: 2px solid rgba(201,150,14,.85); outline-offset: 3px; }
#contactForm .btn-solid:disabled { cursor: progress; transform: none; box-shadow: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg { margin-bottom: 14px; }
.fg label {
  display: block; font-family: var(--fh); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--w50); margin-bottom: 7px;
  transition: color .25s var(--ease);
}
.fg:focus-within label { color: var(--gold-l); }
.fg input, .fg textarea {
  width: 100%; background-color: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 12px 15px; font-family: var(--fb); font-size: 14px;
  font-weight: 300; color: var(--white); outline: none; resize: vertical;
  /* signature: gold hairline draws across the field's inner edge on focus */
  background-image: linear-gradient(90deg, transparent, rgba(245,208,98,.75), transparent);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  transition: border-color .22s var(--ease), background-color .22s var(--ease),
              box-shadow .22s var(--ease), background-size .48s cubic-bezier(.16,1,.3,1);
}
.fg input::placeholder, .fg textarea::placeholder { color: rgba(255,255,255,.4); }
.fg input:hover, .fg textarea:hover { border-color: rgba(255,255,255,.2); }
.fg input:focus, .fg textarea:focus {
  border-color: rgba(201,150,14,.65); background-color: rgba(201,150,14,.05);
  box-shadow: 0 0 0 3px rgba(201,150,14,.12);
  background-size: 100% 1px;
}
.fg input:focus-visible, .fg textarea:focus-visible { outline: 2px solid rgba(201,150,14,.8); outline-offset: 2px; }

/* ── CONTACT — REWORKED ────────────────────── */
.contact { overflow: hidden; }
.contact::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1200px, calc(100% - 48px)); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,150,14,.45), transparent);
}
.contact-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 55% at 80% 20%, rgba(29,78,216,.17), transparent 65%),
    radial-gradient(ellipse 45% 45% at 10% 85%, rgba(201,150,14,.10), transparent 60%);
}
.contact .wrap { position: relative; z-index: 1; }
.contact-info { gap: 14px; }

/* info column — header */
.ci-head { padding: 2px 2px 4px; }
.ci-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fh); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-l);
  background: rgba(201,150,14,.08); border: 1px solid rgba(201,150,14,.22);
  padding: 6px 13px; border-radius: 100px; margin-bottom: 16px;
}
.ci-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-l);
  animation: ciPulse 2.2s ease-in-out infinite;
}
@keyframes ciPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,150,14,.45); opacity: 1; }
  50%     { box-shadow: 0 0 0 5px rgba(201,150,14,0);  opacity: .5; }
}
.ci-head h3 {
  font-family: var(--fh); font-size: clamp(20px,2.4vw,26px); font-weight: 700;
  color: var(--white); margin-bottom: 8px; line-height: 1.2;
}
.ci-head p { font-size: 14px; color: var(--w60); line-height: 1.7; font-weight: 300; }

/* info column — interactive rows */
.ci-link { transition: transform .25s var(--ease), border-color .25s, background .25s, box-shadow .25s; }
.ci-link:hover {
  transform: translateX(5px); border-color: rgba(59,130,246,.3);
  background: rgba(29,78,216,.07); box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.ci-link .ci-go {
  font-size: 11px; color: var(--w50); margin-left: auto; margin-top: 3px;
  transition: color .25s, transform .25s;
}
.ci-link:hover .ci-go { color: var(--gold-l); transform: translate(2px,-2px); }
.ci-link:focus-visible { outline: 2px solid rgba(96,165,250,.7); outline-offset: 3px; border-radius: var(--r); }

.ci-hours {
  display: flex; align-items: center; gap: 9px; padding: 2px;
  font-family: var(--fh); font-size: 12px; letter-spacing: .06em; color: var(--w50);
}
.ci-hours i { font-size: 12px; color: var(--blue-l); }

/* form column */
.form-glass { position: relative; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.form-glass::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold-xl) 45%, var(--gold) 80%, transparent);
}
.form-badge {
  display: inline-block; font-family: var(--fh); font-size: 9px; font-weight: 700;
  letter-spacing: .24em; color: var(--gold-l);
  background: rgba(201,150,14,.1); border: 1px solid rgba(201,150,14,.25);
  padding: 4px 11px; border-radius: 100px; margin-bottom: 12px;
}
.form-note {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--fh); font-size: 11.5px; letter-spacing: .03em; color: var(--w50);
}
.form-note i { font-size: 11px; color: var(--gold-l); flex-shrink: 0; }

@media (max-width: 768px) {
  .ci-link:hover { transform: none; }
  .contact-glow { opacity: .7; }
}

/* ── FOOTER ────────────────────────────────── */
.footer {
  background:
    linear-gradient(180deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.82) 40%, rgba(0,0,0,.9) 100%),
    url('images/footer/footer.webp') center / cover no-repeat var(--bg);
  border-top: 1px solid var(--border);
}
.footer-top-bar { height: 1px; background: linear-gradient(90deg,transparent,rgba(201,150,14,.35),transparent); }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 48px; padding: 72px 0 60px;
}
.fb-logo {
  display: flex; align-items: center; gap: 11px; margin-bottom: 16px;
}
.fb-logo img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 0 5px rgba(201,150,14,.3)); }
.fb-logo span {
  font-family: var(--fh); font-size: 12px; font-weight: 700; letter-spacing: .15em;
  background: linear-gradient(120deg,var(--gold-xl),var(--gold-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.footer-brand p { font-size: 13px; color: var(--w50); line-height: 1.7; margin-bottom: 20px; font-weight: 300; }

.f-slogan {
  display: flex; align-items: center; gap: 12px;
}
.f-slogan span { flex: 1; max-width: 48px; height: 1px; }
.f-slogan span:first-child { background: linear-gradient(90deg,transparent,rgba(201,150,14,.5)); }
.f-slogan span:last-child { background: linear-gradient(90deg,rgba(201,150,14,.5),transparent); }
.f-slogan strong, .f-slogan { font-family: var(--fh); font-size: 9px; font-weight: 700; letter-spacing: .3em; color: var(--gold-l); text-transform: uppercase; }

.footer-col h3 {
  font-family: var(--fh); font-size: 10px; font-weight: 700; letter-spacing: .28em;
  color: var(--w60); text-transform: uppercase; margin-bottom: 18px;
}
.footer-col a {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--fh); font-size: 13px; font-weight: 400;
  color: var(--w50); padding: 5px 0;
  transition: color .2s; letter-spacing: .04em;
}
.footer-col a:hover { color: var(--gold-l); }
.footer-col a i { font-size: 12px; }

.footer-bottom { border-top: 1px solid var(--border2); padding: 20px 0; }
.footer-bottom-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--fh); font-size: 12px; color: var(--w50); letter-spacing: .06em;
}
.footer-bottom-row span:last-child { color: var(--gold); }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ww-grid { grid-template-columns: repeat(2,1fr); }
  .ind-grid { grid-template-columns: repeat(2,1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-vis { display: none; }
  .am-grid { grid-template-columns: 1fr; }
  .am-left { border-right: none; border-bottom: 1px solid rgba(201,150,14,.1); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .social-row { grid-template-columns: 1fr; max-width: 420px; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .hero-h1 { font-size: clamp(26px,7vw,44px); }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .ww-grid { grid-template-columns: 1fr; }
  .svc-row { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .svc-meta { justify-content: flex-start; text-align: left; }
  .eco-grid { grid-template-columns: 1fr; }
  .eco-fit { margin-top: 72px; }
  .eco-cols { grid-template-columns: 1fr; }
  .eco-cols p { padding: 0; }
  .eco-cols p:first-child { border-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 20px; }
  .eco-card { padding: 34px 28px; }
  .eco-bare { min-height: 230px; }
  .ind-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom-row { flex-direction: column; gap: 6px; text-align: center; }
  .am-left { padding: 36px 24px; }
  .am-right { padding: 28px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .section { padding: 80px 0; }
  .nav-inner { padding: 0 16px; }
  .wrap { padding: 0 16px; }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .nav-inner { gap: 18px; }
  .nav-brand span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 10px 8px; letter-spacing: .06em; white-space: nowrap; }
}

/* At 1024–1151px the longer "AURIVANTEQ Systems" wordmark sits closest to the
   link row — tighten the links (vertical padding unchanged) so the brand keeps
   clear space. */
@media (min-width: 1024px) and (max-width: 1151px) {
  .nav-links a { padding: 9px 10px; letter-spacing: .1em; }
}

@media (max-width: 480px) {
  .ind-grid { grid-template-columns: 1fr; }
  .splash-wordmark { flex-direction: column; gap: .1em; }
  .hero-sub { font-size: 13px; }
  .social-row { max-width: 100%; }
  .soc-card { flex-wrap: wrap; }
}

/* Touch targets: footer link rows reach 44px on tablets/phones
   (desktop spacing unchanged — the rule only applies ≤1023px). */
@media (max-width: 1023px) {
  .footer-col a { padding: 11px 0; }
}

/* Native hash jumps (e.g. studios subnav → #lead) clear the fixed nav.
   JS smooth-scroll offsets explicitly and ignores scroll-margin. */
section[id] { scroll-margin-top: 92px; }

/* ═══════════════════════════════════════════════════════════
   WHO WE SERVE PAGE (who-we-serve.html)
═══════════════════════════════════════════════════════════ */
.hero-serve { min-height: 76vh; }
.hero-serve .hero-sub { letter-spacing: .04em; }

/* CONTACT PAGE (contact.html) — compact hero, form carries the page */
.hero-contact { min-height: 56vh; }

.serve-cta { text-align: center; }
.serve-cta-row {
  display: flex; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin-top: 8px;
}

/* ── REDUCED MOTION ─────────────────────────────
   CSS choreography (nav pill, drawer stagger, reveals, pulses) collapses to
   instant; JS canvas/splash timing and behaviour are unaffected. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ── ABOUT ───────────────────────────────────── */
.ab-hero { min-height: 76vh; display: flex; align-items: center; }
.ab-inner { text-align: center; }
.ab-h1 {
  font-family: var(--fh); font-size: clamp(30px, 5vw, 54px);
  font-weight: 700; color: var(--white); line-height: 1.18;
  margin: 18px 0 26px;
}
.ab-lead {
  font-size: clamp(16px, 1.6vw, 18px); font-weight: 300; color: var(--w90);
  max-width: 760px; margin: 0 auto; line-height: 1.75;
}
.ab-lead2 {
  font-size: 15px; font-weight: 300; color: var(--w60);
  max-width: 720px; margin: 16px auto 0; line-height: 1.75;
}
.ab-tags {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  margin-top: 42px;
  font-family: var(--fh); font-size: 15px; font-weight: 500; letter-spacing: .02em;
}
.ab-tags span:first-child { color: var(--w90); }

.ab-col { max-width: 740px; margin: 0 auto; }
.ab-col p {
  font-size: 15.5px; font-weight: 300; color: var(--w60);
  line-height: 1.85; margin-bottom: 22px;
}
.ab-col p:last-child { margin-bottom: 0; }
.ab-col p.ab-pull {
  display: block; text-align: center; font-family: var(--fh);
  font-size: clamp(18px, 2.2vw, 24px); font-weight: 600; line-height: 1.5;
  margin-top: 46px;
  background: linear-gradient(120deg, var(--gold-xl), var(--gold-l), var(--gold-xl));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.ab-vm { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ab-panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 20px; padding: 40px 36px;
}
.ab-panel h3 {
  font-family: var(--fh); font-size: 18px; font-weight: 600;
  color: var(--white); margin-bottom: 16px; letter-spacing: .02em;
}
.ab-panel h3::after {
  content: ''; display: block; width: 34px; height: 2px; margin-top: 12px;
  background: linear-gradient(90deg, var(--gold-l), transparent);
}
.ab-panel p { font-size: 15.5px; font-weight: 300; color: var(--w60); line-height: 1.8; margin: 0; }

.ab-brand-tag { font-size: 14.5px; font-weight: 400; color: var(--gold-l); margin: -8px 0 18px; }
.eco-card p + p { margin-top: 12px; }
.eco-card .sol-foot { margin-top: 24px; }
.eco-card:hover .sol-foot { gap: 10px; }
.ab-brands-note {
  max-width: 720px; margin: 44px auto 0; text-align: center;
  font-size: 15px; font-weight: 300; color: var(--w60); line-height: 1.8;
}

.ab-list { max-width: 900px; margin: 0 auto; }
.ab-p-row {
  display: grid; grid-template-columns: 64px minmax(200px, 280px) 1fr;
  gap: 28px; align-items: baseline;
  padding: 26px 0; border-top: 1px solid var(--border);
}
.ab-list .ab-p-row:last-child { border-bottom: 1px solid var(--border); }
.ab-p-num {
  font-family: var(--fh); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; color: var(--gold-l);
}
.ab-p-title { font-family: var(--fh); font-size: 16.5px; font-weight: 600; color: var(--white); margin: 0; }
.ab-p-desc { font-size: 14.5px; font-weight: 300; color: var(--w60); line-height: 1.7; margin: 0; }

.ab-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.ab-step {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px 24px;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.ab-step:hover { transform: translateY(-4px); border-color: rgba(201,150,14,.22); }
.ab-step-num {
  display: block; font-family: var(--fh); font-size: 30px; font-weight: 700;
  line-height: 1; margin-bottom: 16px;
  color: rgba(201,150,14,.28);
  -webkit-text-stroke: 1px rgba(201,150,14,.7);
}
.ab-step h3 { font-family: var(--fh); font-size: 15.5px; font-weight: 600; color: var(--white); margin-bottom: 10px; }
.ab-step p { font-size: 13.5px; font-weight: 300; color: var(--w60); line-height: 1.65; margin: 0; }

.ab-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

.who-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px;
  font-family: var(--fh); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l);
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.who-link:hover { gap: 12px; color: var(--gold-xl); }
.who-link:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; }

@media (max-width: 768px) {
  .ab-vm { grid-template-columns: 1fr; }
  .ab-hero { min-height: 64vh; }
  .ab-p-row { grid-template-columns: 56px 1fr; gap: 8px 20px; }
  .ab-p-desc { grid-column: 1 / -1; }
  .ab-actions { flex-direction: column; align-items: stretch; }
  .ab-actions .btn-line, .ab-actions .btn-gold { text-align: center; justify-content: center; }
}

/* ── NAV CTA · LEGAL · SYSTEMS SECTIONS ──────── */
.nav-end { display: flex; align-items: center; gap: 12px; justify-self: end; }
.nav-cta {
  display: inline-flex; align-items: center;
  padding: 10px 20px; border-radius: 999px;
  font-family: var(--fh); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--gold); color: var(--bg); white-space: nowrap;
  transition: filter .25s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-cta:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,150,14,.3); }
.nav-cta:focus-visible { outline: 2px solid var(--gold-xl); outline-offset: 2px; }
.nav-drawer .drawer-cta {
  margin-top: 10px; text-align: center;
  background: var(--gold); color: var(--bg);
  font-weight: 700; border-radius: 999px; border-bottom: none;
}
.nav-drawer .drawer-cta:hover { color: var(--bg); background: var(--gold); filter: brightness(1.1); }

/* Legal pages */
.lg-doc { max-width: 780px; margin: 0 auto; }
.lg-intro p {
  font-size: 15.5px; font-weight: 300; color: var(--w60);
  line-height: 1.85; margin-bottom: 16px;
}
.lg-intro p:last-child { margin-bottom: 0; }
.lg-item { position: relative; padding-top: 30px; margin-top: 30px; }
.lg-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-l), transparent);
}
.lg-item h2 { font-family: var(--fh); font-size: 20px; font-weight: 600; color: var(--white); margin-bottom: 14px; }
.lg-item p { font-size: 15px; font-weight: 300; color: var(--w60); line-height: 1.8; margin-bottom: 12px; }
.lg-item p:last-child { margin-bottom: 0; }
.lg-item ul { display: grid; gap: 10px; margin-top: 4px; }
.lg-item ul li {
  position: relative; padding-left: 30px;
  font-size: 15px; font-weight: 300; color: var(--w60); line-height: 1.7;
}
.lg-item ul li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
  color: var(--gold-l); position: absolute; left: 2px; top: 4px;
}
.lg-item a {
  color: var(--gold-l); text-decoration: underline; text-underline-offset: 3px;
}
.lg-item a:hover { color: var(--gold-xl); }
.lg-item a:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }

@media (max-width: 768px) {
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-cta { display: none; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .nav-cta { padding: 9px 16px; letter-spacing: .08em; }
}

/* ── 404 ───────────────────────────────────────── */
.nf {
  background: #000;
  min-height: 74vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.nf::before {
  content: ''; position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 760px; height: 540px; max-width: 120vw;
  background: radial-gradient(50% 50% at 50% 50%, rgba(201,150,14,.08), transparent 72%);
  pointer-events: none;
}
.nf-inner { position: relative; z-index: 1; text-align: center; width: 100%; }
.nf-code {
  display: block; font-family: var(--fh); font-weight: 700;
  font-size: clamp(96px, 17vw, 188px); line-height: 1; letter-spacing: .05em;
  color: rgba(255,255,255,.045);
  -webkit-text-stroke: 1.5px rgba(201,150,14,.42);
  margin-bottom: 30px; user-select: none;
}
.nf-title {
  font-family: var(--fh); font-size: clamp(24px, 3.4vw, 40px); font-weight: 700;
  color: var(--white); margin-bottom: 14px;
}
.nf-sub {
  font-size: 15.5px; font-weight: 300; color: var(--w60); line-height: 1.7;
  max-width: 520px; margin: 0 auto 36px;
}
.nf-actions { margin-bottom: 48px; }
.nf-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nf-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.nf-nav a {
  font-family: var(--fh); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--w60); background: var(--panel);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 13px 24px;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nf-nav a:hover {
  color: var(--white); border-color: rgba(201,150,14,.35);
  transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.nf-nav a:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; }

@media (max-width: 480px) {
  .nf-code { letter-spacing: .02em; }
  .nf-nav a { padding: 12px 20px; font-size: 12px; }
}

/* ================================================================ */
/*  LAUREN — on-site assistant (launcher + panel)                   */
/* ================================================================ */
.lrn-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.lrn-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 9600;
  width: 56px; height: 56px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #171e35, #090d1b);
  border: 1px solid rgba(201,150,14,.55);
  box-shadow: 0 12px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(245,208,98,.22);
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.lrn-launcher:hover {
  transform: translateY(-3px);
  border-color: var(--gold-xl);
  box-shadow: 0 16px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(245,208,98,.3);
}
.lrn-launcher:focus-visible { outline: 2px solid var(--gold-xl); outline-offset: 3px; }
.lrn-launcher-mark {
  font-family: var(--fh); font-weight: 700; font-size: 21px; line-height: 1;
  background: linear-gradient(135deg, var(--gold-xl), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lrn-launcher-label {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--fh); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.94);
  border: 1px solid rgba(201,150,14,.35);
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.lrn-launcher:hover .lrn-launcher-label,
.lrn-launcher:focus-visible .lrn-launcher-label { opacity: 1; transform: translateY(-50%) translateX(0); }

.lrn-panel {
  position: fixed; right: 22px; bottom: 90px; z-index: 9601;
  width: min(384px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(0,0,0,.97), rgba(0,0,0,.97));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(201,150,14,.28);
  border-radius: var(--r2);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
}
.lrn-panel.lrn-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s;
}

.lrn-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; }
.lrn-head::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-xl), transparent);
  opacity: .45;
}
.lrn-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--fh); font-weight: 700; font-size: 17px; color: #050709;
  background: linear-gradient(135deg, var(--gold-xl), var(--gold));
  box-shadow: 0 4px 14px rgba(201,150,14,.35);
}
.lrn-hmeta { display: flex; flex-direction: column; min-width: 0; }
.lrn-name { font-family: var(--fh); font-weight: 600; font-size: 15.5px; color: var(--white); }
.lrn-role { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--w50); margin-top: 2px; }
.lrn-close {
  margin-left: auto; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: var(--w60); font-size: 19px; line-height: 1; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.lrn-close:hover { color: var(--white); border-color: rgba(201,150,14,.4); }
.lrn-close:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }

.lrn-log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px 6px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: rgba(201,150,14,.4) transparent;
}
.lrn-log::-webkit-scrollbar { width: 6px; }
.lrn-log::-webkit-scrollbar-thumb { background: rgba(201,150,14,.35); border-radius: 999px; }

.lrn-msg {
  display: flex; flex-direction: column; max-width: 88%;
  animation: lrn-rise .3s var(--ease) both;
}
.lrn-msg-me { align-self: flex-end; align-items: flex-end; }
.lrn-msg-ai { align-self: flex-start; align-items: flex-start; max-width: 94%; }
.lrn-msg-sys { align-self: center; align-items: center; max-width: 92%; }
.lrn-bubble {
  font-size: 14px; line-height: 1.55;
  padding: 10px 13px; border-radius: 12px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.lrn-msg-me .lrn-bubble {
  background: linear-gradient(135deg, rgba(201,150,14,.22), rgba(201,150,14,.1));
  border: 1px solid rgba(201,150,14,.35);
  color: #fff; border-bottom-right-radius: 4px;
}
.lrn-msg-ai .lrn-bubble {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.9); border-bottom-left-radius: 4px;
}
.lrn-msg-sys .lrn-bubble {
  font-size: 12px; color: var(--w60);
  background: transparent; border: 1px dashed rgba(255,255,255,.16);
  padding: 7px 12px; border-radius: 999px;
}
.lrn-src {
  display: inline-flex; margin-top: 7px;
  font-family: var(--fh); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245,208,98,.92); text-decoration: none;
  border: 1px solid rgba(201,150,14,.32); border-radius: 999px; padding: 4px 10px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.lrn-src:hover { border-color: rgba(201,150,14,.7); background: rgba(201,150,14,.12); }
.lrn-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.lrn-link {
  font-family: var(--fh); font-size: 12.5px; font-weight: 600;
  color: var(--white); text-decoration: none;
  border-bottom: 1px solid rgba(201,150,14,.55); padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.lrn-link:hover { color: var(--gold-xl); border-color: var(--gold-xl); }
.lrn-src:focus-visible, .lrn-link:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }

.lrn-typing {
  align-self: flex-start; display: inline-flex; gap: 5px;
  padding: 12px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; border-bottom-left-radius: 4px;
}
.lrn-typing span {
  width: 6px; height: 6px; border-radius: 50%; display: block;
  background: var(--gold-l);
  animation: lrn-dot 1.1s ease-in-out infinite;
}
.lrn-typing span:nth-child(2) { animation-delay: .15s; }
.lrn-typing span:nth-child(3) { animation-delay: .3s; }

.lrn-sugs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 4px; }
.lrn-sugs[hidden] { display: none; }
.lrn-sug {
  font-family: var(--fh); font-size: 12.5px; font-weight: 500;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.13); border-radius: 999px;
  padding: 7px 13px; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.lrn-sug:hover { color: #fff; border-color: rgba(201,150,14,.55); background: rgba(201,150,14,.1); }
.lrn-sug:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }

.lrn-form {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.lrn-form input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--fh); font-size: 14px; color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.lrn-form input::placeholder { color: var(--w50); }
.lrn-form input:focus {
  outline: none; border-color: var(--gold-l);
  box-shadow: 0 0 0 3px rgba(201,150,14,.18);
  background: rgba(255,255,255,.07);
}
.lrn-send {
  flex: none; width: 44px; height: 44px;
  border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-xl), var(--gold));
  color: #0a0a0a; font-family: var(--fh); font-size: 17px; font-weight: 700;
  cursor: pointer; display: grid; place-items: center;
  transition: filter .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.lrn-send:hover { filter: brightness(1.07); transform: translateY(-1px); }
.lrn-send:disabled { opacity: .45; cursor: default; transform: none; }
.lrn-send:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

@keyframes lrn-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lrn-dot {
  0%   { opacity: .35; transform: translateY(2px); }
  50%  { opacity: 1; transform: none; }
  100% { opacity: .9; transform: none; }
}

@media (max-width: 640px) {
  .lrn-launcher { right: 16px; bottom: max(16px, env(safe-area-inset-bottom, 16px)); }
  .lrn-launcher-label { display: none; }
  .lrn-panel {
    right: 12px; left: 12px; width: auto;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    height: min(560px, calc(100vh - 124px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lrn-launcher, .lrn-launcher-label, .lrn-panel, .lrn-msg,
  .lrn-typing span, .lrn-src, .lrn-link, .lrn-sug,
  .lrn-form input, .lrn-send, .lrn-close {
    transition: none !important; animation: none !important;
  }
}

/* ── THE PROBLEM (systems) ──────────────────── */
.prob-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.prob-head .eyebrow { margin-bottom: 16px; }
.prob-head h2 {
  font-family: var(--fh); font-size: clamp(24px,3vw,36px); font-weight: 700;
  color: var(--white); line-height: 1.25; margin: 0;
}
.prob-list { display: grid; }
.prob-item {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 20px 0; border-top: 1px solid var(--border);
}
.prob-item:first-child { border-top: none; padding-top: 0; }
.prob-num {
  font-family: var(--fh); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; color: var(--gold-l); min-width: 26px; padding-top: 3px;
}
.prob-body h3 {
  font-family: var(--fh); font-size: 16.5px; font-weight: 600;
  color: var(--white); margin-bottom: 6px;
}
.prob-body p { font-size: 14.5px; font-weight: 300; color: var(--w60); line-height: 1.7; margin: 0; }
.prob-close {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 14.5px; font-weight: 300; color: var(--w50); line-height: 1.7;
}
@media (max-width: 1023px) { .prob-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ── MOBILE IMAGE FIT + ART DIRECTION (≤768px) ─────────────────
   Art direction: the home hero backdrop switches to its portrait
   crop (hero-mobile.webp — the gold A centred, composed for a tall
   phone viewport) and the slideshow picks its own portrait crops
   through js/config.js + matchMedia. Desktop (>768px) keeps the
   16:9 art; `cover` fills the whole hero on both.
   The footer art stays `contain`: the mobile footer is much taller
   than wide, where `cover` would zoom ~3.6× into a blurry slice. */
@media (max-width: 768px) {
  .hero-home {
    background-image: url('hero-mobile.webp');
  }
  .footer {
    /* layer 1 = gradient overlay (fills), layer 2 = footer art (fits) */
    background-size: auto, contain;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  }
}