/* site69 — cyber-terminal aesthetic
   Palette: deep navy bg, cyan #3cbef2 primary, green #4caf50 ok, red #ff4444 alert. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #0d1117; color: #d7dbe2; font: 14px/1.6 "JetBrains Mono", "SF Mono", Consolas, Menlo, monospace; -webkit-font-smoothing: antialiased; }
a { color: #3cbef2; text-decoration: none; }
a:hover { color: #5fd0ff; text-decoration: underline; }

/* Matrix-style rain background — pure CSS, no JS. */
.matrix-bg {
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(circle at 12% 18%, rgba(60,190,242,0.08) 0, transparent 22%),
        radial-gradient(circle at 88% 78%, rgba(76,175,80,0.06) 0, transparent 24%),
        repeating-linear-gradient(90deg,
            rgba(60,190,242,0.018) 0, rgba(60,190,242,0.018) 1px, transparent 1px, transparent 24px),
        repeating-linear-gradient(0deg,
            rgba(60,190,242,0.018) 0, rgba(60,190,242,0.018) 1px, transparent 1px, transparent 24px),
        #0d1117;
}

/* Terminal frame. */
.cyber-terminal {
    max-width: 1180px; margin: 28px auto; padding: 0;
    border: 1px solid rgba(60,190,242,0.30);
    border-radius: 8px;
    background: rgba(22, 27, 34, 0.78);
    box-shadow: 0 0 32px rgba(60,190,242,0.12), 0 0 0 1px rgba(255,255,255,0.02) inset;
    overflow: hidden;
}

/* Terminal title bar with traffic lights. */
.term-header {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 16px;
    background: linear-gradient(180deg, #1c2230 0%, #161b22 100%);
    border-bottom: 1px solid rgba(60,190,242,0.22);
}
.term-dots { display: flex; gap: 7px; }
.term-dots span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.term-dots .r { background: #ff5f57; box-shadow: 0 0 6px rgba(255,95,87,0.4); }
.term-dots .y { background: #febc2e; box-shadow: 0 0 6px rgba(254,188,46,0.4); }
.term-dots .g { background: #28c840; box-shadow: 0 0 6px rgba(40,200,64,0.4); }
.term-title {
    color: #9aa6b2; font-size: 12px; letter-spacing: 0.5px; flex: 1; text-align: center;
}
.term-host { color: #4caf50; font-size: 12px; }

/* Header brand. */
.brand-bar {
    display: flex; align-items: center; gap: 18px;
    padding: 22px 28px 18px;
    border-bottom: 1px dashed rgba(60,190,242,0.18);
}
.brand-bar img { width: 56px; height: 56px; filter: drop-shadow(0 0 8px rgba(60,190,242,0.5)); }
.brand-name {
    font-size: 22px; font-weight: 600; color: #f0f4f8; letter-spacing: 0.4px;
}
.brand-name b { color: #3cbef2; }
.brand-tag { color: #6e7681; font-size: 12px; margin-top: 2px; letter-spacing: 0.6px; text-transform: uppercase; }
.brand-status {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(76,175,80,0.10); border: 1px solid rgba(76,175,80,0.30);
    color: #4caf50; padding: 6px 12px; border-radius: 4px;
    font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
}
.brand-status .pulse {
    width: 8px; height: 8px; border-radius: 50%; background: #4caf50;
    box-shadow: 0 0 0 0 rgba(76,175,80,0.7);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(76,175,80,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(76,175,80,0); }
    100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}

/* Main pane. */
.term-body { padding: 26px 28px 32px; }

/* Prompt line. */
.prompt {
    color: #6e7681; font-size: 13px; margin: 22px 0 10px;
}
.prompt b { color: #4caf50; }
.prompt span { color: #3cbef2; }
.prompt::before { content: "$ "; color: #4caf50; }

/* Hero / H1. */
h1.hero-h1 {
    font-size: 28px; line-height: 1.3; color: #f0f4f8;
    margin: 4px 0 10px; font-weight: 700;
}
h1.hero-h1 .cmd { color: #3cbef2; }
.hero-sub {
    color: #9aa6b2; font-size: 14px; margin: 0 0 22px; max-width: 820px;
}

/* Rating bars (security/uptime/etc). */
.metrics {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
    margin: 20px 0 8px;
}
.metric {
    background: rgba(13,17,23,0.6); border: 1px solid rgba(60,190,242,0.18);
    padding: 14px 16px; border-radius: 6px;
}
.metric-label { color: #9aa6b2; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; }
.metric-val { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.metric-val b { color: #f0f4f8; font-size: 22px; font-weight: 600; }
.metric-val span { color: #6e7681; font-size: 12px; }
.metric-bar { margin-top: 8px; height: 4px; background: rgba(60,190,242,0.10); border-radius: 2px; overflow: hidden; }
.metric-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3cbef2, #4caf50); border-radius: 2px; }

/* Sections. */
h2 {
    color: #f0f4f8; font-size: 18px; font-weight: 600;
    margin: 32px 0 12px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(60,190,242,0.18); letter-spacing: 0.2px;
}
h2::before { content: "// "; color: #4caf50; font-weight: 400; }
h3 {
    color: #c9d4e0; font-size: 15px; font-weight: 600;
    margin: 20px 0 8px;
}
h3::before { content: "› "; color: #3cbef2; }
p { margin: 0 0 12px; color: #c2cad4; }
ul, ol { margin: 0 0 14px 22px; color: #c2cad4; }
ul li, ol li { margin: 4px 0; }

/* Mirror card grid. */
.mirror-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px;
    margin: 18px 0 8px;
}
.mirror {
    background: rgba(13,17,23,0.7);
    border: 1px solid rgba(60,190,242,0.24);
    border-left: 3px solid #4caf50;
    padding: 12px 14px;
    border-radius: 4px;
    display: flex; align-items: center; gap: 12px;
    transition: border-color 0.18s, background 0.18s;
}
.mirror:hover { border-color: #3cbef2; background: rgba(13,17,23,0.95); }
.mirror.checker { border-left-color: #3cbef2; }
.mirror-idx {
    color: #6e7681; font-size: 11px; min-width: 28px;
}
.mirror-onion {
    font-family: inherit; font-size: 12.5px;
    color: #4caf50; word-break: break-all; flex: 1;
}
.mirror.checker .mirror-onion { color: #3cbef2; }
.mirror-stamp {
    color: #4caf50; font-size: 10px; letter-spacing: 0.5px;
    background: rgba(76,175,80,0.12); padding: 3px 7px; border-radius: 3px;
    border: 1px solid rgba(76,175,80,0.25);
}
.mirror.checker .mirror-stamp { color: #3cbef2; background: rgba(60,190,242,0.12); border-color: rgba(60,190,242,0.25); }

/* Specs grid. */
.specs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px;
    margin: 14px 0;
}
.spec {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 10px 14px;
    background: rgba(13,17,23,0.55);
    border: 1px solid rgba(60,190,242,0.14);
    border-radius: 4px;
}
.spec-k { color: #9aa6b2; font-size: 12.5px; }
.spec-v { color: #f0f4f8; font-size: 12.5px; font-weight: 600; }
.spec-v.ok { color: #4caf50; }
.spec-v.no { color: #ff6666; }

/* Two-column cards (account tiers, governance). */
.cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px;
    margin: 14px 0;
}
.card {
    background: rgba(13,17,23,0.55);
    border: 1px solid rgba(60,190,242,0.18);
    border-radius: 6px; padding: 16px 18px;
}
.card h3 { margin-top: 0; }
.card ul { margin-bottom: 0; }

/* FAQ accordion (CSS-only via details/summary). */
.faq details {
    background: rgba(13,17,23,0.55);
    border: 1px solid rgba(60,190,242,0.18);
    border-radius: 4px;
    margin: 8px 0; padding: 0;
}
.faq summary {
    cursor: pointer; padding: 12px 16px;
    color: #f0f4f8; font-size: 13.5px; font-weight: 500;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "[+] "; color: #3cbef2; }
.faq details[open] summary::before { content: "[-] "; color: #4caf50; }
.faq details > p { padding: 0 16px 14px; margin: 0; color: #c2cad4; }

/* Notice strip. */
.notice {
    margin: 16px 0;
    padding: 12px 16px;
    background: rgba(60,190,242,0.06);
    border: 1px solid rgba(60,190,242,0.30);
    border-left: 3px solid #3cbef2;
    border-radius: 4px;
    color: #c2cad4; font-size: 13px;
}
.notice.warn { background: rgba(255,68,68,0.06); border-color: rgba(255,68,68,0.30); border-left-color: #ff6666; }
.notice b { color: #f0f4f8; }

/* Sub-grid for resources. */
.resources {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
    margin: 14px 0;
}
.resources a {
    display: block; padding: 12px 14px;
    background: rgba(13,17,23,0.55);
    border: 1px solid rgba(60,190,242,0.18);
    border-radius: 4px;
    color: #d7dbe2;
}
.resources a:hover { border-color: #3cbef2; background: rgba(60,190,242,0.08); text-decoration: none; }
.resources a b { display: block; color: #3cbef2; font-size: 13px; margin-bottom: 4px; }
.resources a span { color: #9aa6b2; font-size: 12px; }

/* Inline navigation strip (top + footer). */
.nav-row {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 12px 28px;
    background: rgba(13,17,23,0.55);
    border-bottom: 1px solid rgba(60,190,242,0.16);
    font-size: 12.5px;
}
.nav-row a { color: #9aa6b2; }
.nav-row a:hover { color: #3cbef2; }
.nav-row a.active { color: #4caf50; }

/* Footer. */
.term-foot {
    padding: 18px 28px;
    border-top: 1px solid rgba(60,190,242,0.18);
    background: rgba(13,17,23,0.55);
    color: #6e7681; font-size: 12px;
}
.term-foot .input-line {
    display: flex; align-items: center; gap: 8px;
    color: #4caf50;
}
.term-foot .input-line span { color: #9aa6b2; }
.term-foot .cur { display: inline-block; width: 8px; height: 14px; background: #3cbef2; animation: blink 1s steps(2) infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }
.term-foot .meta { margin-top: 14px; color: #6e7681; font-size: 11.5px; letter-spacing: 0.4px; }

/* Mobile. */
@media (max-width: 720px) {
    .cyber-terminal { margin: 12px 8px; }
    .term-body { padding: 18px 16px 24px; }
    .brand-bar { padding: 16px; flex-wrap: wrap; }
    .brand-status { margin-left: 0; }
    .mirror-grid { grid-template-columns: 1fr; }
    h1.hero-h1 { font-size: 22px; }
    .nav-row { padding: 10px 16px; gap: 12px; }
    .term-foot { padding: 14px 16px; }
}