
/* AtlasVelocity V2 — Lively Platform Visual System
   Designed to align Atlas with the richer AlanBush.me Journey visual language. */

:root{
  --atlas-gold:#e6b941;
  --atlas-cyan:#38c9ff;
  --atlas-blue:#4c87ff;
  --atlas-green:#38d39f;
  --atlas-violet:#a978ff;
  --atlas-teal:#2ecdc1;
  --atlas-amber:#f3a83b;
}
.atlas-lively{
  background:
    radial-gradient(circle at 12% 10%,rgba(56,201,255,.13),transparent 28rem),
    radial-gradient(circle at 88% 18%,rgba(169,120,255,.11),transparent 30rem),
    radial-gradient(circle at 50% 72%,rgba(56,211,159,.07),transparent 36rem),
    linear-gradient(180deg,#02050a 0%,#06111e 44%,#03070d 100%)!important;
}
.atlas-lively::before{
  opacity:.34!important;
  background-image:
    linear-gradient(rgba(64,180,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(64,180,255,.055) 1px,transparent 1px)!important;
  background-size:58px 58px!important;
}
.atlas-lively section{position:relative}
.atlas-lively section::after{
  content:"";
  position:absolute;
  left:50%;bottom:0;
  width:min(980px,80%);height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(56,201,255,.12),rgba(230,185,65,.16),transparent);
  pointer-events:none;
}

/* Hero */
.atlas-lively .hero{padding-top:92px}
.atlas-lively .eyebrow{
  color:#fff0b5!important;
  background:linear-gradient(90deg,rgba(230,185,65,.10),rgba(56,201,255,.06))!important;
  border-color:rgba(230,185,65,.36)!important;
  box-shadow:0 0 28px rgba(230,185,65,.07),inset 0 1px 0 rgba(255,255,255,.04);
}
.atlas-orbit{
  border-color:rgba(89,187,255,.18)!important;
  background:
    radial-gradient(circle at 50% 45%,rgba(56,201,255,.08),transparent 36%),
    linear-gradient(160deg,rgba(12,29,47,.93),rgba(4,10,19,.97))!important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    0 0 50px rgba(56,201,255,.07),
    inset 0 0 90px rgba(169,120,255,.04)!important;
}
.atlas-orbit::before{
  animation:atlasOrbitPulse 5s ease-in-out infinite;
}
@keyframes atlasOrbitPulse{
  0%,100%{box-shadow:0 0 0 18px rgba(215,173,56,.03),0 0 90px rgba(32,213,255,.12)}
  50%{box-shadow:0 0 0 23px rgba(215,173,56,.045),0 0 130px rgba(32,213,255,.20)}
}
.atlas-lively .core{
  background:
    radial-gradient(circle at 50% 26%,rgba(56,201,255,.22),transparent 35%),
    radial-gradient(circle at 50% 70%,rgba(169,120,255,.14),transparent 48%),
    rgba(4,10,20,.94)!important;
  box-shadow:
    0 0 70px rgba(230,185,65,.28),
    0 0 125px rgba(56,201,255,.15),
    inset 0 0 70px rgba(0,0,0,.5)!important;
}
.atlas-lively .sat{
  border-radius:19px!important;
  backdrop-filter:blur(14px);
  background:linear-gradient(145deg,rgba(12,27,44,.90),rgba(4,10,19,.94))!important;
  box-shadow:0 16px 36px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04)!important;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.atlas-lively .sat:hover{z-index:7}
.atlas-lively .sat-government{border-color:rgba(56,211,159,.42)!important}
.atlas-lively .sat-finance{border-color:rgba(230,185,65,.45)!important}
.atlas-lively .sat-legal{border-color:rgba(76,135,255,.45)!important}
.atlas-lively .sat-media{border-color:rgba(169,120,255,.45)!important}
.atlas-lively .sat-growth{border-color:rgba(56,201,255,.45)!important}
.atlas-lively .sat-ai{border-color:rgba(46,205,193,.45)!important}

/* Platform core */
.atlas-lively .platform{
  padding:38px!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(56,201,255,.12),transparent 25rem),
    radial-gradient(circle at 90% 100%,rgba(169,120,255,.10),transparent 25rem),
    linear-gradient(145deg,rgba(12,30,49,.93),rgba(4,12,23,.97))!important;
  border:1px solid rgba(56,201,255,.25)!important;
  box-shadow:0 24px 62px rgba(0,0,0,.34),0 0 50px rgba(56,201,255,.06)!important;
}
.atlas-lively .svc{
  --svc:#38c9ff;
  min-height:112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--svc) 17%,transparent),transparent 72%),
    rgba(3,10,19,.70)!important;
  border-color:color-mix(in srgb,var(--svc) 28%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 28px rgba(0,0,0,.22);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.atlas-lively .svc:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--svc) 60%,white 5%)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.30),0 0 26px color-mix(in srgb,var(--svc) 14%,transparent);
}
.atlas-lively .svc div{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--svc) 36%,transparent))}
.atlas-lively .svc-cyan{--svc:var(--atlas-cyan)}
.atlas-lively .svc-blue{--svc:var(--atlas-blue)}
.atlas-lively .svc-purple{--svc:var(--atlas-violet)}
.atlas-lively .svc-green{--svc:var(--atlas-green)}
.atlas-lively .svc-gold{--svc:var(--atlas-gold)}
.atlas-lively .svc-violet{--svc:var(--atlas-violet)}
.atlas-lively .svc-amber{--svc:var(--atlas-amber)}
.atlas-lively .svc-teal{--svc:var(--atlas-teal)}

/* Division cards */
.atlas-division-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
}
.atlas-card{
  --accent:var(--atlas-gold);
  min-height:360px;
  padding:25px!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 92% 7%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 12rem),
    linear-gradient(145deg,rgba(14,29,47,.97),rgba(4,11,21,.99) 62%)!important;
  border:1px solid color-mix(in srgb,var(--accent) 31%,rgba(255,255,255,.04))!important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),border-color .34s ease,box-shadow .34s ease;
}
.atlas-card::before{
  background:radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--accent) 19%,transparent),transparent 36%)!important;
}
.atlas-card::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--accent),color-mix(in srgb,var(--accent) 36%,white),transparent);
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 45%,transparent);
}
.atlas-card:hover{
  transform:translateY(-8px) scale(1.01);
  border-color:color-mix(in srgb,var(--accent) 60%,white 7%)!important;
  box-shadow:
    0 32px 76px rgba(0,0,0,.48),
    0 0 38px color-mix(in srgb,var(--accent) 14%,transparent)!important;
}
.atlas-card .badge-icon{
  color:color-mix(in srgb,var(--accent) 72%,white 28%);
  background:
    radial-gradient(circle at 25% 15%,rgba(255,255,255,.10),transparent 44%),
    color-mix(in srgb,var(--accent) 12%,rgba(4,11,21,.92))!important;
  border-color:color-mix(in srgb,var(--accent) 35%,transparent)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 25px color-mix(in srgb,var(--accent) 12%,transparent);
}
.atlas-card .card-tag{
  padding:6px 9px;border-radius:999px;
  color:color-mix(in srgb,var(--accent) 72%,white 28%);
  background:color-mix(in srgb,var(--accent) 8%,rgba(4,11,21,.76));
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase
}
.atlas-card h3{color:#fff4d7!important;font-size:20px!important}
.atlas-card p{color:#aebdca!important}
.atlas-links{display:grid!important;gap:8px!important}
.atlas-links li{padding:0!important}
.atlas-links li::before{display:none!important}
.atlas-links a,
.atlas-links li>span{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.028);
  color:#e8f2f8;
  font-size:12px;font-weight:800;
}
.atlas-links li>span{color:#9eafbd}
.atlas-links a b{color:color-mix(in srgb,var(--accent) 72%,white 28%)}
.atlas-links a:hover{
  background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.025));
  border-color:color-mix(in srgb,var(--accent) 31%,transparent);
  transform:translateX(3px)
}
.atlas-card.accent-gold{--accent:var(--atlas-gold)}
.atlas-card.accent-green{--accent:var(--atlas-green)}
.atlas-card.accent-cyan{--accent:var(--atlas-cyan)}
.atlas-card.accent-violet{--accent:var(--atlas-violet)}
.atlas-card.accent-teal{--accent:var(--atlas-teal)}
.platform-division-card{grid-column:2 / span 1}

/* Timeline */
.atlas-lively .timeline{gap:18px!important}
.atlas-lively .step{
  --step-accent:var(--atlas-gold);
  position:relative;
  overflow:hidden;
  min-height:190px;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 80% 0%,color-mix(in srgb,var(--step-accent) 13%,transparent),transparent 60%),
    rgba(10,22,37,.82)!important;
  border-color:color-mix(in srgb,var(--step-accent) 23%,transparent)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.25);
}
.atlas-lively .step::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--step-accent),transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--step-accent) 40%,transparent)
}
.atlas-lively .step-gold{--step-accent:var(--atlas-gold)}
.atlas-lively .step-blue{--step-accent:var(--atlas-blue)}
.atlas-lively .step-green{--step-accent:var(--atlas-green)}
.atlas-lively .step-violet{--step-accent:var(--atlas-violet)}
.atlas-lively .step-cyan{--step-accent:var(--atlas-cyan)}
.atlas-lively .step .year{color:color-mix(in srgb,var(--step-accent) 76%,white 24%)!important}

/* Quote / CTA */
.atlas-lively .quote .big,
.atlas-lively .cta{
  background:
    radial-gradient(circle at 85% 0%,rgba(169,120,255,.10),transparent 22rem),
    radial-gradient(circle at 15% 100%,rgba(56,201,255,.08),transparent 22rem),
    linear-gradient(145deg,rgba(12,28,46,.92),rgba(4,11,21,.97))!important;
}
.atlas-primary-pulse{
  position:relative;
  isolation:isolate;
}
.atlas-primary-pulse::before,
.atlas-primary-pulse::after{
  content:"";
  position:absolute;
  inset:-6px;
  border:2px solid rgba(230,185,65,.46);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  animation:atlasPulse 2.7s ease-out infinite;
}
.atlas-primary-pulse::after{animation-delay:1.1s}
@keyframes atlasPulse{
  0%{transform:scale(.96);opacity:.55}
  70%{transform:scale(1.12);opacity:0}
  100%{transform:scale(1.12);opacity:0}
}

/* Reveal */
.atlas-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.atlas-reveal.atlas-visible{opacity:1;transform:none}

@media(max-width:1040px){
  .atlas-division-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .platform-division-card{grid-column:auto}
}
@media(max-width:720px){
  .atlas-lively .platform{padding:24px!important}
  .atlas-division-grid{grid-template-columns:1fr!important}
  .atlas-card{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .atlas-orbit::before,.atlas-primary-pulse::before,.atlas-primary-pulse::after{animation:none!important}
  .atlas-card,.atlas-lively .svc,.atlas-reveal{transition:none!important}
  .atlas-reveal{opacity:1!important;transform:none!important}
}


/* AtlasVelocity V2.1 — Technology Background */
.atlas-lively{
  position:relative;
  isolation:isolate;
  background:#02050a!important;
}
.atlas-lively::before{
  content:"";
  position:fixed!important;
  inset:0!important;
  z-index:-3!important;
  pointer-events:none!important;
  opacity:.50!important;
  background:
    linear-gradient(180deg,rgba(2,5,10,.48),rgba(3,9,17,.69) 48%,rgba(2,5,10,.82)),
    url("/assets/atlas-technology-background-2026.webp?v=2.1") center top / cover no-repeat!important;
  mask-image:none!important;
}
.atlas-lively::after{
  content:"";
  position:fixed!important;
  inset:0!important;
  z-index:-2!important;
  pointer-events:none!important;
  opacity:.92!important;
  background:
    radial-gradient(circle at 14% 12%,rgba(56,201,255,.13),transparent 30rem),
    radial-gradient(circle at 86% 18%,rgba(230,185,65,.11),transparent 28rem),
    radial-gradient(circle at 52% 70%,rgba(169,120,255,.08),transparent 36rem),
    linear-gradient(rgba(62,175,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(62,175,255,.032) 1px,transparent 1px);
  background-size:auto,auto,auto,58px 58px,58px 58px;
  filter:none!important;
  animation:none!important;
}
.atlas-lively main,
.atlas-lively footer{
  position:relative;
  z-index:0;
}
.atlas-lively .hero{
  background:
    linear-gradient(180deg,rgba(2,7,14,.20),rgba(2,7,14,.06) 54%,rgba(2,7,14,.28));
}
.atlas-lively section:not(.hero){
  background:linear-gradient(180deg,rgba(2,7,14,.10),rgba(2,7,14,.18));
}
.atlas-lively .nav{
  background:linear-gradient(180deg,rgba(2,6,12,.91),rgba(3,8,15,.72))!important;
}
@media(max-width:720px){
  .atlas-lively::before{
    opacity:.40!important;
    background:
      linear-gradient(180deg,rgba(2,5,10,.54),rgba(3,9,17,.76) 48%,rgba(2,5,10,.88)),
      url("/assets/atlas-technology-background-2026.webp?v=2.1") 68% top / auto 100vh no-repeat!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .atlas-lively::after{animation:none!important}
}
