:root{
  --bg:#05070B;
  --bg2:#0A1020;
  --surface:#0C1220;
  --surface2:#10182A;
  --text:#F7FAFF;
  --muted:#8B98AD;
  --line:#202A42;

  --violet:#7667FF;
  --cyan:#22D3EE;
  --mint:#9EFFC7;

  --shadow:
    0 20px 60px rgba(0,0,0,.42),
    0 0 35px rgba(118,103,255,.06);
}

/* ---------------- GLOBAL ---------------- */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0 !important;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  color:var(--text) !important;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(118,103,255,.15),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 16%,
      rgba(34,211,238,.11),
      transparent 26%
    ),
    radial-gradient(
      circle at 55% 90%,
      rgba(158,255,199,.05),
      transparent 25%
    ),
    var(--bg) !important;

  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background-image:
    linear-gradient(
      rgba(118,103,255,.028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(34,211,238,.028) 1px,
      transparent 1px
    );

  background-size:42px 42px;
  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,.85),
    transparent 90%
  );
}

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

/* ---------------- NAVBAR ---------------- */

.navbar{
  position:sticky !important;
  top:0;
  z-index:9999;

  min-height:78px !important;
  width:100%;

  padding:0 6% !important;

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

  background:
    rgba(5,7,11,.78) !important;

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border-bottom:1px solid rgba(118,103,255,.15) !important;
}

.logo{
  position:relative;

  color:#FFFFFF !important;

  font-size:21px !important;
  font-weight:850 !important;

  letter-spacing:-.4px;
}

.logo::after{
  content:"";
  position:absolute;

  left:0;
  bottom:-5px;

  width:34px;
  height:2px;

  border-radius:4px;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--violet)
    );

  box-shadow:
    0 0 12px rgba(34,211,238,.5);
}

.logo span{
  color:var(--cyan) !important;
}

.nav{
  display:flex;
  align-items:center;
  gap:25px !important;
}

.nav a{
  position:relative;

  color:#9AA7BC !important;

  font-size:12px !important;
  font-weight:650;

  transition:
    color .25s ease,
    transform .25s ease;
}

.nav a::after{
  content:"";

  position:absolute;
  left:50%;
  bottom:-9px;

  width:0;
  height:2px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--violet)
    );

  border-radius:10px;

  transition:width .25s ease;

  box-shadow:
    0 0 12px rgba(34,211,238,.45);
}

.nav a:hover,
.nav a.active{
  color:#FFFFFF !important;
  transform:translateY(-1px);
}

.nav a:hover::after,
.nav a.active::after{
  width:24px;
}

/* ---------------- HERO ---------------- */

.hero{
  position:relative;
  overflow:hidden;

  min-height:590px !important;

  display:flex;
  align-items:center;

  padding:
    110px
    7%
    95px !important;

  background:
    radial-gradient(
      circle at 76% 27%,
      rgba(118,103,255,.23),
      transparent 20%
    ),
    radial-gradient(
      circle at 84% 38%,
      rgba(34,211,238,.17),
      transparent 24%
    ),
    radial-gradient(
      circle at 65% 72%,
      rgba(158,255,199,.07),
      transparent 22%
    ),
    linear-gradient(
      180deg,
      #070A12 0%,
      #05070B 100%
    ) !important;
}

.hero::before{
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  right:-170px;
  top:-190px;

  border-radius:50%;

  border:
    1px solid rgba(118,103,255,.20);

  box-shadow:
    0 0 80px rgba(118,103,255,.10),
    inset 0 0 80px rgba(34,211,238,.03);
}

.hero::after{
  content:"";

  position:absolute;

  width:700px;
  height:2px;

  right:-180px;
  bottom:95px;

  transform:rotate(-25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34,211,238,.45),
      rgba(118,103,255,.35),
      transparent
    );

  filter:blur(.3px);
}

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

.hero .tag,
.tag{
  color:var(--cyan) !important;

  font-size:10px !important;
  font-weight:800 !important;

  letter-spacing:2.5px;

  text-transform:uppercase;
}

h1{
  max-width:930px;

  margin:
    18px
    0
    20px !important;

  color:#FFFFFF !important;

  font-size:clamp(42px,6vw,72px) !important;

  line-height:1.01 !important;

  letter-spacing:-2.8px !important;

  text-shadow:
    0 0 35px rgba(118,103,255,.10);
}

.hero p,
.section p{
  color:var(--muted) !important;

  line-height:1.85 !important;

  font-size:14px !important;
}

/* ---------------- SECTIONS ---------------- */

.section{
  position:relative;

  padding:
    88px
    0 !important;

  background:
    linear-gradient(
      180deg,
      rgba(10,16,32,.78),
      rgba(5,7,11,.96)
    ) !important;
}

.section:nth-of-type(even){
  background:
    linear-gradient(
      180deg,
      rgba(7,10,18,.96),
      rgba(10,16,32,.82)
    ) !important;
}

.container{
  width:86% !important;
  max-width:1240px !important;
  margin:auto !important;
}

.section h2{
  color:#FFFFFF !important;

  font-size:
    clamp(28px,4vw,42px) !important;

  letter-spacing:-1.2px;
}

/* ---------------- CARDS ---------------- */

.grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:20px !important;
}

.card,
.job,
.value{
  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      rgba(16,24,42,.92),
      rgba(9,13,23,.94)
    ) !important;

  border:
    1px solid rgba(130,145,180,.14) !important;

  border-radius:18px !important;

  padding:28px !important;

  box-shadow:var(--shadow);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.card::before,
.job::before,
.value::before{
  content:"";

  position:absolute;

  width:150px;
  height:150px;

  top:-90px;
  right:-70px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(118,103,255,.22),
      transparent 68%
    );

  pointer-events:none;
}

.card::after,
.job::after,
.value::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34,211,238,.75),
      rgba(118,103,255,.75),
      transparent
    );

  opacity:.6;
}

.card:hover,
.job:hover,
.value:hover{
  transform:translateY(-7px);

  border-color:
    rgba(34,211,238,.32) !important;

  box-shadow:
    0 25px 70px rgba(0,0,0,.46),
    0 0 30px rgba(34,211,238,.08);
}

.card h3,
.job h3,
.value h3{
  color:#F7FAFF !important;

  font-size:18px;

  letter-spacing:-.25px;
}

.card p,
.job p,
.value p{
  color:#8996AA !important;

  font-size:12px !important;

  line-height:1.75 !important;
}

/* ---------------- BADGES ---------------- */

.badge,
.skills span{
  display:inline-block;

  background:
    rgba(118,103,255,.09) !important;

  border:
    1px solid rgba(118,103,255,.25) !important;

  color:
    #B8C5FF !important;

  padding:
    6px
    9px !important;

  border-radius:6px !important;

  font-size:9px !important;
}

.badge:hover,
.skills span:hover{
  border-color:
    rgba(34,211,238,.45) !important;

  color:#A9FFF0 !important;
}

/* ---------------- BUTTON ---------------- */

.btn,
.apply{
  position:relative;

  display:inline-flex;

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

  gap:7px;

  padding:
    12px
    18px !important;

  border-radius:8px !important;

  border:1px solid
    rgba(255,255,255,.08) !important;

  background:
    linear-gradient(
      135deg,
      var(--violet),
      #4E7DFF
    ) !important;

  color:#FFFFFF !important;

  font-size:11px !important;

  font-weight:750 !important;

  box-shadow:
    0 8px 25px rgba(118,103,255,.24);

  transition:.25s ease;
}

.btn:hover,
.apply:hover{
  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #8B7DFF,
      #36BFFF
    ) !important;

  box-shadow:
    0 14px 35px rgba(34,211,238,.18),
    0 0 22px rgba(118,103,255,.16);
}

/* ---------------- CTA ---------------- */

.cta,
.career-cta,
.careers-highlight{
  position:relative;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 92% 20%,
      rgba(34,211,238,.12),
      transparent 25%
    ),
    radial-gradient(
      circle at 5% 80%,
      rgba(118,103,255,.14),
      transparent 30%
    ),
    #0A1020 !important;

  border:
    1px solid rgba(118,103,255,.22) !important;

  border-radius:18px !important;

  box-shadow:
    0 25px 75px rgba(0,0,0,.30);
}

.cta::after,
.career-cta::after,
.careers-highlight::after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255,255,255,.025) 48%,
      transparent 75%
    );

  pointer-events:none;
}

/* ---------------- CONTACT / FOOTER ---------------- */

footer{
  padding:
    32px
    7% !important;

  background:#030508 !important;

  color:#748198 !important;

  border-top:
    1px solid rgba(118,103,255,.15) !important;

  font-size:11px !important;
}

/* ---------------- SPECIAL TECHNOLOGY ITEMS ---------------- */

.arch-item,
.health-item,
.ai-box,
.stage{
  background:
    rgba(10,16,32,.80) !important;

  border:
    1px solid rgba(118,103,255,.15) !important;

  border-radius:10px !important;
}

.arch-item strong,
.ai-box h3,
.stage-name{
  color:#EAF0FF !important;
}

.arch-item span,
.ai-box p,
.stage-status{
  color:#77869C !important;
}

/* ---------------- RESPONSIVE ---------------- */

@media(max-width:1050px){

  .grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .nav{
    gap:14px !important;
  }

  h1{
    font-size:48px !important;
  }
}

@media(max-width:700px){

  .navbar{
    position:relative !important;

    min-height:auto !important;

    padding:
      18px
      5% !important;

    flex-direction:column;

    align-items:flex-start;

    gap:16px;
  }

  .nav{
    width:100%;

    display:flex;

    flex-wrap:wrap;

    gap:13px !important;
  }

  .hero{
    min-height:470px !important;

    padding:
      72px
      5% !important;
  }

  h1{
    font-size:38px !important;

    letter-spacing:-1.8px !important;
  }

  .container{
    width:90% !important;
  }

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

  .section{
    padding:60px 0 !important;
  }
}