:root{
    --bg:#0b1220;
    --panel:#101a2d;
    --panel-2:#14213a;
    --line:#24324d;
    --text:#e8eefc;
    --muted:#aab7d1;
    --accent:#4f8cff;
    --accent-2:#7aa7ff;
    --good:#7ce7b1;
    --warn:#ffd57a;
    --bad:#ff8d8d;
    --radius-sm:10px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:22px;
    --radius-2xl:24px;
    --shadow-lg:0 18px 50px rgba(0,0,0,.25);
    --max-width:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:Arial,Helvetica,sans-serif;
    background:linear-gradient(180deg,#08101d 0%,#0b1220 100%);
    color:var(--text);
    line-height:1.6;
}
a{color:var(--accent-2);text-decoration:none}
a:hover{opacity:.92}

.site-header{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 28px;
    background:rgba(8,16,29,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
}
.site-brand img{
    height:40px;
    width:auto;
    display:block;
}
.site-nav{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
}
.site-nav a{
    color:var(--text);
    padding:8px 10px;
    border-radius:10px;
    font-size:14px;
}
.site-nav a.active{
    background:rgba(79,140,255,.12);
}
.site-nav a.cta{
    background:var(--accent);
    color:#fff;
    font-weight:bold;
}

.hero{
    max-width:var(--max-width);
    margin:0 auto;
    padding:34px 20px 18px;
}
.hero-card{
    background:linear-gradient(180deg,rgba(79,140,255,.14),rgba(20,33,58,.72));
    border:1px solid var(--line);
    border-radius:var(--radius-xl);
    padding:30px 26px;
    box-shadow:var(--shadow-lg);
}
.eyebrow{
    font-size:12px;
    color:var(--accent-2);
    letter-spacing:.15em;
    text-transform:uppercase;
    font-weight:bold;
    margin-bottom:10px;
}
.page{
    max-width:var(--max-width);
    margin:0 auto;
    padding:10px 20px 70px;
}
.grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:18px;
}
.card{
    grid-column:span 12;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:22px;
}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-9{grid-column:span 9}

h1,h2,h3,h4{margin:0 0 12px;line-height:1.2}
h1{font-size:36px}
h2{font-size:26px}
h3{font-size:20px}
p{margin:0 0 14px;color:var(--muted)}

.metric{
    font-size:30px;
    font-weight:bold;
    color:#fff;
    margin:6px 0 4px;
}
.label{
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#90a0bf;
}

.badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:bold;
}
.good{background:rgba(124,231,177,.12);color:var(--good)}
.warn{background:rgba(255,213,122,.12);color:var(--warn)}
.bad{background:rgba(255,141,141,.12);color:var(--bad)}

.table{
    width:100%;
    border-collapse:collapse;
}
.table th,.table td{
    text-align:left;
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    vertical-align:top;
}
.table th{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#90a0bf;
}

.list{
    margin:0;
    padding-left:18px;
    color:var(--muted);
}
.list li{margin-bottom:10px}

.actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:12px;
}
.btn{
    display:inline-block;
    padding:12px 16px;
    border-radius:12px;
    border:1px solid var(--line);
    color:#fff;
    font-weight:bold;
    background:transparent;
    cursor:pointer;
}
.btn-primary{
    background:var(--accent);
    border-color:var(--accent);
}
.btn-secondary{
    background:rgba(255,255,255,.02);
}

.form-grid{display:grid;gap:16px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{
    display:block;
    font-size:14px;
    margin:0 0 8px;
    color:#d7e3fb;
    font-weight:bold;
}
input,select,textarea{
    width:100%;
    padding:13px 14px;
    border-radius:12px;
    border:1px solid var(--line);
    background:#0d1728;
    color:#fff;
    font-size:15px;
}
input::placeholder, textarea::placeholder{color:#7f8ca7}

.note{
    border-left:4px solid var(--warn);
    background:rgba(255,213,122,.08);
}
.ok{
    border-left:4px solid var(--good);
    background:rgba(124,231,177,.08);
}
.danger{
    border-left:4px solid var(--bad);
    background:rgba(255,141,141,.08);
}
.code{
    font-family:monospace;
    background:#0d1728;
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px 14px;
    color:#dce6ff;
    overflow:auto;
}

.site-footer{
    border-top:1px solid var(--line);
    background:#08101d;
    padding:34px 24px;
}
.footer-grid{
    max-width:var(--max-width);
    margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:24px;
}
.footer-grid a{
    display:block;
    margin:6px 0;
    color:var(--muted);
}
.footer-bottom{
    max-width:var(--max-width);
    margin:18px auto 0;
    color:#7f8ca7;
    border-top:1px solid var(--line);
    padding-top:16px;
    font-size:13px;
}

.utility-hidden{display:none !important}
.utility-center{text-align:center}
.utility-right{text-align:right}

@media (max-width: 980px){
    .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9{grid-column:span 12}
    .footer-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
    .site-header{flex-direction:column;align-items:flex-start}
    .site-nav{justify-content:flex-start}
    .row-2{grid-template-columns:1fr}
    h1{font-size:30px}
}