:root{
    --bg0:#04050b;
    --bg1:#070a17;
    --panel: rgba(10, 12, 30, .68);
    --panel2: rgba(7, 10, 23, .82);
    --text: #e6f0ff;
    --muted: rgba(230,240,255,.74);
    --line: rgba(230,240,255,.16);
    --accent: #b23cff;
    --accent2:#00ffd5;
    --danger:#ff3d81;
    --good:#4dff88;
    --shadow: 0 22px 70px rgba(0,0,0,.62);
    --radius: 18px;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    color:var(--text);
    font-family:var(--sans);
    line-height:1.65;
    background: linear-gradient(180deg, var(--bg0), var(--bg1));
    overflow-x:hidden;
}

/* Mythic-cyber animated aura (no JS) */
body::before{
    content:"";
    position:fixed;
    inset:-35vmax;
    z-index:-3;
    background:
            radial-gradient(circle at 18% 12%, rgba(178,60,255,.22), transparent 42%),
            radial-gradient(circle at 82% 18%, rgba(0,255,213,.16), transparent 45%),
            radial-gradient(circle at 55% 92%, rgba(255,61,129,.13), transparent 48%),
            radial-gradient(circle at 50% 55%, rgba(255,255,255,.06), transparent 55%),
            linear-gradient(180deg, var(--bg0), var(--bg1));
    filter:saturate(1.25) contrast(1.02);
    animation:bgDrift 18s linear infinite;
    transform-origin:center;
}
@keyframes bgDrift{
    0%{ transform:translate3d(0,0,0) rotate(0deg); }
    50%{ transform:translate3d(3vmax,-2vmax,0) rotate(1.2deg); }
    100%{ transform:translate3d(0,0,0) rotate(0deg); }
}

/* Scanlines + soft vignette */
body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
            repeating-linear-gradient(0deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.045) 1px,
            transparent 1px,
            transparent 6px),
            radial-gradient(circle at 50% 42%, transparent 40%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.78) 100%);
    mix-blend-mode:overlay;
    opacity:.26;
    animation:scan 8.5s linear infinite;
}
@keyframes scan{
    0%{ background-position: 0 0, 0 0; }
    100%{ background-position: 0 260px, 0 0; }
}

a{ color:inherit; }
a:hover{ text-decoration:none; }

.wrap{
    width:min(1120px, calc(100% - 40px));
    margin:0 auto;
}

.skip{
    position:absolute;
    left:-999px;
    top:12px;
    padding:10px 14px;
    border-radius:12px;
    background:rgba(0,0,0,.65);
    border:1px solid var(--line);
}
.skip:focus{ left:12px; z-index:999; outline:none; }

header.top{
    padding:56px 0 18px;
}

.brandline{
    display:flex;
    gap:14px;
    align-items:center;
    flex-wrap:wrap;
}

.sigil{
    font-family:var(--mono);
    letter-spacing:.12em;
    opacity:.9;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.03);
    box-shadow: 0 0 0 1px rgba(0,255,213,.08), 0 0 22px rgba(178,60,255,.10);
}

/* Glitch title (pure CSS) */
.glitch{
    position:relative;
    font-weight:900;
    letter-spacing:.24em;
    text-transform:uppercase;
    font-size:clamp(28px, 4.2vw, 54px);
    line-height:1.05;
    padding:10px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    text-shadow: 0 0 26px rgba(0,255,213,.10);
}
.glitch::before,
.glitch::after{
    content:attr(data-text);
    position:absolute;
    inset:0;
    padding:10px 14px;
    border-radius:14px;
    opacity:.9;
    pointer-events:none;
}
.glitch::before{
    transform:translateX(1px);
    text-shadow: 2px 0 rgba(0,255,213,.9);
    clip-path: inset(0 0 62% 0);
    animation:glTop 2.9s infinite linear;
}
.glitch::after{
    transform:translateX(-1px);
    text-shadow: -2px 0 rgba(255,61,129,.85);
    clip-path: inset(62% 0 0 0);
    animation:glBot 2.4s infinite linear;
}
@keyframes glTop{
    0%, 100%{ clip-path: inset(0 0 62% 0); }
    10%{ clip-path: inset(0 0 74% 0); }
    20%{ clip-path: inset(0 0 56% 0); }
    30%{ clip-path: inset(0 0 68% 0); }
    40%{ clip-path: inset(0 0 60% 0); }
    50%{ clip-path: inset(0 0 80% 0); }
    60%{ clip-path: inset(0 0 54% 0); }
    70%{ clip-path: inset(0 0 66% 0); }
    80%{ clip-path: inset(0 0 58% 0); }
    90%{ clip-path: inset(0 0 72% 0); }
}
@keyframes glBot{
    0%, 100%{ clip-path: inset(62% 0 0 0); }
    12%{ clip-path: inset(70% 0 0 0); }
    24%{ clip-path: inset(58% 0 0 0); }
    36%{ clip-path: inset(76% 0 0 0); }
    48%{ clip-path: inset(64% 0 0 0); }
    60%{ clip-path: inset(82% 0 0 0); }
    72%{ clip-path: inset(60% 0 0 0); }
    84%{ clip-path: inset(74% 0 0 0); }
    96%{ clip-path: inset(66% 0 0 0); }
}

.tagline{
    margin:14px 0 0;
    color:var(--muted);
    max-width:70ch;
}

nav.nav{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter: blur(12px);
    background: rgba(7,10,23,.62);
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.10);
}

.nav-inner{
    display:flex;
    gap:10px;
    padding:10px 0;
    align-items:center;
    flex-wrap:wrap;
}

.navlink{
    text-decoration:none;
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:8px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.navlink:hover{
    transform: translateY(-1px);
    border-color: rgba(0,255,213,.38);
    box-shadow: 0 0 0 1px rgba(178,60,255,.12), 0 0 22px rgba(0,255,213,.10);
}

main{ padding-bottom: 40px; }

.section{
    padding:72px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    position:relative;
    scroll-margin-top: 84px;
}
.section:target::after{
    content:"";
    position:absolute;
    inset:14px;
    border-radius: calc(var(--radius) + 10px);
    border:1px solid rgba(0,255,213,.24);
    box-shadow: 0 0 0 1px rgba(178,60,255,.14), 0 0 36px rgba(0,255,213,.10);
    pointer-events:none;
}

.grid2{
    display:grid;
    gap:22px;
    grid-template-columns: 1.15fr .85fr;
    align-items:start;
}

h1, h2, h3{
    margin:0 0 10px;
    line-height:1.15;
}
h1{
    font-size:clamp(26px, 3.2vw, 40px);
    letter-spacing:.02em;
    background: linear-gradient(90deg, rgba(178,60,255,.95), rgba(0,255,213,.95), rgba(255,61,129,.85));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow: 0 0 22px rgba(0,255,213,.08);
}
h2{
    font-size:clamp(22px, 2.6vw, 32px);
    letter-spacing:.02em;
}
h3{
    font-size: 16px;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-family:var(--mono);
    color: rgba(230,240,255,.92);
}

p{ margin: 0 0 12px; color: rgba(230,240,255,.88); }
.muted{ color: var(--muted); }
code{
    font-family:var(--mono);
    font-size: .95em;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    padding: 2px 6px;
    border-radius: 10px;
    white-space:nowrap;
}

/* Animated border panels */
.panel{
    background:
            linear-gradient(var(--panel2), var(--panel2)) padding-box,
            linear-gradient(120deg, rgba(178,60,255,.62), rgba(0,255,213,.62), rgba(255,61,129,.52)) border-box;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background-size: 100% 100%, 220% 220%;
    background-position: 0 0, 0% 50%;
    animation: borderFlow 9.5s linear infinite;
    box-shadow: var(--shadow);
    padding: 18px;
}
@keyframes borderFlow{
    0%{ background-position: 0 0, 0% 50%; }
    50%{ background-position: 0 0, 100% 50%; }
    100%{ background-position: 0 0, 0% 50%; }
}

.panel.warning{
    background:
            linear-gradient(var(--panel2), var(--panel2)) padding-box,
            linear-gradient(120deg, rgba(255,61,129,.70), rgba(178,60,255,.55), rgba(0,255,213,.35)) border-box;
}

.hero .notice{
    margin: 14px 0 16px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    box-shadow: 0 0 0 1px rgba(255,61,129,.10), 0 0 26px rgba(178,60,255,.12);
}

.cta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin: 14px 0 12px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    box-shadow: 0 0 0 1px rgba(0,0,0,.25);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    position:relative;
    overflow:hidden;
    font-family:var(--mono);
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size: 12px;
}

.btn.primary{
    border-color: rgba(0,255,213,.30);
    background: linear-gradient(90deg,
    rgba(178,60,255,.85),
    rgba(0,255,213,.82),
    rgba(255,61,129,.74),
    rgba(0,255,213,.82),
    rgba(178,60,255,.85));
    background-size: 300% 100%;
    animation: shimmer 4.2s linear infinite;
}
@keyframes shimmer{
    0%{ background-position: 0% 50%; }
    100%{ background-position: 100% 50%; }
}

.btn::after{
    content:"";
    position:absolute;
    inset:-20%;
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.22), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.16), transparent 45%);
    opacity:.0;
    transform: rotate(12deg);
    transition: opacity .15s ease;
    pointer-events:none;
}
.btn:hover{
    transform: translateY(-1px);
    border-color: rgba(0,255,213,.45);
    box-shadow: 0 0 0 1px rgba(178,60,255,.16), 0 0 40px rgba(0,255,213,.10);
}
.btn:hover::after{ opacity:.9; }

.badges{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top: 12px;
}
.badge{
    font-family:var(--mono);
    font-size: 12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    position:relative;
    overflow:hidden;
}
.badge::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, transparent, rgba(0,255,213,.20), transparent);
    transform: translateX(-120%);
    animation: badgeSweep 3.6s linear infinite;
    opacity:.9;
}
@keyframes badgeSweep{
    0%{ transform: translateX(-120%); }
    55%{ transform: translateX(120%); }
    100%{ transform: translateX(120%); }
}

.steps{ margin: 10px 0 0 18px; color: rgba(230,240,255,.88); }
.steps li{ margin: 8px 0; }
.steps strong{ color: rgba(230,240,255,.98); }

.link-grid{
    display:flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}
.card{
    text-decoration:none;
    display:flex;
    padding: 16px;
    flex-direction: column;
    border-radius: var(--radius);
    background:
            linear-gradient(var(--panel), var(--panel)) padding-box,
            linear-gradient(120deg, rgba(255,255,255,.16), rgba(0,255,213,.22), rgba(178,60,255,.18)) border-box;
    border:1px solid transparent;
    box-shadow: 0 18px 55px rgba(0,0,0,.45);
    transition: transform .16s ease, box-shadow .16s ease;
    min-height: 124px;
}
.card:hover{
    transform: translateY(-2px);
    box-shadow: 0 22px 70px rgba(0,0,0,.62);
}
.card-title{
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size: 13px;
    margin-bottom: 8px;
}
.card-meta{
    color: var(--muted);
    font-family:var(--mono);
    font-size: 12px;
    letter-spacing:.06em;
    margin-bottom: 10px;
}
.card-url{
    font-family:var(--mono);
    font-size: 18px;
    color: rgba(230,240,255,.92);
    word-break: break-all;
}

.block{
    margin: 12px 0 0;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.35);
    overflow:auto;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.45;
    box-shadow: inset 0 0 0 1px rgba(0,255,213,.06);
}

.fingerprint code{
    display:inline-block;
    padding: 8px 10px;
    border-radius: 14px;
    border-color: rgba(0,255,213,.25);
    box-shadow: 0 0 0 1px rgba(178,60,255,.12), 0 0 26px rgba(0,255,213,.08);
}

details.details{
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    padding: 10px 12px;
    margin-top: 12px;
}
details.details > summary{
    cursor:pointer;
    font-family:var(--mono);
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size: 12px;
    list-style:none;
    outline:none;
}
details.details > summary::-webkit-details-marker{ display:none; }

.faq-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}
.faq-grid details.details p{
    margin: 10px 0 0;
    color: rgba(230,240,255,.88);
}

.checklist{
    margin: 10px 0 0 18px;
    padding:0;
}
.checklist li{ margin: 10px 0; }
.checklist strong{ color: rgba(230,240,255,.98); }

.changelog{
    margin: 8px 0 0 18px;
}
.changelog li{ margin: 8px 0; color: rgba(230,240,255,.86); }

.contact-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}
.contact-card{
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
}

footer.footer{
    padding: 46px 0 30px;
    border-top:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
}
.footer-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr 1fr;
    gap: 18px;
    align-items:start;
}
.footer-title{
    font-family:var(--mono);
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size: 12px;
    color: rgba(230,240,255,.92);
    margin-bottom: 8px;
}
.tiny{
    margin: 14px 0 0;
    color: rgba(230,240,255,.62);
    font-size: 12px;
    font-family:var(--mono);
}

/* Responsive */
@media (max-width: 980px){
    .grid2{ grid-template-columns: 1fr; }
    .link-grid{ grid-template-columns: 1fr; }
    .faq-grid{ grid-template-columns: 1fr; }
    .contact-grid{ grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr; }
    .glitch{ letter-spacing:.16em; }
    code{ white-space:normal; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    body::before, body::after,
    .panel, .btn.primary, .badge::before,
    .glitch::before, .glitch::after{
        animation:none !important;
    }
    .btn, .navlink, .card{ transition:none !important; }
}