:root{
  --bg: #070a11;
  --bg2:#0b0f18;
  --panel: #0c1220cc;
  --line: rgba(0, 180, 255, 0.22);
  --text:#eaf3ff;
  --muted:#9bb0c9;
  --accent:#10b6ff;
  --accent2:#0a6bff;
  --radius: 18px;
  --sidebar: 260px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background: radial-gradient(1200px 600px at 10% 5%, rgba(16,182,255,.08), transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, #060910 100%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* ===== Sidebar ===== */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:18px; z-index:5;
  background: linear-gradient(180deg, rgba(16,22,35,.75), rgba(9,12,20,.6));
  border-right: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 40px rgba(0,0,0,.45), inset -1px 0 0 rgba(255,255,255,.04);
}
.brand{display:flex; align-items:center; gap:12px; font-family:Orbitron,Inter; font-weight:900; letter-spacing:.08em; color:#fff}
.dot{width:22px;height:22px;border-radius:8px; background:
     radial-gradient(circle at 30% 30%, var(--accent) 0%, var(--accent2) 80%);
     box-shadow:0 0 14px var(--accent)}
.brand-text{white-space:nowrap}
.side-nav{display:flex; flex-direction:column; margin-top:16px}
.nav-item{
  padding:12px 14px; margin:6px 0; border-radius:12px; color:var(--muted); font-weight:700;
  transition:.15s ease;
}
.nav-item:hover, .nav-item.active{
  color:#fff; background:rgba(255,255,255,.06); box-shadow: inset 2px 0 0 var(--accent);
}
.apply-btn{
  display:flex; align-items:center; justify-content:center;
  min-height:48px; border-radius:14px; font-weight:900; font-family:Orbitron,Inter;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color:#001421; box-shadow: 0 0 30px rgba(16,182,255,.55);
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease;
}
.apply-btn:hover{ transform: translateY(-1px); box-shadow:0 0 40px rgba(16,182,255,.8) }

/* ===== Main layout ===== */
.content{
  margin-left: var(--sidebar);
  min-height: 100vh;
  padding: 84px 48px 96px;
  display:flex; flex-direction:column; gap:42px; position:relative;
}
.panel{
  background: linear-gradient(180deg, var(--panel), rgba(10,14,24,.6));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 0 1px rgba(255,255,255,.06);
}

/* ===== Hero ===== */
.kicker{display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); color:var(--muted);
  background: rgba(255,255,255,.04); margin-bottom:12px; font-size:12px}
.title{font-family:Orbitron,Inter; font-size: clamp(36px, 6vw, 86px); line-height:1.02; margin:0}
.title .accent{background: linear-gradient(90deg, var(--accent), #7ee0ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 22px rgba(16,182,255,.35)}
.lead{color:var(--muted); max-width:70ch; margin:14px 0 22px}
.actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{border:none; cursor:pointer; padding:12px 16px; border-radius:14px; font-weight:800}
.btn-primary{background: linear-gradient(90deg, var(--accent), var(--accent2)); color:#001a2b}
.btn-ghost{background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--text)}

/* ===== About ===== */
.grid-two{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.bullets{margin:0; padding-left:18px}
.bullets li{margin:8px 0; color:var(--muted)}

/* ===== Contact ===== */
.contact{text-align:center}
.small{font-size:12px}
.muted{color:var(--muted)}

/* ===== Apply page ===== */
.app{max-width: 900px; margin-inline:auto}
.title-sm{font-family:Orbitron,Inter; font-size: clamp(28px, 3.8vw, 44px); margin:0 0 8px}
.form{display:grid; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field > span{font-size:13px; color:var(--muted)}
input, select, textarea{
  width:100%; padding:12px 14px; border-radius:12px; outline:none;
  background: rgba(9,14,24,.75); color: var(--text);
  border:1px solid rgba(255,255,255,.12);
}
input:focus, select:focus, textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(16,182,255,.16)
}
textarea{min-height:130px; resize:vertical}
.big{min-height:48px}

/* ===== Background ===== */
#bg{position:fixed; inset:0; z-index:-2}
.fog{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 40% at 40% 20%, rgba(16,182,255,.09), transparent 70%),
    radial-gradient(40% 30% at 80% 0%, rgba(10,107,255,.10), transparent 70%),
    radial-gradient(40% 30% at 10% 90%, rgba(16,182,255,.08), transparent 70%);
  filter: blur(12px);
  opacity:.9;
}

/* ===== Responsive ===== */
@media (max-width: 1080px){
  :root{ --sidebar: 92px }
  .brand-text{ display:none }
  .content{ padding: 84px 28px 80px }
}
@media (max-width: 760px){
  .grid-two{ grid-template-columns:1fr }
}
/* === Buttons Fix === */
a, button {
  text-decoration: none !important;
}
.btn, .apply-btn {
  text-decoration: none;
  user-select: none;
  font-weight: 800;
}
.btn:hover, .apply-btn:hover {
  text-decoration: none;
}

/* === Dropdown (select) Styling === */
select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(9,14,24,.8) url("data:image/svg+xml;utf8,<svg fill='%23eaf3ff' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 14px center/12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: var(--text);
  padding: 12px 40px 12px 14px;
  font-weight: 600;
}
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16,182,255,.25);
}

/* ===== Sidebar Icon Mode (mobile) ===== */
@media (max-width: 1080px){
  :root { --sidebar: 78px; }
  .brand-text { display: none; }
  .sidebar { align-items: center; padding: 10px 6px; }
  .side-nav { align-items: center; gap: 8px; }

  .nav-item {
    font-size: 0; /* hide text */
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .nav-item::before {
    content: attr(data-icon);
    font-size: 22px;
    color: var(--muted);
    transition: 0.2s;
  }

  .nav-item:hover::before,
  .nav-item.active::before {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent);
  }

  .apply-btn {
    font-size: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    justify-content: center;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    box-shadow: 0 0 20px rgba(16,182,255,0.5);
  }
  .apply-btn::before {
    content: "✚";
    font-size: 26px;
    color: #001421;
  }
}


/* === Small screen adjustments === */
@media (max-width: 760px){
  .grid-two { grid-template-columns: 1fr; }
  .content { padding: 80px 24px; }
  input, select, textarea { font-size: 14px; }
}