:root{--bg:#05080c;--panel:#0a1118;--line:rgba(57,205,255,.16);--text:#eef6fa;--muted:#8fa5b1;--cyan:#29d8ff;--red:#ff3150;--acc:var(--cyan)}
body.b-inigo{--acc:var(--red)}
body.b-cthulhu{--acc:#c58bff}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(900px 500px at 85% -10%,rgba(255,49,80,.12),transparent 60%),radial-gradient(800px 500px at -10% 30%,rgba(41,216,255,.10),transparent 60%),var(--bg);color:var(--text);font:16px/1.7 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{position:relative;z-index:1;width:min(1100px,100% - 32px);margin:0 auto}
h1,h2{font-family:"Space Grotesk",Inter,sans-serif;line-height:1.08;margin:0}
header{position:sticky;top:0;z-index:20;background:rgba(5,8,12,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;height:64px}
.back{text-decoration:none;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap}
.back:hover{color:var(--text)}
.logo{font:700 16px "Space Grotesk";letter-spacing:.12em;text-decoration:none;white-space:nowrap;margin:0 auto}
.logo b{color:var(--red);text-shadow:0 0 18px rgba(255,49,80,.6)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.lang button{all:unset;cursor:pointer;display:inline-flex;align-items:center;font:600 12px Inter;letter-spacing:.08em;padding:6px 10px;border-radius:999px;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--cyan);color:#041018}
.flag{width:18px;height:12px;border-radius:2px;display:inline-block;margin-right:6px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
@media (max-width:560px){.logo{display:none}.lang{margin-left:auto}.lang button{padding:6px 7px}.flag{margin-right:4px}}

.hero{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:56px;align-items:start;padding:64px 0 48px}
.portrait{margin:0;position:sticky;top:96px;border-radius:18px;overflow:hidden;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:0 0 28px color-mix(in srgb,var(--acc) 35%,transparent),0 30px 80px rgba(0,0,0,.6);background:#000}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.eyebrow{font:600 12px/1.3 Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
h1{font-size:clamp(38px,5.5vw,64px);letter-spacing:-.02em;margin:14px 0 8px}
.role{font:600 18px "Space Grotesk";color:#cfe0e8;margin:0 0 28px}
blockquote{margin:0 0 30px;padding:18px 22px;border-left:3px solid var(--acc);background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 10%,transparent),transparent);border-radius:0 12px 12px 0}
blockquote p{margin:0;font:500 clamp(18px,2.1vw,22px)/1.45 "Space Grotesk";color:#fff}
blockquote cite{display:block;margin-top:10px;font:500 13px Inter;font-style:normal;color:var(--muted)}
.body p{color:#c5d6de;margin:0 0 16px;font-size:17px}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.chip{text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;text-decoration:none;padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text)}
.chip:hover{border-color:var(--acc)}
.btns{margin-top:26px}
.btn{display:inline-flex;padding:13px 20px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none}
.btn.primary{background:linear-gradient(180deg,#ff4a64,#d81f3e);color:#fff;box-shadow:0 0 18px rgba(255,49,80,.4);animation:glow 2.8s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 30px rgba(255,49,80,.75),0 0 60px rgba(255,49,80,.25)}}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:28px;padding:32px 0}.portrait{position:relative;top:0;max-width:340px}}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:8px 0 40px}
.pn a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:12px;text-decoration:none;font:700 17px "Space Grotesk";background:var(--panel)}
.pn a:hover{border-color:var(--acc)}
.pn a.r{text-align:right}
.pn small{display:block;font:500 12px Inter;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.more{border-top:1px solid var(--line);padding:44px 0 64px}
.more h2{font-size:clamp(22px,3vw,30px);margin-bottom:22px}
.more h2 em{font-style:normal;color:var(--acc)}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.mini{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);text-decoration:none;background:#000}
.mini img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;transition:transform .4s}
.mini:hover img{transform:scale(1.05)}
.mini span{position:absolute;inset:auto 0 0 0;padding:28px 10px 10px;background:linear-gradient(transparent,rgba(5,8,12,.95));font:700 14px "Space Grotesk"}
footer{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}footer a:hover{color:var(--cyan)}

.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.34;mix-blend-mode:screen}
.fx i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:8vh;background:#ff3150;animation:d1 26s ease-in-out infinite alternate}
.fx i:nth-child(2){width:40vw;height:40vw;right:-10vw;top:-12vh;background:#29d8ff;animation:d2 32s ease-in-out infinite alternate}
.fx i:nth-child(3){width:30vw;height:30vw;left:40vw;bottom:-14vh;background:#7a3cff;opacity:.2;animation:d3 38s ease-in-out infinite alternate}
.fx b{position:absolute;left:0;right:0;height:140px;top:-140px;background:linear-gradient(transparent,rgba(41,216,255,.07),transparent);animation:scan 9s linear infinite}
.fx s{position:absolute;inset:-56px;background-image:linear-gradient(rgba(41,216,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,49,80,.04) 1px,transparent 1px);background-size:56px 56px;animation:grid 18s linear infinite;mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 75%)}
@keyframes d1{to{transform:translate(18vw,22vh) scale(1.15)}}
@keyframes d2{to{transform:translate(-20vw,30vh) scale(.9)}}
@keyframes d3{to{transform:translate(-25vw,-35vh) scale(1.2)}}
@keyframes scan{to{transform:translateY(calc(100vh + 280px))}}
@keyframes grid{to{transform:translate(56px,56px)}}
main,footer{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}