:root { --ink:#020510; --panel:#081020; --line:rgba(39,232,255,.22); --cyan:#27e8ff; --pale:#dffcff; --magenta:#ff2bc6; --gold:#ffca58; --text:#e8fbff; --muted:#8aa2b7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 78% 8%,rgba(255,43,198,.08),transparent 28rem),var(--ink); font-family:"Segoe UI",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
code,pre,small,.eyebrow,nav { font-family:Consolas,"Courier New",monospace; }
.skip { position:fixed; left:1rem; top:-5rem; z-index:99; padding:.8rem 1rem; background:var(--cyan); color:var(--ink); font-weight:800; }
.skip:focus { top:1rem; }
header { position:sticky; top:0; z-index:20; height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1rem,4vw,4.5rem); border-bottom:1px solid var(--line); background:rgba(2,5,16,.9); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:.8rem; }
.brand b { display:block; color:var(--pale); font-size:1rem; letter-spacing:.38em; line-height:1; }
.brand small { display:block; margin-top:.35rem; color:var(--muted); font-size:.57rem; letter-spacing:.16em; }
.brand-mark { position:relative; width:36px; height:36px; border:1px solid var(--cyan); border-radius:50%; box-shadow:0 0 18px rgba(39,232,255,.2),inset 0 0 12px rgba(39,232,255,.15); }
.brand-mark::before,.brand-mark::after { content:""; position:absolute; inset:5px 12px; border:1px solid var(--cyan); border-radius:50%; transform:rotate(55deg); }
.brand-mark::after { transform:rotate(-55deg); }
.brand-mark i { position:absolute; inset:13px; border-radius:50%; background:var(--magenta); box-shadow:0 0 10px var(--magenta); }
nav { display:flex; gap:clamp(1rem,3vw,2.5rem); color:var(--muted); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
nav a { padding:.8rem 0; border-bottom:1px solid transparent; }
nav a:hover,nav a:focus-visible { color:var(--cyan); border-color:var(--cyan); outline:0; }
.hero { position:relative; min-height:710px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); align-items:center; gap:clamp(2rem,6vw,7rem); padding:6rem clamp(1.2rem,7vw,8rem); overflow:hidden; background-image:linear-gradient(90deg,rgba(2,5,16,.98),rgba(2,5,16,.8) 44%,rgba(2,5,16,.28)),linear-gradient(180deg,transparent 68%,var(--ink)),url("assets/support-bg.png"); background-size:cover; background-position:center; }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.12; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:76px 76px; mask-image:linear-gradient(90deg,#000,transparent 72%); }
.hero-copy,.status { position:relative; z-index:1; }
.hero-copy { max-width:790px; }
.eyebrow { margin:0 0 1.2rem; color:var(--cyan); font-size:.7rem; font-weight:700; letter-spacing:.24em; }
.eyebrow::before { content:""; display:inline-block; width:28px; height:1px; margin-right:.7rem; vertical-align:middle; background:var(--magenta); box-shadow:0 0 8px var(--magenta); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:1.6rem; font-size:clamp(3.4rem,7vw,7rem); line-height:.88; letter-spacing:-.055em; font-weight:320; text-transform:uppercase; }
h1 em { color:var(--cyan); font-style:normal; text-shadow:0 0 28px rgba(39,232,255,.28); }
.hero-copy>p:not(.eyebrow) { max-width:620px; color:#afc3d2; font-size:clamp(1rem,1.6vw,1.22rem); line-height:1.7; }
.hero-copy strong { color:var(--text); }
.actions { display:flex; gap:1rem; flex-wrap:wrap; margin:2.2rem 0; }
.actions button,.actions a { min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding:.85rem 1.3rem; border:1px solid var(--cyan); color:var(--pale); background:rgba(39,232,255,.07); font:800 .68rem Consolas,monospace; letter-spacing:.11em; cursor:pointer; }
.actions button { color:var(--ink); background:var(--cyan); }
.actions button:hover,.actions button:focus-visible { background:white; outline:2px solid var(--magenta); outline-offset:3px; }
.actions a:hover,.actions a:focus-visible { background:rgba(39,232,255,.16); outline:2px solid var(--cyan); outline-offset:3px; }
.status { justify-self:end; width:min(100%,360px); padding:2rem; border:1px solid var(--line); background:rgba(5,12,27,.8); backdrop-filter:blur(12px); }
.orbit { position:relative; width:150px; height:150px; margin:0 auto 1.5rem; border:1px solid var(--cyan); border-radius:50%; box-shadow:0 0 35px rgba(39,232,255,.12),inset 0 0 25px rgba(39,232,255,.12); }
.orbit::before,.orbit::after { content:""; position:absolute; inset:20px -12px; border:1px solid rgba(39,232,255,.5); border-radius:50%; transform:rotate(48deg); }
.orbit::after { transform:rotate(-48deg); }
.orbit i { position:absolute; inset:43px; background:linear-gradient(135deg,#ffb8ec,#ff2bc6 45%,#69067c); transform:rotate(45deg); box-shadow:0 0 28px rgba(255,43,198,.75); }
.status>small { display:block; color:var(--muted); text-align:center; letter-spacing:.2em; }
.status>b { display:block; margin:.35rem 0 1.5rem; color:var(--gold); text-align:center; font:1.25rem Consolas,monospace; letter-spacing:.18em; }
.status dl { margin:0; }
.status dl div { display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-top:1px solid var(--line); font:.68rem Consolas,monospace; }
.status dt { color:var(--muted); }
.status dd { margin:0; color:var(--pale); text-align:right; }
.preflight { display:grid; grid-template-columns:auto repeat(4,1fr); gap:1.5rem; padding:1.15rem clamp(1rem,5vw,5rem); border-block:1px solid var(--line); background:#050b18; }
.preflight b { color:var(--magenta); font:700 .64rem Consolas,monospace; letter-spacing:.15em; }
.preflight span { color:var(--muted); font-size:.77rem; }
.preflight span::before { content:"\25C6"; margin-right:.55rem; color:var(--cyan); font-size:.5rem; }
.section { max-width:1500px; margin:0 auto; padding:7rem clamp(1.2rem,6vw,6rem); scroll-margin-top:78px; }
.heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2.5rem; }
.heading>p { max-width:470px; margin:0; color:var(--muted); line-height:1.7; }
h2 { margin:0; font-size:clamp(2.5rem,5vw,4.5rem); font-weight:350; letter-spacing:-.04em; text-transform:uppercase; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; border:1px solid var(--line); background:var(--line); }
.cards article { min-height:300px; padding:2rem; background:linear-gradient(145deg,#0b1528,#050a17); }
.cards small { color:var(--magenta); letter-spacing:.2em; }
.cards h3 { margin:1rem 0 1.4rem; font-size:1.3rem; }
.cards ol { margin:0; padding-left:1.2rem; color:var(--muted); line-height:1.65; }
.cards li { margin:.7rem 0; padding-left:.4rem; }
.cards li::marker { color:var(--cyan); }
.saves { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr); gap:clamp(3rem,8vw,9rem); align-items:center; }
.save-art { min-height:500px; display:grid; place-items:center; align-content:center; border:1px solid var(--line); background:radial-gradient(circle,rgba(255,43,198,.16),transparent 38%),linear-gradient(rgba(39,232,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(39,232,255,.03) 1px,transparent 1px),var(--panel); background-size:auto,42px 42px,42px 42px,auto; }
.save-art small { color:var(--muted); letter-spacing:.2em; }
.saves>div:last-child>p:not(.eyebrow) { margin:1.5rem 0; color:var(--muted); line-height:1.8; }
.saves strong { color:var(--text); }
.path { display:flex; flex-direction:column; gap:.6rem; margin:1.6rem 0; padding:1.2rem 1.3rem; border-left:2px solid var(--magenta); background:rgba(255,43,198,.05); overflow-wrap:anywhere; }
.path small { color:var(--magenta); letter-spacing:.15em; }
.path>code { color:var(--pale); }
.path span { color:var(--muted); font-size:.75rem; }
.checks { margin:1.4rem 0 0; padding:0; list-style:none; color:var(--muted); }
.checks li { position:relative; margin:.8rem 0; padding-left:1.7rem; line-height:1.55; }
.checks li::before { content:"\25C7"; position:absolute; left:0; color:var(--cyan); }
.report { border-top:1px solid var(--line); }
.report-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:3rem; }
.report-email { display:flex; flex-direction:column; gap:.35rem; margin-top:2rem; padding:1rem 1.2rem; border:1px solid var(--cyan); background:rgba(39,232,255,.07); }
.report-email span { color:var(--cyan); font:800 .7rem Consolas,monospace; letter-spacing:.13em; }
.report-email strong { color:var(--pale); font-size:.88rem; overflow-wrap:anywhere; }
.report-email small { color:var(--muted); font-size:.7rem; }
.report-email:hover,.report-email:focus-visible { background:rgba(39,232,255,.15); outline:2px solid var(--cyan); outline-offset:3px; }
.privacy { margin-top:1rem; padding:1.2rem; border:1px solid rgba(255,202,88,.32); background:rgba(255,202,88,.05); }
.privacy b { color:var(--gold); }
.privacy p { margin:.5rem 0 0; color:var(--muted); line-height:1.6; }
.template { min-width:0; border:1px solid var(--line); background:#050a16; }
.template>div { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid var(--line); color:var(--cyan); font:.64rem Consolas,monospace; letter-spacing:.15em; }
.template button { padding:.45rem .8rem; border:1px solid var(--cyan); background:transparent; color:var(--cyan); font:700 .62rem Consolas,monospace; cursor:pointer; }
.template button:hover,.template button:focus-visible { color:var(--ink); background:var(--cyan); outline:0; }
pre { margin:0; padding:1.5rem; color:#a7bfd0; font-size:.8rem; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
footer { display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; padding:2rem clamp(1.2rem,5vw,5rem); border-top:1px solid var(--line); background:#030711; color:var(--muted); font-size:.72rem; }
footer p { margin:0; }
footer>b { font:700 .68rem Consolas,monospace; letter-spacing:.1em; }
footer>b a { color:var(--cyan); }
footer>b a:hover,footer>b a:focus-visible { color:var(--pale); outline:1px solid var(--cyan); outline-offset:4px; }
@media(max-width:900px) { nav{display:none}.hero{grid-template-columns:1fr;padding-top:5rem}.status{justify-self:start}.preflight{grid-template-columns:repeat(2,1fr)}.preflight b{grid-column:1/-1}.heading{align-items:start;flex-direction:column}.saves,.report-grid{grid-template-columns:1fr}footer{grid-template-columns:1fr} }
@media(max-width:620px) { header{height:68px}.brand small{display:none}.hero{min-height:auto;padding:4rem 1rem 5rem}h1{font-size:clamp(3rem,17vw,4.5rem)}.status{width:100%}.preflight,.cards{grid-template-columns:1fr}.section{padding:5rem 1rem}.cards article{min-height:auto}.save-art{min-height:350px}footer .brand small{display:block} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important} }