:root { color-scheme: dark; --ink:#1c1230; --cream:#fff8e8; --sun:#ffca38; --violet:#4b1d79; --violet-deep:#2b0b4d; --purple:#7b3fb0; --mint:#5ad4b7; --line:#e5d9f2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--cream); font-family:ui-rounded, Aptos, "Trebuchet MS", system-ui, sans-serif; font-size:1.08rem; line-height:1.55; }
main { overflow:hidden; }
.hero { position:relative; isolation:isolate; min-height:25rem; padding:4.2rem 1.5rem 4.7rem; text-align:center; color:#fff; background:radial-gradient(circle at 18% 20%,rgba(255,202,56,.38) 0 7%,transparent 7.4%),radial-gradient(circle at 80% 80%,rgba(90,212,183,.2) 0 13%,transparent 13.4%),linear-gradient(145deg,var(--violet-deep),var(--violet) 62%,#9046be); }
.hero::after { content:""; position:absolute; z-index:-1; right:-5rem; bottom:-5rem; width:18rem; height:18rem; border:1.5rem solid rgba(255,255,255,.08); transform:rotate(45deg); }
.eyebrow { margin:0 0 .35rem; color:var(--sun); font-size:.86rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; letter-spacing:.025em; }
h1 { margin-bottom:.3rem; font-size:clamp(4.5rem,16vw,8rem); line-height:.85; letter-spacing:.08em; text-shadow:.09em .09em 0 #21083a,.15em .15em 0 rgba(0,0,0,.18); }
.hero-copy { max-width:34rem; margin:1.4rem auto 1.8rem; font-size:clamp(1.1rem,3vw,1.35rem); font-weight:700; }
.jump-link { display:inline-block; padding:.72rem 1.15rem; border:3px solid #fff; border-radius:.35rem; color:var(--ink); background:var(--sun); box-shadow:.25rem .25rem 0 rgba(0,0,0,.3); font-weight:900; text-decoration:none; }
.jump-link:hover,.jump-link:focus-visible { transform:translate(.1rem,.1rem); box-shadow:.12rem .12rem 0 rgba(0,0,0,.3); }
.pixel-star { position:absolute; width:1.05rem; height:1.05rem; background:var(--sun); box-shadow:1.05rem 0 var(--sun),0 1.05rem var(--sun),-1.05rem 0 var(--sun),0 -1.05rem var(--sun); }
.star-one { top:4rem; left:13%; } .star-two { right:13%; bottom:4rem; transform:scale(.65); }
.content,.checklist,.help { width:min(100% - 2rem,52rem); margin-inline:auto; }
.content { padding-block:4.7rem 3rem; } .section-heading { text-align:center; }
h2 { margin-bottom:.45rem; font-size:clamp(2rem,6vw,3rem); line-height:1; } h3 { margin-bottom:.35rem; font-size:1.55rem; line-height:1.05; }
.steps { display:grid; gap:1rem; margin:2.2rem 0 0; padding:0; list-style:none; }
.step-card { display:grid; grid-template-columns:3.2rem 1fr; gap:.9rem; align-items:start; padding:1.4rem; border:2px solid var(--line); border-radius:.85rem; background:#fff; box-shadow:.35rem .35rem 0 #ded1eb; }
.step-card p:last-child { margin-bottom:0; }
.step-number { display:grid; width:3rem; height:3rem; place-items:center; border-radius:50%; color:var(--ink); background:var(--sun); font-family:Impact,Haettenschweiler,sans-serif; font-size:1.7rem; }
.address-card { border-color:var(--mint); background:#effff9; }
.server-address { overflow-wrap:anywhere; margin:.7rem 0; padding:.72rem .85rem; border:2px dashed var(--purple); border-radius:.45rem; color:var(--violet-deep); background:#fff; font-family:ui-monospace,Consolas,monospace; font-size:clamp(1.08rem,4vw,1.45rem); font-weight:900; }
.tip-panel { display:flex; gap:1rem; width:min(100% - 2rem,52rem); margin:.5rem auto 4.7rem; padding:1.3rem 1.45rem; border-radius:.85rem; color:#fff; background:var(--violet); }
.tip-panel h2 { margin-bottom:.25rem; font-size:1.75rem; } .tip-panel p { margin-bottom:0; }
.tip-icon { flex:0 0 auto; width:2rem; height:2rem; border-radius:50%; color:var(--violet); background:var(--sun); font-weight:900; text-align:center; }
.checklist { padding-bottom:4.2rem; } .checklist ul { display:grid; gap:.8rem; max-width:35rem; margin:1.6rem auto; padding:0; list-style:none; }
.checklist li { padding:.7rem .9rem; border-radius:.55rem; background:#fff; box-shadow:0 .1rem 0 var(--line); font-weight:700; }
.checklist li span { margin-right:.65rem; color:#077b5d; font-size:1.35rem; } .small-note { text-align:center; font-size:.96rem; }
.help { margin-bottom:4.7rem; padding:2rem; border:2px solid var(--sun); border-radius:.85rem; background:#fff4c7; text-align:center; }
.help p,footer p { margin-bottom:0; } footer { padding:1.4rem; color:#fff; background:var(--ink); text-align:center; font-weight:800; }
@media (min-width:44rem) { .hero { padding-block:5rem 5.4rem; } .steps { grid-template-columns:repeat(2,1fr); } .address-card { grid-column:1/-1; } }
@media (max-width:27rem) { .step-card { grid-template-columns:1fr; } .step-number { width:2.5rem; height:2.5rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .jump-link:hover,.jump-link:focus-visible { transform:none; } }