:root{
  --bg:#01050b;
  --bg2:#031020;
  --panel:rgba(5,18,34,.76);
  --line:#0f7cff;
  --blue:#1598ff;
  --blue2:#1769ff;
  --text:#f5f8ff;
  --muted:#9faac0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 55%,rgba(0,85,255,.10),transparent 28%),
    linear-gradient(180deg,#000 0%,#010712 58%,#020915 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    radial-gradient(circle at 10% 20%,#fff 0 1px,transparent 1.4px),
    radial-gradient(circle at 70% 30%,#4ca8ff 0 1px,transparent 1.5px),
    radial-gradient(circle at 45% 75%,#fff 0 1px,transparent 1.4px);
  background-size:173px 173px,221px 221px,289px 289px;
  z-index:-1;
}
a{color:inherit;text-decoration:none}
.ambient{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:-2}
.ambient-one{width:460px;height:460px;background:#004cff;opacity:.10;left:-200px;top:48%}
.ambient-two{width:500px;height:500px;background:#006eff;opacity:.09;right:-260px;top:63%}

.topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:20px clamp(24px,5vw,76px);
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);
}
.brand-mini{display:flex;align-items:center;gap:12px;min-width:180px}
.brand-mini .tm{
  font-weight:950;
  font-size:34px;
  letter-spacing:-5px;
  color:white;
  text-shadow:8px 0 18px rgba(15,119,255,.35);
}
.brand-mini b{display:block;font-size:19px;line-height:1}
.brand-mini b span{color:#248cff}
.brand-mini small{display:block;font-size:7px;letter-spacing:4px;color:#a9b5c9;margin-top:6px}
.topbar nav{display:flex;gap:42px;font-size:13px;color:#c5d0e3}
.topbar nav a{position:relative;padding:8px 0}
.topbar nav a:after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;
  background:#39a6ff;box-shadow:0 0 10px #1598ff;transition:.25s
}
.topbar nav a:hover:after{left:0;right:0}
.build-button{
  border:1px solid rgba(15,124,255,.8);
  background:rgba(0,80,180,.12);
  box-shadow:0 0 22px rgba(0,120,255,.20),inset 0 0 12px rgba(0,85,255,.12);
  border-radius:999px;padding:10px 17px;font-size:12px;
}
.build-button span{margin-left:12px;font-size:17px}

.hero{position:relative;width:100%;overflow:hidden;border-bottom:1px solid rgba(0,131,255,.45)}
.hero img{display:block;width:100%;height:clamp(300px,34vw,520px);object-fit:cover}
.hero-shine{
  position:absolute;inset:auto 0 0;height:120px;
  background:linear-gradient(180deg,transparent,rgba(0,55,135,.22));
  pointer-events:none;
}

.pillars{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:1180px;
  margin:0 auto;
  padding:26px 24px 22px;
  border-bottom:1px solid rgba(23,118,219,.18);
}
.pillars article{text-align:center;padding:10px 18px;position:relative}
.pillars article:not(:last-child):after{
  content:"";position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(31,143,255,.5)
}
.icon{font-size:28px;color:#1a8fff;text-shadow:0 0 14px #0f7cff;margin-bottom:7px}
.pillars h3{font-size:12px;line-height:1.45;letter-spacing:3px;text-transform:uppercase;margin:0;color:#ecf5ff}
.pillars p{font-size:11px;color:#9aabc2;margin:7px 0 0}

.vision,.services{max-width:1180px;margin:0 auto;padding-left:28px;padding-right:28px}
.vision{text-align:center;padding-top:54px;padding-bottom:40px}
.eyebrow{
  color:#2f9fff;font-size:10px;letter-spacing:5px;
  display:flex;align-items:center;justify-content:center;gap:16px;text-transform:uppercase
}
.eyebrow span{display:block;width:82px;height:1px;background:linear-gradient(90deg,transparent,#298eff)}
.eyebrow span:last-child{background:linear-gradient(90deg,#298eff,transparent)}

.vision-quote{
  width:min(930px,92%);
  margin:0 auto 30px;
  padding:20px 26px 18px;
  position:relative;
  border:1px solid rgba(36,151,255,.34);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(5,20,39,.74),rgba(1,8,18,.52));
  box-shadow:
    inset 0 0 34px rgba(0,110,255,.05),
    0 0 26px rgba(0,103,255,.08);
}
.vision-quote:before,
.vision-quote:after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,#259dff,transparent);
  opacity:.55;
}
.vision-quote:before{top:0}
.vision-quote:after{bottom:0}
.vision-quote div{
  color:#bfe0ff;
  font-size:clamp(16px,2.2vw,27px);
  line-height:1.45;
  font-style:italic;
  letter-spacing:.5px;
  text-shadow:
    0 0 10px rgba(60,160,255,.35),
    0 0 22px rgba(0,100,255,.14);
}
.vision-quote strong{
  font-weight:540;
  color:#d7ecff;
}
.quote-mark{
  position:absolute;
  top:-14px;
  left:18px;
  font-family:Georgia,serif;
  font-size:58px;
  line-height:1;
  color:#239cff;
  text-shadow:0 0 16px rgba(35,156,255,.45);
}
.quote-mark.end{
  top:auto;
  left:auto;
  right:18px;
  bottom:-39px;
}

.vision h1{
  margin:17px auto 16px;
  max-width:1040px;
  font-size:clamp(27px,4.1vw,56px);
  line-height:1.05;
  font-weight:580;
  color:#d7edff;
  text-shadow:0 0 7px rgba(89,171,255,.85),0 0 25px rgba(0,95,255,.25);
}
.vision h1 strong{font-weight:590;color:#aedaFF}
.vision p{font-size:10px;letter-spacing:5px;color:#c0c9db}
.vision i{font-style:normal;color:#318fff;margin:0 8px}

.services{padding-top:14px;padding-bottom:36px}
.services h2{
  text-align:center;
  margin:13px 0 5px;
  font-size:clamp(31px,4vw,48px);
  letter-spacing:-1.8px;
  text-shadow:0 0 16px rgba(39,139,255,.45)
}
.section-copy{text-align:center;color:#a4b1c8;font-size:11px;letter-spacing:3px;text-transform:uppercase;margin:0 0 29px}
.service-list{display:grid;gap:14px}
.service-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(300px,42%) 1fr 74px;
  align-items:stretch;
  min-height:176px;
  border:1px solid rgba(20,137,255,.74);
  border-radius:17px;
  background:linear-gradient(110deg,rgba(5,18,34,.9),rgba(2,12,25,.74));
  box-shadow:0 0 0 1px rgba(0,85,255,.06),0 8px 28px rgba(0,0,0,.25),inset 0 0 34px rgba(0,95,255,.035);
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  border-color:#2ba0ff;
  box-shadow:0 0 25px rgba(0,123,255,.16),0 13px 36px rgba(0,0,0,.34),inset 0 0 35px rgba(0,100,255,.05)
}
.project-image{overflow:hidden;border-radius:16px;border-right:1px solid rgba(19,127,240,.30);min-height:176px}
.project-image img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .5s ease,filter .5s ease
}
.service-card:hover .project-image img{transform:scale(1.055);filter:saturate(1.07) brightness(1.03)}
.project-details{align-self:center;padding:22px 26px}
.category{
  display:inline-block;
  padding:4px 9px;
  border:1px solid rgba(0,137,255,.72);
  border-radius:999px;
  color:#46b2ff;background:rgba(0,101,230,.07);
  font-size:9px;letter-spacing:1.5px
}
.project-details h3{font-size:26px;margin:8px 0 3px;letter-spacing:-.5px}
.project-details p{color:#adb7c9;font-size:13px;margin:0 0 12px}
.url{
  display:inline-flex;align-items:center;gap:9px;
  color:#39a9ff;font-size:14px;
  border:1px solid rgba(0,124,255,.48);
  padding:8px 11px;border-radius:7px;
  background:rgba(0,75,180,.08)
}
.url b{font-size:14px;margin-left:5px}
.go{
  width:45px;height:45px;border-radius:50%;
  border:1px solid #178cff;
  align-self:center;justify-self:center;
  display:grid;place-items:center;
  color:white;font-size:23px;
  box-shadow:0 0 18px rgba(0,124,255,.38),inset 0 0 14px rgba(0,82,255,.11);
  transition:.22s ease
}
.service-card:hover .go{background:#0d77e8;transform:translateX(3px)}

.closing{
  min-height:180px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(0,101,255,.27),transparent 52%),
    linear-gradient(180deg,transparent,rgba(0,21,52,.8));
  border-bottom:1px solid rgba(16,103,201,.20)
}
.closing p{font-size:11px;letter-spacing:6px;color:#b8d7ff;text-align:center}
.closing span{width:100px;height:2px;background:#249cff;box-shadow:0 0 14px #249cff;margin-top:13px}

footer{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  min-height:155px;
  padding:28px 28px 30px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:25px;
}
.footer-brand{justify-self:start}
.footer-links{display:flex;align-items:center;gap:16px;font-size:11px;color:#c5d1df}
.footer-links i{display:block;height:16px;width:1px;background:#506277}
footer>p{text-align:right;font-size:8px;letter-spacing:2px;color:#b7c4d6;line-height:1.8}
footer>p span{color:#77869a}

@media(max-width:850px){
  .topbar{padding:15px 18px}
  .topbar nav{display:none}
  .brand-mini{min-width:0}
  .build-button{font-size:11px}
  .hero img{height:330px;object-position:center}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillars article:nth-child(2):after{display:none}
  .service-card{grid-template-columns:42% 1fr 55px;min-height:145px}
  .project-image{min-height:145px}
  .project-details{padding:16px}
  .project-details h3{font-size:21px}
  .project-details p{font-size:11px}
  .url{font-size:11px}
  footer{grid-template-columns:1fr 1fr}
  .footer-links{display:none}
}
@media(max-width:620px){
  .vision-quote{width:100%;padding:18px 22px;margin-bottom:28px}
  .vision-quote div{font-size:15px}
  .quote-mark{font-size:44px}

  .topbar{position:relative;background:#01050b}
  .brand-mini .tm{font-size:28px}
  .brand-mini b{font-size:16px}
  .build-button{padding:8px 12px}
  .hero img{height:220px}
  .pillars{grid-template-columns:1fr 1fr;padding:18px 10px}
  .pillars article{padding:10px 5px}
  .pillars h3{font-size:9px;letter-spacing:2px}
  .pillars p{font-size:9px}
  .vision{padding-top:38px}
  .vision h1 br{display:none}
  .vision p{font-size:8px;letter-spacing:2px;line-height:1.8}
  .eyebrow{font-size:8px;letter-spacing:3px}
  .eyebrow span{width:38px}
  .section-copy{font-size:8px;line-height:1.8}
  .services{padding-left:14px;padding-right:14px}
  .service-card{
    grid-template-columns:1fr;
    min-height:0;
  }
  .project-image{height:180px;min-height:0;border-right:0;border-bottom:1px solid rgba(19,127,240,.30)}
  .project-details{padding:18px 18px 21px}
  .project-details h3{font-size:22px}
  .go{position:absolute;right:16px;bottom:17px;width:40px;height:40px}
  .url{max-width:calc(100% - 52px);overflow:hidden;white-space:nowrap}
  .closing{min-height:135px;padding:0 20px}
  .closing p{font-size:9px;letter-spacing:4px}
  footer{grid-template-columns:1fr;justify-items:center;text-align:center;padding-bottom:32px}
  .footer-brand{justify-self:center}
  footer>p{text-align:center;margin:0}
  }

.service-card{opacity:.0;transform:translateY(18px)}
.service-card.revealed{opacity:1;transform:translateY(0);transition:opacity .55s ease,transform .55s ease,border-color .22s ease,box-shadow .22s ease}
.service-card.revealed:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important}
  .service-card{opacity:1!important;transform:none!important;transition:none!important}
}