/* ------------------------------------------------------------------ *
 * Atlas Marketing: shared chrome.
 * Design tokens, buttons, the chevron-A, the header, the footer and the
 * theme toggle. Every page links this; page-specific CSS stays inline.
 * ------------------------------------------------------------------ */
:root{
  color-scheme: dark;

  /* Brand: shadow blue */
  --primary: 128, 150, 180;      /* #8096b4 wireframe + main glow */
  --secondary: 63, 110, 168;     /* #3f6ea8 core light */

  /* Theme surface + ink, as RGB triplets so they compose with alpha */
  --void: 3, 7, 18;              /* page background */
  --surface: 10, 16, 24;         /* raised panels */
  --ink: 238, 243, 251;          /* primary text */
  --ink-soft: 219, 230, 245;     /* secondary text */
  --hi: 255, 255, 255;           /* inset highlight */
  --card-grad: linear-gradient(165deg, rgba(22, 32, 50, .86) 0%, rgba(9, 15, 26, .88) 100%);
  --btn-grad: linear-gradient(180deg, #dde6f3 0%, #adbfd6 52%, rgb(var(--primary)) 100%);
  --btn-ink: 5, 9, 15;
  /* Glows add light on dark and subtract it on light */
  --glow-blend: screen;
  --logo-filter: none;

  /* Motion */
  --sphere-rotation-duration: 240s;
  --grid-pan-duration: 180s;
  --core-glow-duration: 25s;

  /* Intensity + depth */
  --wire-opacity: .75;
  --wire-shadow: 46px;
  --core-blur: 160px;
  --parallax-depth: 35px;

  /* Smoothed pointer, -1 .. 1, written by JS */
  --mx: 0;
  --my: 0;

  /* Spacing tokens */
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;

  --header-h: 3.5rem;

  /* The dropdown card stays dark in both themes, so its contents carry their
     own palette instead of inheriting the page's. */
  --menu-card: 12, 19, 32;
  --menu-ink: 238, 243, 251;
  --menu-ink-soft: 219, 230, 245;
  --menu-primary: 128, 150, 180;

  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ------------------------------------------------------------------ */
/* Light theme                                                         */
/* ------------------------------------------------------------------ */
:root[data-theme="light"]{
  color-scheme: light;
  --primary: 86, 108, 140;
  --secondary: 46, 76, 120;
  --void: 241, 244, 249;
  --surface: 255, 255, 255;
  --ink: 13, 21, 36;
  --ink-soft: 44, 58, 80;
  --hi: 255, 255, 255;
  --card-grad: linear-gradient(165deg, rgba(255, 255, 255, .96) 0%, rgba(236, 241, 248, .96) 100%);
  --btn-grad: linear-gradient(180deg, #5f7797 0%, #4d6588 52%, #3d5578 100%);
  --btn-ink: 244, 247, 251;
  --glow-blend: multiply;
  --logo-filter: brightness(.42) saturate(1.7) contrast(1.2);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background-color: rgb(var(--void));
  color: rgb(var(--ink));
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Brand "A": bar-less chevron, drawn to Space Grotesk SemiBold metrics.
   0.943em advance, bottom edge on the baseline. Height is 0.78em, not the
   0.75em cap height: a sharp apex carries no mass at the tip, so it needs ~4%
   overshoot above the cap line to look the same size as the letters beside it.
   Refit from measured metrics whenever the headline face changes. */
.ga{
  display: inline-block;
  width: .943em;
  height: .78em;
  vertical-align: baseline;
  fill: currentColor;
}

.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 2.25rem;
  border-radius: 9999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring), opacity .2s ease;
  will-change: transform;
}
.btn:focus-visible{
  outline: 2px solid rgba(var(--primary), .95);
  outline-offset: 3px;
}

.btn-primary{
  border: 1px solid rgba(var(--primary), .9);
  color: rgb(var(--btn-ink));
  background-image: var(--btn-grad);
  box-shadow:
    inset 0 1px 0 rgba(var(--hi), .45),
    0 6px 18px -6px rgba(var(--primary), .55),
    0 18px 46px -14px rgba(var(--secondary), .55);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(var(--hi), .55),
    0 10px 26px -6px rgba(var(--primary), .65),
    0 26px 60px -16px rgba(var(--secondary), .6);
}
.btn-primary:active{ transform: translateY(0) scale(.985); }

.btn-ghost{
  border: 1px solid rgba(var(--primary), .45);
  color: rgb(var(--ink));
  background-color: rgba(var(--primary), .09);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(var(--hi), .06),
    0 10px 30px -18px rgba(var(--secondary), .6);
}
.btn-ghost:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--primary), .6);
  box-shadow:
    inset 0 1px 0 rgba(var(--hi), .1),
    0 16px 40px -18px rgba(var(--secondary), .7);
}
.btn-ghost:active{ transform: translateY(0) scale(.985); }


/* ------------------------------------------------------------------ */
/* Site header                                                         */
/* ------------------------------------------------------------------ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.site-header.is-scrolled{ background-color: rgba(var(--void), .95); border-bottom-color: rgba(var(--primary), .16); }
@supports (backdrop-filter: blur(1px)){
  .site-header.is-scrolled{
    background-color: rgba(var(--void), .55);
    backdrop-filter: blur(16px) saturate(140%);
  }
}

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 72rem;
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--s-4);
}
.nav-left{ display: flex; align-items: center; gap: var(--s-2); }

/* Brand lockup: monogram plus the chevron-A wordmark */
.brand{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .375rem .5rem;
  border-radius: 9px;
  color: rgb(var(--ink));
  text-decoration: none;
  transition: transform .3s var(--ease-spring), background-color .2s ease;
}
.brand:hover{ transform: translateY(-1px); background-color: rgba(var(--primary), .1); }
.brand:active{ transform: translateY(0) scale(.98); }
.brand:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: 2px; }
/* Mark geometry traced from the logo artwork: a 1253x619 box, so the swoosh
   reaches as far past the A as it does in the real lockup, and the little m
   sits in the middle of it. */
.brand-mark{ flex: none; width: 2.85rem; height: 1.408rem; fill: currentColor; }
.brand-word{
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .16em;
  margin-right: -.2em;
}

.nav-menu{ display: none; align-items: center; gap: .125rem; list-style: none; margin: 0; padding: 0; }
.nav-item{ position: relative; }
.nav-trigger, .nav-link{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 2.25rem;
  padding: 0 .75rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: .9375rem;
  font-weight: 500;
  color: rgba(var(--ink-soft), .82);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.nav-trigger:hover, .nav-link:hover,
.nav-item.is-open > .nav-trigger{ color: rgb(var(--ink)); background-color: rgba(var(--primary), .12); }
.nav-trigger:focus-visible, .nav-link:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: 2px; }
.nav-caret{ width: .8125rem; height: .8125rem; transition: transform .3s var(--ease-spring); }
.nav-item.is-open .nav-caret{ transform: rotate(180deg); }

.nav-dropdown{
  position: absolute;
  top: calc(100% + .75rem);
  left: 0;
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  pointer-events: none;
  transition: opacity .18s ease, transform .24s var(--ease-spring);
}
.nav-item.is-open .nav-dropdown{ opacity: 1; transform: none; pointer-events: auto; }
.nav-panel{
  padding: .25rem .375rem .25rem .25rem;
  border: 1px solid rgba(var(--primary), .14);
  border-radius: 15px;
  background-color: rgba(var(--void), .96);
  box-shadow:
    inset 0 1px 0 rgba(var(--hi), .05),
    0 18px 40px -18px rgba(0, 0, 0, .9),
    0 40px 90px -45px rgba(var(--secondary), .6);
}
@supports (backdrop-filter: blur(1px)){
  .nav-panel{ background-color: rgba(var(--void), .82); backdrop-filter: blur(22px) saturate(140%); }
}
.nav-card{
  /* Re-point the ink tokens so every tile, icon and hover state inside the
     card reads against the dark surface rather than the page background. */
  --ink: var(--menu-ink);
  --ink-soft: var(--menu-ink-soft);
  --primary: var(--menu-primary);
  --hi: 255, 255, 255;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .375rem;
  margin: 0;
  padding: .5rem;
  list-style: none;
  border: 1px solid rgba(var(--primary), .16);
  border-radius: 11px;
  background-color: rgba(var(--menu-card), .94);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
}
.nav-card-single{ grid-template-columns: 1fr; }
.nav-wide{ width: 40rem; }
.nav-split{ display: grid; grid-template-columns: 1.3fr 1fr; gap: .5rem; width: 40rem; }
.nav-foot{ padding: .625rem .5rem .375rem; font-size: .8125rem; color: rgba(var(--ink-soft), .6); }
.nav-foot a{ color: rgb(var(--ink)); font-weight: 600; text-decoration: none; }
.nav-foot a:hover{ text-decoration: underline; }
.nav-foot a:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: 2px; border-radius: 3px; }

.nav-tile{
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem;
  border-radius: 9px;
  color: inherit;
  text-decoration: none;
  transition: background-color .2s ease, transform .3s var(--ease-spring);
}
.nav-tile:hover{ background-color: rgba(var(--primary), .13); transform: translateX(2px); }
.nav-tile:active{ transform: translateX(0); }
.nav-tile:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: -2px; }
.nav-tile-ic{
  flex: none;
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border: 1px solid rgba(var(--primary), .2);
  border-radius: 10px;
  background-color: rgba(var(--primary), .07);
  box-shadow: inset 0 1px 0 rgba(var(--hi), .06), 0 6px 16px -10px rgba(var(--secondary), .8);
}
.nav-tile-ic .ic{ width: 1.25rem; height: 1.25rem; color: rgba(var(--ink), .9); }
.nav-tile-title{ display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: rgb(var(--ink)); }
.nav-tile-desc{ display: block; margin-top: .125rem; font-size: .75rem; line-height: 1.45; color: rgba(var(--ink-soft), .55); }

.nav-links{ margin: 0; padding: .375rem; list-style: none; }
.nav-links a{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  border-radius: 9px;
  font-size: .9375rem;
  font-weight: 500;
  color: rgba(var(--ink-soft), .85);
  text-decoration: none;
  transition: background-color .2s ease, transform .3s var(--ease-spring), color .2s ease;
}
.nav-links a:hover{ background-color: rgba(var(--primary), .13); color: rgb(var(--ink)); transform: translateX(2px); }
.nav-links a:active{ transform: translateX(0); }
.nav-links a:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: -2px; }
.nav-links .ic{ width: 1rem; height: 1rem; opacity: .7; }

.nav-actions{ display: none; align-items: center; gap: .5rem; }
.btn-sm{ min-height: 2.375rem; padding: 0 1.125rem; font-size: .875rem; }

.menu-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(var(--primary), .35);
  border-radius: 10px;
  background-color: rgba(var(--primary), .08);
  color: rgb(var(--ink));
  cursor: pointer;
  transition: transform .3s var(--ease-spring), background-color .2s ease;
}
.menu-toggle:hover{ background-color: rgba(var(--primary), .16); }
.menu-toggle:active{ transform: scale(.94); }
.menu-toggle:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: 2px; }
.menu-toggle .ic{ width: 1.25rem; height: 1.25rem; }
.menu-toggle .bar{ transform-box: view-box; transition: transform .3s var(--ease-spring); }
.menu-toggle .bar-1{ transform-origin: 12px 9px; }
.menu-toggle .bar-2{ transform-origin: 12px 15px; }
.menu-toggle[aria-expanded="true"] .bar-1{ transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar-2{ transform: translateY(-3px) rotate(-45deg); }

.mobile-menu{
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-4);
  overflow-y: auto;
  border-top: 1px solid rgba(var(--primary), .16);
  background-color: rgba(var(--void), .98);
}
@supports (backdrop-filter: blur(1px)){
  .mobile-menu{ background-color: rgba(var(--void), .86); backdrop-filter: blur(20px) saturate(140%); }
}
.mobile-menu.is-open{ display: flex; animation: menuIn .22s var(--ease-spring) both; }
@keyframes menuIn{ from{ opacity: 0; transform: scale(.985); } to{ opacity: 1; transform: none; } }
.mobile-group{ margin: 0; padding: 0; list-style: none; }
.mobile-label{
  margin: var(--s-3) 0 var(--s-2);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(var(--ink-soft), .45);
}
.mobile-label:first-child{ margin-top: 0; }
.mobile-actions{ display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); }
.mobile-actions .btn{ width: 100%; }
.mobile-actions .theme-toggle{ align-self: center; }

@media (min-width: 900px){
  .nav-menu, .nav-actions{ display: flex; }
  .menu-toggle{ display: none; }
  .mobile-menu{ display: none !important; }
}

@media (prefers-reduced-motion: reduce){
  .nav-dropdown, .nav-caret, .nav-tile, .nav-links a, .brand, .menu-toggle, .menu-toggle .bar{ transition: none; }
  .mobile-menu.is-open{ animation: none; }
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.site-footer{
  position: relative;
  overflow-x: clip;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--s-6) clamp(2.5rem, 4vw, 3.5rem);
}
.foot-glow{
  position: absolute;
  top: -10%;
  left: 50%;
  width: min(1100px, 130vw);
  height: min(560px, 90vw);
  transform: translateX(-50%);
  background-image: radial-gradient(ellipse 50% 46% at 50% 50%, rgba(var(--primary), .45) 0%, transparent 72%);
  filter: blur(60px);
  mix-blend-mode: var(--glow-blend);
  pointer-events: none;
}
.foot-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}
.foot-logo-link{
  display: block;
  border-radius: 14px;
  transition: transform .4s var(--ease-spring), opacity .25s ease;
}
.foot-logo-link:hover{ transform: translateY(-3px); }
.foot-logo-link:active{ transform: translateY(0) scale(.99); }
.foot-logo-link:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: 6px; }
.foot-logo{
  display: block;
  width: clamp(15rem, 34vw, 23rem);
  height: auto;
  filter: var(--logo-filter);
}

.foot-tagline{
  margin: 0;
  font-family: 'Unbounded', ui-sans-serif, sans-serif;
  font-weight: 500;
  font-size: clamp(.875rem, 1.5vw, 1rem);
  letter-spacing: .01em;
  color: rgba(var(--ink-soft), .78);
}

.foot-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem 1.75rem;
}
.foot-nav a{
  padding: .375rem .25rem;
  border-radius: 6px;
  font-size: .9375rem;
  font-weight: 500;
  color: rgba(var(--ink-soft), .82);
  text-decoration: none;
  transition: color .2s ease, transform .3s var(--ease-spring);
}
.foot-nav a:hover{ color: rgb(var(--ink)); transform: translateY(-1px); }
.foot-nav a:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: 3px; }

.foot-contact{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1rem;
  font-size: .9375rem;
}
.foot-contact a{
  color: rgba(var(--ink-soft), .82);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--primary), .35);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.foot-contact a:hover{ color: rgb(var(--ink)); border-color: rgba(var(--primary), .8); }
.foot-contact a:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: 3px; }
.foot-sep{ width: 4px; height: 4px; border-radius: 9999px; background-color: rgba(var(--primary), .5); }

.foot-legal{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.25rem;
  margin: var(--s-2) 0 0;
  padding-top: var(--s-6);
  border-top: 1px solid rgba(var(--primary), .14);
  width: 100%;
  font-size: .75rem;
  color: rgba(var(--ink-soft), .5);
}
.foot-legal a{ color: inherit; text-decoration: none; }
.foot-legal a:hover{ color: rgb(var(--ink)); }
.foot-legal a:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: 3px; border-radius: 3px; }


/* ------------------------------------------------------------------ */
/* Theme toggle                                                        */
/* ------------------------------------------------------------------ */
.theme-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid rgba(var(--primary), .3);
  border-radius: 9999px;
  background-color: rgba(var(--primary), .07);
  color: rgb(var(--ink));
  cursor: pointer;
  transition: transform .3s var(--ease-spring), background-color .2s ease, border-color .2s ease;
}
.theme-btn:hover{ background-color: rgba(var(--primary), .16); border-color: rgba(var(--primary), .55); transform: translateY(-1px); }
.theme-btn:active{ transform: translateY(0) scale(.94); }
.theme-btn:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: 2px; }
.theme-btn .ic{ width: 1.0625rem; height: 1.0625rem; }
/* Show the theme you would switch TO */
.theme-btn .theme-ic-moon{ display: none; }
:root[data-theme="light"] .theme-btn .theme-ic-sun{ display: none; }
:root[data-theme="light"] .theme-btn .theme-ic-moon{ display: inline-block; }

.theme-toggle{
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .375rem .875rem .375rem .375rem;
  border: 1px solid rgba(var(--primary), .28);
  border-radius: 9999px;
  background-color: rgba(var(--primary), .07);
  color: rgba(var(--ink-soft), .85);
  font-family: 'Montserrat', sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .3s var(--ease-spring), border-color .2s ease, background-color .2s ease;
}
.theme-toggle:hover{ border-color: rgba(var(--primary), .55); background-color: rgba(var(--primary), .13); transform: translateY(-1px); }
.theme-toggle:active{ transform: translateY(0) scale(.98); }
.theme-toggle:focus-visible{ outline: 2px solid rgba(var(--primary), .9); outline-offset: 3px; }
.theme-track{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 3.25rem;
  height: 1.625rem;
  padding: 0 .3125rem;
  border: 1px solid rgba(var(--primary), .22);
  border-radius: 9999px;
  background-color: rgba(var(--void), .55);
}
.theme-track .ic{ position: relative; z-index: 1; width: .8125rem; height: .8125rem; color: rgba(var(--ink-soft), .6); }
.theme-knob{
  position: absolute;
  top: 50%;
  left: .1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 9999px;
  background-image: linear-gradient(180deg, rgb(var(--ink)) 0%, rgb(var(--primary)) 100%);
  box-shadow: 0 2px 8px -2px rgba(var(--secondary), .9);
  transform: translate(1.75rem, -50%);
  transition: transform .34s var(--ease-spring);
}
:root[data-theme="light"] .theme-knob{ transform: translate(0, -50%); }
/* The knob sits under whichever icon is active, so that icon flips to the
   page colour to stay legible against it in both themes. */
:root[data-theme="dark"] .theme-ic-moon,
:root:not([data-theme="light"]) .theme-ic-moon{ color: rgb(var(--void)); }
:root[data-theme="light"] .theme-track .theme-ic-sun{ color: rgb(var(--void)); }
:root[data-theme="light"] .theme-track .theme-ic-moon{ color: rgba(var(--ink-soft), .6); }
@media (prefers-reduced-motion: reduce){
  .theme-knob, .theme-toggle, .theme-btn{ transition: none; }
}
.foot-toggle-wrap{ display: flex; justify-content: center; }


@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
}