:root{
    --bg:#0b1220;
    --panel:#111827;
    --panel-2:#182338;
    --border:rgba(255,255,255,0.08);
    --text:#eaf1ff;
    --muted:#9fb0cc;
    --accent:#59c3ff;
    --accent-2:#7ee787;
    --shadow:0 18px 40px rgba(0,0,0,.28);
  }

  *{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(126,231,135,.08), transparent 22%),
    linear-gradient(180deg, #08101d 0%, var(--bg) 100%);
  color:var(--text);
}


  .sky-animation{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
  }

  .stars{
    position:absolute;
    inset:0;
    opacity:.55;
    background-image:
      radial-gradient(circle at 7% 12%, rgba(255,255,255,.85) 1px, transparent 1.7px),
      radial-gradient(circle at 18% 38%, rgba(255,255,255,.38) 1px, transparent 1.6px),
      radial-gradient(circle at 31% 18%, rgba(89,195,255,.45) 1px, transparent 1.7px),
      radial-gradient(circle at 43% 52%, rgba(255,255,255,.24) 1px, transparent 1.5px),
      radial-gradient(circle at 56% 26%, rgba(126,231,135,.28) 1px, transparent 1.6px),
      radial-gradient(circle at 68% 64%, rgba(255,255,255,.34) 1px, transparent 1.6px),
      radial-gradient(circle at 76% 16%, rgba(255,255,255,.55) 1px, transparent 1.7px),
      radial-gradient(circle at 87% 44%, rgba(89,195,255,.32) 1px, transparent 1.6px),
      radial-gradient(circle at 94% 77%, rgba(255,255,255,.42) 1px, transparent 1.6px),
      radial-gradient(circle at 12% 82%, rgba(255,255,255,.26) 1px, transparent 1.5px),
      radial-gradient(circle at 25% 69%, rgba(255,255,255,.18) 1px, transparent 1.4px),
      radial-gradient(circle at 37% 89%, rgba(126,231,135,.22) 1px, transparent 1.5px),
      radial-gradient(circle at 51% 78%, rgba(255,255,255,.30) 1px, transparent 1.6px),
      radial-gradient(circle at 61% 9%, rgba(255,255,255,.20) 1px, transparent 1.4px),
      radial-gradient(circle at 82% 91%, rgba(255,255,255,.28) 1px, transparent 1.5px);
  }

  .earth-horizon{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.95;
    overflow:hidden;

   background: url("./images/earth-horizon.webp") no-repeat center center;
    background-size:cover;
  }

  .earth-horizon::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
      to top,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.10) 38%,
      rgba(0,0,0,0.55) 72%,
      rgba(0,0,0,0.86) 100%
    );
  }

  .earth-horizon::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, #08101d 0%, rgba(8,16,29,.80) 10%, rgba(8,16,29,.28) 24%, transparent 44%),
      linear-gradient(180deg, transparent 0%, rgba(8,16,29,.12) 65%, rgba(8,16,29,.72) 100%);
    pointer-events:none;
  }

  .earth-horizon::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(8,16,29,.50), transparent 18%, transparent 82%, rgba(8,16,29,.50));
    pointer-events:none;
  }

  @media (max-width: 700px){
    .earth-horizon{
      height:36vh;
      min-height:260px;
      background-size:cover;
      background-position:center bottom;
    }
  }



  @media (prefers-reduced-motion: reduce){
    .satellite{display:none;}
  }

.wrap{
  position:relative;
  z-index:1;
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:28px 20px 40px;
  flex:1;
}

  .card{
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:22px;
  }

  .eyebrow{
    color:var(--accent-2);
    text-transform:none;
    letter-spacing:.12em;
    font-size:clamp(1.15rem, 2.2vw, 1.65rem);
    font-weight:800;
    margin-bottom:12px;
  }

  .hero-actions{
    margin-top:20px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:14px;
    padding:13px 16px;
    font-weight:700;
  }

  .btn-primary{
    background:linear-gradient(180deg, #59c3ff, #2b95ff);
    color:#051321;
  }
.btn{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    filter .18s ease;
}

.btn-primary{
  border:1px solid rgba(126,231,255,.22);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.btn-primary:hover,
.btn-primary:focus-visible{
  transform:translateY(-2px);
  background:linear-gradient(180deg, #7ed8ff, #319dff);
  border-color:rgba(126,231,255,.65);
  box-shadow:
    0 0 0 1px rgba(126,231,255,.18),
    0 12px 28px rgba(0,0,0,.28),
    0 0 18px rgba(89,195,255,.22);
  filter:brightness(1.04);
  outline:none;
}

.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}

  .btn-secondary{
    background:var(--panel-2);
    color:var(--text);
    border:1px solid var(--border);
  }

  .section-title{
    margin:20px 0 12px;
  }

  .grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }

  .resource-card h3{
    margin:0 0 14px;
    font-size:1.1rem;
  }

  .links{
    display:grid;
    gap:10px;
  }

  .link{
    display:flex;
    justify-content:space-between;
    text-decoration:none;
    color:var(--text);
    background:var(--panel-2);
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px 14px;
  }

  .link small{
    display:block;
    color:var(--muted);
  }

  .private-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
  }

  .brand-row{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .tagline{
    color:var(--muted);
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:5px 10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    background:rgba(255,255,255,.035);
  }
.footer,
.site-footer{
  position:relative;
  z-index:2;
  margin-top:auto;
  padding:0.45rem 1rem;
  text-align:center;
  font-size:0.7rem;
  color:#ffffff;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
}

.footer a,
.site-footer a{
  color:#ffffff;
  text-decoration:none;
  font-weight:600;
}

.footer a:hover,
.site-footer a:hover{
  text-decoration:underline;
}

  .hero-card{
    position:relative;
  }

  .hero-main{
    display:flex;
    justify-content:space-between;
    gap:22px;
    align-items:flex-start;
  }

  .hero-private{
    min-width:300px;
    max-width:440px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(24,35,56,.54);
  }

  .hero-private-title{
    color:var(--muted);
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:10px;
  }

  @media (max-width: 900px){
    .hero-main{
      flex-direction:column;
    }

    .hero-private{
      min-width:0;
      max-width:none;
      width:100%;
    }
  }


  .iss-display{
    position:fixed;
    z-index:0;
    left:-340px;
    bottom:92px;
    width:300px;
    height:95px;
    opacity:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    perspective:900px;
    animation:issLowerTransit 110s linear infinite -38s;
  }

  .iss-model{
    width:min(32vw, 170px);
    height:auto;
    filter:drop-shadow(0 0 8px rgba(89,195,255,.22)) drop-shadow(0 10px 18px rgba(0,0,0,.32));
    transform-origin:center;
  }

  .iss-label{
    display:none;
  }

  @keyframes issLowerTransit{
    0%{opacity:0; transform:translate3d(-60px, 0, 0) rotateX(8deg) rotateZ(-5deg) scale(.78);}
    10%{opacity:.66;}
    78%{opacity:.66;}
    100%{opacity:0; transform:translate3d(calc(100vw + 520px), -90px, 0) rotateX(8deg) rotateZ(-5deg) scale(.78);}
  }

  @media (max-width: 900px){
    .grid{grid-template-columns:1fr}
  }

  .satellite{
    position:fixed;
    z-index:0;
    left:-120px;
    top:var(--sat-top, 24vh);
    width:54px;
    height:22px;
    opacity:0;
    pointer-events:auto;
    cursor:pointer;
    transform-origin:center;
    animation:satelliteTransit var(--sat-duration, 105s) linear infinite;
    animation-delay:var(--sat-delay, -20s);
    filter:drop-shadow(0 0 8px rgba(89,195,255,.24));
  }

  .satellite .body{
    position:absolute;
    left:19px;
    top:6px;
    width:16px;
    height:10px;
    border-radius:999px;
    background:linear-gradient(135deg,#eef7ff,#8aa4bd 70%,#324256);
    border:1px solid rgba(234,241,255,.6);
    box-shadow:0 0 8px rgba(89,195,255,.32);
    transition:transform .28s ease,filter .28s ease;
  }

  .satellite .body::before,
  .satellite .body::after{
    content:"";
    position:absolute;
    top:3px;
    width:17px;
    height:5px;
    border-radius:2px;
    background:linear-gradient(135deg,#123557,#59c3ff 55%,#0b2038);
    border:1px solid rgba(185,232,255,.36);
  }

  .satellite .body::before{right:19px;transform:skewY(-8deg);}
  .satellite .body::after{left:19px;transform:skewY(8deg);}

  .satellite::after{
    content:"";
    position:absolute;
    right:48px;
    top:10px;
    width:44px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(89,195,255,.38));
    opacity:.42;
  }

  .satellite:hover .body,
  .satellite:focus-visible .body{
    transform:scale(1.28) rotate(14deg);
    filter:brightness(1.25);
  }

  .satellite.is-jinking{
    animation-name:satelliteTransit,satelliteJink;
    animation-duration:var(--sat-duration,105s),.9s;
    animation-timing-function:linear,ease-in-out;
    animation-iteration-count:infinite,1;
  }

  .sat-2{--sat-duration:118s;}
  .sat-3{--sat-duration:94s;}
  .sat-4{--sat-duration:126s;}
  .sat-5{--sat-duration:88s;}
  .sat-6{--sat-duration:112s;}

  @keyframes satelliteTransit{
    0%{opacity:0;transform:translate3d(-80px,0,0) rotate(-9deg) scale(var(--sat-scale,.9));}
    8%{opacity:.58;}
    82%{opacity:.58;}
    100%{opacity:0;transform:translate3d(calc(100vw + 220px),var(--sat-rise,-110px),0) rotate(-9deg) scale(var(--sat-scale,.9));}
  }

  @keyframes satelliteJink{0%{margin-top:0;}30%{margin-top:-34px;}60%{margin-top:18px;}100%{margin-top:0;}}


  .iss-display{
    bottom:var(--iss-bottom, 92px) !important;
    pointer-events:auto !important;
    cursor:pointer;
    animation:issLowerTransit 110s linear infinite !important;
    animation-delay:var(--iss-delay, -38s) !important;
  }

  .iss-model{
    transition:transform .28s ease, filter .28s ease;
  }

  .iss-display:hover .iss-model,
  .iss-display:focus-visible .iss-model{
    transform:scale(1.12) rotateZ(8deg);
    filter:drop-shadow(0 0 14px rgba(126,231,135,.34)) drop-shadow(0 12px 22px rgba(0,0,0,.38));
  }

  .iss-display.is-jinking{
    animation-name:issLowerTransit, satelliteJink !important;
    animation-duration:110s, .9s !important;
    animation-timing-function:linear, ease-in-out !important;
    animation-iteration-count:infinite, 1 !important;
  }

/* SpaceOpsLab brand header + animated orbit icon */
.site-mark{
  display:inline-flex;
  width:1.25em;
  height:1.25em;
  margin-right:.42em;
  vertical-align:-.22em;
  flex:0 0 auto;
  filter:drop-shadow(0 0 8px rgba(126,231,135,.25));
}

.site-mark svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.eyebrow{
  display:flex;
  align-items:center;
  color:var(--accent-2);
  text-transform:none;
  letter-spacing:.035em;
  font-size:clamp(1.15rem, 2.2vw, 1.65rem);
  font-weight:800;
  margin-bottom:12px;
}

.brand-space,
.brand-lab{
  color:#7ee787;
  font-weight:900;
}

.brand-ops{
  color:#9ad7ff;
  font-weight:850;
}

.orbit-logo{
  overflow:visible;
}

.orbit-radiation{
  opacity:0;
  stroke:#7ee787;
  stroke-width:3.2;
  stroke-linecap:round;
  fill:none;
  transform-origin:76px 43px;
  filter:drop-shadow(0 0 8px rgba(126,231,135,.45));
}

.orbit-radiation-1{
  animation:orbitRadiationPulse 5.5s ease-out .8s infinite;
}

.orbit-radiation-2{
  animation:orbitRadiationPulse 5.5s ease-out 1.25s infinite;
}

@keyframes orbitRadiationPulse{
  0%{
    opacity:0;
    transform:scale(.72);
  }
  10%{
    opacity:.95;
    transform:scale(1.02);
  }
  22%{
    opacity:0;
    transform:scale(1.35);
  }
  100%{
    opacity:0;
    transform:scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce){
  .orbit-radiation-1,
  .orbit-radiation-2{
    animation:none !important;
    opacity:0 !important;
  }
}