:root{
  --bg: #2c4982; /*0b1220*/
  --panel: #0f1a2e;
  --text: #e7eefc;
  --muted: rgba(231,238,252,.78);
  --brand: #7dd3fc;
  --brand2: #a78bfa;
  --border: rgba(231,238,252,.12);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 18px;

  --max: 1120px;
  --pad: clamp(16px, 2.4vw, 28px);
  --h1: clamp(34px, 5vw, 54px);
  --h2: clamp(24px, 3.2vw, 34px);
  --h3: 18px;
  --body: 16px;
  --small: 14px;
}

option {
    background-color: #0000008f;  /* color behind the text */
    color: #ffffff; /* color of the text */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font: 400 var(--body)/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(125,211,252,.18), transparent 55%),
    radial-gradient(900px 650px at 85% 25%, rgba(167,139,250,.16), transparent 60%),
    linear-gradient(180deg, #070b14 0%, var(--bg) 40%, #070b14 100%);
  min-height:100dvh;
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}

.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{
  left:var(--pad); top:var(--pad); width:auto; height:auto;
  background:var(--panel); padding:10px 12px; border:1px solid var(--border);
  border-radius:12px; z-index:9999; outline:2px solid var(--brand);
}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(11,18,32,.66));
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px var(--pad);}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:38px; height:38px; border-radius:14px; background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 10px 30px rgba(125,211,252,.18);} 
.brand-name{font-weight:650; letter-spacing:.2px}
.nav-links{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.nav-links a{padding:8px 10px; border-radius:12px; border:1px solid transparent; color:var(--muted);} 
.nav-links a[aria-current="page"], .nav-links a:hover{color:var(--text); border-color:var(--border); background: rgba(255,255,255,.03); text-decoration:none;}

.hero{padding: clamp(44px, 7vw, 92px) 0 18px}
.hero-grid{display:grid; grid-template-columns: 1.25fr .75fr; gap: clamp(18px, 3vw, 34px); align-items:start;}
@media (max-width: 900px){ .hero-grid{grid-template-columns:1fr} }

.badge{display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background: rgba(255,255,255,.03); color:var(--muted); font-size:var(--small);} 
.badge-dot{width:9px; height:9px; border-radius:99px; background: linear-gradient(135deg, var(--brand), var(--brand2));}

h1{font-size:var(--h1); line-height:1.1; margin: 14px 0 12px; letter-spacing:-.6px;}
h2{font-size:var(--h2); margin:0 0 10px}
h3{font-size:var(--h3); margin:0 0 8px}

.lede{color:var(--muted); font-size: clamp(16px, 1.55vw, 18px); max-width: 68ch;}

.section{padding: 34px 0}
.card{background: rgba(15,26,46,.72); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);} 
.card.pad{padding: var(--pad)}
.kicker{font-size:var(--small); color:var(--muted); margin:0 0 8px}
.note{color:var(--muted); font-size:var(--small)}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
@media (max-width: 900px){ .grid3{grid-template-columns:1fr} }

.list{margin:0; padding:0 0 0 18px; color:var(--muted)}
.hr{height:1px; background:var(--border); margin:24px 0}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 14px; border-radius:14px; border:1px solid var(--border); background: rgba(255,255,255,.03); color:var(--text); font-weight:650;}
.btn:hover{background: rgba(255,255,255,.06); text-decoration:none}
.btn.primary{background: linear-gradient(135deg, rgba(125,211,252,.25), rgba(167,139,250,.22)); border-color: rgba(125,211,252,.25);} 

input, textarea, select{width:100%; background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text); padding: 12px 12px; border-radius: 14px; outline: none;}
input:focus, textarea:focus, select:focus{border-color: rgba(125,211,252,.35); box-shadow: 0 0 0 4px rgba(125,211,252,.14);} 
label{display:block; margin: 10px 0 8px; font-weight:650}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 700px){ .form-row{grid-template-columns:1fr} }

footer{margin-top: 34px; padding: 26px 0 44px; border-top:1px solid var(--border); color:var(--muted);} 
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr} }
.small{font-size:var(--small)}
.tag{display:inline-flex; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,.03); color:var(--muted); font-size:var(--small); margin: 6px 6px 0 0;}