/* Aurora theme, calm version: muted navy tones, frosted glass, no glowing text */
.site {
  --head: "Outfit", sans-serif; --body: "Outfit", sans-serif;
  --bg: #0C1122; --bg2: rgba(255,255,255,.05); --surface: rgba(255,255,255,.045); --ink: #EEF1FF; --muted: #9AA2BC; --line: rgba(255,255,255,.1);
  --accent: #8C9BD0; --accent-2: #8DBDB5; --hl-color: #A8B5DD;
  --r: 24px;
  --nav-bg: rgba(16,22,42,.7); --nav-border: rgba(255,255,255,.12); --nav-ink: #C9CFEA; --nav-hover: rgba(255,255,255,.08); --logo-bg: transparent;
  --hero-bg: #0C1122; --hero-ink: #EEF0F6; --hero-muted: #A7AEC6; --hero-surface: rgba(255,255,255,.06); --hero-line: rgba(255,255,255,.14);
  --band-bg: #0F1529; --band-ink: #EEF0F6; --band-muted: #A3ABCB; --band-surface: rgba(255,255,255,.05); --band-line: rgba(255,255,255,.1);
  --btn-bg: #56679F; --btn-shadow: none;
  --footer-bg: #080C1A; --footer-ink: #A3ABCB;
}
body.site { background: #0C1122; }
.site .hero h1 { font-size: clamp(36px, 5.6vw, 70px); font-weight: 700; }

.aurora { position: absolute; inset: -20%; filter: blur(90px); opacity: .45; }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: aur 40s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 55%; height: 55%; left: 5%; top: 5%; background: #2F3A73; }
.aurora i:nth-child(2) { width: 50%; height: 50%; right: 5%; top: 0; background: #24466E; animation-delay: -10s; }
.aurora i:nth-child(3) { width: 40%; height: 45%; right: 20%; bottom: 5%; background: #1F4D55; animation-delay: -20s; }
.aurora i:nth-child(4) { width: 35%; height: 35%; left: 25%; bottom: 10%; background: #3A3260; opacity: .6; animation-delay: -30s; }
@keyframes aur { 0% { transform: translate(0, 0) rotate(0) scale(1); } 50% { transform: translate(4%, 3%) scale(1.05); } 100% { transform: translate(-3%, -2%) scale(.98); } }

.stack { position: relative; height: 420px; margin-top: 40px; perspective: 1200px; }
.gcard { --rx: 0deg; --ry: 0deg; position: absolute; left: 50%; top: 50%; width: 270px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 6px; transition: transform .6s var(--ease), box-shadow .4s; animation: hover 9s ease-in-out infinite; animation-delay: calc(var(--i) * -1.5s); }
.gcard:nth-child(1) { --tx: -95%; --ty: -95%; --rot: -8deg; }
.gcard:nth-child(2) { --tx: -5%;  --ty: -80%; --rot: 6deg; }
.gcard:nth-child(3) { --tx: -100%; --ty: 5%; --rot: 5deg; }
.gcard:nth-child(4) { --tx: -10%; --ty: 18%; --rot: -5deg; }
.gcard { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
@keyframes hover { 50% { translate: 0 -6px; } }
.gcard:hover, .gcard.tilting { transform: translate(var(--tx), var(--ty)) rotate(0) perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.05); z-index: 5; box-shadow: 0 30px 70px color-mix(in srgb, var(--c) 40%, transparent); }
.gcard .ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--c); margin-bottom: 8px; }
.gcard b { font-size: 16px; }
.gcard small { font-size: 13px; color: #C9CFEA; }

.site .stat { background: rgba(255,255,255,.06); }
.site .stat strong { background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site .marquee { background: rgba(255,255,255,.03); }
.site .svc, .site .fn, .site .form, .site .value, .site .pager a, .site .other { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site .svc { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.site .svc:hover { box-shadow: 0 24px 60px color-mix(in srgb, var(--c) 30%, transparent); }
.site .section { background: radial-gradient(700px circle at 10% 0%, rgba(109,40,217,.16), transparent 60%), radial-gradient(600px circle at 90% 100%, rgba(8,145,178,.14), transparent 60%); }
.site .band-bg { background: conic-gradient(from 0deg at 50% 50%, rgba(124,92,255,.18), rgba(6,182,212,.14), rgba(192,38,211,.14), rgba(124,92,255,.18)); filter: blur(60px); animation: spin 40s linear infinite; inset: -40%; }
.site .cta-inner { background: linear-gradient(120deg, rgba(124,92,255,.35), rgba(59,130,246,.25), rgba(6,182,212,.3)); border-color: rgba(255,255,255,.18); backdrop-filter: blur(16px); }
.site .form { box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.site .field input, .site .field textarea, .site .field select { background: rgba(255,255,255,.06); color: var(--ink); }
.site .field select option { background: #0A0F29; }
.site .map iframe { filter: invert(.9) hue-rotate(200deg) saturate(.8); }
.site .sn { background: #0A0F29; }
.site .page-hero { background: #070B1F; }
.site .page-glow { opacity: .5; }

@media (max-width: 1024px) { .stack { height: 360px; margin: 10px 0 40px; } .gcard { width: 230px; } }
@media (max-width: 640px) {
  .stack { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; perspective: none; }
  .gcard { position: relative; left: auto; top: auto; width: auto; transform: none; padding: 16px; }
  .gcard:hover, .gcard.tilting { transform: none; }
  .gcard small { display: none; }
}

/* the logo is white-on-transparent, so it sits straight on the dark nav and footer */
.site .brand img { height: 42px; }
.site .f-logo { padding: 0; background: none; }
.site .f-logo img { height: 52px; }
@media (max-width: 820px) { .site .nav-links { background: #0E1330; } }

/* calm overrides */
.site .stat strong { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--hero-ink); }
.site .band-bg { animation: none; filter: none; inset: 0; background: radial-gradient(700px circle at 20% 0%, rgba(86,103,159,.12), transparent 60%); }
.site .section { background: none; }
.site .cta-inner { background: #141B33; border-color: rgba(255,255,255,.08); backdrop-filter: none; }
.site .cta-inner h2 span { color: var(--hl-color); }
.site .gcard { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); box-shadow: 0 20px 40px rgba(0,0,0,.25); }
.site .gcard:hover, .site .gcard.tilting { box-shadow: 0 20px 44px rgba(0,0,0,.35); }
.site .svc:hover { box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.site .step.in .sn { box-shadow: none; }
.site .page-glow { opacity: .18; }
.site .track span::before { color: var(--muted); }