/* SOMNIUS: cyan portal light, violet dreams. */
:root { --bg:#0b0a14; --bg-2:#14122a; --bg-3:#1d1a38; --bone:#f2ede4; --lilac:#d6cbe8; --muted:#a89fc0; --cyan:#4fd8e8; --line:#ffffff24; --wrap:1280px; --radius:5px; --accent:var(--cyan); }
html { scroll-padding-top:95px; }
body { background:var(--bg); }
::selection { background:var(--accent); color:var(--bg); }
:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }
.wrap { width:min(var(--wrap),100% - 5rem); }
.btn { border-radius:5px; border:2px solid #11101b; box-shadow:4px 5px 0 #080810; letter-spacing:.025em; }
.btn--steam { background:var(--accent); color:#191621; }
.btn--steam:hover { background:#8aebf4; box-shadow:6px 7px 0 #080810; transform:translate(-2px,-2px) rotate(-1deg); }
.btn--ghost { background:#151421c9; border-color:#f2ede470; box-shadow:none; }
.btn--lg { height:62px; font-size:1.1rem; padding-inline:1.5rem; }
.nav { background:#0b0a14f0; border-bottom:1px solid #ffffff18; }
.nav__in { min-height:76px; }
.nav__brand { flex-shrink:0; }
.nav__brand img { height:48px; width:auto; }
.nav__links { gap:1.65rem; font-size:.875rem; }
.nav__links a:not(.btn) { color:var(--bone); }
.nav__links .btn { transform:rotate(-2deg); }
.hero { min-height:0; display:block; background:#0b0a14; }
.hero__bg,.hero__bg img { z-index:-2; }
.hero__bg {
 left:32%; width:68%;
 /* Fade the actual image boundary into the hero, independent of viewport width. */
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
 mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
}
.hero__bg img { object-fit:cover; object-position:60% 42%; }
.hero__veil { background:linear-gradient(90deg,#0b0a14 0%,#0b0a14 30%,#0b0a14bb 40%,#0b0a1400 59%),linear-gradient(0deg,#0b0a14 0%,#0b0a1400 16%); }
.hero__in { padding:54px 0 68px; min-height:710px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; text-align:left; gap:0; }
.hero__logo { width:340px; max-width:39%; margin:0 0 20px; animation:none; filter:none; }
.hero__kicker { margin:0 0 24px; font-size:.8rem; letter-spacing:.12em; color:var(--cyan); text-shadow:none; }
.hero__title { max-width:520px; width:43%; font-size:clamp(2.6rem,3.4vw,3.5rem); line-height:1.04; text-shadow:2px 3px 0 #0b0913; }
.hero__title span { color:var(--accent); }
.hero__lead { margin:20px 0 24px; max-width:480px; width:41%; font-size:.95rem; line-height:1.7; color:var(--lilac); }
.hero__cta { justify-content:flex-start; gap:.8rem; max-width:48%; }
.hero__cta .btn { height:56px; padding-inline:1.1rem; font-size:1rem; }
.hero__meta { justify-content:flex-start; gap:.4rem 1rem; margin-top:20px; max-width:480px; width:43%; font-size:.8rem; }
.hook { position:relative; background:var(--bg-3); color:var(--bone); padding:2.8rem 0; border:0; }
.hook::before { content:""; position:absolute; top:-12px; height:14px; left:0; width:100%; background:var(--bg-3); clip-path:polygon(0 60%,13% 30%,27% 80%,49% 0,63% 60%,81% 15%,100% 55%,100% 100%,0 100%); }
.hook__row { gap:2.3rem; }
.hook__row li { grid-template-columns:46px 1fr; gap:0 1rem; }
.hook__n { width:auto; height:auto; padding:0; background:none; color:var(--accent); box-shadow:none; font-size:3.8rem; line-height:1; transform:rotate(-7deg); }
.hook__row h3 { font-size:1.5rem; margin:0 0 .45rem; }
.hook__row p { color:var(--lilac); line-height:1.6; font-size:.9rem; }
section:not(.hero):not(.hook) { padding:100px 0; }
.eyebrow { font-family:var(--body); font-weight:700; font-size:.8rem; letter-spacing:.17em; color:var(--cyan); }
h2 { text-shadow:none; font-size:clamp(2.4rem,4.5vw,4.2rem); }
.trailer-sec__grid { grid-template-columns:1.45fr 1fr; gap:4rem; }
.trailer { border:5px solid var(--bone); border-radius:4px; transform:rotate(-2deg); box-shadow:12px 14px 0 #0005; }
.trailer__soon { width:100%; left:0; bottom:0; transform:none; border:0; border-radius:0; padding:1rem; background:#0b0a14ed; white-space:normal; text-align:center; color:var(--bone); font-size:.85rem; }
.trailer-sec__text h2 { max-width:10ch; color:var(--accent); }
.trailer-sec__text p { font-size:1rem; }
.features { background:#14122a; position:relative; }
.features > .wrap > .eyebrow { text-align:left; }
.features > .wrap > h2 { text-align:left; max-width:17ch; margin-bottom:60px; }
.feat { grid-template-columns:1.3fr 1fr; gap:4rem; padding:55px 0; }
.feat + .feat { border-top:1px solid #ffffff14; }
.feat--flip { grid-template-columns:1fr 1.3fr; }
.feat__img img { width:100%; border:4px solid #f2ede4; border-radius:3px; box-shadow:9px 10px 0 #08081080; transform:rotate(-2deg); }
.feat--flip .feat__img img { transform:rotate(2deg); }
.feat__tag { color:var(--bg); background:var(--accent); padding:8px 12px 5px; font-size:.85rem; letter-spacing:.1em; transform:rotate(-3deg); margin-bottom:1.2rem; }
.feat__text h3 { font-size:clamp(2rem,3.3vw,3.1rem); text-shadow:none; }
.feat__text p { font-size:1rem; line-height:1.75; }
.more { gap:1.5rem 2.5rem; margin-top:70px; padding-top:50px; }
.more li { position:relative; border:0; border-radius:0; background:transparent; padding:0 0 1.6rem; }
.more li:hover { transform:translateY(-5px); }
.more--img img { width:100%; height:300px; max-width:340px; margin-bottom:.8rem; filter:drop-shadow(0 18px 18px #0005); }
.more h3 { color:var(--accent); font-size:1.65rem; }
.more p { font-size:.95rem; }
.forwho { min-height:680px; }
.forwho::before { background:linear-gradient(90deg,#0b0a1400 20%,#0b0a14b8 53%,#0b0a14f2); }
.forwho__list li { background:transparent; border:0; border-bottom:1px solid #ffffff30; border-radius:0; padding:1rem 0 1rem 2rem; }
.forwho__list li::before { left:0; color:var(--accent); }
.dreamer { background:linear-gradient(120deg,#1d1a38,#252044 65%,#14122a); color:var(--bone); }
.dreamer__in { grid-template-columns:.8fr 1.2fr; gap:4rem; }
.dreamer__art { width:min(390px,80vw); filter:drop-shadow(8px 18px 0 #20112820); animation:none; transform:rotate(-7deg); }
.dreamer .eyebrow,.dreamer__text p a { color:var(--accent); }
.dreamer__text p { color:var(--lilac); }
.dreamer__text h2 { font-size:clamp(2.4rem,4.5vw,4rem); }
.dreamer .btn--steam { background:var(--accent); color:#06212a; box-shadow:4px 5px 0 #080810; }
.dreamer .btn--ghost { background:transparent; color:var(--bone); border-color:#d6cbe870; }
.faq__in { max-width:960px; }
.faq summary { padding-block:1.6rem; font-size:1.1rem; }
.faq summary::after { color:var(--accent); }
.studio { background:#14122a; }
.prev { background:#0b0a14; border-radius:4px; border-color:#ffffff24; padding:1.2rem; }
.prev img { border-radius:0; }
.social a { border-radius:4px; background:transparent; }
.final { background-position:center 20%; }
.final::before { background:linear-gradient(180deg,#0b0a1400 25%,#0b0a1477 50%,#0b0a14 100%); }
.final__in img { filter:none; }
.footer { background:#0b0a14; }
@media(min-width:1700px) { .hero__bg { left:37%; width:63%; } .hero__in { min-height:760px; padding-block:65px; } }
@media(max-width:1100px) { .wrap { width:calc(100% - 3rem); } .nav__links { gap:1rem; } .hero__in { column-gap:2rem; } .hero__cta .btn { font-size:.95rem; padding-inline:1rem; } .trailer-sec__grid,.feat { gap:2.5rem; } }
@media(max-width:820px) {
 .wrap { width:calc(100% - 2.5rem); }
 .nav__in { min-height:65px; }
 .nav__links { background:#0b0a14fa; }
 .nav__links .btn { transform:none; border-radius:4px; }
 .nav__toggle:focus-visible + .nav__burger { outline:3px solid var(--accent); outline-offset:3px; }
 .hero { min-height:0; }
 .hero__bg {
  left:0; top:115px; width:100%; height:400px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 75%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 75%,transparent 100%);
 }
 .hero__bg img { object-position:68% 42%; height:100%; }
 .hero__veil { background:linear-gradient(180deg,#0b0a14 70px,#0b0a1400 180px,#0b0a1400 380px,#0b0a14 520px); }
 .hero__in { display:flex; min-height:0; align-items:center; text-align:center; padding:30px 0 50px; }
 .hero__logo { width:280px; max-width:80%; margin:0 0 14px; }
 .hero__kicker { margin:0 0 365px; font-size:.8rem; letter-spacing:.08em; }
 .hero__title { width:100%; font-size:clamp(2.4rem,6vw,3.6rem); max-width:20ch; }
 .hero__lead { width:100%; margin:1.4rem 0; max-width:55ch; }
 .hero__cta,.hero__meta { width:100%; max-width:100%; justify-content:center; }
 .hero__meta { font-size:.85rem; }
 .hook__row { grid-template-columns:1fr; gap:1.7rem; }
 .hook__row li { grid-template-columns:40px 1fr; }
 section:not(.hero):not(.hook) { padding:65px 0; }
 .trailer-sec__grid,.feat,.feat--flip,.dreamer__in { grid-template-columns:1fr; gap:2.5rem; }
 .trailer-sec__text h2 { max-width:14ch; }
 .features > .wrap > h2 { margin-bottom:20px; }
 .feat { padding-block:35px; }
 .feat__img img,.feat--flip .feat__img img { transform:none; }
 .more { gap:1.5rem; }
 .more--img img { height:240px; }
 .forwho { min-height:0; }
 .forwho::before { background:#0b0a14c9; }
 .dreamer__art { width:250px; }
 .dreamer__in { gap:2rem; }
}
@media(max-width:560px) {
 .hero__kicker { margin-bottom:315px; font-size:.75rem; }
 .hero__bg { top:140px; height:310px; }
 .hero__veil { background:linear-gradient(180deg,#0b0a14 115px,#0b0a1400 185px,#0b0a1400 335px,#0b0a14 455px); }
 .hero__cta { width:100%; }
 .hero__cta .btn { font-size:1.1rem; }
 .hero__meta { gap:.5rem; }
 .more { grid-template-columns:1fr; }
 .more li { display:grid; grid-template-columns:110px 1fr; column-gap:1rem; align-items:start; }
 .more--img img { width:110px; height:140px; grid-column:1; grid-row:1/3; }
 .more h3 { font-size:1.35rem; grid-column:2; }
 .more p { grid-column:2; font-size:.9rem; }
 .trailer { transform:none; border-width:3px; box-shadow:5px 6px 0 #0005; }
 .trailer__soon { font-size:.8rem; padding:.7rem; }
 .footer nav { flex-wrap:wrap; }
}