/* =========================================================
   ZYION DIGITAL SOLUTIONS
   Pixel-focused recreation from supplied reference image.
   ========================================================= */

:root{
  --bg:#090d12;
  --bg-2:#0c1118;
  --card:#10161f;
  --card-border:#182633;
  --muted:#687481;
  --muted-2:#77828e;
  --text:#e8edf2;
  --cyan:#00b8ed;
  --cyan-bright:#08c8f4;
  --cyan-dark:#063b4c;
  --results:#171e2d;
  --max:1440px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:10px;
}
a{color:inherit}
.container{
  width:min(100% - 30px,var(--max));
  margin-inline:auto;
}
.logo img{max-height:48px}

/* HEADER */
.header{
  height:39px;
  background:#090d12;
  border-bottom:1px solid #111923;
  position:relative;
  z-index:20;
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}
.logo-symbol{
  width:23px;
  height:20px;
  display:grid;
  place-items:center;
  color:#aeb8c3;
  border:1px solid #247f9f;
  font-weight:800;
  font-style:italic;
  font-size:15px;
  line-height:1;
  transform:skew(-8deg);
}
.logo-copy strong{
  display:block;
  font-size:11px;
  line-height:9px;
  letter-spacing:-.2px;
}
.logo-copy small{
  display:block;
  color:#65717d;
  font-size:4.5px;
  line-height:6px;
  letter-spacing:.15px;
}
.quote-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:60px;
  height:20px;
  padding:0 10px;
  border-radius:2px;
  background:#06b6e9;
  box-shadow:0 0 13px rgba(0,184,237,.28);
  text-decoration:none;
  color:white;
  font-size:6px;
  font-weight:700;
}

/* HERO */
.hero{
  min-height:700px;
  position:relative;
  overflow:hidden;
  background:#090d12;
}
.star-field{
  position:absolute;
  inset:0;
  opacity:.75;
  background:
    radial-gradient(circle at 13.5% 16%,rgba(0,191,238,.8) 0 1px,transparent 1.5px),
    radial-gradient(circle at 25% 34%,rgba(0,191,238,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 40% 17%,rgba(0,191,238,.65) 0 1px,transparent 1.5px),
    radial-gradient(circle at 55% 28%,rgba(0,191,238,.5) 0 1px,transparent 1.5px),
    radial-gradient(circle at 71% 14%,rgba(0,191,238,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 91% 28%,rgba(0,191,238,.6) 0 1px,transparent 1.5px),
    radial-gradient(circle at 5% 55%,rgba(0,191,238,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 22% 78%,rgba(0,191,238,.5) 0 1px,transparent 1.5px),
    radial-gradient(circle at 52% 71%,rgba(0,191,238,.5) 0 1px,transparent 1.5px),
    radial-gradient(circle at 75% 81%,rgba(0,191,238,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 95% 73%,rgba(0,191,238,.55) 0 1px,transparent 1.5px);
}
.hero-grid-lines{
  position:absolute;
  inset:0;
  opacity:.18;
  background:
    linear-gradient(rgba(17,47,61,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,47,61,.35) 1px,transparent 1px);
  background-size:47px 47px;
}
.network{
  position:absolute;
  width:190px;
  height:110px;
  opacity:.4;
  background:
    linear-gradient(25deg,transparent 49.5%,#06465b 50%,transparent 50.5%) 0 0/100% 100%,
    linear-gradient(-15deg,transparent 49.5%,#06465b 50%,transparent 50.5%) 0 0/100% 100%;
}
.network-a{right:0;top:112px}
.network-b{left:0;bottom:24px;transform:rotate(180deg)}

.hero-inner{
  min-height:700px;
  display:grid;
  grid-template-columns:1.18fr .82fr;
  align-items:center;
  gap:5px;
  position:relative;
  z-index:2;
}
.hero-copy{padding-top:5px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 7px;
  margin-bottom:11px;
  border:1px solid #063c4c;
  border-radius:2px;
  background:#061820;
  color:#04b9ed;
  font-size:6px;
  line-height:1;
}
.eyebrow span{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#00d3ef;
}
.hero h1{
  margin:0;
  font-size:36px;
  line-height:.92;
  letter-spacing:-1.35px;
  font-weight:800;
}
.hero-description{
  width:245px;
  margin:14px 0 16px;
  color:#74808c;
  font-size:8px;
  line-height:1.55;
}
.hero-buttons{
  display:flex;
  gap:6px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:24px;
  padding:0 12px;
  border-radius:2px;
  text-decoration:none;
  font-size:6px;
  font-weight:700;
  transition:filter .2s,transform .2s,border-color .2s;
}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-primary{
  color:#fff;
  background:linear-gradient(180deg,#08c2f2,#00aee3);
  box-shadow:0 0 16px rgba(0,184,237,.22);
}
.btn-secondary{
  color:#d5dde4;
  background:#0b1118;
  border:1px solid #1a3442;
}
.hero-stats{
  display:flex;
  gap:38px;
  margin-top:31px;
}
.hero-stat strong{
  display:block;
  color:#00b8ed;
  font-size:14px;
  line-height:1;
  margin-bottom:3px;
}
.hero-stat span{
  display:block;
  color:#68747f;
  font-size:5px;
  white-space:nowrap;
}

/* ORBIT */
.orbit-art{
  width:154px;
  height:154px;
  position:relative;
  justify-self:center;
  margin-top:5px;
}
.orbit-glow{
  position:absolute;
  inset:42px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,183,237,.18),rgba(0,183,237,.04) 52%,transparent 72%);
  filter:blur(3px);
}
.orbit-circle{
  position:absolute;
  border:1px solid rgba(0,184,237,.26);
  border-radius:50%;
}
.c1{inset:9px}
.c2{inset:25px}
.c3{inset:43px}
.orbit-center{
  position:absolute;
  inset:57px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#0e3344,#0a131c 70%);
  box-shadow:0 0 28px rgba(0,184,237,.12);
}
.orbit-center span{
  color:#00b8ed;
  font-size:15px;
  font-weight:700;
}
.orbit-dot{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#00dce9;
  box-shadow:0 0 7px #00dce9;
}
.d1{left:76px;top:14px}.d2{right:10px;top:76px}.d3{left:76px;bottom:14px}.d4{left:10px;top:76px}

/* COMMON SECTION */
.section{position:relative}
.section-kicker{
  display:block;
  color:#00b8ed;
  font-size:5.5px;
  line-height:1;
  margin-bottom:8px;
}
.section-heading h2,
.results-heading h2,
.work-top h2{
  margin:0;
  color:#e8edf2;
  font-size:23px;
  line-height:1.08;
  letter-spacing:-.55px;
}
.section-heading p{
  width:245px;
  margin:7px 0 22px;
  color:#687480;
  font-size:7px;
  line-height:1.5;
}

/* SERVICES */
.services{
  padding:75px 0 62px;
  background:#090d12;
}
.services-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.service-card{
  min-height:111px;
  padding:13px;
  border:1px solid #172633;
  border-radius:1px;
  background:
    radial-gradient(circle at 100% 0,rgba(0,184,237,.035),transparent 35%),
    #10161f;
  position:relative;
  overflow:hidden;
}
.service-card:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#074b63,transparent);
  opacity:.6;
}
.service-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  margin-bottom:8px;
  border:1px solid #063e51;
  border-radius:2px;
  background:#09212c;
  color:#00b8ed;
  font-size:10px;
}
.service-tag,.project-tag{
  display:inline-block;
  padding:2px 4px;
  margin-bottom:4px;
  color:#00b8ed;
  background:#042433;
  border-radius:2px;
  font-size:5px;
  line-height:1;
}
.service-card h3,.project-body h3{
  margin:0 0 5px;
  color:#e3e8ed;
  font-size:8px;
  line-height:1.2;
}
.service-card p,.project-body p{
  margin:0 0 7px;
  color:#74808c;
  font-size:5.5px;
  line-height:1.45;
}
.service-card a,.project-body a{
  color:#00b8ed;
  text-decoration:none;
  font-size:5.5px;
}

/* RESULTS */
.results{
  padding:61px 0 62px;
  background:#171e2d;
  overflow:hidden;
}
.results-pattern{
  position:absolute;
  inset:0;
  opacity:.17;
  background:
    linear-gradient(rgba(45,61,83,.32) 1px,transparent 1px),
    linear-gradient(90deg,rgba(45,61,83,.32) 1px,transparent 1px);
  background-size:43px 43px;
}
.results-heading{
  text-align:center;
  position:relative;
  z-index:1;
}
.results-heading .section-kicker{margin-bottom:7px}
.results-heading h2{font-size:23px}
.results-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:27px;
}
.result-card{
  min-height:77px;
  padding:14px 10px;
  text-align:center;
  border:1px solid #1b2838;
  background:rgba(14,21,31,.78);
}
.result-card strong{
  display:block;
  color:#00aee4;
  font-size:21px;
  line-height:1;
  margin-bottom:5px;
}
.result-card h3{
  margin:0 0 5px;
  color:#aeb8c3;
  font-size:6.5px;
}
.result-card p{
  margin:0 auto;
  max-width:145px;
  color:#626e7b;
  font-size:5.5px;
  line-height:1.4;
}

/* WORK */
.work{
  padding:64px 0 64px;
  background:#090d12;
}
.work-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:21px;
}
.work-top h2{font-size:23px}
.view-all{
  margin-bottom:2px;
  color:#00b8ed;
  text-decoration:none;
  font-size:5.5px;
}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.project-card{
  border:1px solid #172633;
  background:#10161f;
  overflow:hidden;
}
.project-visual{
  height:102px;
  position:relative;
  overflow:hidden;
}
.visual-app{
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 55% 55%,rgba(0,184,237,.15),transparent 40%),
    linear-gradient(135deg,#03080c,#0b1a24);
}
.fake-device{
  width:116px;
  height:58px;
  padding:5px;
  transform:perspective(300px) rotateY(-11deg) rotateX(3deg);
  border:1px solid #174e66;
  background:#0a151e;
  box-shadow:0 10px 25px rgba(0,0,0,.45);
}
.device-bar{
  height:4px;
  width:28px;
  background:#00b8ed;
  margin-bottom:8px;
}
.device-content{
  display:flex;
  gap:5px;
  color:#d8edf4;
  font-size:6px;
}
.device-content b:nth-child(2){color:#00b8ed}
.device-chart{
  width:76px;
  height:13px;
  margin-top:8px;
  border-bottom:1px solid #00b8ed;
  transform:skewY(-8deg);
}
.visual-marketing{
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 45% 45%,rgba(0,184,237,.2),transparent 42%),
    linear-gradient(135deg,#06121b,#092334);
}
.analytics{
  width:120px;
  height:65px;
  border:1px solid #14526a;
  background:#07131d;
  padding:7px;
  position:relative;
}
.analytics-title{font-size:5px;color:#a8c1cc}
.donut{
  width:29px;height:29px;border-radius:50%;
  margin-top:7px;
  border:5px solid #00b8ed;
  border-right-color:#143c51;
}
.bars{position:absolute;right:8px;bottom:9px;display:flex;align-items:flex-end;gap:3px}
.bars i{width:5px;background:#087c9f}
.bars i:nth-child(1){height:11px}.bars i:nth-child(2){height:18px}.bars i:nth-child(3){height:14px}.bars i:nth-child(4){height:25px}
.visual-cloud{
  background:
    radial-gradient(circle at 50% 45%,rgba(0,185,237,.28),transparent 34%),
    linear-gradient(135deg,#03101a,#062a43);
}
.cloud-core{
  position:absolute;
  inset:34px 0 auto;
  text-align:center;
  font-size:21px;
  color:#6adcf2;
  filter:drop-shadow(0 0 9px rgba(0,184,237,.5));
}
.cloud-lines{
  position:absolute;
  inset:0;
  background:
    linear-gradient(150deg,transparent 49.7%,rgba(0,184,237,.35) 50%,transparent 50.3%),
    linear-gradient(30deg,transparent 49.7%,rgba(0,184,237,.25) 50%,transparent 50.3%);
}
.cloud-node{
  position:absolute;
  width:4px;height:4px;border-radius:50%;
  background:#00c8ef;box-shadow:0 0 7px #00c8ef;
}
.n1{left:31%;top:28%}.n2{right:25%;top:20%}.n3{right:18%;bottom:25%}.n4{left:18%;bottom:18%}
.project-body{padding:9px 10px 11px}
.project-body p{min-height:24px}

/* CTA */
.cta{
  min-height:142px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(110deg,#1a2232 0%,#182538 65%,#102d3d 100%);
  border-top:1px solid rgba(0,184,237,.14);
  border-bottom:1px solid rgba(0,184,237,.65);
}
.cta-glow{
  position:absolute;
  width:270px;height:190px;
  right:-45px;top:-60px;
  background:radial-gradient(circle,rgba(0,184,237,.11),transparent 67%);
}
.cta-inner{
  min-height:142px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  position:relative;
  z-index:1;
}
.cta h2{
  margin:0 0 7px;
  font-size:22px;
  line-height:1.02;
  letter-spacing:-.5px;
}
.cta p{
  margin:0;
  width:240px;
  color:#6c7885;
  font-size:6px;
  line-height:1.45;
}
.cta-btn{min-width:106px}

/* FOOTER */
.footer{
  padding:31px 0 14px;
  background:#090d12;
}
.footer-main{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:55px;
}
.footer-about p{
  width:185px;
  margin:13px 0 10px;
  color:#68737f;
  font-size:6px;
  line-height:1.55;
}
.socials{display:flex;gap:5px}
.socials a{
  width:17px;height:17px;
  display:grid;place-items:center;
  color:#72808c;
  border:1px solid #24303b;
  text-decoration:none;
  font-size:6px;
}
.footer-col h4{
  margin:2px 0 10px;
  color:#d8dee4;
  font-size:6px;
}
.footer-col a{
  display:block;
  margin:7px 0;
  color:#66727e;
  text-decoration:none;
  font-size:6px;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:25px;
  padding-top:12px;
  border-top:1px solid #151d26;
  color:#4e5964;
  font-size:5px;
}

@media (min-width:701px){
  :root{
    --desktop-scale:clamp(1,calc(100vw / 760px),2.5);
    --max:616px;
  }
  .page{
    width:calc(100vw / var(--desktop-scale));
    zoom:var(--desktop-scale);
  }
  .logo img{max-height:26px}
  .hero,.hero-inner{
    min-height:max(280px,min(700px,calc(100vh / var(--desktop-scale) - 39px)));
  }
  .hero-grid-lines{background-size:30px 30px}
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:700px){
  .container{width:calc(100% - 30px)}
  .header{height:52px}
  .quote-btn{height:25px;min-width:75px;font-size:7px}
  .logo-symbol{width:27px;height:23px;font-size:17px}
  .logo-copy strong{font-size:13px}
  .logo-copy small{font-size:5px}

  .hero{min-height:auto}
  .hero-inner{
    min-height:auto;
    grid-template-columns:1fr;
    padding:45px 0 38px;
  }
  .orbit-art{
    width:170px;height:170px;
    order:-1;
    justify-self:center;
    margin:0 auto 23px;
  }
  .hero-copy{text-align:left}
  .hero h1{font-size:42px}
  .hero-description{width:min(100%,360px);font-size:9px}
  .hero-buttons{flex-wrap:wrap}
  .btn{min-height:31px;padding:0 15px;font-size:7px}
  .hero-stats{gap:35px;margin-top:29px}
  .hero-stat strong{font-size:16px}
  .hero-stat span{font-size:6px}

  .services{padding:57px 0 50px}
  .section-heading h2,.results-heading h2,.work-top h2{font-size:26px}
  .section-heading p{font-size:8px;width:100%;max-width:330px}
  .services-grid{grid-template-columns:1fr;gap:9px}
  .service-card{min-height:145px;padding:17px}
  .service-card p,.project-body p{font-size:7px}
  .service-card h3,.project-body h3{font-size:11px}
  .service-card a,.project-body a{font-size:7px}

  .results{padding:55px 0}
  .results-grid{grid-template-columns:1fr;gap:9px;margin-top:25px}
  .result-card{min-height:90px}
  .result-card strong{font-size:25px}
  .result-card h3{font-size:8px}
  .result-card p{font-size:7px}

  .work{padding:55px 0}
  .work-top{align-items:flex-end}
  .work-top h2{max-width:270px}
  .projects-grid{grid-template-columns:1fr;gap:13px}
  .project-visual{height:170px}
  .project-body{padding:13px}
  .project-body p{min-height:0;margin-bottom:11px}

  .cta{min-height:auto}
  .cta-inner{min-height:230px;padding:45px 0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
  .cta h2{font-size:29px}
  .cta p{width:100%;max-width:350px;font-size:7px}
  .cta-btn{margin-top:8px}

  .footer{padding:39px 0 18px}
  .footer-main{grid-template-columns:1fr 1fr;gap:30px}
  .footer-about{grid-column:1/-1}
  .footer-about p{font-size:7px;width:260px}
  .footer-col h4{font-size:8px}
  .footer-col a{font-size:7px}
  .footer-bottom{flex-direction:column;font-size:6px;gap:5px}
}

@media (max-width:380px){
  .hero h1{font-size:37px}
  .hero-stats{gap:20px}
  .hero-stat span{font-size:5px}
  .cta h2{font-size:26px}
}