@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  color-scheme:dark;
  --bg:#070b16;
  --line:#ffffff19;
  --muted:#a0aabe;
  --blue:#4677ff;
  --cyan:#6ce3ff
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  background:var(--bg);
  color:#f3f6ff;
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  line-height:1.6
}

a {
  color:inherit;
  text-decoration:none
}

a:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:6px
}

.wrap {
  width:min(1280px,88%);
  margin:auto
}

.skip {
  position:absolute;
  top:-100px;
  padding:10px;
  background:#233c70;
  z-index:10
}

.skip:focus {
  top:0
}

header {
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.brand {
  display:inline-flex;
  flex-shrink:0;
  width:190px;
  padding:0 10px;
  background:#f1f6ff;
  border:1px solid #b8cef0;
  border-radius:8px;
  line-height:0
}

.brand img {
  display:block;
  width:100%;
  height:auto
}

nav {
  display:flex;
  align-items:center;
  gap:38px;
  font-size:14px
}

nav>a:hover,footer>a:hover {
  color:var(--cyan)
}

.nav-cta {
  border:1px solid #ffffff42;
  padding:12px 19px;
  border-radius:5px
}

.nav-cta span {
  margin-left:20px
}

.hero {
  position:relative;
  padding-top:83px;
  min-height:760px;
  display:grid;
  grid-template-columns:1.08fr 1fr;
  align-items:center
}

.hero-copy {
  position:relative;
  z-index:2
}

.eyebrow {
  font-size:12px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--cyan);
  margin:0 0 27px
}

.eyebrow>span {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--cyan);
  margin-right:10px;
  border-radius:50%
}

h1,h2,h3 {
  font-family:Manrope,sans-serif;
  line-height:1.1;
  letter-spacing:-2.5px;
  font-weight:500;
  margin:0
}

h1 {
  font-size:clamp(52px,5.7vw,82px)
}

em {
  font-style:normal;
  color:var(--cyan);
  background:linear-gradient(110deg,#86eaff,#5486ff);
  background-clip:text;
  -webkit-text-fill-color:transparent
}

.intro {
  font-size:18px;
  color:var(--muted);
  max-width:480px;
  line-height:1.8;
  margin:28px 0 30px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:#627eff;
  color:white;
  padding:16px 24px;
  border:1px solid #91a4ff;
  border-radius:5px;
  font-size:14px;
  font-weight:600;
  transition:background .2s,transform .2s
}

.button:hover {
  background:#3e60e2;
  transform:translateY(-2px)
}

.hero-note {
  font-size:12px;
  color:#8792a8;
  margin-top:20px
}

.visual {
  height:520px;
  position:relative;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse,#164ab344,transparent 67%);
  overflow:hidden
}

.grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(#4776bd16 1px,transparent 1px),linear-gradient(90deg,#4776bd16 1px,transparent 1px);
  background-size:45px 45px;
  mask-image:radial-gradient(ellipse,black,transparent 70%)
}

.orbit {
  position:absolute;
  width:360px;
  height:360px;
  border:1px solid #518bfd80;
  border-radius:50%;
  box-shadow:inset 0 0 30px #2a62dd12,0 0 20px #2a62dd13;
  transform:rotate(-25deg) scaleY(.55)
}

.orbit-two {
  transform:rotate(52deg) scaleY(.65);
  width:400px;
  height:400px;
  border-color:#6bdcff55
}

.orbit-three {
  transform:rotate(110deg) scaleY(.65);
  width:400px;
  height:400px
}

.core {
  width:240px;
  height:240px;
  display:grid;
  place-items:center;
  position:relative;
  z-index:1
}

.core img {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 0 28px #2462ef66)
}

.signal {
  position:absolute;
  font-size:10px;
  letter-spacing:1.4px;
  background:#0b1526dd;
  border:1px solid #527caa40;
  border-radius:4px;
  padding:12px;
  color:#b9cbe3
}

.signal i {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--cyan);
  margin-right:8px
}

.signal-one {
  top:90px;
  left:3%
}

.signal-two {
  bottom:95px;
  right:0
}

.coordinates {
  position:absolute;
  bottom:22px;
  font-size:9px;
  letter-spacing:2px;
  color:#637b9a
}

.hero-footer {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:55px;
  padding:24px 0;
  color:#7d8a9f;
  font-size:11px;
  letter-spacing:1.7px
}

.hero-footer a {
  letter-spacing:0;
  color:#c2ccdc;
  font-size:12px
}

.services {
  padding:95px 0
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:45px;
  gap:30px
}

h2 {
  font-size:48px;
  line-height:1.2
}

h2 span {
  color:#929fb5
}

.section-heading>p {
  max-width:345px;
  color:var(--muted);
  margin:0 0 4px
}

.cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px
}

.card {
  padding:30px;
  background:linear-gradient(140deg,#131c30,#0c111e);
  border:1px solid #ffffff16;
  border-radius:9px;
  transition:border-color .2s,transform .2s
}

.card:hover {
  border-color:#628be577;
  transform:translateY(-4px)
}

.card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:45px;
  font-size:12px;
  color:#6d7d96
}

.icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid #6b93f44a;
  border-radius:10px;
  color:#83a9ff;
  background:#4774e410;
  font-size:21px
}

.card h3 {
  font-size:25px;
  letter-spacing:-.7px;
  line-height:1.35
}

.card p {
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
  margin:20px 0 30px
}

.benefit {
  border-top:1px solid var(--line);
  padding-top:21px;
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#dbe6fa
}

.benefit span {
  color:var(--cyan)
}

.tags {
  font-size:11px;
  color:#7e8ba2;
  margin-top:12px
}

.approach {
  padding:60px 0 110px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}

.approach-title>p:last-child {
  max-width:410px;
  color:var(--muted);
  margin-top:25px
}

.steps article {
  display:flex;
  gap:28px;
  padding:25px 0;
  border-bottom:1px solid var(--line)
}

.steps article>span {
  font-size:12px;
  color:var(--cyan);
  padding-top:4px
}

.steps h3 {
  font-size:21px;
  letter-spacing:-.4px
}

.steps p {
  font-size:15px;
  color:var(--muted);
  margin:10px 0 0
}

.next {
  text-align:center;
  border:1px solid #537de233;
  background:radial-gradient(ellipse at 50% 110%,#1b3c804d,transparent 65%),#0c1323;
  border-radius:12px;
  padding:65px 25px
}

.next h2 {
  font-size:64px
}

.next p:not(.eyebrow) {
  color:var(--muted);
  margin:25px 0 30px
}

.next .eyebrow {
  font-size:11px
}

footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:50px 0
}

footer .brand {
  font-size:28px
}

footer p,footer>span,footer>a:last-child {
  font-size:12px;
  color:#8492a8
}

footer p {
  margin-right:auto;
  margin-left:25px
}

@media(min-width:1500px) {
  .hero {
    min-height:810px
  }

}

@media(max-width:900px) {
  nav {
    gap:20px
  }

  .hero {
    padding-top:60px;
    grid-template-columns:1.2fr 1fr
  }

  .visual {
    height:450px
  }

  .orbit,.orbit-two,.orbit-three {
    width:280px;
    height:280px
  }

  .signal {
    font-size:8px
  }

  .core {
    width:210px;
    height:210px
  }

  .cards {
    gap:12px
  }

  .card {
    padding:23px
  }

  .card h3 {
    font-size:22px
  }

  .approach {
    gap:45px
  }

  .section-heading>p {
    max-width:290px
  }

  h2 {
    font-size:38px
  }

}

@media(max-width:650px) {
  .wrap {
    width:89%
  }

  header {
    height:90px
  }

  .brand {
    font-size:31px
  }

  nav {
    gap:18px
  }

  nav>a {
    font-size:12px
  }

  .nav-cta {
    display:none
  }

  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:48px;
    min-height:0
  }

  h1 {
    font-size:56px;
    letter-spacing:-2.5px
  }

  .eyebrow {
    font-size:10px;
    letter-spacing:1.5px
  }

  .intro {
    font-size:16px
  }

  .visual {
    height:340px;
    width:100%;
    margin-top:20px
  }

  .orbit,.orbit-two,.orbit-three {
    width:270px;
    height:270px
  }

  .signal-one {
    top:55px
  }

  .signal-two {
    bottom:50px
  }

  .coordinates {
    bottom:0
  }

  .hero-footer {
    margin-top:30px;
    font-size:9px;
    letter-spacing:1px;
    gap:20px
  }

  .hero-footer a {
    font-size:10px
  }

  .services {
    padding:60px 0
  }

  .section-heading {
    display:block
  }

  .section-heading>p {
    margin-top:23px;
    max-width:none
  }

  .cards {
    grid-template-columns:1fr;
    gap:18px
  }

  .card {
    padding:28px
  }

  .card-top {
    margin-bottom:25px
  }

  .card h3 {
    font-size:26px
  }

  .card p {
    font-size:16px
  }

  .benefit {
    font-size:14px
  }

  .tags {
    font-size:12px
  }

  .approach {
    grid-template-columns:1fr;
    gap:10px;
    padding:20px 0 60px
  }

  .next {
    padding:45px 22px
  }

  .next h2 {
    font-size:50px
  }

  footer {
    flex-wrap:wrap;
    padding:35px 0;
    gap:18px
  }

  footer p {
    margin:0;
    font-size:11px
  }

  footer>span {
    width:60%
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  * {
    transition:none!important
  }

}

.contact {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  text-align:left;
  padding:55px
}

.contact h2 {
  font-size:48px
}

.contact h3 {
  font-size:24px;
  letter-spacing:-.6px;
  margin-bottom:24px
}

.contact form {
  min-width:0
}

.contact label {
  display:block;
  font-size:14px;
  margin:16px 0 7px;
  color:#dbe6fa
}

.contact input,.contact select,.contact textarea {
  display:block;
  width:100%;
  padding:13px 14px;
  border:1px solid #536782;
  border-radius:5px;
  background:#090f1d;
  color:#f3f6ff;
  font:inherit;
  font-size:16px
}

.contact textarea {
  resize:vertical
}

.contact input::placeholder,.contact textarea::placeholder {
  color:#8e9cb0
}

.contact :is(input,select,textarea):focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:2px
}

.contact button {
  margin-top:22px;
  cursor:pointer;
  font:inherit;
  font-size:14px
}

.contact .form-note {
  font-size:13px;
  margin:14px 0 0;
  line-height:1.6
}

.contact .contact-number {
  font-size:16px;
  margin-top:18px
}

.whatsapp {
  background:#156b48;
  border-color:#52b184
}

.whatsapp:hover {
  background:#1a8257
}

.floating-chat {
  position:fixed;
  right:24px;
  bottom:22px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 20px;
  background:#176d4a;
  border:1px solid #62c195;
  border-radius:40px;
  box-shadow:0 5px 25px #0007;
  font-size:14px;
  font-weight:600
}

.floating-chat:hover {
  background:#228757
}

footer {
  padding-bottom:100px
}

@media(max-width:900px) {
  .contact {
    padding:35px;
    gap:30px
  }

  .contact h2 {
    font-size:36px
  }

}

@media(max-width:650px) {
  .contact {
    grid-template-columns:1fr;
    padding:28px;
    gap:28px
  }

  .floating-chat {
    right:16px;
    bottom:16px;
    padding:11px 17px
  }

  .contact h2 {
    font-size:38px
  }

}

.contact-details {
  display:grid;
  gap:12px;
  margin-top:24px;
  max-width:100%;
  text-align:left
}

.contact-detail {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:16px 18px;
  border:1px solid #536782;
  border-radius:7px;
  background:#090f1d;
  transition:border-color .2s,background .2s
}

.contact-detail:hover {
  border-color:var(--cyan);
  background:#101d32
}

.contact-detail-label {
  font-size:14px;
  color:var(--muted);
  line-height:1.5
}

.contact-detail-value {
  font-size:16px;
  color:#f3f6ff;
  line-height:1.5;
  overflow-wrap:anywhere
}

.contact>div {
  min-width:0
}

@media(max-width:650px) {
  header {
    height:auto;
    min-height:90px;
    flex-wrap:wrap;
    gap:12px;
    padding-top:15px;
    padding-bottom:15px
  }

  nav {
    flex-wrap:wrap;
    gap:15px
  }

}

/* Shared layout and responsive brand treatment. */
header {
  height:auto;
  min-height:112px;
  gap:24px;
  padding-block:18px;
  flex-wrap:wrap
}

nav {
  flex-wrap:wrap;
  gap:24px
}

nav>a {
  font-size:14px
}

nav [aria-current="page"] {
  color:var(--cyan)
}

.hero,.approach,.contact {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.card {
  display:flex;
  flex-direction:column;
  min-width:0
}

.benefit {
  margin-top:auto
}

h1 {
  font-size:clamp(2.5rem,5.7vw,5.125rem)
}

h2,h3 {
  overflow-wrap:break-word
}

footer {
  flex-wrap:wrap
}

footer .brand {
  width:155px
}

footer p {
  margin-left:0
}

@media(max-width:800px) {
  header {
    justify-content:center
  }

  nav {
    justify-content:center
  }

  .contact {
    grid-template-columns:1fr
  }

  .approach {
    gap:30px
  }

  .contact h2 {
    font-size:clamp(2rem,6vw,3rem)
  }

}

@media(max-width:650px) {
  .brand {
    width:165px
  }

  nav {
    width:100%;
    gap:12px 18px
  }

  .nav-cta {
    display:inline-flex;
    padding:8px 12px
  }

  .nav-cta span {
    margin-left:8px
  }

  .approach {
    grid-template-columns:1fr
  }

  .button {
    max-width:100%;
    gap:16px
  }

  .hero-footer {
    flex-wrap:wrap
  }

  .contact {
    padding:24px
  }

  .contact h2 {
    letter-spacing:-1px
  }

  footer {
    align-items:center
  }

  .eyebrow {
    font-size:12px
  }

  .signal {
    font-size:10px
  }

}