:root{
    --bg-0:#0b0c10;
    --bg-1:#0e1116;
    --ink-1:#f2f3f7;
    --ink-2:#aeb5c3;
    --muted:#8a90a2;

    /* black–orange palette */
    --brand:#ff7a00;
    --brand-2:#ffb000;
    --ok:#27d47a;

    --ring:0 0 0 2px rgba(255,122,0,.35);
    --elev:0 0 0 1px rgba(255,255,255,.06), 0 20px 50px rgba(0,0,0,.55);
    --radius:14px;
    --gap:22px;
    --container:min(1180px, 100% - 28px);

    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Fira Code", monospace;
    --sans: ui-sans-serif, system-ui, Inter, "Segoe UI", Roboto, Arial, "Noto Sans";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font:16px/1.55 var(--sans);
    color:var(--ink-1);
    background:
            radial-gradient(800px 500px at 20% 10%, rgba(255,122,0,.08), transparent 60%),
            radial-gradient(800px 500px at 80% 5%, rgba(255,176,0,.06), transparent 62%),
            linear-gradient(180deg, var(--bg-0), #07080c);
    background-attachment: fixed,fixed,fixed;
}

/* Layout */
.nojs-grid::before{
    content:"";
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
            linear-gradient(transparent calc(100% - 1px), rgba(255,255,255,.03)),
            linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:100% 24px, 24px 100%;
    opacity:.18;
}
.bx{width:var(--container); margin:0 auto}
.mt-12{margin-top:12px}
.mt-14{margin-top:14px}

/* Header */
.mast{
    position:sticky; top:0; z-index:30;
    backdrop-filter: blur(10px);
    background: rgba(10,12,16,.55);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.mast-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px; flex-wrap:wrap}
.mark{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.4px}
.logo-dot{width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:0 0 20px rgba(255,122,0,.25)}
.menu{display:flex; flex-wrap:wrap; gap:12px}
.menu a{color:var(--ink-1); font-weight:800; text-decoration:none}
.menu a:hover{color:var(--brand)}

@media (max-width:720px){ .menu{width:100%; justify-content:space-between} }

/* Hero */
.hero-slab{padding:110px 0 88px}
.tag{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}
.ttl{font-size:clamp(30px,6vw,60px); margin:8px 0 14px; line-height:1.08}
.ttl span{background:linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:18px; color:var(--ink-1); max-width:840px}
.cta-row{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap}

/* Buttons */
.btnx{
    display:inline-block; padding:12px 18px; border-radius:12px; font-weight:900; letter-spacing:.3px;
    color:#0b0f1a; background:linear-gradient(135deg, var(--brand), var(--brand-2)); border:none;
    box-shadow:0 0 22px rgba(255,122,0,.22);
    transition:transform .18s ease;
}
.btnx:hover{transform:translateY(-1px)}
.btnx:active{transform:translateY(0) scale(.98)}
.btnx.ghost{color:var(--ink-1); background:linear-gradient(135deg, #1a1f2b, #232a38); border:1px solid rgba(255,255,255,.07)}

/* Panels */
.panel{
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    box-shadow:var(--elev);
    padding:28px;
    transition:box-shadow .25s ease, transform .18s ease;
}
.panel:hover{transform:translateY(-2px)}

.soft{
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius);
    padding:20px;
}

.mono{font-family:var(--mono)}
.kbd{font-family:var(--mono); font-size:13px; background:#11151d; border:1px solid rgba(255,255,255,.12); padding:2px 6px; border-radius:6px}
.muted{color:var(--ink-2)}

h1,h2,h3{margin:0 0 12px}
h2{font-size:clamp(20px,3vw,28px)}
h3{font-size:clamp(16px,2vw,18px)}

/* Grids */
.grid-2{display:grid; gap:var(--gap); grid-template-columns:1.1fr .9fr}
.grid-3{display:grid; gap:var(--gap); grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.grid-2{grid-template-columns:1fr}}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}

/* Mirrors */
.list-mirrors{display:grid; gap:12px; margin:0; padding:0; list-style:none}
.mirror-item{
    display:grid; gap:10px; padding:12px 14px; border:1px solid rgba(255,255,255,.08); border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
}
.mirror-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.mirror-label{font-weight:900; letter-spacing:.3px}
.mirror-url{
    width:100%; min-height:40px; resize:none; padding:10px 12px;
    border-radius:10px; border:1px solid rgba(255,255,255,.08); background:#0f141d; color:var(--ink-1);
    font-family:var(--mono); white-space:pre-wrap; word-break:break-all; font-size:16px;
}
.mirror-url:focus{outline:none; box-shadow: var(--ring)}

/* Badges */
.badge{
    display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px;
    border:1px solid transparent;
}
.badge.ok{background:rgba(39,212,122,.14); color:#77ffbe; border-color:rgba(39,212,122,.25)}
.badge.backup{background:rgba(255,176,0,.14); color:#ffd27f; border-color:rgba(255,176,0,.25)}

/* PGP */
.fp-grid{display:grid; gap:8px; grid-template-columns:repeat(auto-fit, minmax(72px, 1fr))}
.fp-block{
    background:#0f141d; border:1px solid rgba(255,255,255,.08); padding:10px 12px; border-radius:8px;
    font-family:var(--mono); letter-spacing:.06em; text-align:center;
}

/* Info grid */
.info-grid{display:grid; grid-template-columns:.7fr 1.3fr; gap:12px}
@media (max-width:720px){.info-grid{grid-template-columns:1fr}}

/* Archive bars */
.kpi{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.kpi strong{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.bar{height:10px; border-radius:999px; background:#171d29; overflow:hidden; border:1px solid rgba(255,255,255,.08); position:relative}
.bar span{display:block; height:100%; width:var(--w,50%); background:linear-gradient(90deg, var(--brand), var(--brand-2))}
.w-99{--w:99%}.w-98{--w:98%}.w-42{--w:42%}
.note{font-size:13px; color:var(--ink-2)}

/* Footer */
.footer{padding:40px 0 70px; color:var(--ink-2)}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:var(--gap)}
.mini{font-size:13px; color:var(--muted)}
.center{text-align:center}

@media (max-width:920px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.footer-grid{grid-template-columns:1fr}}

@media (max-width:480px){
    .menu{display:none}
    .mark{margin:0 auto}
    .panel{max-width:420px}
    .soft{font-size:12px}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important}
}