:root{--bg-start:#3c1e78;--bg-end:#1d0f42;--text:#e8e6ff;--link:#80d0ff}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
background:radial-gradient(circle at 30% 20%,var(--bg-start) 0%,var(--bg-end) 100%);background-attachment:fixed}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;gap:16px;padding:16px 24px}nav a{margin-right:16px;color:var(--link);text-decoration:none}
body.home .header{background:transparent}
body.home main.container{max-width:none;padding:0;margin:0}
.hero-card{min-height:100vh;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:48px 24px}
.hero-card h1{font-size:clamp(2rem,4vw + 1rem,4rem);margin:12px 0 6px}
.hero-card .sub{max-width:60ch;opacity:.95}
.icon-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:26px;padding:0 24px;width:100%;max-width:1100px}
@media (max-width:900px){.icon-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.icon-tile{position:relative;border-radius:16px;aspect-ratio:1/1;display:grid;place-items:center;background:transparent;overflow:visible;transition:transform .2s ease}
.icon-tile img{width:86%;height:auto;display:block}
.icon-tile::before{content:'';position:absolute;inset:-12%;background:radial-gradient(closest-side,color-mix(in oklab,var(--aura),transparent 20%) 0%,transparent 70%);
opacity:0;transform:scale(.85);filter:blur(10px);transition:opacity .25s ease,transform .25s ease,filter .25s ease;pointer-events:none}
.icon-tile:hover::before,.icon-tile:focus-visible::before{opacity:.9;transform:scale(1);filter:blur(16px)}
.icon-tile:active::before{opacity:1;filter:blur(18px)}
.tile-gold{--aura:#ffcf54}.tile-cyan{--aura:#4ef3ff}.tile-magenta{--aura:#ff58c8}.tile-pink{--aura:#ff7ad6}