/* ===============  WEB3 AURORA THEME — PURE CSS, NO JS  =============== */
/* Палитра и токены */
:root{
    --bg-0:#070910;
    --bg-1:#0a0f1f;
    --bg-2:#0e1530;
    --panel:#0c1124;

    --primary:#86f3ff;   /* неоновый циан */
    --accent:#7c5cff;    /* ультрафиолет */
    --accent-2:#ff6fd8;  /* фуксия */
    --success:#2be7a5;
    --warn:#ffc453;
    --danger:#ff5b87;

    --text-1:#eef2ff;
    --text-2:#a9b0cc;
    --muted:#8f97b5;

    --radius:16px;
    --gap:22px;
    --container:min(1200px, 100% - 28px);

    --shadow-soft:0 0 0 1px rgba(255,255,255,.06), 0 22px 60px rgba(0,0,0,.45);
    --ring:0 0 0 2px rgba(134,243,255,.32), 0 0 0 6px rgba(124,92,255,.18);

    /* Градиенты «аура» */
    --grad-aurora: conic-gradient(from 180deg at 50% 50%, rgba(124,92,255,.25), rgba(255,111,216,.18), rgba(134,243,255,.25), rgba(124,92,255,.25));
    --grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, var(--accent-2) 100%);
    --grad-pane: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    --grad-border: conic-gradient(from 220deg at 50% 50%, rgba(124,92,255,.55), rgba(134,243,255,.55), rgba(255,111,216,.55), rgba(124,92,255,.55));

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

/* Базовые стили */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
    margin:0;
    font:16px/1.6 var(--font-sans);
    color:var(--text-1);
    background:
            radial-gradient(1000px 700px at 10% -10%, rgba(124,92,255,.16), transparent 55%),
            radial-gradient(900px 650px at 90% 0%, rgba(255,111,216,.12), transparent 60%),
            linear-gradient(180deg, var(--bg-0) 0%, #05070e 100%);
    overflow-x:hidden;
}

/* Лёгкая «зернистость» и сетка — без картинок */
body::before{
    content:"";
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
            repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
            radial-gradient(1200px 800px at 50% 120%, rgba(0,0,0,.35), transparent 60%);
    mix-blend-mode:overlay;
}
.grid-overlay::after{
    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:.22;
}

/* Ссылки */
a{ color:var(--primary); text-decoration:none }
a:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px }

/* Контейнер */
.container{ width:var(--container); margin-inline:auto }

/* ===================== HEADER ===================== */
header{
    position:sticky; top:0; z-index:30;
    backdrop-filter:blur(12px);
    background:linear-gradient(180deg, rgba(10,15,31,.7), rgba(10,15,31,.42));
    border-bottom:1px solid rgba(255,255,255,.08);
}
header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:14px; flex-wrap:wrap }
.brand{ display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.6px }
.logo{
    width:30px; height:30px; border-radius:9px;
    background:var(--grad-brand);
    box-shadow:0 0 24px rgba(134,243,255,.35), 0 0 36px rgba(124,92,255,.25);
}
nav{ display:flex; gap:10px; flex-wrap:wrap }
nav a{
    color:var(--text-1); font-weight:900; padding:8px 12px; border-radius:999px;
    background:
            linear-gradient(#111729,#111729) padding-box,
            linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04)) border-box;
    border:1px solid transparent;
    transition:transform .18s ease, box-shadow .2s ease, color .2s ease;
}
nav a:hover{
    color:#0c1223; transform:translateY(-1px);
    background:
            linear-gradient(135deg, rgba(134,243,255,.95), rgba(124,92,255,.95)) padding-box,
            linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.08)) border-box;
    box-shadow:0 10px 26px rgba(0,0,0,.4);
}

/* ===================== HERO ===================== */
.hero{ position:relative; padding:120px 0 96px; overflow:hidden }
.hero .title{
    position:relative; display:inline-block; padding:14px 18px; border-radius:16px;
    background:
            linear-gradient(#0e1430,#0e1430) padding-box,
            var(--grad-border) border-box;
    border:1px solid transparent;
    box-shadow:0 12px 50px rgba(124,92,255,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.hero h1 span{
    background:linear-gradient(90deg, var(--primary), var(--accent-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:textSheen 6s linear infinite;
    background-size:200% 100%;
}
@keyframes textSheen{
    0%{ background-position:0% 50% }
    50%{ background-position:100% 50% }
    100%{ background-position:0% 50% }
}
.hero .x::before,
.hero .x::after{
    content:""; position:absolute; left:50%; top:56%;
    width:clamp(520px,78vw,1200px); height:2px; transform-origin:center;
    background:linear-gradient(90deg, transparent, var(--accent) 22%, var(--primary) 78%, transparent);
    opacity:.6; filter:blur(1px); animation:beam 9s ease-in-out infinite;
}
.hero .x::before{ transform:translate(-50%,-50%) rotate(45deg) }
.hero .x::after{ transform:translate(-50%,-50%) rotate(-45deg) }
@keyframes beam{ 0%,100%{opacity:.38} 50%{opacity:.78} }

.hero .orbit{
    position:absolute; inset:-20% -10% -10% -10%; z-index:-1; pointer-events:none;
    background:var(--grad-aurora);
    filter:blur(60px) saturate(120%);
    opacity:.55; animation:orbit 40s linear infinite;
}
@keyframes orbit{ to{ transform:rotate(360deg) } }

/* ===================== BUTTONS ===================== */
.btn{
    display:inline-block; padding:12px 20px; border-radius:14px; font-weight:900; letter-spacing:.3px; border:none;
    background:var(--grad-brand); background-size:220% 220%; color:#0a0f1f;
    box-shadow:0 0 22px rgba(134,243,255,.28), 0 0 50px rgba(124,92,255,.22);
    transition:transform .15s ease, filter .15s ease;
    animation:btnSheen 5.5s linear infinite;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn.alt{
    background:
            linear-gradient(#121a36,#121a36) padding-box,
            var(--grad-border) border-box;
    border:1px solid transparent; color:var(--text-1);
    animation:btnSheen 8s linear infinite;
}
@keyframes btnSheen{
    0%{ background-position:0% 50% }
    50%{ background-position:100% 50% }
    100%{ background-position:0% 50% }
}

/* ===================== TAGS / BADGES ===================== */
.badge{
    display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
    border-radius:999px; font-weight:900; font-size:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.09);
}
.ok{ background:rgba(43,231,165,.14); color:#8dffd8; border-color:rgba(43,231,165,.28) }
.slow{ background:rgba(255,196,83,.14); color:#ffdca3; border-color:rgba(255,196,83,.28) }

/* ===================== TYPOGRAPHY ===================== */
.kicker{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted) }
h1{ font-size:clamp(32px,6vw,64px); line-height:1.08; margin:0 0 14px; letter-spacing:.6px }
h2{ font-size:clamp(22px,3.2vw,32px); line-height:1.18; margin:0 0 14px }
h3{ font-size:clamp(16px,2vw,18px); margin:0 0 10px }
.lead{ font-size:18px; color:var(--text-1) }
.muted{ color:var(--text-2) }

/* ===================== LAYOUT ===================== */
section{ position:relative; z-index:1; padding:64px 0 }
.grid{ display:grid; gap:var(--gap) }
.grid.two{ grid-template-columns:1.1fr .9fr }
.grid.three{ grid-template-columns:repeat(3,1fr) }
.grid.four{ grid-template-columns:repeat(4,1fr) }
@media (max-width:1080px){ .grid.two{ grid-template-columns:1fr } }
@media (max-width:920px){ .grid.four{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:720px){
    .grid.three,.grid.four{ grid-template-columns:1fr }
    nav{ width:100%; justify-content:space-between }
}

/* ===================== PANELS ===================== */
.card{
    position:relative;
    background:
            linear-gradient(var(--panel), var(--panel)) padding-box,
            var(--grad-border) border-box;
    border:1px solid transparent;
    border-radius:var(--radius);
    padding:36px;
    box-shadow:var(--shadow-soft);
    transition:transform .2s ease, box-shadow .3s ease, border-color .3s ease;
    backdrop-filter:blur(6px);
}
.card::after{
    content:"";
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:radial-gradient(800px 400px at 120% -10%, rgba(134,243,255,.08), transparent 60%);
    mix-blend-mode:screen;
}
.card:hover{
    transform:translateY(-2px);
    box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 28px 60px rgba(0,0,0,.55);
}
.subtle{
    background:var(--grad-pane);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    padding:26px;
}

/* ===================== MIRRORS ===================== */
#mirrors .intro{ margin-bottom:12px }
.mirror-list{ display:grid; gap:12px; margin:0; padding:0; list-style:none }
.mirror{
    position:relative; display:grid; gap:10px; padding:14px 14px 14px 18px;
    border-radius:14px;
    background:
            linear-gradient(#0f1632,#0f1632) padding-box,
            linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) border-box;
    border:1px solid transparent;
    transition:transform .18s ease, box-shadow .25s ease;
}
.mirror::before{
    content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; border-radius:10px 0 0 10px;
    background:linear-gradient(180deg, var(--primary), var(--accent-2));
    filter:blur(.3px);
}
.mirror:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,0,0,.42) }
.m-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.m-label{ font-weight:900; letter-spacing:.3px }
.m-actions{ display:flex; align-items:center; gap:8px }

.m-url{
    width:100%; min-height:44px; resize:none; padding:12px;
    border-radius:12px;
    background:
            linear-gradient(#0b1022,#0b1022) padding-box,
            linear-gradient(135deg, rgba(134,243,255,.45), rgba(124,92,255,.45)) border-box;
    border:1px solid transparent;
    color:var(--text-1); font-family:var(--font-mono); font-size:16px;
    white-space:pre-wrap; word-break:break-all; display:flex; align-items:center;
}
.m-url:focus{ outline:none; box-shadow:var(--ring) }

.copy-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    background:
            linear-gradient(#141c3a,#141c3a) padding-box,
            linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) border-box;
    border:1px solid transparent; cursor:pointer;
    box-shadow:inset 0 0 12px rgba(255,255,255,.04);
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.copy-btn:hover{ transform:translateY(-1px) }
.mirror:focus-within .copy-btn::after{
    content:"Copied"; position:absolute; right:10px; top:-26px;
    font-size:11px; padding:2px 8px; border-radius:999px; color:#0b0f1a;
    background:var(--grad-brand); box-shadow:0 0 18px rgba(134,243,255,.3);
}

/* ===================== PGP ===================== */
#pgp{ width:100%; max-width:640px; margin-inline:auto }
.finger{
    display:grid; gap:10px;
    grid-template-columns:repeat(auto-fit, minmax(76px, 1fr));
}
.finger .block{
    text-align:center; padding:10px 12px; border-radius:10px; font-family:var(--font-mono); letter-spacing:.06em;
    color:var(--text-1);
    background:
            linear-gradient(#0d1430,#0d1430) padding-box,
            linear-gradient(135deg, rgba(134,243,255,.45), rgba(255,111,216,.45)) border-box;
    border:1px solid transparent;
    text-shadow:0 0 10px rgba(134,243,255,.25);
}

/* PGP key area */
.subtle.mono{ font-size:14px; overflow-wrap:anywhere }
pre{ margin:0 }

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

/* ===================== STATUS ===================== */
.status-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
@media (max-width:1000px){ .status-grid{ grid-template-columns:1fr } }

.kpi{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-radius:12px;
    background:
            linear-gradient(#10183a,#10183a) padding-box,
            linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)) border-box;
    border:1px solid transparent;
}
.kpi strong{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }

.bar{
    height:12px; border-radius:999px; position:relative; overflow:hidden;
    background:#17224a;
    border:1px solid rgba(255,255,255,.12);
}
.bar span{
    display:block; height:100%; width:var(--w,50%);
    background:linear-gradient(90deg, var(--primary), var(--accent-2));
    filter:drop-shadow(0 0 12px rgba(134,243,255,.35));
}
.bar::after{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(45deg, rgba(255,255,255,.16), rgba(255,255,255,.16) 6px, transparent 6px, transparent 12px);
    opacity:.2; animation:slide 9s linear infinite; mix-blend-mode:overlay;
}
@keyframes slide{ 0%{background-position:0 0} 100%{background-position:240px 0} }
.w-99{ --w:99% } .w-98{ --w:98% } .w-96{ --w:96% } .w-92{ --w:92% } .w-88{ --w:88% } .w-42{ --w:42% }
.stat-note{ font-size:13px; color:var(--text-2) }

/* ===================== FOOTER ===================== */
footer{ padding:44px 0 72px; color:var(--text-2) }
.footer-grid{ display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:var(--gap) }
@media (max-width:920px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:620px){ .footer-grid{ grid-template-columns:1fr } }
.minitext{ font-size:13px; color:var(--muted) }

/* ===================== UTILS ===================== */
.kbd{
    font-family:var(--font-mono); font-size:13px; padding:2px 6px; border-radius:8px;
    background:#0f1730; border:1px solid rgba(255,255,255,.14);
}

/* ===================== RESPONSIVE POLISH ===================== */
@media (max-width:720px){
    .card{ padding:22px; border-radius:12px }
    nav{ display:none } /* компактная шапка на очень узких экранах */
    .brand{ margin:0 auto }
    .subtle{ font-size:12px }
}

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

/* ========================  PATCH: SEAMLESS BG & NO STRIPES  ======================== */
/* --- 1. Новый более ровный фон, двигается вместе со страницей --- */
body{
    background-color:#080d19;
    background-image:
            radial-gradient(1100px 760px at 8% -10%, rgba(124,92,255,.12), transparent 62%),
            radial-gradient(1200px 820px at 92% -12%, rgba(255,111,216,.10), transparent 64%),
            linear-gradient(180deg, #0b1021 0%, #080d19 45%, #070b17 100%);
    background-repeat:no-repeat;
    background-attachment:scroll, scroll, scroll;
}

/* --- 2. Убираем фиксированные оверлеи, которые давали «полосу» --- */
body::before,
.grid-overlay::after{
    display:none !important;
}

/* --- 3. Герой: отключаем старую orbit и рисуем плавную ауру через ::before --- */
.hero{
    overflow:visible;          /* чтобы аура не обрезалась по нижней границе секции */
    position:relative;
}
.hero .orbit{
    display:none;              /* не используется, чтобы не делать жёсткий переход */
}
.hero::before{
    content:"";
    position:absolute;
    inset:-10% -10% -28% -10%;
    z-index:-1;
    pointer-events:none;
    background:
            radial-gradient(740px 600px at 20% 28%, rgba(124,92,255,.30), transparent 60%),
            radial-gradient(820px 620px at 80% 22%, rgba(255,111,216,.24), transparent 62%),
            radial-gradient(720px 720px at 50% 28%, rgba(134,243,255,.20), transparent 70%);
    filter:blur(50px) saturate(118%);
    -webkit-mask-image:linear-gradient(to bottom, #fff 0%, #fff 72%, transparent 100%);
    mask-image:linear-gradient(to bottom, #fff 0%, #fff 72%, transparent 100%);
}

/* делаем X-лучи чуть мягче, чтобы не читались как резкая полоса */
.hero .x::before,
.hero .x::after{
    opacity:.28;
    filter:blur(.6px);
}

/* --- 4. Убираем фиолетовые лужи у карточек --- */
.card::after{
    display:none !important;
}

/* --- 5. Секции сами фона не рисуют, фон общий на body --- */
section{
    background:transparent !important;
}

/* --- 6. Очень лёгкий шум поверх градиента против бэндинга --- */
body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/></filter>\
<rect width='100%' height='100%' filter='url(%23n)' opacity='0.035'/></svg>");
    background-size:260px 260px;
    mix-blend-mode:overlay;
    opacity:.03;
}

/* --- 7. На мобилке аура короче, чтобы не заливать слишком низко --- */
@media (max-width:720px){
    .hero::before{
        -webkit-mask-image:linear-gradient(to bottom, #fff 0%, #fff 64%, transparent 100%);
        mask-image:linear-gradient(to bottom, #fff 0%, #fff 64%, transparent 100%);
        filter:blur(42px) saturate(115%);
    }
}