*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#120424;--pink:#ff2bd6;--yellow:#ffe14d;--cyan:#22e6ff;--text:#fff7ff}
html{scroll-behavior:smooth;overflow-x:clip}
main{overflow-x:clip}
body{font-family:Poppins,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.top{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;background:rgba(18,4,36,.85);backdrop-filter:blur(8px);border-bottom:2px solid var(--pink)}
.logo{font-family:Bungee,sans-serif;font-size:1.5rem;color:var(--yellow);text-decoration:none}
.logo span{color:var(--pink)}
.top nav{display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.top nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:.9rem}
.top nav a:hover{color:var(--cyan)}
.hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:3rem 1.2rem;background:radial-gradient(circle at 20% 20%,#ff2bd655,transparent 40%),radial-gradient(circle at 80% 70%,#22e6ff44,transparent 40%),radial-gradient(circle at 50% 100%,#ffe14d33,transparent 50%)}
.stars{font-size:1.6rem;letter-spacing:.6rem;color:var(--yellow);animation:twinkle 2s infinite alternate}
.kicker{margin-top:1rem;text-transform:uppercase;letter-spacing:.2em;color:var(--cyan);font-weight:600;font-size:.85rem}
h1{font-family:Bungee,sans-serif;font-size:clamp(2rem,8vw,5rem);line-height:1.1;margin:.8rem 0}
.glow{font-size:1.5em;background:linear-gradient(90deg,var(--yellow),var(--pink),var(--cyan),var(--yellow));background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite;filter:drop-shadow(0 0 18px #ff2bd699)}
.lead{max-width:36rem;font-size:1.15rem}
.lead strong{color:var(--yellow)}
.btn{display:inline-block;margin-top:1.6rem;padding:.9rem 1.6rem;border-radius:999px;background:linear-gradient(90deg,var(--pink),#ff7a00);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 6px 24px #ff2bd677;transition:transform .2s}
.btn:hover{transform:scale(1.07) rotate(-2deg)}
.btn.ghost{background:transparent;border:2px solid var(--cyan);box-shadow:none}
.ticker{overflow:hidden;background:var(--yellow);color:#120424;font-family:Bungee,sans-serif;padding:.6rem 0;transform:rotate(-1.5deg);margin:1rem -1rem}
.ticker div{white-space:nowrap;display:inline-block;animation:scroll 18s linear infinite}
.section{padding:4rem 1.2rem;max-width:1100px;margin:0 auto}
.section.alt{max-width:none;background:linear-gradient(135deg,#2a0750,#120424)}
.section.alt>*{max-width:1100px;margin-left:auto;margin-right:auto}
h2{font-family:Bungee,sans-serif;font-size:clamp(1.6rem,5vw,2.6rem);color:var(--yellow);text-align:center;margin-bottom:2rem;text-shadow:3px 3px 0 var(--pink)}
.about{display:grid;gap:2rem;align-items:center}
.about p+p{margin-top:1rem}
.photo{aspect-ratio:1;max-width:320px;width:100%;margin:0 auto;border-radius:50%;border:6px solid var(--pink);box-shadow:0 0 0 6px var(--yellow),0 0 50px var(--cyan);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:4rem;background:#2a0750}
.photo small{font-size:.8rem;opacity:.8}
.cards{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:#ffffff10;border:2px solid #ffffff22;border-radius:1.2rem;padding:1.5rem;text-align:center;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-8px) rotate(1deg);border-color:var(--pink)}
.card span{font-size:2.6rem}
.card h3{color:var(--cyan);margin:.4rem 0}
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.tile{aspect-ratio:1;border-radius:1rem;display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff}
.t1{background:linear-gradient(135deg,var(--pink),#7a00ff)}
.t2{background:linear-gradient(135deg,#0077ff,var(--cyan));color:#120424}
.t3{background:linear-gradient(135deg,var(--yellow),#ff7a00);color:#120424}
.t4{background:linear-gradient(135deg,#7a00ff,var(--pink))}
.quote blockquote{font-size:clamp(1.3rem,4vw,2rem);text-align:center;font-weight:800;font-style:italic}
.quote cite{display:block;margin-top:.8rem;font-size:1rem;color:var(--cyan)}
#kontakt{text-align:center}
.contact .btn{margin:1.2rem .4rem 0}
footer{text-align:center;padding:2rem 1rem;border-top:2px solid var(--pink);font-size:.9rem}
@media(min-width:760px){.about{grid-template-columns:1fr 1.4fr}.gallery{grid-template-columns:repeat(4,1fr)}}
@keyframes shine{to{background-position:300% 0}}
@keyframes twinkle{to{opacity:.4;transform:scale(1.05)}}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}