.step-page { background-color: #071a4a; }
.step-page .step-topbar { z-index: 5; }
.step-main { width: min(1320px, calc(100% - 48px)); margin: 0 auto; color: #fff; }
.step-main * { box-sizing: border-box; }
.step-hero { position: relative; min-height: 600px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(330px,.9fr); gap: 32px; align-items: center; padding: 64px clamp(26px,5vw,76px); margin: 28px 0 68px; border: 1px solid rgba(191,159,255,.28); border-radius: 30px; overflow: hidden; background: radial-gradient(circle at 79% 40%, rgba(151,77,255,.24), transparent 37%), linear-gradient(125deg,#101b49,#0c1231 63%,#191034); box-shadow: 0 28px 80px rgba(0,10,44,.32); }
.step-hero::after { content: ""; position:absolute; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(90deg,transparent,#000); }
.step-hero-copy { position:relative; z-index:2; }
.step-eyebrow { margin:0 0 18px; color:#cdb4ff; font-size:.78rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.step-hero h1 { margin:0; font-family:"ZumoComputer","Courier New",monospace; font-size:clamp(4rem,7.5vw,7.5rem); line-height:1; letter-spacing:-.07em; text-shadow:0 8px 30px rgba(0,0,0,.3); }
.step-hero h1 span { color:#b46cff; }
.step-tagline { margin:18px 0 12px; font-size:clamp(1.5rem,2.7vw,2.5rem); font-weight:850; letter-spacing:-.04em; }
.step-lead { max-width:610px; margin:0; color:#d5dcf7; font-size:1.13rem; line-height:1.7; }
.step-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:34px; }
.step-button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 25px; border-radius:14px; color:#1b1633; background:linear-gradient(135deg,#ffd984,#ffad44); box-shadow:0 11px 28px rgba(245,162,59,.22); font-weight:900; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.step-button:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(245,162,59,.3); }
.step-text-link { color:#e6d5ff; font-weight:800; text-decoration:none; }
.step-text-link:hover { color:#fff; text-decoration:underline; }
.step-hero-art { position:relative; z-index:1; width:min(100%,470px); aspect-ratio:1; margin:auto; display:grid; place-items:center; }
.step-orbit { position:absolute; border:1px solid rgba(184,144,255,.42); border-radius:50%; transform:rotate(-22deg); }
.orbit-one { width:85%; height:63%; box-shadow:0 0 35px rgba(132,78,237,.14); }
.orbit-two { width:100%; height:81%; transform:rotate(28deg); border-color:rgba(255,193,89,.2); }
.step-alien-image { position:absolute; z-index:1; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 24px 30px rgba(0,0,0,.35)) drop-shadow(0 0 22px rgba(111,204,255,.18)); }
html[lang="de"] .step-alien-en,html:not([lang="de"]) .step-alien-de { display:none; }
.step-orbit-label { position:absolute; padding:9px 14px; border:1px solid rgba(255,255,255,.2); border-radius:12px; background:rgba(24,22,57,.87); box-shadow:0 12px 24px rgba(0,0,0,.18); font-weight:900; color:#ffd47d; letter-spacing:.08em; }
.orbit-label-one { top:17%; right:2%; transform:rotate(6deg); }.orbit-label-two { bottom:14%; left:0; transform:rotate(-7deg); }
.step-art-base { position:absolute; bottom:1%; width:75%; height:7%; border-radius:50%; background:#a451ee; filter:blur(28px); opacity:.4; }
.step-section { margin:0 0 78px; }
.step-section-heading { max-width:700px; margin-bottom:28px; }.step-section h2 { margin:0 0 14px; font-size:clamp(2rem,4vw,3.3rem); line-height:1.08; letter-spacing:-.04em; }.step-section-heading>p:last-child,.step-download>div>p:not(.step-eyebrow),.step-privacy p:not(.step-eyebrow) { color:#d1dcf2; line-height:1.7; font-size:1.03rem; }
.step-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.step-feature { min-height:222px; padding:27px; border:1px solid rgba(183,204,255,.19); border-radius:20px; background:linear-gradient(145deg,rgba(91,102,188,.35),rgba(19,34,92,.61)); box-shadow:inset 0 1px rgba(255,255,255,.09); }
.step-feature-icon { display:inline-grid; place-items:center; width:42px; height:42px; margin-bottom:17px; border-radius:12px; color:#3b2855; background:#d7b9ff; font-weight:1000; }
.step-feature:nth-child(2) .step-feature-icon,.step-feature:nth-child(4) .step-feature-icon { background:#ffd277; }.step-feature h3 { margin:0 0 10px; font-size:1.18rem; }.step-feature p { margin:0; color:#d5def2; line-height:1.55; }.step-feature-future { border-style:dashed; }
.step-download { display:grid; grid-template-columns:1fr minmax(300px,.75fr); gap:36px; align-items:center; padding:clamp(28px,5vw,60px); border:1px solid rgba(255,208,130,.25); border-radius:28px; background:linear-gradient(120deg,#241846,#131d4c); }
.step-download-card { padding:26px; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:rgba(255,255,255,.07); }.step-download-card h3 { margin:13px 0 7px; font-size:1.35rem; }.step-download-card p { margin:0 0 19px; color:#d5def2; line-height:1.55; }.step-download-card .step-changelog { margin:17px 0 0; }.step-status { display:inline-block; padding:7px 10px; border-radius:100px; color:#ffe0a6; background:rgba(251,183,80,.15); font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }.step-status.live { color:#baffdc; background:rgba(80,220,150,.15); }
.step-screenshots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:1050px; margin:0 auto; }
.step-screenshots figure { display:flex; flex-direction:column; align-items:center; min-width:0; margin:0; padding:22px 16px 24px; border:1px solid rgba(183,204,255,.19); border-radius:20px; background:rgba(19,34,92,.38); }
.step-screenshots img { display:block; width:auto; max-width:100%; height:clamp(340px,36vw,470px); object-fit:contain; border:1px solid rgba(197,182,245,.32); border-radius:12px; box-shadow:0 18px 36px rgba(0,0,0,.28); }
.step-screenshots figcaption { display:grid; gap:7px; width:100%; margin-top:20px; text-align:center; }
.step-screenshots figcaption strong { color:#fff; font-size:1.12rem; }
.step-screenshots figcaption span { color:#cbd5ed; line-height:1.5; }
.step-privacy { display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; padding:36px 40px; border:1px solid rgba(194,219,255,.2); border-radius:24px; background:rgba(10,26,73,.5); }.step-privacy p:not(.step-eyebrow) { margin:0 0 15px; }
.step-footer { justify-content:center; gap:24px; flex-wrap:wrap; padding:18px 24px; }
@media(max-width:1000px) { .step-page .step-topbar .home-nav { display:none; }.step-hero { min-height:0; }.step-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) { .step-main { width:min(100% - 28px,600px); }.step-page .step-topbar { height:auto; min-height:75px; flex-wrap:wrap; gap:10px; padding:12px 16px; }.step-page .step-topbar .home-logo { font-size:1.65rem; }.step-page .step-topbar .home-logo-mark { width:36px; height:36px; font-size:1.5rem; }.step-page .step-topbar .topbar-right { margin-left:auto; }.step-page .step-topbar .admin-login-link { display:none; }.step-hero { display:block; padding:36px 24px; margin:16px 0 56px; }.step-hero h1 { font-size:clamp(3.5rem,13vw,5.8rem); }.step-hero-art { width:80%; max-width:300px; margin:28px auto 0; }.step-feature-grid { grid-template-columns:1fr; }.step-feature { min-height:0; }.step-download,.step-privacy { grid-template-columns:1fr; gap:20px; padding:27px; }.step-screenshots { grid-template-columns:1fr; max-width:370px; }.step-screenshots img { height:min(470px,115vw); }.step-section { margin-bottom:55px; } }
@media(max-width:400px) { .step-hero-actions { gap:15px; }.step-hero-art { width:100%; } }