:root{
 --bg1:#050b1e;
 --bg2:#071a3a;
 --text:#eef4ff;
 --muted:#c3d3ff;
 --line:rgba(255,255,255,.14);

 --glass1: rgba(255,255,255,.10);
 --glass2: rgba(255,255,255,.06);

 --primary:#60a5fa;
 --primary2:#2563eb;
 --accent:#22d3ee;

 --shadow: 0 18px 60px rgba(0,0,0,.45);
 --radius: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 color:var(--text);
 background:
 radial-gradient(900px 500px at 15% 0%, rgba(96,165,250,.38), transparent 60%),
 radial-gradient(900px 500px at 85% 10%, rgba(37,99,235,.30), transparent 62%),
 radial-gradient(1100px 700px at 50% 110%, rgba(34,211,238,.14), transparent 60%),
 linear-gradient(180deg, var(--bg2), var(--bg1));
}

a{color:inherit}
.container{width:min(1120px, 92%); margin-inline:auto}

.topbar{
 position:sticky; top:0; z-index:10;
 background: rgba(6,12,30,.55);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.brand{display:flex; align-items:center; gap:8px}
.brand::before{display:none}
.brand{
 font-weight:800; text-decoration:none; letter-spacing:.2px;
 display:flex; align-items:center; gap:10px;
}
.brand::before{
 content:"";
 width:12px;height:12px;border-radius:50%;
 background: radial-gradient(circle at 30% 30%, #fff, var(--accent));
 box-shadow: 0 0 0 6px rgba(34,211,238,.10), 0 0 22px rgba(34,211,238,.25);
}

.nav{display:flex; gap:10px; flex-wrap:wrap}
.nav a{
 opacity:.92; text-decoration:none;
 padding:8px 10px; border-radius:12px;
 border:1px solid transparent;
}
.nav a:hover{
 background:rgba(255,255,255,.06);
 border-color:rgba(255,255,255,.10);
}

.section{padding:52px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.muted{color:var(--muted); opacity:.92}
.small{font-size:.9rem}

h1{
 font-size: clamp(2.1rem, 4vw, 3.2rem);
 line-height: 1.05;
 margin: 0 0 10px;
 letter-spacing: -0.6px;
}
h2{
 font-size: 1.75rem;
 margin: 0 0 10px;
}
h3{margin:0 0 8px}

.hero{
 position:relative;
 display:grid; grid-template-columns: 1.35fr .65fr;
 gap:18px;
 padding:40px 0 18px;
}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} }

.hero::before{
 content:"";
 position:absolute;
 inset:-30px -10px -10px -10px;
 background:
 radial-gradient(700px 250px at 20% 20%, rgba(34,211,238,.18), transparent 60%),
 radial-gradient(700px 250px at 70% 0%, rgba(96,165,250,.18), transparent 60%);
 pointer-events:none;
 filter: blur(2px);
 opacity:.9;
}

.lead{font-size:1.05rem; color:var(--muted); line-height:1.6; margin:0}

.card{
 position:relative;
 background: linear-gradient(180deg, var(--glass1), var(--glass2));
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:18px;
 box-shadow: var(--shadow);
 overflow:hidden;
}
.card::after{
 content:"";
 position:absolute;
 inset:-2px;
 background: radial-gradient(240px 140px at 15% 10%, rgba(34,211,238,.18), transparent 65%);
 pointer-events:none;
}

.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:14px}
.grid.two{grid-template-columns:repeat(2, 1fr)}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} .grid.two{grid-template-columns:1fr} }

.btn{
 display:inline-block;
 padding:10px 14px;
 border-radius:14px;
 border:1px solid rgba(255,255,255,.14);
 text-decoration:none;
 background:rgba(255,255,255,.05);
}
.btn.primary{
 background: linear-gradient(90deg, var(--primary2), var(--primary));
 border-color: transparent;
 color:#071028;
 font-weight:800;
 box-shadow: 0 14px 30px rgba(37,99,235,.25);
}
.btn:hover{transform: translateY(-1px)}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.list{margin:10px 0 0; padding-left:18px}
.link{display:inline-block; margin-top:10px; color:var(--primary); text-decoration:none}
.link:hover{text-decoration:underline}

label{display:block; margin:10px 0}
input, textarea{
 width:100%;
 margin-top:6px;
 padding:10px 12px;
 border-radius:14px;
 border:1px solid rgba(255,255,255,.14);
 background:rgba(0,0,0,.22);
 color:var(--text);
 outline:none;
}
input:focus, textarea:focus{border-color:rgba(96,165,250,.6)}

.timeline{list-style:none; padding:0; margin:0}
.timeline li{
 display:flex; gap:14px; align-items:center;
 padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12)
}
.timeline li:last-child{border-bottom:0}
.date{
 min-width:110px;
 color:var(--muted);
 font-variant-numeric: tabular-nums;
}

.steps{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.divider{height:1px; background:rgba(255,255,255,.14); margin:14px 0}

.footer{border-top:1px solid rgba(255,255,255,.12); margin-top:28px}
.footer-inner{padding:18px 0; color:var(--muted)}
.logo{
 width:18px;
 height:18px;
 object-fit:contain;
 border-radius:6px;
 background:transparent;
 border:0;
 padding:0;
 display:block;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav a{white-space:nowrap}

.dropdown{position:relative}
.dropdown-menu{
 display:none; position:absolute; top:100%; left:0; min-width:280px;
 background:#0b1220; border:1px solid rgba(255,255,255,.12);
 border-radius:10px; padding:8px; z-index:9999;
}
.dropdown-menu a{display:block;padding:8px 10px;border-radius:8px}
.dropdown:hover .dropdown-menu{display:block}

.topbar, .topbar-inner{overflow:visible !important;}
.dropdown{position:relative}
.dropdown-menu{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 min-width:280px;
 background:#0b1220;
 border:1px solid rgba(255,255,255,.12);
 border-radius:10px;
 padding:8px;
 z-index:99999;
}
.dropdown:hover .dropdown-menu{display:block}

/* Header + dropdown */
.topbar, .topbar-inner{overflow:visible !important;}

.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav a{white-space:nowrap}

.dropdown{position:relative}
.dropdown-menu{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 min-width:280px;
 background:#0b1220;
 border:1px solid rgba(255,255,255,.12);
 border-radius:10px;
 padding:8px;
 z-index:99999;
}
.dropdown-menu a{display:block;padding:8px 10px;border-radius:8px}
.dropdown:hover .dropdown-menu{display:block}

.topbar, .topbar-inner{overflow:visible !important;}

.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav a{white-space:nowrap}

.dropdown{position:relative}
.dropdown-menu{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 min-width:280px;
 background:#0b1220;
 border:1px solid rgba(255,255,255,.12);
 border-radius:10px;
 padding:8px;
 z-index:99999;
}
.dropdown-menu a{display:block;padding:8px 10px;border-radius:8px}
.dropdown:hover .dropdown-menu{display:block}

.dropdown{position:relative}
.dropbtn{background:transparent;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
.dropdown-menu{
 display:none; position:absolute; top:100%; left:0; min-width:280px;
 background:#0b1220; border:1px solid rgba(255,255,255,.12);
 border-radius:10px; padding:8px; z-index:99999;
}
.dropdown-menu a{display:block;padding:8px 10px;border-radius:8px}
.dropdown-menu.show{display:block}
.dropdown{ position: relative; display: inline-block; }

.dropdown-menu{
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 min-width: 260px;
 background: #0b1f3a;
 border: 1px solid rgba(255,255,255,.15);
 border-radius: 10px;
 padding: 8px;
 z-index: 9999;
}

.dropdown-menu a{
 display: block;
 padding: 10px 12px;
 color: #fff;
 text-decoration: none;
}

.dropdown-menu a:hover{ background: rgba(255,255,255,.08); }

.dropdown-menu.show{ display: block; }
