@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Nunito:wght@400;600;700;800;900&display=swap');

:root { --ink:#f8f4ff; --muted:#cfc5de; --purple:#7c3aed; --pink:#ec4899; --lime:#a3e635; --night:#090510; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--night); font-family:Nunito,system-ui,sans-serif; line-height:1.6; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 20% 15%,#4c1d9560,transparent 30%),radial-gradient(circle at 85% 40%,#9d174d44,transparent 28%),linear-gradient(#11091d,#08040e 70%); }
body::after { content:""; position:fixed; inset:0; z-index:-1; opacity:.16; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,#000,transparent 80%); }
a { color:inherit; }
.wrap { width:min(1120px,calc(100% - 40px)); margin:auto; }
.nav { height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-family:Creepster,cursive; font-size:30px; letter-spacing:1px; }
.brand img { width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 0 12px #a855f7aa); }
.links { display:flex; align-items:center; gap:28px; font-weight:800; }
.links a { text-decoration:none; color:var(--muted); }
.links a:hover,.links a[aria-current="page"] { color:#fff; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border:1px solid #ffffff30; border-radius:999px; text-decoration:none; font-weight:900; background:linear-gradient(135deg,var(--purple),var(--pink)); box-shadow:0 12px 35px #7c3aed55; transition:.2s transform,.2s box-shadow; }
.button:hover { transform:translateY(-2px); box-shadow:0 16px 45px #7c3aed77; }
.button.secondary { background:#ffffff0b; box-shadow:none; }
.hero { min-height:calc(100vh - 78px); display:grid; grid-template-columns:1fr 1.08fr; gap:58px; align-items:center; padding:60px 0 100px; }
.eyebrow { color:var(--lime); font-weight:900; text-transform:uppercase; letter-spacing:2px; font-size:13px; }
h1,h2 { font-family:Creepster,cursive; font-weight:400; line-height:.95; margin:14px 0 22px; letter-spacing:1px; }
h1 { font-size:clamp(64px,9vw,120px); text-shadow:4px 5px 0 #4c1d95,0 0 45px #a855f766; }
h2 { font-size:clamp(45px,6vw,72px); }
.lead { color:var(--muted); font-size:clamp(18px,2vw,21px); max-width:570px; }
.actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.hero-art { position:relative; }
.hero-art::before { content:""; position:absolute; width:90%; aspect-ratio:1; border-radius:50%; left:5%; top:4%; background:#7c3aed55; filter:blur(60px); }
.hero-art img { width:100%; position:relative; border-radius:28px; box-shadow:0 35px 100px #000b; transform:rotate(2deg); border:1px solid #ffffff1c; }
.floater { position:absolute!important; width:90px!important; border:0!important; box-shadow:none!important; filter:drop-shadow(0 12px 12px #000)!important; animation:float 3s ease-in-out infinite; }
.floater.ghost { left:-35px; bottom:-20px; transform:rotate(-10deg); }
.floater.pumpkin { right:-20px; top:-35px; transform:rotate(12deg); animation-delay:-1.5s; }
@keyframes float { 50% { translate:0 -14px; } }
.section { padding:110px 0; }
.center { text-align:center; max-width:720px; margin-left:auto; margin-right:auto; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.card { padding:32px; border-radius:24px; border:1px solid #ffffff17; background:linear-gradient(145deg,#ffffff0e,#ffffff05); box-shadow:inset 0 1px #ffffff13; }
.card .icon { font-size:36px; }
.card h3 { font-size:22px; margin:14px 0 8px; }
.card p { color:var(--muted); margin:0; }
.feature { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; }
.feature img { width:100%; border-radius:25px; box-shadow:0 30px 80px #000a; }
footer { border-top:1px solid #ffffff16; padding:35px 0; color:#a99db9; }
.footer-row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-row a { color:#ddd2ea; text-decoration:none; }
.page-hero { text-align:center; padding:90px 0 60px; }
.page-hero h1 { font-size:clamp(58px,8vw,92px); }
.support-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:28px; padding-bottom:110px; }
.panel { border:1px solid #ffffff18; border-radius:26px; padding:34px; background:#ffffff09; }
.panel h2 { font-family:Nunito,sans-serif; font-size:25px; font-weight:900; line-height:1.2; margin:0 0 12px; }
.panel p,.panel li { color:var(--muted); }
.steps { padding-left:20px; }
.steps li { margin:12px 0; }
details { border-top:1px solid #ffffff16; padding:18px 0; }
details:first-of-type { margin-top:20px; }
summary { cursor:pointer; font-weight:900; color:#fff; }
.contact { margin-top:24px; padding:22px; border-radius:18px; background:linear-gradient(135deg,#7c3aed33,#ec489922); }
.contact a { color:var(--lime); font-weight:900; }
@media (max-width:800px) { .hero,.feature,.support-grid { grid-template-columns:1fr; } .hero { padding-top:35px; } .hero-copy { text-align:center; } .lead { margin-inline:auto; } .actions { justify-content:center; } .hero-art { width:min(580px,95%); margin:auto; } .cards { grid-template-columns:1fr; } .links a:not(.button) { display:none; } .feature-copy { order:-1; } }
@media (max-width:480px) { .wrap { width:min(100% - 24px,1120px); } .nav { height:68px; } .brand { font-size:25px; } .brand img { width:38px;height:38px; } .links .button { padding:0 15px; min-height:42px; } h1 { font-size:62px; } .section { padding:75px 0; } }