/* ============ ALIEN IT SOLUTIONS — shared styles ============ */
/* Self-hosted variable fonts — zero third-party requests */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-var.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonts/space-grotesk-var.woff2') format('woff2');
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#05060f;
  --bg-2:#0a0d1f;
  --bg-3:#10142b;
  --ink:#e8ecf8;
  --ink-dim:#9aa3c0;
  --accent:#4D8DFF;
  --accent-dim:rgba(77,141,255,.16);
  --cyan:#5BE8FF;
  --violet:#9D7BFF;
  --card:rgba(255,255,255,.04);
  --card-edge:rgba(255,255,255,.09);
  --radius:18px;
  --teal:#00B0C8;
  --font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#051129}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* ============ GRAIN ============ */
.grain{position:fixed;inset:-100%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grain 9s steps(8) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}}

/* ============ STARFIELD + AURORA ============ */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity 1.2s ease}
#stars.calm{opacity:.4}
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora::before,.aurora::after{
  content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;
  filter:blur(90px);opacity:.10;
}
.aurora::before{background:radial-gradient(circle,var(--violet),transparent 60%);top:-25vmax;right:-18vmax}
.aurora::after{background:radial-gradient(circle,var(--cyan),transparent 60%);bottom:-28vmax;left:-20vmax}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,4vw,48px);
  background:rgba(5,6,15,0);
  transition:background .35s,backdrop-filter .35s,box-shadow .35s;
}
.nav.scrolled{
  background:rgba(5,6,15,.8);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.4px;font-size:1.02rem;white-space:nowrap}
.brand-mark{width:38px;height:27px;flex:none}
.brand span em{font-style:normal;color:var(--teal)}
.brand .brand-mark{filter:drop-shadow(0 0 10px rgba(0,176,200,.35))}
.nav-links{display:flex;gap:clamp(14px,2.5vw,34px);list-style:none;align-items:center}
.nav-links a{text-decoration:none;color:var(--ink-dim);font-size:.92rem;font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--accent)}
.nav-cta{
  color:#051129!important;background:var(--accent);padding:8px 18px;border-radius:99px;font-weight:700;
  white-space:nowrap;box-shadow:0 0 18px rgba(77,141,255,.35);
  transition:transform .2s,box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 28px rgba(77,141,255,.55)}
.nav-burger{
  display:none;background:none;border:1px solid var(--card-edge);border-radius:10px;
  width:42px;height:38px;cursor:pointer;color:var(--ink);
  align-items:center;justify-content:center;
}
.nav-burger svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:760px){
  .nav-burger{display:flex}
  .nav-links{
    position:fixed;top:62px;right:12px;left:12px;z-index:49;
    flex-direction:column;gap:4px;align-items:stretch;
    background:rgba(8,10,24,.97);border:1px solid var(--card-edge);border-radius:16px;
    padding:12px;display:none;box-shadow:0 18px 50px rgba(0,0,0,.6);
  }
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:12px 14px;border-radius:10px;font-size:1rem}
  .nav-links a:hover{background:rgba(255,255,255,.05)}
  .nav-links .nav-cta{text-align:center;margin-top:6px}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:.98rem;
  padding:14px 30px;border-radius:99px;transition:transform .2s,box-shadow .2s,background .2s;
}
.btn-primary{background:var(--accent);color:#051129;box-shadow:0 0 24px rgba(77,141,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(77,141,255,.6)}
.btn-ghost{border:1px solid rgba(255,255,255,.22);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ============ HOME HERO (UFO arrival) ============ */
.hero{
  position:relative;z-index:1;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding:110px 20px 16vh;
}
.hero-copy{position:relative;z-index:3;text-align:center;will-change:transform,opacity}
.hero-ufo{
  width:clamp(210px,26vw,330px);margin:0 auto 0;
  filter:drop-shadow(0 0 36px rgba(77,141,255,.4));
  animation:ufoArrive 1.7s cubic-bezier(.22,.9,.32,1.04) both;
}
.hero-ufo .ufo-bob{animation:none;will-change:transform}
.hero-ufo .beam{opacity:0;animation:beamIn 1s ease 1.55s forwards}
@keyframes ufoArrive{
  0%{transform:translateY(-72vh) translateX(6vw) rotate(-5deg) scale(.62);opacity:0}
  35%{opacity:1}
  72%{transform:translateY(3vh) translateX(-1vw) rotate(2deg) scale(1.02)}
  100%{transform:translateY(0) translateX(0) rotate(0deg) scale(1)}
}
@keyframes beamIn{to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes hintIn{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}
.hero .hero-kicker{animation:riseIn .85s ease .7s both}
.hero h1 .glow,
.hero h1{animation:riseIn .85s ease .85s both}
.hero .hero-sub{animation:riseIn .85s ease 1.05s both}
.hero .hero-actions{animation:riseIn .85s ease 1.25s both}
.hero-kicker{
  display:inline-block;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(77,141,255,.35);border-radius:99px;
  padding:7px 18px;margin-bottom:22px;background:var(--accent-dim);
}
.hero h1{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,5rem);line-height:1.04;font-weight:700;letter-spacing:-.02em;max-width:16ch;margin:0 auto}
.hero h1 .glow,.grad{
  background:linear-gradient(92deg,var(--accent) 0%,var(--cyan) 55%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin:22px auto 0;max-width:54ch;color:var(--ink-dim);font-size:clamp(1rem,1.6vw,1.18rem)}
.hero-actions{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ufo-bob{animation:bob 4.5s ease-in-out infinite;will-change:transform}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.beam{transform-origin:50% 0;will-change:opacity}
.ufo-lights circle{animation:chase 2.1s linear infinite}
.ufo-lights circle:nth-child(2){animation-delay:.25s}
.ufo-lights circle:nth-child(3){animation-delay:.5s}
.ufo-lights circle:nth-child(4){animation-delay:.75s}
.ufo-lights circle:nth-child(5){animation-delay:1s}
.ufo-lights circle:nth-child(6){animation-delay:1.25s}
.ufo-lights circle:nth-child(7){animation-delay:1.5s}
.beacon{animation:blink 1.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.ground{
  position:absolute;bottom:0;left:0;right:0;z-index:1;height:18vh;pointer-events:none;
  background:linear-gradient(to top,#03040a 30%,transparent);
}
.skyline{position:absolute;bottom:0;left:0;right:0;width:100%;height:auto;opacity:.9}
.scroll-hint{
  animation:hintIn .85s ease 1.9s both;
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;
  color:var(--ink-dim);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;will-change:opacity;
}
.scroll-hint::after{
  content:"";width:1px;height:38px;
  background:linear-gradient(to bottom,var(--accent),transparent);
  animation:drip 1.8s ease-in-out infinite;
}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ============ PAGE HERO (sub-pages) ============ */
.page-hero{
  position:relative;z-index:2;
  padding:clamp(150px,20vh,210px) clamp(20px,6vw,72px) clamp(50px,7vw,80px);
  max-width:1280px;margin:0 auto;
}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,5.4vw,3.8rem);font-weight:700;letter-spacing:-.02em;line-height:1.08;max-width:20ch}
.breadcrumb{list-style:none;display:flex;gap:8px;color:var(--ink-dim);font-size:.84rem;margin-bottom:18px}
.breadcrumb a{color:var(--ink-dim);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb li+li::before{content:"›";margin-right:8px;opacity:.5}

/* ============ SECTIONS ============ */
main{position:relative;z-index:2}
section{position:relative}
.section{padding:clamp(80px,11vw,140px) clamp(20px,6vw,72px);max-width:1280px;margin:0 auto}
.section.tight{padding-top:clamp(30px,4vw,50px)}
.sec-kicker{color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:14px}
.sec-title{font-family:var(--font-display);font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.12;max-width:24ch}
.sec-lead{margin-top:18px;color:var(--ink-dim);max-width:64ch;font-size:1.06rem}
html.js .reveal{opacity:0;transform:translateY(30px) scale(.986);filter:blur(7px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .7s ease}
html.js .reveal.in{opacity:1;transform:none;filter:none}

/* ============ MARQUEE ============ */
.marquee{
  position:relative;z-index:2;overflow:hidden;padding:18px 0;
  border-top:1px solid rgba(77,141,255,.16);border-bottom:1px solid rgba(77,141,255,.16);
  background:rgba(77,141,255,.03);
}
.marquee-track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:marq 36s linear infinite}
.marquee span{
  display:inline-block;padding:0 26px;color:var(--ink-dim);font-size:.88rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
.marquee span::after{content:"✦";color:var(--accent);margin-left:52px;opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ============ SERVICE CARDS ============ */
.svc-grid{margin-top:56px;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(265px,1fr))}
.svc{
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius);
  padding:28px 26px;position:relative;overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
  text-decoration:none;display:block;color:inherit;
}
.svc:hover{border-color:rgba(77,141,255,.45);background:rgba(77,141,255,.05)}
.svc::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(77,141,255,.09),transparent 45%);
  opacity:0;transition:opacity .3s;
}
.svc:hover::before{opacity:1}
.svc-icon{
  width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(77,141,255,.16),rgba(91,232,255,.12));
  border:1px solid rgba(77,141,255,.3);flex:none;
}
.svc-icon svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-family:var(--font-display);font-size:1.08rem;font-weight:700;margin-bottom:8px}
.svc p{color:var(--ink-dim);font-size:.92rem}
.svc-tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.svc-tags li{
  font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--ink-dim);
  border:1px solid var(--card-edge);border-radius:99px;padding:3px 11px;
  background:rgba(255,255,255,.03);
}
.svc .more{display:inline-block;margin-top:14px;color:var(--accent);font-size:.85rem;font-weight:700}

/* detailed service rows (services page) */
.svc-detail{
  display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start;
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius);
  padding:clamp(24px,3.5vw,38px);margin-top:20px;scroll-margin-top:96px;
}
.svc-detail .svc-icon{width:56px;height:56px;margin:0}
.svc-detail h2{font-size:1.3rem;margin-bottom:8px}
.svc-detail p{color:var(--ink-dim)}
.svc-detail ul{list-style:none;margin-top:14px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.svc-detail li{display:flex;gap:9px;color:var(--ink-dim);font-size:.92rem}
.svc-detail li::before{content:"✦";color:var(--accent);flex:none;margin-top:1px}
@media (max-width:560px){.svc-detail{grid-template-columns:1fr}}

/* ============ STATS ============ */
.stats{margin-top:70px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat{text-align:center;background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius);padding:30px 16px}
.stat b{
  display:block;font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;
  background:linear-gradient(92deg,var(--accent),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat span{color:var(--ink-dim);font-size:.86rem;letter-spacing:.06em;text-transform:uppercase}

/* ============ PROCESS ============ */
.process{margin-top:56px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{
  position:relative;background:var(--card);border:1px solid var(--card-edge);
  border-radius:var(--radius);padding:30px 26px 26px;
}
.step h3{font-size:1.05rem;margin-bottom:8px}
.step p{color:var(--ink-dim);font-size:.92rem}

/* ============ ABOUT / VALUES ============ */
.about-grid{margin-top:48px;display:grid;gap:48px;grid-template-columns:1.15fr .85fr;align-items:start}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}
.about-grid p{color:var(--ink-dim);margin-bottom:18px}
.about-grid p strong{color:var(--ink)}
.about-card{
  background:linear-gradient(160deg,rgba(77,141,255,.07),rgba(91,232,255,.05));
  border:1px solid rgba(77,141,255,.25);border-radius:var(--radius);padding:34px 30px;
}
.about-card h2,.about-card h3{font-size:1.2rem;margin-bottom:6px}
.about-card .role{color:var(--accent);font-size:.86rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.about-card p{font-size:.95rem}
.about-card a{color:var(--cyan);text-decoration:none;font-weight:600}
.about-card a:hover{text-decoration:underline}
.ticks{list-style:none;margin-top:20px;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-dim);font-size:.94rem}
.ticks li::before{content:"✦";color:var(--accent);flex:none;margin-top:1px}
.values{margin-top:56px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.value{background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius);padding:28px 26px}
.value h3{font-size:1.05rem;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.value h3::before{content:"✦";color:var(--accent)}
.value p{color:var(--ink-dim);font-size:.93rem}

/* ============ FAQ ============ */
.faq{margin-top:48px;display:grid;gap:12px;max-width:860px}
.faq details{
  background:var(--card);border:1px solid var(--card-edge);border-radius:14px;
  padding:0;overflow:hidden;transition:border-color .25s;
}
.faq details[open]{border-color:rgba(77,141,255,.4)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 24px;font-weight:600;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.5rem;font-weight:400;flex:none;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 22px;color:var(--ink-dim);font-size:.95rem}
.faq .a a{color:var(--cyan)}

/* ============ CTA BAND ============ */
.cta-band{
  position:relative;z-index:2;max-width:1280px;
  margin:0 auto;padding:0 clamp(20px,6vw,72px) clamp(80px,10vw,120px);
}
.cta-inner{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(150deg,rgba(77,141,255,.1),rgba(91,232,255,.07) 50%,rgba(157,123,255,.09));
  border:1px solid rgba(77,141,255,.3);border-radius:26px;
  padding:clamp(46px,7vw,80px) clamp(22px,5vw,60px);
}
.cta-inner h2{font-family:var(--font-display);font-size:clamp(1.7rem,3.8vw,2.7rem);font-weight:700;letter-spacing:-.02em;max-width:24ch;margin:0 auto}
.cta-inner p{color:var(--ink-dim);margin:16px auto 30px;max-width:52ch}
.cta-ufo{width:74px;margin:0 auto 18px;filter:drop-shadow(0 0 18px rgba(77,141,255,.45));animation:bob 4.5s ease-in-out infinite}

/* ============ CONTACT ============ */
.contact-grid{margin-top:52px;display:grid;gap:40px;grid-template-columns:.9fr 1.1fr}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.c-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px}
.c-item .svc-icon{margin:0;flex:none}
.c-item h3{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:3px}
.c-item a,.c-item p{font-size:1.06rem;font-weight:600;color:var(--ink);text-decoration:none}
.c-item a:hover{color:var(--accent)}
.c-item small{display:block;color:var(--ink-dim);font-weight:400;font-size:.85rem;margin-top:2px}
form{display:grid;gap:14px}
.f-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.f-row{grid-template-columns:1fr}}
input,textarea,select{
  width:100%;background:rgba(255,255,255,.045);border:1px solid var(--card-edge);
  border-radius:12px;padding:14px 16px;color:var(--ink);font-family:inherit;font-size:.95rem;
  transition:border-color .2s,background .2s;
}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);background-position:calc(100% - 21px) 50%,calc(100% - 16px) 50%;background-size:5px 5px;background-repeat:no-repeat}
select option{background:var(--bg-3);color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);background:rgba(77,141,255,.05)}
input::placeholder,textarea::placeholder{color:#8a93b5}
form .btn-primary{border:0;cursor:pointer;justify-self:start;font-family:inherit}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid rgba(255,255,255,.07);
  position:relative;z-index:2;background:rgba(3,4,10,.7);
}
.foot-grid{
  max-width:1280px;margin:0 auto;
  padding:clamp(44px,6vw,64px) clamp(20px,6vw,72px) 30px;
  display:grid;gap:38px;grid-template-columns:1.4fr 1fr 1fr 1.2fr;
}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h3{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.foot-grid ul{list-style:none;display:grid;gap:9px}
.foot-grid a{color:var(--ink-dim);text-decoration:none;font-size:.92rem}
.foot-grid a:hover{color:var(--accent)}
.foot-grid p{color:var(--ink-dim);font-size:.92rem}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:14px}
.foot-brand em{font-style:normal;color:var(--accent)}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding:20px clamp(20px,6vw,72px);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  color:#7e88a9;font-size:.82rem;
  max-width:1280px;margin:0 auto;
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ufo-bob,.scroll-hint::after,.ufo-lights circle,.marquee-track,.cta-ufo,.grain,.beacon{animation:none}
  .nebula::before,.nebula::after{animation:none}
  .btn-primary::after{display:none}
  .hero-ufo,.hero h1,.hero .hero-sub,.hero .hero-actions,.scroll-hint{animation:none}
  .hero-ufo .beam{opacity:1;animation:none}
  .beam-sweep,.beam-impact,.bd,.eyes,.ufo-shadowglow,.ground::before{animation:none}
  .bd{opacity:.5}
  html.js .reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none}
}


/* ============ PRICE TABLE ============ */
.price-table{
  margin-top:44px;border:1px solid var(--card-edge);border-radius:var(--radius);
  overflow:hidden;background:var(--card);
}
.price-row{
  display:grid;grid-template-columns:1.6fr .6fr 1fr;gap:14px;align-items:baseline;
  padding:17px 24px;border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .2s;
}
.price-row:last-child{border-bottom:0}
.price-row:hover{background:rgba(77,141,255,.05)}
.pr-item{font-weight:600;font-size:.97rem}
.pr-price{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;white-space:nowrap;
  color:var(--cyan);
}
.pr-note{color:var(--ink-dim);font-size:.85rem;text-align:right}
@media (max-width:680px){
  .price-row{grid-template-columns:1fr auto}
  .pr-note{grid-column:1 / -1;text-align:left;margin-top:2px}
}
.price-foot{margin-top:18px;color:var(--ink-dim);font-size:.88rem;max-width:70ch}

/* ============ SCROLL PROGRESS ============ */
#progressBar{
  position:fixed;top:0;left:0;height:2.5px;width:0;z-index:70;pointer-events:none;
  background:linear-gradient(90deg,var(--teal),var(--accent),var(--violet));
  box-shadow:0 0 12px rgba(77,141,255,.7);
}

/* ============ HERO SCENE: planet + nebula ============ */
.planet{
  transition:transform .8s cubic-bezier(.22,1,.36,1);
  position:absolute;z-index:1;top:9%;right:6%;
  width:clamp(90px,11vw,170px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#3d5a8f 0%,#22335c 42%,#0c1430 78%,#070c1e 100%);
  box-shadow:inset -14px -10px 34px rgba(0,0,0,.75), 0 0 44px rgba(77,141,255,.18);
  will-change:transform;
}
.planet::before{
  content:"";position:absolute;inset:-26% -34%;border-radius:50%;
  border:2px solid rgba(0,176,200,.3);
  border-left-color:rgba(0,176,200,.05);border-right-color:rgba(91,232,255,.45);
  transform:rotate(-18deg) scaleY(.32);
}
.planet::after{
  content:"";position:absolute;left:18%;top:24%;width:22%;height:22%;border-radius:50%;
  background:rgba(255,255,255,.06);
  box-shadow:34% 60% 0 -2px rgba(255,255,255,.05), -8% 100% 0 -4px rgba(255,255,255,.045);
}
@media (max-width:760px){.planet{top:6%;right:-4%}}
.nebula{
  position:absolute;z-index:0;inset:0;pointer-events:none;overflow:hidden;
}
.nebula::before,.nebula::after{
  content:"";position:absolute;width:44vmax;height:44vmax;border-radius:50%;
  filter:blur(110px);opacity:.13;will-change:transform;
}
.nebula::before{background:radial-gradient(circle,#2a4fa0,transparent 60%);top:-12vmax;left:-10vmax;animation:neb1 26s ease-in-out infinite alternate}
.nebula::after{background:radial-gradient(circle,#16b8d8,transparent 65%);bottom:-16vmax;right:-12vmax;animation:neb2 32s ease-in-out infinite alternate}
@keyframes neb1{to{transform:translate(7vmax,4vmax) scale(1.12)}}
@keyframes neb2{to{transform:translate(-6vmax,-5vmax) scale(1.08)}}

/* ============ 3D TILT CARDS ============ */
@media (hover:hover) and (pointer:fine){
  .svc{
    transform:perspective(820px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
    transition:transform .18s ease-out,border-color .25s ease,background .25s ease;
  }
  .svc:hover{--ty:-5px}
  .svc:hover .svc-icon{transform:translateY(-3px) rotate(-5deg) scale(1.06)}
  .svc-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .value,.step,.stat{transition:transform .25s ease,border-color .25s ease}
  .value:hover,.step:hover,.stat:hover{transform:translateY(-4px);border-color:rgba(77,141,255,.4)}
}

/* ============ BUTTON SHINE + MAGNETIC ============ */
.btn-primary{position:relative;overflow:hidden;will-change:transform}
.btn-primary::after{
  content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-22deg);transition:left .55s ease;
}
.btn-primary:hover::after{left:130%}

/* ============ BEAM SHIMMER ============ */
.hero-ufo .beam{opacity:0;animation:beamIn 1s ease 1.55s forwards,beamPulse 5.5s ease-in-out 3.2s infinite}
@keyframes beamPulse{0%,100%{opacity:1}50%{opacity:.66}}

/* ============ MARQUEE EDGE FADE ============ */
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

/* reveal stagger handled by JS via transition-delay */
html.js .reveal.in{transition-delay:var(--rd,0s)}


/* ============ POLISH PASS ============ */
/* keyboard focus — brand-visible, never removed */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.nav-cta:focus-visible{outline-offset:4px;border-radius:99px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:1px;border-radius:12px}

/* typographic wrapping */
h1,h2,h3{text-wrap:balance}
.sec-lead,.hero-sub,.price-foot,.svc-detail p,.faq .a{text-wrap:pretty}

/* form error + press states */
input:user-invalid,textarea:user-invalid{border-color:#ff8a8a}
.btn:active{transform:scale(.97)}

/* touch targets */
.foot-grid a{display:inline-block;padding:3px 0}
.breadcrumb a{display:inline-block;padding:2px 0}
.faq summary{min-height:44px}
.faq summary:hover{color:var(--cyan)}

/* skip link */
.skip-link{
  position:fixed;top:-60px;left:16px;z-index:80;
  background:var(--accent);color:#051129;font-weight:700;text-decoration:none;
  padding:10px 18px;border-radius:0 0 12px 12px;transition:top .2s ease;
}
.skip-link:focus-visible{top:0}

/* prevent iOS zoom-on-focus (needs >=16px inputs) */
@media (max-width:760px){
  input,textarea,select{font-size:1rem}
}


/* ============ RELATED SERVICES + UTILITIES ============ */
.related{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.related a{
  display:inline-block;padding:11px 20px;border-radius:99px;text-decoration:none;
  border:1px solid var(--card-edge);color:var(--ink-dim);font-size:.92rem;font-weight:600;
  transition:border-color .2s,color .2s,transform .2s;
}
.related a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap;
}


/* ============ UFO 2.0 ============ */
@keyframes chase{0%,28%,100%{opacity:.3}8%{opacity:1}}
@keyframes bobsway{
  0%,100%{transform:translateY(0) rotate(0deg)}
  28%{transform:translateY(-9px) rotate(1.1deg)}
  50%{transform:translateY(-14px) rotate(0deg)}
  72%{transform:translateY(-9px) rotate(-1.1deg)}
}
.ufo-shadowglow{opacity:.6;animation:gravPulse 3.6s ease-in-out infinite}
@keyframes gravPulse{0%,100%{opacity:.5}50%{opacity:.8}}
.beam-sweep{animation:beamSweep 3.6s linear infinite;will-change:transform}
@keyframes beamSweep{from{transform:translateY(40px)}to{transform:translateY(370px)}}
.beam-impact{transform-box:fill-box;transform-origin:center;animation:impactPulse 3.6s ease-in-out infinite}
@keyframes impactPulse{0%,100%{opacity:.55;transform:scaleX(.96)}50%{opacity:1;transform:scaleX(1.05)}}
.bd{animation:dustRise 6s ease-out infinite;will-change:transform,opacity;opacity:0}
.bd:nth-child(1){animation-delay:0s}
.bd:nth-child(2){animation-delay:1.1s;animation-duration:7s}
.bd:nth-child(3){animation-delay:2.3s}
.bd:nth-child(4){animation-delay:3.1s;animation-duration:7.5s}
.bd:nth-child(5){animation-delay:4s}
.bd:nth-child(6){animation-delay:4.9s;animation-duration:6.6s}
.bd:nth-child(7){animation-delay:5.6s}
@keyframes dustRise{
  0%{transform:translateY(0);opacity:0}
  10%{opacity:.9}
  80%{opacity:.45}
  100%{transform:translateY(-235px);opacity:0}
}
.eyes{transform-box:fill-box;transform-origin:center;animation:alienBlink 6.4s ease-in-out 3s infinite}
@keyframes alienBlink{0%,93.5%,100%{transform:scaleY(1)}96%{transform:scaleY(.06)}98.5%{transform:scaleY(1)}}
.eyes-track{will-change:transform;transition:transform .3s ease-out}

/* hero atmosphere */
.hero h1 .glow{filter:drop-shadow(0 0 26px rgba(77,141,255,.38))}
.hero-kicker{box-shadow:0 0 38px rgba(77,141,255,.26),0 0 90px rgba(77,141,255,.1)}
.ground::before{
  content:"";position:absolute;left:50%;bottom:-55%;transform:translateX(-50%);
  width:150%;height:130%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(0,176,200,.13),transparent 62%);
  animation:horizonPulse 9s ease-in-out infinite;
}
@keyframes horizonPulse{0%,100%{opacity:.7}50%{opacity:1}}


/* ============ FLIGHT-PLAN STEPS (iconed, numberless) ============ */
.step .svc-icon{margin-bottom:18px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.step:hover .svc-icon{transform:translateY(-3px) scale(1.07)}
@media (min-width:1180px){
  .step + .step::before{
    content:"";position:absolute;top:52px;left:-18px;width:18px;
    border-top:2px dashed rgba(77,141,255,.4);
  }
  .process .step:last-child::after{
    content:"\1F6F8";position:absolute;top:38px;right:18px;font-size:1.1rem;opacity:.5;
  }
}


/* ============ COOLER TRANSITIONS ============ */

/* --- cross-document page warp (Chrome/Edge/Safari TP; silent no-op elsewhere) --- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:pageOut .34s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation:pageIn .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes pageOut{ to{ opacity:0; transform:translateY(-14px) scale(.99); filter:blur(4px); } }
@keyframes pageIn{ from{ opacity:0; transform:translateY(22px) scale(.99); filter:blur(6px); } }
/* the cockpit stays put while the view warps behind it */
#nav{ view-transition-name:vt-nav; }
#stars{ view-transition-name:vt-stars; }
.aurora{ view-transition-name:vt-aurora; }
footer{ view-transition-name:vt-foot; }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* --- directional reveals: the two-column blocks slide in from opposite sides --- */
html.js .about-grid > .reveal:first-child{transform:translateX(-38px)}
html.js .about-grid > .about-card.reveal{transform:translateX(38px) scale(.986)}
html.js .contact-grid > .reveal:first-child{transform:translateX(-30px);filter:none}
html.js .contact-grid > form.reveal{transform:translateX(30px);filter:none}
/* revealed state MUST reset the directional shift — these are MORE specific than the
   initial-state selectors above, so the block returns to place instead of staying
   shifted (the -38px was clipping the first characters off the left on mobile). */
html.js .about-grid > .reveal:first-child.in,
html.js .about-grid > .about-card.reveal.in,
html.js .contact-grid > .reveal:first-child.in,
html.js .contact-grid > form.reveal.in{transform:none}
/* single-column mobile: no horizontal slide at all — vertical reveal only, so
   nothing can ever be pushed past the left edge mid-animation. */
@media (max-width:900px){
  html.js .about-grid > .reveal:first-child,
  html.js .about-grid > .about-card.reveal,
  html.js .contact-grid > .reveal:first-child,
  html.js .contact-grid > form.reveal{transform:translateY(30px) scale(.986)}
  html.js .price-table .price-row{transform:translateY(12px)}
}

/* --- section titles wipe up from a clip instead of fading --- */
html.js .sec-title.reveal,html.js .page-hero h1{filter:none}

/* --- price tables: plain lift, rows then cascade in --- */
html.js .price-table.reveal{filter:none;transform:translateY(20px)}
html.js .price-table .price-row{opacity:0;transform:translateX(-16px)}
html.js .price-table.in .price-row{opacity:1;transform:none;
  transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1)}
html.js .price-table.in .price-row:nth-child(1){transition-delay:.06s}
html.js .price-table.in .price-row:nth-child(2){transition-delay:.12s}
html.js .price-table.in .price-row:nth-child(3){transition-delay:.18s}
html.js .price-table.in .price-row:nth-child(4){transition-delay:.24s}
html.js .price-table.in .price-row:nth-child(5){transition-delay:.30s}
html.js .price-table.in .price-row:nth-child(6){transition-delay:.36s}
html.js .price-table.in .price-row:nth-child(7){transition-delay:.42s}
html.js .price-table.in .price-row:nth-child(8){transition-delay:.48s}
html.js .price-table.in .price-row:nth-child(9){transition-delay:.54s}
html.js .price-table.in .price-row:nth-child(n+10){transition-delay:.60s}

/* --- nav links: an underline that wipes in from the left --- */
.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--cyan));
  transform:scaleX(0);transform-origin:right;transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta)[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* --- FAQ answer slides as it opens --- */
.faq details[open] .a{animation:faqReveal .42s cubic-bezier(.16,1,.3,1) both}
@keyframes faqReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* --- related-services pills cascade --- */
html.js .related.reveal a{opacity:0;transform:translateY(10px)}
html.js .related.reveal.in a{opacity:1;transform:none;transition:opacity .45s ease,transform .5s cubic-bezier(.16,1,.3,1)}
html.js .related.reveal.in a:nth-child(2){transition-delay:.08s}
html.js .related.reveal.in a:nth-child(3){transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  html.js .price-table .price-row,html.js .related.reveal a{opacity:1!important;transform:none!important;transition:none}
  .faq details[open] .a{animation:none}
}

/* ============ COMET CURSOR ============ */
.comet{
  position:fixed;top:0;left:0;z-index:60;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(91,232,255,.55),rgba(77,141,255,.22) 45%,transparent 70%);
  transition:width .25s ease,height .25s ease,margin .25s ease,opacity .3s ease;
  will-change:transform;
}
.comet.hot{
  width:54px;height:54px;margin:-27px 0 0 -27px;
  background:radial-gradient(circle,rgba(124,255,107,.4),rgba(91,232,255,.2) 45%,transparent 70%);
}

/* ============ BOOT-UP UPLINK ============ */
html.booting{overflow:hidden}
.boot{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,#0a1228,#05060f 70%);
  cursor:pointer;animation:bootScan 1.45s linear;
}
.boot::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(91,232,255,.03) 3px 4px);
}
.boot-out{animation:bootOut .65s cubic-bezier(.7,0,.84,0) forwards}
@keyframes bootOut{to{opacity:0;transform:scale(1.04);filter:blur(6px)}}
.boot-inner{position:relative;z-index:1;text-align:center;width:min(86vw,440px)}
.boot-mark{width:74px;margin:0 auto 22px;filter:drop-shadow(0 0 22px rgba(0,176,200,.6));animation:bootHover 1.6s ease-in-out infinite}
@keyframes bootHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.boot-line{
  font-family:var(--font-display);font-size:.86rem;letter-spacing:.22em;color:var(--cyan);
  text-transform:uppercase;min-height:1.4em;white-space:nowrap;
}
.boot-caret{animation:bootBlink .6s step-end infinite;color:var(--accent)}
@keyframes bootBlink{50%{opacity:0}}
.boot-bar{
  margin:22px auto 0;width:200px;height:2px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.1);
}
.boot-bar i{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--cyan));
  animation:bootFill 1.3s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes bootFill{to{width:100%}}
@keyframes bootScan{0%{opacity:0}6%{opacity:1}}

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

/* ============ IMPECCABLE CRAFT PASS ============ */
:root{color-scheme:dark}
html{-webkit-tap-highlight-color:rgba(91,232,255,.16)}
body{text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}

/* themed scrollbar — the space station, not the OS */
*{scrollbar-width:thin;scrollbar-color:rgba(77,141,255,.55) rgba(7,10,22,.6)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#070a16}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--accent),var(--cyan));
  border:3px solid #070a16;border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--cyan),var(--accent))}
::-webkit-scrollbar-corner{background:#070a16}

/* break the 12-card monotony: jewel-tone rhythm across the service grid */
.svc-grid .svc:nth-child(4n+2) .svc-icon{border-color:rgba(91,232,255,.36);background:linear-gradient(135deg,rgba(91,232,255,.17),rgba(77,141,255,.09))}
.svc-grid .svc:nth-child(4n+2) .svc-icon svg{stroke:var(--cyan)}
.svc-grid .svc:nth-child(4n+3) .svc-icon{border-color:rgba(157,123,255,.38);background:linear-gradient(135deg,rgba(157,123,255,.18),rgba(77,141,255,.09))}
.svc-grid .svc:nth-child(4n+3) .svc-icon svg{stroke:var(--violet)}
.svc-grid .svc:nth-child(4n) .svc-icon{border-color:rgba(0,176,200,.42);background:linear-gradient(135deg,rgba(0,176,200,.2),rgba(77,141,255,.09))}
.svc-grid .svc:nth-child(4n) .svc-icon svg{stroke:#22c7dd}

/* ============ PRINT — clean quote-friendly document ============ */
@media print{
  #stars,.aurora,.grain,.comet,.boot,.scroll-hint,.marquee,.hero-ufo,.ground,.planet,
  .nebula,#progressBar,.nav-burger,.cta-ufo,.related,.cta-band{display:none!important}
  html,body{background:#fff!important;color:#111!important}
  .nav{position:static!important;background:#fff!important;box-shadow:none;border-bottom:1px solid #ccc}
  .brand span,.nav-links a{color:#111!important}
  a{color:#0a5a2f!important;text-decoration:underline}
  .grad,.hero h1 .glow,.stat b,.pr-price{-webkit-text-fill-color:#0a5a2f!important;color:#0a5a2f!important;background:none!important}
  .sec-kicker{color:#0a5a2f!important}
  .ink-dim,p,li,small,.sec-lead,.pr-note{color:#222!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .card,.svc,.svc-detail,.about-card,.stat,.value,.step,.price-table,.faq details{
    border:1px solid #bbb!important;background:#fff!important;break-inside:avoid;box-shadow:none}
  .btn{border:1px solid #111!important;color:#111!important;background:#fff!important;box-shadow:none}
  section,.section{padding:14px 0!important}
  @page{margin:1.6cm}
}

/* forced-colors (Windows high-contrast): keep focus + borders visible */
@media (forced-colors:active){
  .btn,.svc,.card,.price-table{border:1px solid CanvasText}
  :focus-visible{outline:2px solid Highlight}
}