:root{
    /* Color system */
    --bg:#07090d;              /* page background */
    --panel:#0b0e15;           /* panel surface */
    --ink:#e9ecf4;             /* main text */
    --muted:#9aa3b5;           /* secondary text */
    --accentA:#7f63ff;         /* neon violet */
    --accentB:#00ffd1;         /* neon cyan */
    --accentC:#ff7a50;         /* warm coral */
    --ring:#28324a;            /* borders */
    --glass:rgba(13,17,26,.55);
    --blur:12px;
    --radius:20px;
    --vx-text-1:#f4f6fb; --vx-text-2:#a9afbd; --vx-muted:#7d8393;

    /* Type scale */
    --xxl:clamp(36px,6vw,68px);
    --xl:clamp(26px,4vw,44px);
    --lg:clamp(20px,3vw,28px);
    --md:16px;

    /* Effects */
    --shadow:0 20px 50px rgba(0,0,0,.55);
    --inner:inset 0 0 14px rgba(255,255,255,.04);
}

.pgp-list{
    overflow: auto;
    max-height: 200px;
    margin: 0;
}
/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; color:var(--ink); background:var(--bg);
    font:400 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

a{color:var(--ink); text-decoration:none}
a:hover{color:var(--accentB)}

/* Aurora backdrop */
.aurora{
    position:fixed; inset:-20vh -20vw; pointer-events:none; z-index:-1;
    filter:blur(80px) saturate(120%);
    background:
            radial-gradient(40% 35% at 18% 30%, rgba(127,99,255,.35), transparent 60%),
            radial-gradient(38% 40% at 80% 20%, rgba(0,255,209,.28), transparent 60%),
            radial-gradient(30% 28% at 60% 80%, rgba(255,122,80,.25), transparent 60%);
    animation:float 18s ease-in-out infinite alternate;
}
@keyframes float{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(2vw,-2vh,0) scale(1.05)}}

/* Noise layer */
.noise{position:fixed; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:soft-light; z-index:0;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.32"/></svg>');
    background-size:320px 320px;
}

/* Layout */
.wrap{max-width:1200px; margin:0 auto; padding:20px}

/* Nav */
.nav{
    position:sticky; top:0; z-index:10; border-bottom:1px solid #161c2a;
    backdrop-filter:blur(var(--blur)); background:linear-gradient(180deg, rgba(7,9,13,.7), rgba(7,9,13,.35));
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.06em}
.sig{width:12px; height:12px; border-radius:50%; background:var(--accentB); box-shadow:0 0 16px var(--accentB)}
.menu{display:flex; gap:16px}
.menu a{color:#cfd7ea; padding:8px 12px; border-radius:12px; border:1px solid transparent}
.menu a:hover{border-color:#26314a; background:rgba(15,20,31,.55)}

/* Hero */
.hero{display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:28px; padding:38px 0 30px}
.kicker{color:var(--muted); text-transform:uppercase; letter-spacing:.22em; font-size:12px}
.h1{font-size:var(--xxl); line-height:1.05; margin:8px 0; font-weight:900; letter-spacing:.01em}
.h1 .grad{
    background:linear-gradient(90deg, var(--accentA), var(--accentB) 55%, var(--accentC));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 18px rgba(127,99,255,.18), 0 0 28px rgba(0,255,209,.12);
}
.lead{color:#d6dcee; max-width:65ch}
.mast{font-weight:900; font-size:64px; opacity:.06; letter-spacing:.18em; text-align:right}

/* Panels */
.section{margin:26px 0}
.panel{
    position:relative; background:var(--glass); border:1px solid var(--ring); border-radius:var(--radius);
    padding:22px; box-shadow:var(--shadow), var(--inner);
}
.panel:before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:linear-gradient(135deg, rgba(127,99,255,.35), rgba(0,255,209,.25), rgba(255,122,80,.22));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}

h2{font-size:var(--xl); margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:14px}
.mono{font-family:ui-monospace, Menlo, Monaco, Consolas, monospace}

/* Ticket cards */
.tickets{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:14px}
.ticket{background:rgba(10,13,20,.6); border:1px dashed #26314a; border-radius:16px; padding:14px; box-shadow:var(--inner)}
.ticket-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.meta{color:var(--muted); font-size:12px}
.badge{border:1px solid #2f4660; color:#cfe7ff; background:#0b121b; border-radius:999px; padding:4px 10px; font-size:12px}
.badge.ok{border-color:#1c5f5a; color:#b8fff2; background:#0a1514}
textarea.code{width:100%; background:#060a12; color:#bcd7ff; border:1px solid #1a2545; border-radius:10px; padding:10px; resize:none}


/* Grid / Tiles */
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px}
.tile{background:#0c0f17; border:1px solid #242f4a; border-radius:14px; padding:14px; box-shadow:var(--inner)}

/* Steps */
.steps{display:grid; gap:10px}
.step{position:relative; padding:12px 12px 12px 18px; background:#0b1018; border:1px solid #23314a; border-radius:12px}
.step:before{content:""; position:absolute; left:8px; top:12px; bottom:12px; width:2px; border-radius:2px;
    background:linear-gradient(180deg, var(--accentA), var(--accentB))}

/* Status */
.status{display:grid; grid-template-columns:320px 1fr; gap:16px}
.rail{background:#0b111a; border:1px solid #22304a; border-radius:16px; padding:14px}
.row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed #26314a}
.row:last-child{border-bottom:0}
.bar{height:10px; border:1px solid #243255; border-radius:999px; overflow:hidden; background:#0a0e16}
.fill{display:block; height:100%; background:linear-gradient(90deg, var(--accentA), var(--accentB), var(--accentC)); width:var(--w,98%)}
.kpis{display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; margin:0 0 10px}
.flex{display:flex; justify-content:space-between}

/* FAQ */
details{background:#0b111a; border:1px solid #22304a; border-radius:12px; padding:12px; margin:8px 0}
summary{cursor:pointer}

/* Footer */
footer{border-top:1px solid #161c2a; color:#b9c4da; margin-top:28px; padding:20px 0}

/* Hero v2 */
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:32px;padding:46px 0 34px}
.hero .h1{margin:6px 0 14px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.cta{display:inline-block;border-radius:14px;padding:10px 14px;font-weight:600;letter-spacing:.02em;border:1px solid #26314a;background:#0b121b;color:#e9ecf4;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.cta:hover{transform:translateY(-1px);border-color:#2e3a58;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.cta--primary{border-color:transparent;background:linear-gradient(90deg,var(--accentA),var(--accentB),var(--accentC));background-size:200% 100%;animation:shift 6s linear infinite;color:#0b0e15}
.cta--ghost{background:transparent}
@keyframes shift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.pillbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pill{border:1px solid #2a3758;background:rgba(10,14,22,.55);padding:6px 10px;border-radius:999px;font-size:12px;color:#cdd7ef}
.statbar{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;color:#c9d3ea}
.stat{background:#0b111a;border:1px solid #23314a;border-radius:12px;padding:8px 10px}
.stat strong{color:#fff}
.console{position:relative;background:#05080f;border:1px solid #1a2545;border-radius:16px;padding:14px;box-shadow:inset 0 0 14px rgba(255,255,255,.04),0 20px 40px rgba(0,0,0,.45)}
.console .hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#9fb0d0;font-size:12px}
.console .dots{display:flex;gap:6px}
.console .dot{width:8px;height:8px;border-radius:50%;background:#293452}
.console .dot.ok{background:#1ec9a0;box-shadow:0 0 10px rgba(30,201,160,.6)}
.console pre{
    color:#bcd7ff;
    font:600 13px/1.5 ui-monospace,Menlo,Consolas,monospace;
    margin-bottom: 20px;
    border-bottom: #00ffd1 1px solid;
    border-top: #00ffd1 1px solid;
    margin-top: 20px;
}
.console .okline{color:#7fffd8}
.console .warn{color:#ffbb66}
.console:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);mix-blend-mode:overlay}

/* Responsive */
@media (max-width:980px){.hero{grid-template-columns:1fr}.mast{text-align:left; font-size:44px}.status{grid-template-columns:1fr}}

/* Motion reduced */
@media (prefers-reduced-motion:reduce){.aurora{animation:none} .panel, .menu a{transition:none}}