/* ===================================================================
   TrustForce Hosting — design tokens
   Palette: near-black hull, electric blue current, brushed silver.
   Display face: Orbitron (the shield/bolt mark's angular DNA).
   Body face: Inter. Utility/code face: JetBrains Mono.
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
    --black:        #060911;
    --hull:         #0b1120;
    --panel:        #101a2c;
    --panel-2:      #16223a;
    --line:         #233252;
    --silver:       #aab8cc;
    --silver-bright:#eef3fb;
    --blue:         #2fa8ff;
    --blue-deep:    #1670c9;
    --blue-glow:    rgba(47,168,255,.35);
    --green:        #34d399;
    --amber:        #ffb238;
    --red:          #ff5d6c;

    --font-display: 'Orbitron', sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    --radius: 10px;
    --shadow-glow: 0 0 40px var(--blue-glow);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    background:var(--black);
    color:var(--silver-bright);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--silver-bright); }
img{ max-width:100%; }
code, pre, .mono{ font-family:var(--font-mono); }

h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:700;
    letter-spacing:.02em;
    color:var(--silver-bright);
    margin:0 0 .5em;
}
h1{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.08; font-weight:900; }
h2{ font-size:clamp(1.6rem,3vw,2.4rem); }
h3{ font-size:1.25rem; }
p{ color:var(--silver); margin:0 0 1em; }

.container{ max-width:1160px; margin:0 auto; padding:0 24px; }
.eyebrow{
    font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em;
    font-size:.72rem; color:var(--blue); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{ content:''; width:18px; height:2px; background:var(--blue); display:inline-block; }

/* ---------- buttons ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-body); font-weight:600; font-size:.95rem;
    padding:13px 26px; border-radius:8px; border:1px solid transparent; cursor:pointer;
    transition:.18s ease; white-space:nowrap;
}
.btn-primary{ background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#04101f; box-shadow:0 6px 24px var(--blue-glow); }
.btn-primary:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--silver-bright); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-danger{ background:rgba(255,93,108,.12); color:var(--red); border-color:rgba(255,93,108,.4); }
.btn-sm{ padding:8px 16px; font-size:.85rem; }
.btn-block{ width:100%; }

/* ---------- nav ---------- */
.nav{
    position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
    background:rgba(6,9,17,.82); border-bottom:1px solid var(--line);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; color:var(--silver-bright); font-size:1.05rem; }
.brand small{ display:block; font-family:var(--font-mono); font-size:.6rem; color:var(--blue); letter-spacing:.1em; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ color:var(--silver); font-size:.92rem; font-weight:500; }
.nav-links a:hover{ color:var(--silver-bright); }
.nav-cta{ display:flex; gap:12px; align-items:center; }

/* ---------- card ---------- */
.card{
    background:linear-gradient(180deg,var(--panel),var(--hull));
    border:1px solid var(--line); border-radius:var(--radius); padding:28px;
}
.card-hover:hover{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset, var(--shadow-glow); }

/* ---------- sections ---------- */
.section{ padding:96px 0; border-bottom:1px solid var(--line); }
.section-tight{ padding:64px 0; }
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .grid-3,.grid-2{ grid-template-columns:1fr; } .nav-links{ display:none; } }

.badge{
    display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-family:var(--font-mono);
    padding:4px 10px; border-radius:20px; border:1px solid var(--line); color:var(--silver);
}
.badge-dot{ width:6px; height:6px; border-radius:50%; }
.dot-green{ background:var(--green); box-shadow:0 0 8px var(--green); }
.dot-amber{ background:var(--amber); box-shadow:0 0 8px var(--amber); }
.dot-red{ background:var(--red); box-shadow:0 0 8px var(--red); }
.dot-blue{ background:var(--blue); box-shadow:0 0 8px var(--blue); }

table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-size:.9rem; }
th{ color:var(--silver); font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; }

.input, select, textarea{
    width:100%; padding:12px 14px; background:var(--hull); border:1px solid var(--line);
    border-radius:8px; color:var(--silver-bright); font-family:var(--font-body); font-size:.95rem;
}
.input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow); }
label{ display:block; font-size:.85rem; font-weight:600; color:var(--silver); margin-bottom:6px; }
.field{ margin-bottom:18px; }

.alert{ padding:14px 16px; border-radius:8px; font-size:.9rem; margin-bottom:18px; border:1px solid; }
.alert-success{ background:rgba(52,211,153,.1); border-color:var(--green); color:var(--green); }
.alert-error{ background:rgba(255,93,108,.1); border-color:var(--red); color:var(--red); }
.alert-info{ background:rgba(47,168,255,.1); border-color:var(--blue); color:var(--blue); }

footer{ padding:50px 0; }
footer .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; color:var(--silver); font-size:.85rem; }

::selection{ background:var(--blue); color:#04101f; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-thumb{ background:var(--panel-2); border-radius:10px; }