:root { color-scheme: dark; --bg:#080b14; --surface:#111625; --text:#f5f6fb; --muted:#a8afc2; --line:rgba(255,255,255,.11); --blue:#7bc7ff; --purple:#a98cff; --green:#77f1c5; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 70% 0,rgba(84,102,255,.16),transparent 32rem),var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; line-height:1.6; }
a { color:inherit; }
img { display:block; max-width:100%; }
.skip-link { position:fixed; top:-5rem; left:1rem; z-index:20; padding:.7rem 1rem; background:white; color:#080b14; border-radius:.7rem; }
.skip-link:focus { top:1rem; }
header,main,footer { width:min(calc(100% - 3rem),var(--max)); margin-inline:auto; }
header { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:1.15rem 0; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter:blur(20px); }
.wordmark { font-weight:800; letter-spacing:-.025em; text-decoration:none; }
nav,footer div { display:flex; gap:1.3rem; }
nav a,footer a { color:var(--muted); font-size:.92rem; text-decoration:none; }
nav a:hover,footer a:hover { color:var(--text); }
.hero { position:relative; min-height:690px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:5rem 0 7rem; }
.eyebrow,.tag { color:var(--blue); font-size:.75rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
h1,h2,h3 { margin-top:0; line-height:1.05; letter-spacing:-.045em; }
h1 { max-width:1000px; margin:.5rem 0 1.6rem; font-size:clamp(3.8rem,10vw,8.3rem); }
h1 span { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.52); }
h2 { font-size:clamp(2.3rem,5vw,4.4rem); }
h3 { margin:0; font-size:clamp(1.7rem,3vw,2.5rem); }
.intro { max-width:690px; color:var(--muted); font-size:clamp(1.12rem,2vw,1.4rem); }
.primary-link { align-self:flex-start; margin-top:1.2rem; color:var(--blue); font-weight:750; text-decoration:none; }
.constellation { position:absolute; right:4%; top:22%; width:300px; height:300px; opacity:.7; pointer-events:none; }
.constellation:before,.constellation:after { content:""; position:absolute; inset:20%; border:1px solid rgba(123,199,255,.2); transform:rotate(35deg); }
.constellation:after { inset:35% 5% 5% 35%; border-color:rgba(169,140,255,.2); }
.constellation i { position:absolute; width:5px; height:5px; border-radius:50%; background:white; box-shadow:0 0 20px 5px var(--blue); }
.constellation i:nth-child(1){left:15%;top:20%}.constellation i:nth-child(2){right:8%;top:12%}.constellation i:nth-child(3){left:48%;top:48%}.constellation i:nth-child(4){left:20%;bottom:8%}.constellation i:nth-child(5){right:16%;bottom:18%}
.apps-section { padding:7rem 0; border-top:1px solid var(--line); }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:end; margin-bottom:3rem; }
.section-heading h2 { margin-bottom:0; }
.section-heading > p { color:var(--muted); font-size:1.1rem; }
.app-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:2rem; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); }
.buddy-card { min-height:590px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; margin-bottom:1.2rem; padding:3rem 3rem 0; background:radial-gradient(circle at 80% 30%,rgba(112,119,255,.25),transparent 40%),linear-gradient(145deg,#16182b,#0d1020); }
.app-copy { position:relative; z-index:2; }
.app-title { display:flex; align-items:center; gap:1.2rem; margin-bottom:1.8rem; }
.app-title img { border-radius:22%; box-shadow:0 16px 35px rgba(0,0,0,.38); }
.tag { margin:0 0 .15rem; }
.app-lede { max-width:560px; color:var(--muted); font-size:1.17rem; }
.app-copy ul { padding-left:1.2rem; color:var(--muted); }
.card-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.detail-link,.store-link { padding:.72rem 1rem; border-radius:.8rem; font-size:.9rem; font-weight:750; text-decoration:none; }
.detail-link { background:var(--text); color:#090b12; }
.store-link { border:1px solid var(--line); color:var(--text); }
.app-shot { align-self:end; justify-self:center; width:min(82%,330px); }
.app-shot img { width:100%; height:auto; aspect-ratio:1320 / 2868; object-fit:contain; }
.app-shot img,.game-shot img { border:6px solid #151a25; border-radius:2.6rem 2.6rem 0 0; box-shadow:0 35px 70px rgba(0,0,0,.55); }
.game-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.game-card { min-height:650px; display:grid; grid-template-rows:auto 330px; padding:2rem 2rem 0; }
.verwenders-card { background:radial-gradient(circle at 70% 25%,rgba(147,99,255,.22),transparent 42%),#0b0e18; }
.asteroiden-card { background:radial-gradient(circle at 70% 25%,rgba(0,190,225,.2),transparent 42%),#08131d; }
.game-card .app-copy { display:flex; flex-direction:column; }
.game-card .card-actions { margin-top:auto; }
.game-shot { align-self:end; justify-self:center; width:225px; height:330px; overflow:hidden; }
.game-shot img { width:100%; }
.about { margin:1rem 0 7rem; padding:clamp(2rem,6vw,5rem); border-radius:2rem; background:linear-gradient(120deg,rgba(123,199,255,.12),rgba(169,140,255,.1)); }
.about p:last-child { max-width:760px; color:var(--muted); font-size:1.16rem; }
.legal { max-width:850px; padding:6rem 0; border-top:1px solid var(--line); }
.legal h3 { margin-top:2rem; }
.legal p,address { color:var(--muted); font-style:normal; }
.legal a { color:var(--blue); }
footer { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:2rem; padding:2.5rem 0 3.5rem; border-top:1px solid var(--line); color:var(--muted); }
footer p { margin:0; }
@media(max-width:800px){header,main,footer{width:min(calc(100% - 2rem),var(--max))}nav{display:none}.hero{min-height:620px}.constellation{opacity:.35}.section-heading,.buddy-card,.game-grid{grid-template-columns:1fr}.buddy-card{padding:2rem 2rem 0}.app-shot{width:min(74%,300px)}.game-card{min-height:600px}.game-shot{height:300px}.section-heading{gap:.5rem}footer{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}