html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

:root {
  --atl-primary: #00bfff;
  --atl-primary-deep: #0b7fbe;
  --atl-secondary: #adf802;
  --atl-dark: #07111f;
  --atl-deep: #10233f;
  --atl-surface: rgba(255, 255, 255, 0.74);
  --atl-surface-strong: rgba(255, 255, 255, 0.9);
  --atl-border: rgba(27, 36, 48, 0.08);
  --atl-text: #1b2430;
  --atl-muted: #5f6f82;
  --atl-bg: #eef5fb;
  --atl-shadow: 0 24px 80px rgba(5, 18, 34, 0.1);
  --atl-glow-cyan: rgba(0, 191, 255, 0.35);
  --atl-glow-lime: rgba(173, 248, 2, 0.25);
  --atl-border-glow: rgba(0, 191, 255, 0.22);
  --atl-grid-line: rgba(0, 150, 200, 0.042);
}

@keyframes bgDrift {
  0%,  100% { background-position: 0% 0%, 100% 100%, 100% 0%, 0% 0%, 0% 0%, 0% 0%; }
  25%        { background-position: 5%  8%,  95%  92%,  90% 10%, 0% 0%, 0% 0%, 0% 0%; }
  50%        { background-position: 9%  4%,  91%  96%,  96%  4%, 0% 0%, 0% 0%, 0% 0%; }
  75%        { background-position: 2% 14%,  98%  86%,  88%  8%, 0% 0%, 0% 0%, 0% 0%; }
}

body.site-shell {
  background-image:
    radial-gradient(ellipse 70% 55% at 12% 22%, rgba(0,191,255,.15), transparent),
    radial-gradient(ellipse 65% 50% at 90% 78%, rgba(173,248,2,.10), transparent),
    radial-gradient(ellipse 50% 55% at 78% 8%,  rgba(0,120,220,.08), transparent),
    radial-gradient(circle, rgba(0,150,200,.058) 1px, transparent 1px),
    linear-gradient(rgba(0,150,200,.028) 1px, transparent 1px),
    linear-gradient(170deg, #f0f6fc 0%, #e7f2f9 52%, #dce8f3 100%);
  background-size:   100% 100%, 100% 100%, 100% 100%, 22px 22px, 22px 22px, 100% 100%;
  background-attachment: fixed, fixed, fixed, fixed, fixed, scroll;
  background-position: 0% 0%, 100% 100%, 100% 0%, 0% 0%, 0% 0%, 0% 0%;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  overflow-x: hidden;
  animation: bgDrift 24s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.site-shell { animation: none; }
}

@media (max-width: 767px) {
  /* background-attachment: fixed broken on iOS Safari — degrade gracefully */
  body.site-shell {
    background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
    animation: none;
  }
}

.text-atl-sky, .text-primary { color: var(--atl-primary); }
.text-atl-lime, .text-secondary, .text-accent { color: var(--atl-secondary); }
.text-atl-text, .text-base-content { color: var(--atl-text); }
.text-atl-muted { color: var(--atl-muted); }
.bg-atl-bg { background-color: var(--atl-bg); }
.bg-atl-dark { background-color: var(--atl-dark); }
.border-atl-border, .border-base-200 { border-color: var(--atl-border); }
.shadow-card { box-shadow: 0 20px 55px rgba(5, 18, 34, 0.08); }
.shadow-card-lg { box-shadow: 0 26px 70px rgba(5, 18, 34, 0.12); }

.navbar { min-height: 3.35rem; }
.navbar-modern {
  background: #fff;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 18px 45px rgba(5, 18, 34, 0.08);
  transition: padding 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.navbar-modern.navbar-compact {
  background: #fff;
  box-shadow: 0 14px 36px rgba(5, 18, 34, 0.1);
  border-color: rgba(226, 232, 240, 0.9);
}
.navbar-modern.navbar-compact .brand-pill { transform: scale(0.97); }

.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.15rem 0.35rem;
  border-radius: 1rem;
  background: transparent;
  border: 0;
  box-shadow: none !important;
  backdrop-filter: none;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--atl-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.02;
  min-width: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  padding: 0.8rem 1.1rem;
  font-weight: 700;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 0.6rem 0.95rem; font-size: 0.875rem; }
.btn-ghost { background: transparent; }
.btn-outline {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}
.btn-primary {
  background: linear-gradient(135deg, var(--atl-primary), var(--atl-primary-deep));
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 191, 255, 0.26);
}

.menu { list-style: none; margin: 0; padding: 0; }
.menu-horizontal { display: flex; align-items: center; gap: 0.15rem; }
.menu li a {
  display: inline-flex;
  border-radius: 0.9rem;
  padding: 0.56rem 0.9rem;
  font-weight: 600;
  color: rgba(27, 36, 48, 0.78);
  position: relative;
  overflow: hidden;
}
.navbar-modern .menu li a { color: rgba(27, 36, 48, 0.82); }
.menu li a:hover,
.menu li a.active {
  background: linear-gradient(180deg, rgba(0, 191, 255, 0.14), rgba(173, 248, 2, 0.12));
  color: var(--atl-primary);
}
.menu li a.active::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0.28rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--atl-primary), var(--atl-secondary));
}
.nav-cta {
  background: linear-gradient(135deg, var(--atl-primary), #007bb8);
  box-shadow: 0 12px 30px rgba(0, 191, 255, 0.22);
}
.navbar-modern .nav-links {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: transparent;
}
.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  filter: none;
}
.brand-logo--nav {
  width: 11.5rem;
  height: 3rem;
}
.brand-logo--footer {
  width: 14rem;
  height: 8.75rem;
}
.logo-placeholder--nav {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
}
.logo-placeholder--footer {
  width: 4rem;
  height: 4rem;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.hero,
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 42% at 8% 18%,  rgba(173,248,2,.16),  transparent 62%),
    radial-gradient(ellipse 52% 58% at 93% 20%,  rgba(0,191,255,.24),  transparent 62%),
    radial-gradient(ellipse 80% 48% at 50% 108%, rgba(0,88,168,.32),   transparent 65%),
    linear-gradient(rgba(0,191,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,191,255,.055) 1px, transparent 1px),
    linear-gradient(152deg, #060c17 0%, #0b1c33 45%, #102c4e 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 68px 68px, 68px 68px, 100% 100%;
  color: #fff;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.05), transparent 28%),
    radial-gradient(ellipse at 82% 18%, rgba(173,248,2,.14), transparent 22%),
    radial-gradient(ellipse at 18% 80%, rgba(0,191,255,.10), transparent 22%);
  pointer-events: none;
}
.page-hero__inner {
  width: min(1180px, 92%);
  margin: 0 auto;
  position: relative;
  padding: 5.5rem 0 3rem;
}
.page-hero__canvas {
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
}
.page-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.page-hero h1 {
  margin: 1rem 0 0;
  max-width: 14ch;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.page-hero p {
  margin-top: 1.2rem;
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.85;
  text-wrap: pretty;
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

.section-shell {
  width: min(1180px, 92%);
  margin: 0 auto;
}
.section-pad { padding: 5rem 0; }
.section-kicker {
  color: var(--atl-primary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.section-title {
  margin-top: 0.8rem;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(1.9rem, 3vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--atl-text);
}
.section-copy {
  margin-top: 1rem;
  color: var(--atl-muted);
  line-height: 1.9;
}

.glass-card,
.surface-card {
  border: 1px solid rgba(0,191,255,.10);
  background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(240,249,255,.92));
  box-shadow: 0 20px 60px rgba(5,18,34,.08), 0 1px 0 rgba(255,255,255,.8) inset;
  backdrop-filter: blur(16px);
  padding: 1.5rem !important;
}

.metric-card {
  border-radius: 1.6rem;
  border: 1px solid var(--atl-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(242, 248, 253, 0.88));
  padding: 1.35rem;
  box-shadow: 0 16px 45px rgba(5, 18, 34, 0.06);
}

.form-input,
.form-textarea {
  width: 100%;
  border: 1px solid var(--atl-border);
  background: rgba(255, 255, 255, 0.86);
  color: var(--atl-text);
  border-radius: 1rem;
  padding: 0.95rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: rgba(0, 191, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(0, 191, 255, 0.12);
  background: #fff;
}
.form-textarea { min-height: 140px; resize: vertical; }

.dashboard-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(0, 191, 255, 0.18), transparent 24%),
    linear-gradient(180deg, #08111e, #101c31 38%, #eef4fb 38%, #edf4fa 100%);
}
.dashboard-topbar {
  width: min(1180px, calc(100% - 2rem));
  margin: 1.2rem auto 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 17, 30, 0.66);
  backdrop-filter: blur(16px);
  border-radius: 1.5rem;
  padding: 1rem 1.25rem;
}
.dashboard-card {
  border: 1px solid rgba(27, 36, 48, 0.08);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 1.6rem;
  box-shadow: 0 18px 50px rgba(5, 18, 34, 0.08);
}

.footer .link { color: rgba(27, 36, 48, 0.82); }
.footer .link:hover { color: var(--atl-primary); }
.link { color: var(--atl-primary); }
.link-hover:hover { text-decoration: underline; }
.footer { border-top: 1px solid rgba(27, 36, 48, 0.1); }
.hero-motion canvas { will-change: transform; transition: transform 180ms ease-out; }

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 16px 34px rgba(0,191,255,.26); }
  50%       { box-shadow: 0 20px 54px rgba(0,191,255,.48); }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Scroll Reveal ---- */
.js-enabled .reveal { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .reveal.in-view {
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-duration: 0.65s;
  }
  .reveal-up.in-view    { animation-name: fadeInUp; }
  .reveal-left.in-view  { animation-name: fadeInLeft; }
  .reveal-right.in-view { animation-name: fadeInRight; }
  .reveal-scale.in-view { animation-name: scaleIn; }
}
@media (prefers-reduced-motion: reduce) {
  .js-enabled .reveal { opacity: 1; }
}

/* ---- Stagger delays ---- */
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.18s; }
.delay-3 { animation-delay: 0.28s; }
.delay-4 { animation-delay: 0.38s; }
.delay-5 { animation-delay: 0.48s; }

/* ---- Hero entrance ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-badge   { animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
  .hero-title   { animation: heroFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.30s both; }
  .hero-desc    { animation: heroFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.45s both; }
  .hero-ctas    { animation: heroFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.60s both; }

  .page-hero__kicker   { animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
  .page-hero__inner h1 { animation: heroFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.30s both; }
  .page-hero__inner > p { animation: heroFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.45s both; }
  .page-hero__actions  { animation: heroFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.60s both; }
}

/* ---- Primary button pulse ---- */
.btn-primary { animation: pulseGlow 3s ease-in-out infinite; }
.btn-primary:hover,
.btn-primary:focus {
  animation: none;
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(0,191,255,.52);
}

/* ---- Float decoration ---- */
.float-anim { animation: floatY 5s ease-in-out infinite; }

/* ---- Card hover glow border ---- */
.card-glow {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}
.card-glow:hover {
  border-color: rgba(0,191,255,.28) !important;
  box-shadow: 0 22px 65px rgba(0,191,255,.12), 0 8px 24px rgba(5,18,34,.08) !important;
}

/* ===== TECH SECTION BACKGROUNDS ===== */
.tech-section-light {
  background-color: #eef5fb;
  background-image:
    radial-gradient(ellipse 68% 45% at 50% -8%, rgba(0,191,255,.09), transparent 62%),
    radial-gradient(ellipse 48% 55% at 105% 100%, rgba(173,248,2,.06), transparent 60%),
    linear-gradient(var(--atl-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--atl-grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}

.dark-tech-section {
  background-color: #07111f;
  background-image:
    radial-gradient(ellipse 65% 52% at 50% 110%, rgba(0,191,255,.14), transparent 60%),
    radial-gradient(ellipse 40% 48% at 8% 0%,    rgba(173,248,2,.07), transparent 55%),
    radial-gradient(ellipse 35% 40% at 95% 5%,   rgba(0,120,220,.07), transparent 55%),
    linear-gradient(rgba(0,191,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,191,255,.06) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 62px 62px, 62px 62px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  color: #fff;
}

/* ===== SERVICE & VALUE CARD ICONS ===== */
.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, rgba(0,191,255,.13), rgba(0,191,255,.06));
  border: 1px solid rgba(0,191,255,.18);
  color: var(--atl-primary);
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.card-glow:hover .service-icon {
  background: linear-gradient(135deg, rgba(0,191,255,.22), rgba(173,248,2,.10));
  box-shadow: 0 0 20px rgba(0,191,255,.26);
  transform: scale(1.06);
}
.service-icon--lime {
  background: linear-gradient(135deg, rgba(173,248,2,.14), rgba(173,248,2,.06));
  border-color: rgba(173,248,2,.22);
  color: #5a7d0a;
}
.card-glow:hover .service-icon--lime {
  background: linear-gradient(135deg, rgba(173,248,2,.24), rgba(0,191,255,.08));
  box-shadow: 0 0 20px rgba(173,248,2,.22);
}

/* ===== GRADIENT TEXT ===== */
.text-gradient {
  background: linear-gradient(135deg, var(--atl-primary) 0%, var(--atl-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-hero {
  background: linear-gradient(135deg, #fff 30%, var(--atl-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== TECH CHIP (pill badge) ===== */
.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  background: rgba(0,191,255,.10);
  border: 1px solid rgba(0,191,255,.22);
  color: var(--atl-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tech-chip--dark {
  background: rgba(0,191,255,.12);
  border-color: rgba(0,191,255,.25);
  color: #7de8ff;
}

/* ===== DIVISION NUMBER BADGE ===== */
.division-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(0,191,255,.14), rgba(173,248,2,.08));
  border: 1px solid rgba(0,191,255,.20);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  background-clip: padding-box;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.division-badge span {
  background: linear-gradient(135deg, var(--atl-primary), var(--atl-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.card-glow:hover .division-badge {
  box-shadow: 0 0 22px rgba(0,191,255,.28);
  transform: scale(1.04);
}

/* ===== ACCENT LINE ===== */
.accent-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--atl-primary) 40%, var(--atl-secondary) 60%, transparent);
  opacity: 0.35;
  border: none;
  margin: 0;
}

/* ===== PULSE DOT ===== */
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,191,255,.6); }
  50%        { box-shadow: 0 0 0 5px rgba(0,191,255,0); }
}
.pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--atl-primary);
  animation: pulseDot 2s ease-in-out infinite;
}

/* ===== CARD FEATURED (gradient bg card) ===== */
.card-featured {
  background: linear-gradient(135deg, #07111f 0%, #0e2240 55%, #112e52 100%);
  border: 1px solid rgba(0,191,255,.14);
  position: relative;
  overflow: hidden;
}
.card-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,191,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,191,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* ===== STAT NUMBER ===== */
.stat-number {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 900;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--atl-primary), #fff 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #1b2430;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f5f9fd; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3bb8ff, #8aca0f); border-radius: 999px; }

@media (max-width: 1023px) {
  .navbar { flex-wrap: wrap; }
  .navbar-start { flex: 1 1 auto; }
  .navbar-end { margin-left: auto; }
  .nav-links {
    position: absolute;
    right: 1rem;
    top: calc(100% + 0.75rem);
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    width: min(22rem, calc(100vw - 2rem));
    padding: 0.95rem;
    border-radius: 1.4rem;
    border: 1px solid var(--atl-border);
    background: #ffffff !important;
    box-shadow: 0 22px 60px rgba(5, 18, 34, 0.2);
    border-radius: 1.4rem !important;
  }
  .navbar-modern .nav-links li {
    width: 100%;
  }
  .navbar-modern .nav-links li a,
  .navbar-modern .nav-links a {
    color: rgba(27, 36, 48, 0.88) !important;
    background: transparent;
    border-radius: 1rem;
  }
  .navbar-modern .nav-links li a:hover,
  .navbar-modern .nav-links li a.active {
    color: var(--atl-primary) !important;
    background: linear-gradient(180deg, rgba(0, 191, 255, 0.1), rgba(173, 248, 2, 0.08));
  }
  .navbar-modern .nav-links li a.active::after {
    left: 1rem;
    right: 1rem;
    bottom: 0.4rem;
  }
  .nav-links.hidden { display: none; }
  .brand-text { max-width: 10rem; }
  .page-hero__inner { padding-top: 7.5rem; }
}

@media (max-width: 767px) {
  .navbar {
    min-height: auto;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
  }
  .brand-pill {
    gap: 0.65rem;
    padding: 0.1rem 0.2rem;
    max-width: calc(100vw - 6.5rem);
  }
  .logo-placeholder--nav {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    font-size: 0.58rem;
  }
  .brand-logo--nav {
    width: 8.5rem;
    height: 2.45rem;
  }
  .brand-text span:first-child {
    font-size: 0.95rem;
  }
  .brand-text span:last-child {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }
  .navbar-end {
    gap: 0.5rem;
  }
  .nav-links {
    left: 1rem;
    right: 1rem;
    width: auto;
    max-width: none;
  }
  .navbar-modern .nav-links li a,
  .menu li a {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
  .page-hero__inner {
    width: min(1180px, 90%);
    padding-top: 8rem;
    padding-bottom: 3.75rem;
  }
  .page-hero h1 {
    max-width: 100%;
    font-size: clamp(2.05rem, 10vw, 3rem);
    line-height: 1.02;
  }
  .page-hero p {
    font-size: 0.96rem;
    line-height: 1.75;
  }
  .page-hero__actions { flex-direction: column; align-items: stretch; }
  .page-hero__actions .btn { width: 100%; }
  .glass-card,
  .surface-card,
  .dashboard-card,
  .metric-card {
    border-radius: 1.3rem;
  }
  .footer .logo-placeholder--footer {
    width: 3.5rem;
    height: 3.5rem;
  }
  .footer .brand-logo--footer {
    width: 10.5rem;
    height: 6.75rem;
  }
  .footer a.flex.items-center.gap-4 {
    align-items: flex-start;
  }
  .footer .btn {
    width: 100%;
  }
  .section-pad { padding: 4rem 0; }
}

/* ===== SECTION SPACING REDUCTIONS ===== */
section.tech-section-light,
section.dark-tech-section {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}
@media (min-width: 768px) {
  section.tech-section-light,
  section.dark-tech-section {
    padding-top: 4.25rem !important;
    padding-bottom: 4.25rem !important;
  }
}
@media (min-width: 1024px) {
  section.tech-section-light,
  section.dark-tech-section {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}
.page-hero__inner {
  padding-top: 5.5rem;
  padding-bottom: 3rem;
}
@media (max-width: 767px) {
  .page-hero__inner {
    padding-top: 7rem;
    padding-bottom: 2.5rem;
  }
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  color: rgba(27,36,48,.6);
  transition: color 0.2s ease;
  padding: 0.4rem;
}
.theme-toggle:hover { color: var(--atl-primary); }
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 3.15rem;
  height: 1.7rem;
}
.theme-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(27,36,48,.08), rgba(27,36,48,.14));
  border: 1px solid rgba(27,36,48,.1);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.7);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.theme-switch__thumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.42rem;
  height: 1.42rem;
  margin-left: .14rem;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 6px 16px rgba(15,23,42,.18);
  transform: translateX(0);
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.theme-switch__icon {
  position: absolute;
  width: .8rem;
  height: .8rem;
}
.theme-switch__icon--sun { opacity: 0; transform: scale(.7); }
.theme-switch__icon--moon { opacity: 1; transform: scale(1); }

/* ===== DARK MODE ===== */
:root[data-theme="dark"] {
  --atl-text:          #e2eef8;
  --atl-muted:         #8ba4bc;
  --atl-bg:            #0a1828;
  --atl-border:        rgba(255, 255, 255, 0.07);
  --atl-surface:       rgba(10, 22, 40, 0.88);
  --atl-surface-strong:rgba(12, 25, 46, 0.96);
  --atl-shadow:        0 24px 80px rgba(0, 0, 0, 0.45);
  --atl-grid-line:     rgba(0, 191, 255, 0.038);
  /* FlyonUI / app.css vars */
  --color-base-100:    #0d1e33;
  --color-base-200:    #142a44;
  --color-base-content:#e2eef8;
}

[data-theme="dark"] body.site-shell {
  background-image:
    radial-gradient(ellipse 70% 55% at 12% 22%, rgba(0,191,255,.10), transparent),
    radial-gradient(ellipse 65% 50% at 90% 78%, rgba(173,248,2,.06), transparent),
    radial-gradient(ellipse 50% 55% at 78% 8%,  rgba(0,100,200,.07), transparent),
    radial-gradient(circle, rgba(0,150,200,.04) 1px, transparent 1px),
    linear-gradient(rgba(0,150,200,.02) 1px, transparent 1px),
    linear-gradient(170deg, #060d18 0%, #081422 52%, #0a1a2e 100%);
}

[data-theme="dark"] .navbar-modern {
  background: rgba(6, 11, 21, 0.96) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
[data-theme="dark"] .navbar-modern.navbar-compact {
  background: rgba(4, 8, 16, 0.98) !important;
}
[data-theme="dark"] .menu li a { color: rgba(226,238,248,.70); }
[data-theme="dark"] .navbar-modern .menu li a { color: rgba(226,238,248,.76); }
[data-theme="dark"] .menu li a:hover,
[data-theme="dark"] .menu li a.active { color: var(--atl-primary); }
[data-theme="dark"] .theme-toggle { color: rgba(226,238,248,.6); }
[data-theme="dark"] .theme-toggle:hover { color: var(--atl-primary); }
[data-theme="dark"] .theme-switch__track {
  background: linear-gradient(180deg, rgba(0,191,255,.20), rgba(173,248,2,.18));
  border-color: rgba(173,248,2,.22);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.08);
}
[data-theme="dark"] .theme-switch__thumb {
  transform: translateX(1.43rem);
  background: #09111f;
  color: #e2eef8;
}
[data-theme="dark"] .theme-switch__icon--sun { opacity: 1; transform: scale(1); }
[data-theme="dark"] .theme-switch__icon--moon { opacity: 0; transform: scale(.7); }

[data-theme="dark"] .nav-links {
  background: rgba(8, 15, 28, 0.98) !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .navbar-modern .nav-links li a,
[data-theme="dark"] .navbar-modern .nav-links a {
  color: rgba(226,238,248,.80) !important;
}

[data-theme="dark"] .tech-copy {
  color: rgba(226, 238, 248, 0.82) !important;
}

[data-theme="dark"] .glass-card,
[data-theme="dark"] .surface-card {
  background: linear-gradient(160deg, rgba(13,28,50,.96), rgba(9,20,40,.94)) !important;
  border-color: rgba(0,191,255,.12) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
}
[data-theme="dark"] .metric-card {
  background: rgba(11, 23, 42, 0.94) !important;
  border-color: rgba(255,255,255,.07) !important;
}
[data-theme="dark"] .card-glow:hover {
  border-color: rgba(0,191,255,.32) !important;
  box-shadow: 0 22px 65px rgba(0,191,255,.14), 0 8px 24px rgba(0,0,0,.3) !important;
}

[data-theme="dark"] .tech-section-light {
  background-color: #07101c !important;
  background-image:
    radial-gradient(ellipse 68% 45% at 50% -8%, rgba(0,191,255,.07), transparent 62%),
    radial-gradient(ellipse 48% 55% at 105% 100%, rgba(173,248,2,.04), transparent 60%),
    linear-gradient(rgba(0,191,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,191,255,.04) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat !important;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea {
  background: rgba(7, 16, 30, 0.88) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #e2eef8 !important;
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus {
  background: rgba(9, 20, 38, 0.96) !important;
  border-color: rgba(0,191,255,.45) !important;
  box-shadow: 0 0 0 4px rgba(0,191,255,.10) !important;
}
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder { color: rgba(139,164,188,.45) !important; }

[data-theme="dark"] .text-slate-900 { color: #e2eef8 !important; }
[data-theme="dark"] .text-slate-800 { color: #d8e8f4 !important; }
[data-theme="dark"] .text-slate-700 { color: #c8dcea !important; }
[data-theme="dark"] .text-slate-600 { color: #8ba4bc !important; }
[data-theme="dark"] .text-slate-500 { color: #7a96b0 !important; }
[data-theme="dark"] .text-base-content { color: #e2eef8 !important; }
[data-theme="dark"] .text-atl-text { color: #e2eef8 !important; }
[data-theme="dark"] .text-atl-muted { color: #9ab1c8 !important; }
[data-theme="dark"] .text-base-content\/80 { color: rgba(226,238,248,.92) !important; }
[data-theme="dark"] .text-base-content\/75 { color: rgba(226,238,248,.88) !important; }
[data-theme="dark"] .text-base-content\/70 { color: rgba(226,238,248,.84) !important; }
[data-theme="dark"] .text-base-content\/60 { color: rgba(226,238,248,.78) !important; }
[data-theme="dark"] .text-base-content\/50 { color: rgba(226,238,248,.72) !important; }
[data-theme="dark"] .text-white\/90 { color: rgba(255,255,255,.96) !important; }
[data-theme="dark"] .text-white\/80 { color: rgba(255,255,255,.92) !important; }
[data-theme="dark"] .text-white\/75 { color: rgba(255,255,255,.88) !important; }
[data-theme="dark"] .text-white\/70 { color: rgba(255,255,255,.84) !important; }
[data-theme="dark"] .text-white\/60 { color: rgba(255,255,255,.78) !important; }
[data-theme="dark"] .border-slate-200 { border-color: rgba(255,255,255,.09) !important; }
[data-theme="dark"] .text-\[#30546b\]  { color: #8ba4bc !important; }
[data-theme="dark"] .text-\[#d2deeb\]  { color: rgba(200,222,240,.85) !important; }

[data-theme="dark"] .bg-atl-bg { background-color: #0a1828 !important; }
[data-theme="dark"] .border-atl-border,
[data-theme="dark"] .border-base-200 { border-color: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .bg-base-100 {
  background-color: #0d1e33 !important;
}
[data-theme="dark"] .bg-white { background-color: #0d1e33 !important; }
[data-theme="dark"] .bg-\[\#f3f9ff\] { background-color: #0e1e30 !important; }

[data-theme="dark"] footer.footer {
  background-color: var(--color-base-100) !important;
  border-top-color: rgba(255,255,255,.07) !important;
}
[data-theme="dark"] footer.footer .text-slate-900 {
  color: #e2eef8 !important;
}
[data-theme="dark"] .footer .link { color: var(--atl-primary); }

[data-theme="dark"] ::-webkit-scrollbar-track { background: #070e1b; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(0,191,255,.6), rgba(138,202,15,.6)); }

[data-theme="dark"] input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #0d1e33 inset !important;
  -webkit-text-fill-color: #e2eef8 !important;
}