:root{
  --bg:#030712;
  --bg-soft:#07101f;

  --panel:rgba(7,14,30,.78);
  --panel-solid:#081326;

  --ink:#edf6ff;
  --muted:#91a3bb;

  --line:rgba(135,170,205,.18);

  --cyan:#67e8f9;
  --blue:#3b82f6;
  --violet:#8b5cf6;
  --green:#7dffb2;

  --shadow:0 22px 70px rgba(0,0,0,.28);

  --radius:18px;
}


/* ================= RESET ================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  background:var(--bg);

  color:var(--ink);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height:1.5;

  overflow-x:hidden;
}

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

button,
input,
select,
textarea{
  font:inherit;
}


/* ================= DYNAMIC BACKGROUND ================= */

#quantumCanvas{
  position:fixed;

  inset:0;

  width:100%;
  height:100%;

  z-index:-2;

  pointer-events:none;

  opacity:.72;
}

.quantum-bg{
  position:fixed;

  inset:0;

  z-index:-1;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(59,130,246,.12),
      transparent 27%
    ),

    radial-gradient(
      circle at 80% 20%,
      rgba(103,232,249,.08),
      transparent 25%
    ),

    radial-gradient(
      circle at 55% 85%,
      rgba(139,92,246,.08),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      rgba(3,7,18,.05),
      rgba(3,7,18,.60)
    );
}

.quantum-bg:after{
  content:"";

  position:absolute;

  inset:0;

  background-image:
    linear-gradient(
      rgba(103,232,249,.035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(103,232,249,.035) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 85%
    );
}


/* ================= HEADER ================= */

.site-header{
  position:sticky;

  top:0;

  z-index:20;

  height:76px;

  background:rgba(3,7,18,.72);

  backdrop-filter:blur(18px);

  border-bottom:1px solid var(--line);

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:0 5vw;
}


/* Brand */

.brand{
  display:flex;

  align-items:center;

  gap:11px;

  color:white;
}

.brand-mark{
  width:40px;

  height:40px;

  border:2px solid var(--cyan);

  border-radius:50%;

  display:grid;

  place-items:center;

  font-weight:900;

  color:var(--cyan);

  box-shadow:
    0 0 20px rgba(103,232,249,.18);
}

.brand b{
  display:block;

  letter-spacing:.11em;

  font-size:14px;
}

.brand small{
  display:block;

  color:#7387a4;

  font-size:8px;

  letter-spacing:.18em;
}


/* Navigation */

nav{
  display:flex;

  gap:20px;

  align-items:center;

  font-size:10px;

  font-weight:800;

  letter-spacing:.08em;

  color:#c7d5e7;
}

nav a{
  padding:10px 0;

  transition:.2s ease;
}

nav a:hover{
  color:var(--cyan);
}


/* Mobile menu */

.menu-toggle{
  display:none;

  border:0;

  background:none;

  color:white;

  font-size:24px;

  cursor:pointer;
}


/* ================= HERO ================= */

.hero{
  min-height:650px;

  padding:
    100px
    8vw
    80px;

  display:grid;

  grid-template-columns:
    1.1fr
    .9fr;

  gap:40px;

  align-items:center;

  position:relative;
}

.hero:after{
  content:"";

  position:absolute;

  width:720px;

  height:720px;

  border-radius:50%;

  border:1px solid rgba(103,232,249,.07);

  right:2%;

  top:-20%;

  pointer-events:none;
}

.hero-copy{
  max-width:760px;
}

.eyebrow{
  font-size:10px;

  font-weight:900;

  letter-spacing:.2em;

  color:var(--cyan);
}

.system-label{
  margin-top:12px;

  color:#536981;

  font-size:9px;

  letter-spacing:.18em;
}

h1{
  font-size:
    clamp(
      44px,
      6vw,
      78px
    );

  line-height:.98;

  margin:
    16px
    0
    25px;

  letter-spacing:-.055em;
}

h1 span{
  display:block;

  background:
    linear-gradient(
      90deg,
      #67e8f9,
      #3b82f6,
      #8b5cf6
    );

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;
}

.hero p{
  max-width:650px;

  color:#91a3bb;

  font-size:17px;
}


/* Hero buttons */

.hero-actions{
  display:flex;

  gap:12px;

  margin-top:32px;
}

.btn{
  border:1px solid rgba(103,232,249,.25);

  border-radius:10px;

  padding:13px 18px;

  font-weight:900;

  font-size:12px;

  cursor:pointer;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

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

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

  border-color:
    rgba(103,232,249,.6);
}

.btn.primary{
  color:#03101e;

  background:
    linear-gradient(
      135deg,
      #67e8f9,
      #3b82f6
    );

  border:0;

  box-shadow:
    0 12px 35px
    rgba(59,130,246,.20);
}

.btn.ghost{
  color:#dcecff;

  background:
    rgba(255,255,255,.025);
}

.btn.large{
  padding:16px 22px;
}

.btn.full{
  width:100%;

  margin-top:18px;
}


/* Hero statistics */

.hero-stats{
  display:flex;

  gap:35px;

  margin-top:48px;
}

.hero-stats strong{
  display:block;

  font-size:22px;

  color:white;
}

.hero-stats span{
  display:block;

  margin-top:2px;

  color:#687d97;

  font-size:10px;
}


/* ================= QUANTUM HERO VISUAL ================= */

.hero-visual{
  min-height:430px;

  display:grid;

  place-items:center;

  position:relative;
}

.quantum-core{
  width:360px;

  height:360px;

  position:relative;

  display:grid;

  place-items:center;
}

.core{
  width:78px;

  height:78px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      white 0%,
      #67e8f9 25%,
      #3b82f6 58%,
      transparent 70%
    );

  box-shadow:
    0 0 45px #3b82f6,
    0 0 90px rgba(103,232,249,.35);

  animation:
    corePulse 4s ease-in-out infinite;
}

@keyframes corePulse{

  0%,
  100%{
    transform:scale(.94);
  }

  50%{
    transform:scale(1.08);
  }

}


/* Orbits */

.orbit{
  position:absolute;

  border:1px solid
    rgba(103,232,249,.35);

  border-radius:50%;
}

.orbit-one{
  inset:45px;

  transform:
    rotate(62deg)
    scaleY(.55);
}

.orbit-two{
  inset:10px;

  transform:
    rotate(-28deg)
    scaleY(.48);
}

.orbit-three{
  inset:78px;

  transform:
    rotate(-70deg)
    scaleY(.52);
}


/* Photons */

.photon{
  position:absolute;

  width:7px;

  height:7px;

  border-radius:50%;

  background:white;

  box-shadow:
    0 0 18px
    var(--cyan);
}

.photon-one{
  top:54px;

  right:83px;
}

.photon-two{
  bottom:66px;

  left:48px;
}

.photon-three{
  right:18px;

  top:177px;
}


/* Visual card */

.visual-card{
  position:absolute;

  right:0;

  bottom:10px;

  padding:15px 18px;

  border:
    1px solid
    rgba(103,232,249,.17);

  border-radius:12px;

  background:
    rgba(5,15,31,.72);

  backdrop-filter:blur(15px);

  box-shadow:
    0 15px 40px rgba(0,0,0,.22);
}

.visual-card b{
  display:block;

  font-size:9px;

  letter-spacing:.15em;

  color:#dffaff;
}

.visual-card span{
  display:block;

  margin-top:4px;

  font-size:9px;

  color:#69819e;
}


/* ================= SEARCH ================= */

.search-panel{
  width:min(1180px,90%);

  margin:-35px auto 0;

  padding:22px;

  position:relative;

  z-index:5;

  display:flex;

  align-items:end;

  gap:25px;

  background:
    rgba(7,14,30,.82);

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

  border-radius:16px;

  backdrop-filter:blur(18px);

  box-shadow:var(--shadow);
}

.search-title{
  min-width:230px;
}

.search-title h2{
  margin:
    5px
    0
    0;

  font-size:22px;
}

.search-controls{
  flex:1;

  display:grid;

  grid-template-columns:
    1.6fr
    1fr
    1fr
    auto;

  gap:9px;
}


/* ================= INPUTS ================= */

input,
select,
textarea{
  width:100%;

  border:
    1px solid
    rgba(135,170,205,.20);

  border-radius:9px;

  background:
    rgba(255,255,255,.035);

  color:var(--ink);

  padding:12px 13px;

  outline:none;

  font-size:12px;
}

select option{
  background:#071326;

  color:white;
}

input::placeholder,
textarea::placeholder{
  color:#526780;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--cyan);

  box-shadow:
    0 0 0 3px
    rgba(103,232,249,.07);
}

textarea{
  resize:vertical;
}


/* ================= SECTIONS ================= */

.section{
  width:min(1180px,90%);

  margin:
    90px
    auto;
}

.section-heading{
  display:flex;

  align-items:end;

  justify-content:space-between;

  margin-bottom:28px;
}

.section-heading h2{
  margin:
    7px
    0
    0;

  font-size:38px;

  letter-spacing:-.035em;
}

.count-badge{
  color:var(--cyan);

  border:
    1px solid
    rgba(103,232,249,.18);

  background:
    rgba(103,232,249,.04);

  padding:
    6px
    10px;

  border-radius:999px;

  font-size:10px;

  font-weight:900;
}


/* ================= JOBS ================= */

.job-grid{
  display:grid;

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

  gap:15px;
}

.job-card{
  min-height:265px;

  padding:20px;

  display:flex;

  flex-direction:column;

  background:
    rgba(7,14,30,.72);

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

  border-radius:15px;

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

.job-card:hover{
  transform:translateY(-4px);

  border-color:
    rgba(103,232,249,.30);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.20);
}

.job-top{
  display:flex;

  justify-content:space-between;
}

.job-logo{
  width:40px;

  height:40px;

  border-radius:10px;

  display:grid;

  place-items:center;

  color:var(--cyan);

  background:
    rgba(103,232,249,.05);

  border:
    1px solid
    rgba(103,232,249,.15);

  font-weight:900;

  font-size:10px;
}

.save{
  width:34px;

  height:34px;

  border-radius:8px;

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

  color:#70849e;

  background:
    rgba(255,255,255,.025);

  cursor:pointer;

  font-size:17px;
}

.save.on{
  color:var(--cyan);

  border-color:
    rgba(103,232,249,.35);
}

.job-card h3{
  margin:
    18px
    0
    5px;

  font-size:17px;

  line-height:1.25;
}

.job-meta{
  color:#687d97;

  font-size:10px;

  line-height:1.6;
}

.tags{
  display:flex;

  flex-wrap:wrap;

  gap:5px;

  margin-top:15px;
}

.tag{
  padding:
    5px
    7px;

  border-radius:6px;

  color:#8fa8c4;

  background:
    rgba(103,232,249,.035);

  border:
    1px solid
    rgba(103,232,249,.09);

  font-size:9px;

  font-weight:800;
}

.job-footer{
  margin-top:auto;

  padding-top:18px;

  display:flex;

  justify-content:space-between;

  align-items:center;
}

.job-footer small{
  color:#607690;

  font-size:9px;
}


/* ================= CANDIDATES ================= */

.split-section{
  display:grid;

  grid-template-columns:
    1.3fr
    .7fr;

  gap:45px;

  align-items:center;
}

.split-section h2,
.about h2{
  font-size:42px;

  line-height:1.08;

  letter-spacing:-.04em;

  margin:
    8px
    0
    15px;
}

.muted{
  color:var(--muted);
}


/* Features */

.feature-grid{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:10px;

  margin-top:28px;
}

.feature-grid article{
  padding:16px;

  background:
    rgba(7,14,30,.58);

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

  border-radius:12px;
}

.feature-grid span{
  color:var(--cyan);

  font-size:16px;
}

.feature-grid b{
  display:block;

  margin-top:7px;

  font-size:11px;
}

.feature-grid small{
  display:block;

  margin-top:4px;

  color:#667d98;

  font-size:9px;
}


/* Profile card */

.profile-card{
  padding:28px;

  background:
    linear-gradient(
      145deg,
      rgba(8,23,47,.95),
      rgba(5,11,25,.95)
    );

  border:
    1px solid
    rgba(103,232,249,.16);

  border-radius:20px;

  box-shadow:var(--shadow);
}

.profile-icon{
  width:56px;

  height:56px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(103,232,249,.30);

  border-radius:14px;

  color:var(--cyan);

  font-weight:900;

  font-size:23px;

  margin-bottom:22px;

  box-shadow:
    0 0 30px
    rgba(103,232,249,.08);
}

.profile-card h3{
  font-size:24px;

  margin:
    7px
    0
    17px;
}

.progress{
  height:7px;

  overflow:hidden;

  background:
    rgba(255,255,255,.07);

  border-radius:99px;
}

.progress i{
  display:block;

  height:100%;

  width:0;

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

  transition:.4s ease;
}

.profile-card small{
  display:block;

  margin-top:8px;

  color:#657b95;

  font-size:9px;
}


/* ================= CARDS / FORMS ================= */

.card{
  background:
    rgba(7,14,30,.70);

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

  border-radius:16px;

  padding:27px;

  box-shadow:
    0 12px 45px
    rgba(0,0,0,.14);
}

.form-grid{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:17px;
}

.form-grid label{
  display:block;

  color:#8ba1ba;

  font-size:10px;

  font-weight:800;
}

.form-grid label input,
.form-grid label select,
.form-grid label textarea{
  display:block;

  margin-top:6px;
}

.wide{
  grid-column:1/-1;
}

.form-actions{
  display:flex;

  align-items:center;

  gap:12px;
}

#profileMsg,
#applyMsg,
#refMsg{
  color:#7dffb2;

  font-size:10px;
}


/* ================= APPLICATION ================= */

.apply-section{
  display:grid;

  grid-template-columns:
    .72fr
    1.28fr;

  gap:45px;

  align-items:start;
}

.apply-intro h2{
  font-size:43px;

  line-height:1.04;

  margin:
    8px
    0
    14px;
}

.privacy-note{
  margin-top:24px;

  padding:15px;

  border-left:
    2px solid
    var(--cyan);

  background:
    rgba(103,232,249,.035);

  border-radius:
    0
    10px
    10px
    0;

  font-size:10px;

  color:#8298b2;
}


/* Application form */

.application-form{
  display:grid;

  gap:19px;
}

.form-title{
  display:flex;

  gap:12px;

  align-items:center;

  border-bottom:
    1px solid
    var(--line);

  padding-bottom:13px;
}

.form-title > span{
  width:28px;

  height:28px;

  display:grid;

  place-items:center;

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

  border-radius:7px;

  color:var(--cyan);

  font-size:9px;

  font-weight:900;
}

.form-title b{
  display:block;

  font-size:11px;
}

.form-title small{
  display:block;

  margin-top:2px;

  color:#60758f;

  font-size:9px;
}


/* Upload box */

.upload-box{
  min-height:140px;

  display:grid;

  place-items:center;

  text-align:center;

  padding:25px;

  cursor:pointer;

  border:
    1px dashed
    rgba(103,232,249,.30);

  border-radius:13px;

  background:
    rgba(103,232,249,.025);

  transition:.2s ease;
}

.upload-box:hover{
  background:
    rgba(103,232,249,.055);

  border-color:
    rgba(103,232,249,.55);
}

.upload-box input{
  position:absolute;

  opacity:0;

  width:1px;

  height:1px;
}

.upload-box strong{
  color:#bfefff;

  font-size:12px;
}

.upload-box small{
  display:block;

  color:#657b94;

  margin-top:5px;

  font-size:9px;
}


/* Consent */

.consent{
  display:flex!important;

  gap:9px;

  align-items:flex-start;

  color:#71869f!important;

  font-weight:500!important;

  line-height:1.5;
}

.consent input{
  width:auto!important;

  margin-top:2px!important;
}


/* Spam protection */

.honeypot{
  display:none!important;
}


/* ================= DASHBOARD ================= */

.dashboard-grid{
  display:grid;

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

  gap:12px;
}

.metric{
  background:
    rgba(7,14,30,.70);

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

  border-radius:13px;

  padding:20px;
}

.metric span{
  display:block;

  color:#72859f;

  font-size:9px;
}

.metric strong{
  display:block;

  font-size:29px;

  margin-top:5px;

  color:white;
}

.application-list{
  margin-top:15px;

  display:grid;

  gap:9px;
}

.application-item{
  padding:14px;

  background:
    rgba(7,14,30,.65);

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

  border-radius:11px;

  display:flex;

  justify-content:space-between;
}

.application-item small{
  display:block;

  color:#657b94;

  font-size:9px;
}


/* ================= ABOUT ================= */

.about{
  padding:
    50px
    0;

  border-top:
    1px solid
    var(--line);
}

.about-grid{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:50px;
}

.about-grid p{
  font-size:18px;

  color:#91a5bd;
}

.link-list{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:8px;
}

.link-list a{
  padding:14px;

  background:
    rgba(7,14,30,.60);

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

  border-radius:10px;

  color:#a5b8ce;

  font-weight:800;

  font-size:10px;

  transition:.2s ease;
}

.link-list a:hover{
  color:var(--cyan);

  border-color:
    rgba(103,232,249,.25);
}


/* ================= FOOTER ================= */

footer{
  padding:
    24px
    5vw;

  background:#02050d;

  color:#62768f;

  border-top:
    1px solid
    var(--line);

  display:flex;

  justify-content:space-between;

  gap:20px;

  font-size:9px;
}

footer b{
  color:#dbeafe;

  margin-right:14px;

  letter-spacing:.1em;
}


/* ================= RESPONSIVE ================= */

@media(max-width:950px){

  nav{
    display:none;

    position:absolute;

    top:76px;

    left:0;

    right:0;

    padding:18px 6vw;

    background:
      rgba(3,7,18,.97);

    backdrop-filter:blur(20px);

    flex-direction:column;

    align-items:stretch;

    border-bottom:
      1px solid
      var(--line);
  }

  nav.open{
    display:flex;
  }

  .menu-toggle{
    display:block;
  }

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

  .hero-visual{
    display:none;
  }

  .search-panel{
    display:block;
  }

  .search-controls{
    grid-template-columns:
      1fr
      1fr;

    margin-top:18px;
  }

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

  .split-section,
  .apply-section{
    grid-template-columns:1fr;
  }

}


@media(max-width:620px){

  .site-header{
    padding:
      0
      5%;
  }

  .hero{
    padding:
      68px
      6vw;
  }

  .hero-stats{
    gap:15px;
  }

  .hero-stats span{
    font-size:8px;
  }

  .search-controls,
  .job-grid,
  .form-grid,
  .feature-grid,
  .dashboard-grid,
  .about-grid{
    grid-template-columns:1fr;
  }

  .form-grid .wide{
    grid-column:auto;
  }

  .form-actions{
    align-items:flex-start;

    flex-direction:column;
  }

  footer{
    flex-direction:column;
  }

  .brand b{
    font-size:12px;
  }

  .section{
    margin:
      65px
      auto;
  }

  .section-heading h2,
  .split-section h2,
  .apply-intro h2,
  .about h2{
    font-size:31px;
  }

}