@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&family=Rajdhani:wght@400;500;600;700&display=swap');

:root{
  --bg:#03080c;
  --panel:#07121a;
  --cyan:#58d8ff;
  --blue:#168cb6;
  --text:#e9f5fa;
  --muted:#9ab1bc;
  --red:#ff6547;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body {
  margin: 0;
  width: 100%;
  background:
    radial-gradient(circle at 60% 10%, #092130 0, transparent 28%),
    var(--bg);
  color: var(--text);
  font-family: Rajdhani, Arial, sans-serif;
  overflow-x: hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(#1e5a6b 1px,transparent 1px),
    linear-gradient(90deg,#1e5a6b 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(#000,transparent 75%);
}

.scanlines{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9;
  background:repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(80,210,255,.025) 4px
  );
  mix-blend-mode:screen;
}

.hud{
  border:1px solid rgba(88,216,255,.42);
  background:linear-gradient(
    110deg,
    rgba(8,20,28,.9),
    rgba(3,9,13,.8)
  );
  box-shadow:
    inset 0 0 30px rgba(34,154,198,.06),
    0 0 20px rgba(0,0,0,.5);
  clip-path:polygon(
    1% 0,
    99% 0,
    100% 14%,
    100% 88%,
    99% 100%,
    1% 100%,
    0 88%,
    0 12%
  );
}

/* NAVIGATION */

.nav{
  height:90px;
  margin:18px 2.5%;
  padding:12px 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:3;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--cyan);
  font-family:Orbitron;
  text-decoration:none;
  font-size:25px;
  letter-spacing:2px;
}

.brand b{
  color:#fff;
  font-weight:500;
}

.brand small{
  display:block;
  font:10px Rajdhani;
  letter-spacing:1.5px;
}

.logo,
.footer-logo,
.cta-logo{
  width:54px;
  height:54px;
  border:1px solid var(--cyan);
  border-radius:50%;
  display:grid;
  place-items:center;
  font:35px Orbitron;
  box-shadow:0 0 20px rgba(88,216,255,.25);
}

nav{
  display:flex;
  gap:38px;
}

nav a{
  font:14px Orbitron;
  color:#c8d7dd;
  text-decoration:none;
}

nav a:hover,
.active{
  color:var(--cyan)!important;
  text-shadow:0 0 12px var(--cyan);
}

/* HERO */

.hero{
  min-height:510px;
  display:grid;
  grid-template-columns:48% 52%;
  padding:65px 8% 40px;
  position:relative;
}

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

.eyebrow{
  font:600 15px Orbitron;
  color:var(--cyan);
  letter-spacing:2px;
}

.eyebrow span{
  color:var(--red);
}

h1{
  font:700 clamp(48px,6vw,85px)/.94 Orbitron;
  letter-spacing:1px;
  margin:14px 0 22px;
  text-shadow:0 0 25px rgba(88,216,255,.15);
}

h1 em{
  font-style:normal;
  color:#62c8eb;
}

.intro{
  max-width:480px;
  font-size:18px;
  line-height:1.35;
  color:#c4d0d5;
}

.btn{
  display:inline-flex;
  gap:20px;
  align-items:center;
  margin-top:20px;
  padding:13px 25px;
  border:1px solid var(--red);
  color:#fff;
  text-decoration:none;
  font:14px Orbitron;
  letter-spacing:1px;
  background:linear-gradient(
    90deg,
    rgba(255,75,48,.28),
    rgba(255,75,48,.06)
  );
  box-shadow:0 0 15px rgba(255,70,45,.25);
  clip-path:polygon(
    7% 0,
    100% 0,
    94% 100%,
    0 100%
  );
}

.btn:hover{
  background:rgba(255,80,50,.35);
}

.hero-visual{
  position:relative;
  min-height:480px;
}

.orbit{
  position:absolute;
  border:1px solid rgba(88,216,255,.22);
  border-radius:50%;
  width:270px;
  height:270px;
  left:24%;
  top:35px;
  transform:rotate(-20deg);
}

.orbit-b{
  width:340px;
  height:120px;
  top:190px;
  left:8%;
  transform:rotate(15deg);
}

.drone{
  position:absolute;
  left:28%;
  top:55px;
  width:115px;
  height:65px;
  border:2px solid var(--cyan);
  border-radius:45%;
  display:grid;
  place-items:center;
  color:var(--cyan);
  box-shadow:0 0 25px rgba(88,216,255,.3);
}

.drone:before,
.drone:after{
  content:"";
  position:absolute;
  width:65px;
  border-top:2px solid var(--cyan);
}

.drone:before{
  transform:rotate(25deg);
}

.drone:after{
  transform:rotate(-25deg);
}

.robot-arm{
  position:absolute;
  right:18%;
  bottom:25px;
  width:330px;
  height:360px;
  filter:drop-shadow(0 0 20px rgba(88,216,255,.2));
}

.arm-base{
  position:absolute;
  bottom:0;
  left:80px;
  width:180px;
  height:60px;
  border:12px solid #183746;
  border-radius:50%;
  box-shadow:
    inset 0 0 25px #071015,
    0 0 15px var(--cyan);
}

.arm-joint{
  position:absolute;
  width:70px;
  height:70px;
  border:12px solid #244858;
  border-radius:50%;
  background:#071016;
  box-shadow:
    inset 0 0 15px #000,
    0 0 8px var(--cyan);
}

.j1{
  bottom:45px;
  left:125px;
}

.l1{
  position:absolute;
  width:175px;
  height:48px;
  background:linear-gradient(#2b5363,#0a161d);
  bottom:120px;
  left:100px;
  transform:rotate(-58deg);
  transform-origin:left;
  border:1px solid #5dd8f8;
}

.j2{
  bottom:250px;
  left:220px;
}

.l2{
  position:absolute;
  width:130px;
  height:38px;
  background:linear-gradient(#315c6b,#0b151b);
  bottom:275px;
  left:255px;
  transform:rotate(-30deg);
  transform-origin:left;
  border:1px solid #5dd8f8;
}

.claw{
  position:absolute;
  right:-38px;
  top:18px;
  font-size:90px;
  color:#6bdfff;
  transform:rotate(-70deg);
}

/* HUD SMALL */

.hud-small{
  position:absolute;
  border:1px solid rgba(88,216,255,.35);
  padding:13px;
  background:rgba(5,15,22,.82);
  font:12px Rajdhani;
  color:#8fc6d8;
  line-height:1.7;
}

.hud-small b{
  font-family:Orbitron;
  font-size:9px;
  color:#ccecf7;
}

.hud-small span{
  color:var(--cyan);
}

.terminal{
  right:3%;
  left:auto;
  bottom:12%;
  width:185px;
  z-index:15;
}

.status{
  right:0;
  top:30px;
  width:180px;
}

.status strong{
  float:right;
  color:var(--cyan);
}

.status i{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
}

.status hr{
  border:0;
  border-top:1px solid #16323d;
}

.diagnostic{
  position:absolute;
  left:44%;
  right:auto;
  bottom:12%;
  width:150px;
  z-index:15;
}

.mini-robot{
  font-size:28px;
  color:#6adfff;
  text-align:center;
}

/* ROBOT IMAGE */

.robot-image{
  position:absolute;
  width:55%;
  max-width:600px;
  height:auto;
  right:8%;
  bottom:2%;
  z-index:10;
  display:block;
}

/* CARDS */

.cards {
  width: 90%;
  max-width: 1200px;
  margin: 50px 0 50px 7%;
  padding: 20px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card{
  min-height:225px;
  padding:24px 20px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(88,216,255,.42);
  background:linear-gradient(
    135deg,
    rgba(10,26,35,.88),
    rgba(3,9,13,.95)
  );
  clip-path:polygon(
    4% 0,
    96% 0,
    100% 10%,
    100% 90%,
    96% 100%,
    4% 100%,
    0 90%,
    0 10%
  );
}

.icon{
  float:left;
  margin-right:16px;
  border:1px solid var(--red);
  color:var(--red);
  padding:9px;
  font-size:28px;
}

.card h2{
  font-family:Orbitron,sans-serif!important;
  font-size:18px!important;
  font-weight:500!important;
  color:#7bdfff!important;
  padding-top:9px;
}

.card p{
  clear:both;
  width:55%;
  font-size:16px;
  line-height:1.45;
  color:#b7c4c9;
}

.small{
  font-size:11px;
  padding:10px 18px;
  margin-top:4px;
}

.schematic,
.chip,
.head{
  position:absolute;
  right:7%;
  bottom:20px;
  color:rgba(88,216,255,.45);
  font-size:70px;
}

.chip{
  font-size:110px;
}

.head{
  font-size:150px;
}

/* ABOUT */

.mission {
  width: 100%;
  max-width: none;
  height: 500px; /* CHANGE THIS NUMBER */
  margin: 38px 0;
  padding: 42px 6%;
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 25px;
  box-sizing: border-box;
}

.mission h2{
  font:500 30px Orbitron;
  color:#70d9fa;
}

.mission-copy>p:not(.eyebrow){
  font-size:17px;
  line-height:1.55;
  color:#b8c4c9;
}

.values{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:28px;
}

.values div{
  text-align:center;
  color:#8edcf3;
}

.values span{
  display:block;
  font-size:28px;
}

.values b,
.values small{
  display:block;
}

.values b{
  font:13px Orbitron;
  margin:8px;
}

.values small{
  font-size:12px;
  color:#a9b9bf;
}

.lab-image{
  position:relative;
  min-height:280px;
  border:1px solid #1c5165;
  background:linear-gradient(
    120deg,
    #07121b,
    #102431,
    #060b0f
  );
  overflow:hidden;
  display:grid;
  place-items:center;
}

.lab-glow{
  position:absolute;
  width:300px;
  height:120px;
  border-radius:50%;
  background:rgba(50,150,255,.22);
  filter:blur(35px);
}

.lab-bot{
  position:relative;
  font-size:110px;
  color:#456e7e;
  text-align:center;
  text-shadow:0 0 25px #55cfff;
}

.lab-bot span{
  font-size:70px;
  color:#6ce5ff;
}

.lab-image p{
  position:absolute;
  bottom:5px;
  left:20px;
  font:10px Orbitron;
  color:#76dfff;
}

/* =========================
   SPONSORS & PARTNERS
   ========================= */

.sponsors{
  margin:38px 2%;
  padding:28px 45px 35px;
  position:relative;
  border:1px solid rgba(88,216,255,.42);
  background:linear-gradient(
    110deg,
    rgba(8,20,28,.92),
    rgba(3,9,13,.95)
  );
  box-shadow:
    inset 0 0 30px rgba(34,154,198,.06),
    0 0 20px rgba(0,0,0,.5);
  clip-path:polygon(
    1.5% 0,
    98.5% 0,
    100% 12%,
    100% 88%,
    98.5% 100%,
    1.5% 100%,
    0 88%,
    0 12%
  );
}

.sponsors-title{
  text-align:center;
  margin:0;
  color:var(--cyan);
  font:600 25px Orbitron,sans-serif;
  letter-spacing:2px;
  text-shadow:0 0 12px rgba(88,216,255,.35);
}

.sponsors-title:before,
.sponsors-title:after{
  content:"";
  display:inline-block;
  width:70px;
  height:1px;
  background:var(--cyan);
  vertical-align:middle;
  margin:0 18px;
  box-shadow:0 0 8px rgba(88,216,255,.4);
}

.sponsors-intro{
  text-align:center;
  margin:12px auto 28px;
  color:#b7c8cf;
  font-size:15px;
}

.sponsor-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:1000px;
  margin:0 auto;
}

.sponsor{
  display:flex;
  align-items:center;
  gap:22px;
  min-height:120px;
  padding:18px 35px;
  position:relative;
}

.sponsor:first-child{
  border-right:1px solid rgba(88,216,255,.28);
}

.sponsor-logo{
  width:82px;
  height:82px;
  object-fit:contain;
  flex-shrink:0;
  border-radius:50%;
  filter:drop-shadow(0 0 8px rgba(88,216,255,.18));
}

.sponsor h3{
  margin:0 0 7px;
  color:var(--cyan);
  font:500 19px Orbitron,sans-serif;
  letter-spacing:1px;
}

.sponsor p{
  margin:0;
  color:#e1edf1;
  font-size:15px;
}

.sponsor-line{
  width:35px;
  height:1px;
  background:var(--cyan);
  margin-top:9px;
  box-shadow:0 0 7px rgba(88,216,255,.5);
}

/* =========================
   CHALLENGES
   ========================= */

.challenge-section{
  margin:80px 2% 42px;
  padding:10px 3% 35px;
}

.challenge-heading{
  margin-bottom:25px;
}

.challenge-heading h2{
  margin:5px 0 8px;
  color:var(--cyan);
  font:600 30px Orbitron,sans-serif;
  letter-spacing:2px;
  text-shadow:0 0 15px rgba(88,216,255,.3);
}

.challenge-heading p{
  max-width:850px;
  margin:0;
  color:#c4d0d5;
  font-size:17px;
  line-height:1.4;
  }

  /* =========================
   CHALLENGE CARDS
========================= */

.challenge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  width: 90%;
  max-width: 1100px;
  margin: 0 0 0 9%;
  align-items: stretch;
}

.challenge-card {
  width: 100%;
  height: 600px;
  min-height: 600px;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 330px 1fr;

  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;

  border: 1px solid rgba(88,216,255,.42);
  border-radius: 12px;

  background: linear-gradient(
    145deg,
    rgba(8,25,34,.95),
    rgba(3,9,13,.98)
  );

  color: var(--text);
  text-decoration: none;
  transition: .25s ease;
}

  color: var(--text);
  text-decoration: none;

  transition: .25s ease;
}

.challenge-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 0 25px rgba(88,216,255,.18),
    inset 0 0 30px rgba(88,216,255,.06);
}
/* SECOND CHALLENGE CARD - IMAGE ON RIGHT */
.challenge-card:nth-child(2) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 330px 1fr;
}

.challenge-card:nth-child(2) .challenge-visual {
  grid-column: 2;
  grid-row: 1;
}

.challenge-card:nth-child(2) .challenge-content {
  grid-column: 1;
  grid-row: 2;
  padding: 28px;
}

/* IMAGE */

.challenge-visual {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-bottom: none;
}

.challenge-visual img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* ACTIVE LABEL */

.active-badge {
  position: absolute;
  top: 14px;
  right: 14px;

  padding: 8px 15px;

  background: #00d878;
  color: #00150b;

  font: 700 11px Orbitron,sans-serif;
  letter-spacing: 1px;

  z-index: 2;
}


/* CONTENT */

.challenge-content {
  width: 100%;
  height: 300px;
  min-height: 300px;

  flex: 0 0 300px;

  padding: 28px;

  box-sizing: border-box;
}

.challenge-category {
  display: inline-block;

  padding: 6px 11px;

  border: 1px solid rgba(88,216,255,.4);

  color: var(--cyan);

  font: 10px Orbitron,sans-serif;
  letter-spacing: 1px;
}

.challenge-content h3 {
  margin: 14px 0 10px;

  color: #e9f5fa;

  font: 500 21px Orbitron,sans-serif;
}

.challenge-content p {
  margin: 0 0 20px;

  color: #b7c8cf;

  font-size: 16px;
  line-height: 1.45;
}


/* BUTTON */

.challenge-button {
  display: inline-block;

  padding: 9px 16px;

  border: 1px solid var(--red);

  background: rgba(255,75,48,.18);

  color: white;

  font: 11px Orbitron,sans-serif;
  letter-spacing: 1px;

  text-decoration: none;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 850px) {

 .challenge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;

  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  align-items: stretch;
}

  .challenge-card {
    height: 520px;
    min-height: 520px;
  }

  .challenge-visual {
    height: 200px;
    min-height: 200px;
    flex-basis: 200px;
  }

.challenge-content {
  width: 100%;
  height: 100%;
  min-height: 0;

  padding: 30px 32px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
  
/* =========================
   FOOTER
   ========================= */

footer {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1.5fr;
  gap: 50px;
  padding: 55px 6% 25px;
  margin: 0;
  border-top: 1px solid rgba(88, 216, 255, 0.25);
  background: #02080c;
}
  box-shadow:
    inset 0 0 30px rgba(34,154,198,.06);
}
footer > div {
  min-width: 0;
}

footer h3 {
  margin: 0 0 20px;
  font-size: 16px;
  letter-spacing: 0.5px;
}

footer p {
  margin: 0 0 20px;
  line-height: 1.6;
  color: #c4d0d5;
}

footer a {
  display: block;
  margin-bottom: 10px;
  color: #c4d0d5;
  text-decoration: none;
}

footer a:hover {
  color: #58d8ff;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-top: 10px;
  border: 1px solid #58d8ff;
  border-radius: 50%;
  font-size: 32px;
}

.socials {
  display: flex;
  gap: 12px;
  margin-top: 15px;
}

.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 1px solid rgba(88, 216, 255, 0.5);
  border-radius: 50%;
}

.copyright {
  grid-column: 1 / -1;
  padding-top: 20px;
  margin-top: 10px;
  border-top: 1px solid rgba(88, 216, 255, 0.15);
  text-align: center;
  color: #8fa0a8;
}
footer > div {
  min-width: 0;
}

footer h3 {
  margin: 0 0 18px;
  color: var(--cyan);
  font: 600 15px Orbitron, sans-serif;
  letter-spacing: 1px;
}

footer p {
  margin: 0 0 15px;
  color: #9ab1bc;
  font-size: 14px;
  line-height: 1.5;
}

footer a {
  display: block;
  margin-bottom: 8px;
  color: #c8d7dd;
  font-size: 14px;
  text-decoration: none;
}

footer a:hover {
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
}

footer .footer-logo {
  margin-top: 10px;
}

.socials {
  display: flex;
  gap: 15px;
}

.socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;

  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-size: 18px;

  border-radius: 50%;
}

.socials a:hover {
  background: rgba(88,216,255,.1);
}

footer .copyright {
  grid-column: 1 / -1;

  padding-top: 20px;
  margin-top: 10px;

  border-top: 1px solid rgba(88,216,255,.18);

  color: #66808b;
  font-size: 12px;
  text-align: center;
}
/* =========================
   FOOTER
========================= */

footer {
  width: 100%;
  margin: 50px 0 0;
  padding: 55px 5% 25px;

  box-sizing: border-box;

  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 50px;

  border-top: 1px solid rgba(88,216,255,.42);

  background:
    linear-gradient(
      145deg,
      rgba(8,25,34,.96),
      rgba(3,9,13,.98)
    );
}

/* Footer columns */
footer > div {
  min-width: 0;
}

/* Headings */
footer h3 {
  margin: 0 0 18px;

  color: var(--cyan);

  font-family: Orbitron, sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
}

/* Paragraphs */
footer p {
  margin: 0 0 18px;

  color: #9ab1bc;
  font-size: 14px;
  line-height: 1.6;
}

/* Quick links */
footer > div:nth-child(2) a {
  display: block;

  margin-bottom: 10px;

  color: #c4d0d5;
  text-decoration: none;
  font-size: 14px;
}

footer > div:nth-child(2) a:hover {
  color: var(--cyan);
}

/* Footer logo */
.footer-logo {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  margin-top: 15px;

  border: 1px solid var(--cyan);
  border-radius: 50%;

  color: var(--cyan);
  font-size: 28px;
}

/* Social icons */
.socials {
  display: flex;
  gap: 12px;
}

.socials a {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border: 1px solid var(--cyan);
  border-radius: 50%;

  color: var(--cyan);
  text-decoration: none;
  font-size: 18px;
}

.socials a:hover {
  background: rgba(88,216,255,.1);
}

/* Copyright */
footer .copyright {
  grid-column: 1 / -1;

  padding-top: 20px;
  margin-top: 10px;

  border-top: 1px solid rgba(88,216,255,.18);

  color: #66808b;
  font-size: 12px;

  text-align: center;
}