:root {
  --bg:#050912;
  --bg2:#081120;
  --card:#0b1423;
  --text:#f6f9ff;
  --muted:#9aa8bb;
  --line:rgba(255,255,255,.1);
  --blue:#008cff;
  --cyan:#25c8ff;
  --shadow:0 25px 80px rgba(0,0,0,.38)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  line-height:1.65;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
.container {
  width:min(1160px,calc(100% - 40px));
  margin:auto
}
.topbar {
  height:32px;
  background:#03060b;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  color:#8da4c2;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase
}
.topbar span {
  color:var(--blue)
}
.header {
  height:px;
  position:fixed;
  top:0px;
  left:0;
  right:0;
  z-index:50;
  background:rgba(5,9,18,.72);
  backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;
  transition:.3s
}
.header.scrolled {
  border-color:var(--line);
  background:rgba(5,9,18,.92)
}
.nav-wrap {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand img {
  width:145px;
  height:68px;
  object-fit:contain;
  border-radius:5px
}
.nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px;
  font-weight:600
}
.nav a {
  color:#c5cfdd;
  transition:.2s
}
.nav a:hover,.nav a.active {
  color:#fff
}
.nav-cta {
  border:1px solid rgba(0,153,255,.65);
  padding:10px 17px;
  border-radius:6px;
  background:rgba(0,136,255,.1)
}
.menu-btn {
  display:none;
  background:none;
  border:0;
  padding:8px
}
.menu-btn span {
  display:block;
  width:25px;
  height:2px;
  background:white;
  margin:5px
}
.hero {
  min-height:650px;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top:105px;
  background:radial-gradient(circle at 72% 42%,rgba(0,140,255,.16),transparent 34%),linear-gradient(135deg,#050912,#07111e)
}
.hero-grid {
  position:absolute;
  inset:0;
  opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(to bottom,black,transparent)
}
.orb {
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none
}
.orb-one {
  width:330px;
  height:330px;
  background:rgba(0,137,255,.14);
  right:10%;
  top:25%
}
.orb-two {
  width:220px;
  height:220px;
  background:rgba(0,208,255,.08);
  left:-5%;
  bottom:8%
}
.hero-inner {
  position:relative;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:50px;
  align-items:center
}
.eyebrow {
  font-size:11px;
  letter-spacing:3px;
  color:#64baff;
  font-weight:700;
  margin-bottom:17px
}
.eyebrow i {
  display:inline-block;
  width:28px;
  height:1px;
  background:var(--blue);
  vertical-align:middle;
  margin-right:9px
}
.hero h1 {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(45px,5.2vw,78px);
  line-height:1.02;
  letter-spacing:-3px;
  margin:0 0 24px;
  max-width:760px
}
.hero h1 span,h2 span {
  background:linear-gradient(100deg,#fff,#16aaff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.hero-copy {
  max-width:650px;
  color:var(--muted);
  font-size:17px
}
.hero-actions {
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin-top:31px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:13px 21px;
  border-radius:7px;
  font-weight:700;
  font-size:13px;
  transition:.25s;
  cursor:pointer
}
.btn b {
  font-size:20px;
  font-weight:400;
  line-height:0
}
.btn.primary {
  background:linear-gradient(110deg,#006fe6,#00aef8);
  box-shadow:0 10px 35px rgba(0,136,255,.22)
}
.btn.primary:hover {
  transform:translateY(-2px);
  box-shadow:0 15px 45px rgba(0,136,255,.32)
}
.btn.ghost {
  border:1px solid var(--line);
  background:rgba(255,255,255,.02)
}
.btn.ghost:hover {
  border-color:rgba(0,153,255,.6);
  background:rgba(0,136,255,.07)
}
.hero-proof {
  margin-top:30px;
  color:#78889d;
  font-size:11px;
  letter-spacing:.5px;
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.hero-proof span {
  color:#168fff
}
.hero-visual {
  min-height:530px;
  position:relative;
  display:grid;
  place-items:center
}
.visual-ring {
  position:absolute;
  border:1px solid rgba(0,157,255,.15);
  border-radius:50%;
  animation:spin 18s linear infinite
}
.ring-one {
  width:500px;
  height:500px
}
.ring-two {
  width:380px;
  height:380px;
  border-color:rgba(35,199,255,.2);
  animation-direction:reverse;
  animation-duration:13s
}
.visual-card {
  position:relative;
  width:330px;
  padding:28px 25px 25px;
  background:linear-gradient(145deg,rgba(16,32,52,.88),rgba(5,12,23,.94));
  border:1px solid rgba(95,187,255,.18);
  border-radius:20px;
  box-shadow:var(--shadow);
  text-align:center;
  transform:rotate(-3deg)
}
.visual-card img {
  width:125px;
  height:125px;
  object-fit:contain;
  border-radius:50%;
  margin-bottom:10px
}
.visual-title {
  font-family:'Space Grotesk';
  font-size:35px;
  font-weight:700;
  letter-spacing:7px
}
.visual-title span {
  color:#0d9dff
}
.visual-sub {
  font-size:10px;
  letter-spacing:3px;
  color:#c3d1e2;
  margin-top:7px
}
.visual-line {
  height:1px;
  background:linear-gradient(90deg,transparent,#1aa9ff,transparent);
  margin:20px 0
}
.visual-points {
  display:flex;
  justify-content:center;
  gap:13px;
  color:#28a9ff;
  font-size:8px;
  letter-spacing:1.4px
}
.scroll-down {
  position:absolute;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  letter-spacing:2px;
  color:#718196;
  text-transform:uppercase
}
.scroll-down span {
  color:#21a9ff;
  margin-left:8px
}
.section {
  padding:115px 0
}
.about {
  background:#070d17
}
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start
}
.section-heading h2,.section-top h2,.career-box h2,.contact-info h2 {
  font-family:'Space Grotesk';
  font-size:clamp(35px,4vw,54px);
  line-height:1.08;
  letter-spacing:-2px;
  margin:0
}
.about-copy {
  color:#9ba9ba;
  font-size:16px
}
.about-copy p {
  margin-top:0;
  margin-bottom:21px
}
.text-link {
  color:#36b6ff;
  font-size:13px;
  font-weight:700
}
.text-link span {
  font-size:20px;
  margin-left:8px
}
.values {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  margin-top:80px;
  border:1px solid var(--line)
}
.value-card {
  background:#070d17;
  padding:35px
}
.value-number {
  color:#168fff;
  font-size:11px;
  letter-spacing:2px
}
.value-card h3 {
  font-family:'Space Grotesk';
  font-size:21px;
  margin:18px 0 8px
}
.value-card p {
  color:#8190a3;
  font-size:13px;
  margin:0
}
.services {
  background:#050a12
}
.section-top {
  display:flex;
  justify-content:space-between;
  gap:60px;
  align-items:end;
  margin-bottom:52px
}
.section-top>p {
  max-width:400px;
  color:#8998aa;
  font-size:14px;
  margin:0
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}
.service-card {
  position:relative;
  min-height:300px;
  padding:29px;
  background:linear-gradient(145deg,#0a1422,#070d16);
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
  transition:.3s
}
.service-card:after {
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  border-radius:50%;
  right:-70px;
  bottom:-70px;
  background:rgba(0,144,255,.11);
  filter:blur(10px)
}
.service-card:hover {
  transform:translateY(-6px);
  border-color:rgba(20,157,255,.42);
  box-shadow:0 20px 60px rgba(0,0,0,.3)
}
.icon {
  font-size:28px;
  color:#1ca8ff;
  height:52px
}
.service-no {
  position:absolute;
  right:24px;
  top:25px;
  color:#4b5d73;
  font-size:10px;
  letter-spacing:2px
}
.service-card h3 {
  font-family:'Space Grotesk';
  font-size:21px;
  margin:16px 0 9px
}
.service-card p {
  color:#8291a4;
  font-size:13px;
  max-width:290px
}
.service-card a {
  position:absolute;
  bottom:25px;
  color:#25adff;
  font-size:11px;
  font-weight:700
}
.technology {
  padding:105px 0;
  background:radial-gradient(circle at 50% 20%,rgba(0,138,255,.12),transparent 45%),#07111d;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.tech-inner {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  align-items:center
}
.section-heading p {
  color:#8190a2;
  max-width:460px
}
.tech-cloud {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.tech-cloud span {
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  padding:13px 16px;
  border-radius:6px;
  color:#bac8d9;
  font-size:12px;
  transition:.2s
}
.tech-cloud span:hover {
  border-color:#158fe4;
  color:#fff;
  transform:translateY(-2px)
}
.industry-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.industry {
  min-height:150px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:.25s
}
.industry:hover {
  background:rgba(0,136,255,.055)
}
.industry b {
  font-size:10px;
  color:#198fef;
  letter-spacing:2px
}
.industry span {
  font-family:'Space Grotesk';
  font-size:21px;
  margin:10px 0 2px
}
.industry small {
  font-size:11px;
  color:#718196
}
.cta-section {
  padding:85px 0;
  background:linear-gradient(100deg,#0068d6,#0099ef)
}
.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px
}
.cta-inner .eyebrow {
  color:#d7f3ff
}
.cta-inner h2 {
  font-family:'Space Grotesk';
  font-size:clamp(32px,4vw,50px);
  margin:0;
  line-height:1.05
}
.cta-inner p {
  color:#d9efff;
  max-width:650px
}
.cta-inner .btn {
  background:#04101e;
  color:white;
  border:0
}
.career-box {
  border:1px solid var(--line);
  background:linear-gradient(130deg,#0a1422,#070c15);
  border-radius:12px;
  padding:55px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:50px
}
.career-box p {
  max-width:650px;
  color:#8998aa
}
.contact {
  background:#070c14
}
.contact-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px
}
.contact-info>p {
  color:#8998aa;
  max-width:510px;
  margin:25px 0 38px
}
.contact-detail {
  display:flex;
  gap:16px;
  align-items:center;
  margin:20px 0
}
.detail-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(28,169,255,.25);
  background: rgba(0,140,255,.08);
  border-radius: 8px;

  color: #1ca9ff;
}
.detail-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible;
}

.detail-icon svg * {
  vector-effect: non-scaling-stroke;
}
.contact-detail small {
  display:block;
  color:#64758b;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px
}
.contact-detail a,.contact-detail strong {
  font-size:13px;
  color:#d6deea
}
.contact-form {
  border:1px solid var(--line);
  background:#0a121e;
  border-radius:10px;
  padding:35px
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
label {
  display:block;
  color:#91a0b2;
  font-size:11px;
  font-weight:600;
  margin-bottom:17px
}
input,textarea {
  display:block;
  width:100%;
  margin-top:7px;
  border:1px solid rgba(255,255,255,.1);
  background:#060c15;
  color:white;
  border-radius:5px;
  padding:13px 14px;
  font:inherit;
  font-size:13px;
  outline:none;
  transition:.2s
}
input:focus,textarea:focus {
  border-color:#118ee7;
  box-shadow:0 0 0 3px rgba(0,137,255,.08)
}
textarea {
  resize:vertical
}
.submit {
  border:0;
  width:100%;
  margin-top:3px
}
.form-note {
  color:#5f7187;
  font-size:10px;
  text-align:center;
  margin:13px 0 0
}
.footer {
  background:#03070d;
  border-top:1px solid var(--line)
}
.footer-top {
  padding:55px 0 35px;
  display:flex;
  justify-content:space-between;
  gap:50px
}
.footer-top img {
  width:145px;
  height:62px;
  object-fit:contain;
  border-radius:4px
}
.footer-top p {
  color:#66778d;
  font-size:11px;
  letter-spacing:2px
}
.footer-links {
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap
}
.footer-links a {
  color:#8493a6;
  font-size:11px
}
.footer-links a:hover {
  color:#fff
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #536276;
    font-size: 10px;
}
.reveal {
  opacity:0;
  transform:translateY(25px);
  transition:opacity .8s ease,transform .8s ease
}
.reveal.visible {
  opacity:1;
  transform:none
}
.delay {
  transition-delay:.12s
}
.delay2 {
  transition-delay:.22s
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@media(max-width:900px) {
  .nav {
    gap:15px
  }
  .hero-inner {
    grid-template-columns:1fr
  }
  .hero {
    min-height:auto;
    padding:160px 0 100px
  }
  .hero-visual {
    min-height:430px
  }
  .two-col,.tech-inner,.contact-grid {
    grid-template-columns:1fr;
    gap:45px
  }
  .service-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .industry-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .career-box {
    align-items:flex-start;
    flex-direction:column
  }
  .section-top {
    align-items:flex-start;
    flex-direction:column;
    gap:20px
  }
  .values {
    grid-template-columns:1fr
  }
  .header {
    top:32px
  }
  .nav {
    display:none;
    position:absolute;
    top:82px;
    left:0;
    right:0;
    padding:18px 20px;
    background:#07101d;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch
  }
  .nav.open {
    display:flex
  }
  .nav a {
    padding:8px
  }
  .menu-btn {
    display:block
  }
  .brand img {
    width:125px
  }
}
@media(max-width:600px) {
  .container {
    width:min(100% - 28px,1160px)
  }
  .topbar {
    font-size:8px;
    letter-spacing:1.5px
  }
  .header {
    top:0;
    height:64px
  }
  .nav-wrap {
    height:64px
  }

  .nav {
    top:64px
  }
  .brand img {
    width:115px;
    height:52px
  }
  .hero {
    padding-top:95px
  }
  .hero h1 {
    font-size:44px;
    letter-spacing:-2px
  }
  .hero-copy>p {
    font-size:14px
  }
  .hero-visual {
    min-height:350px
  }
  .visual-card {
    width:285px
  }
  .ring-one {
    width:360px;
    height:360px
  }
  .ring-two {
    width:285px;
    height:285px
  }
  .section {
    padding:80px 0
  }
  .service-grid {
    grid-template-columns:1fr
  }
  .industry-grid {
    grid-template-columns:1fr
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0
  }
  .contact-form {
    padding:23px
  }
  .cta-inner {
    flex-direction:column;
    align-items:flex-start
  }
  .footer-top,.footer-bottom {
    flex-direction:column;
    gap:20px
  }
  .footer-links {
    gap:15px
  }
  .career-box {
    padding:30px
  }
  .visual-points {
    gap:7px;
    font-size:7px
  }
}