:root { --paper:#f7eef1; --ink:#1b1420; --pink:#c94a90; --line:#d9cdd6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:clip; background:var(--paper); color:var(--ink); font-family:Poppins,sans-serif; }
a { color:var(--pink); text-decoration:none; }
a:hover { color:#a83574; }
.site-header { width:min(1040px,calc(100% - 48px)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:30px 4px 10px; }
.brand { display:block; width:66px; height:66px; overflow:hidden; }
.brand img { display:block; width:66px; height:66px; object-fit:cover; mix-blend-mode:multiply; }
.header-socials { display:flex; align-items:center; gap:26px; }
.header-socials a { display:flex; color:var(--ink); transition:color .18s ease,transform .18s ease; }
.header-socials a:hover { color:var(--pink); transform:scale(1.2); }
.header-socials .accent { color:var(--pink); }
.header-socials svg { width:21px; height:21px; }
.title-panel { position:relative; width:min(1040px,calc(100% - 48px)); margin:0 auto; padding:34px 0 26px; text-align:center; }
.ship { position:absolute; z-index:0; top:6px; right:0; width:178px; opacity:.85; transform:rotate(10deg); animation:ship-arrive 1.45s cubic-bezier(.22,.8,.3,1) .15s both; line-height:0; pointer-events:none; will-change:transform,opacity; }
.ship img { display:block; width:100%; height:auto; }
.ship::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,#713b89 12%,#a34791 55%,#d768a4 88%); -webkit-mask-image:linear-gradient(45deg,transparent 0%,transparent 20%,rgba(0,0,0,.18) 31%,rgba(0,0,0,.58) 42%,#000 54%),url("assets/ship.png"); -webkit-mask-position:center,center; -webkit-mask-size:100% 100%,contain; -webkit-mask-repeat:no-repeat; -webkit-mask-composite:source-in; mask-image:linear-gradient(45deg,transparent 0%,transparent 20%,rgba(0,0,0,.18) 31%,rgba(0,0,0,.58) 42%,#000 54%),url("assets/ship.png"); mask-position:center,center; mask-size:100% 100%,contain; mask-repeat:no-repeat; mask-composite:intersect; mix-blend-mode:multiply; opacity:.3; }
.title-panel h1 { position:relative; z-index:1; margin:0; color:var(--ink); font-family:Michroma,sans-serif; font-size:78px; font-weight:400; letter-spacing:.1em; line-height:1.2; text-transform:uppercase; }
.ornament { display:flex; align-items:center; justify-content:center; gap:12px; margin:26px 0 20px; }
.ornament span { width:210px; height:1px; background:var(--pink); opacity:.55; }
.ornament i { width:6px; height:6px; background:var(--pink); transform:rotate(45deg); }
.series-label,.about h2,.follow h2,.status,.coming-soon h2 { font-family:Michroma,sans-serif; font-weight:400; text-transform:uppercase; }
.series-label { margin:0 0 22px; padding-left:.34em; color:var(--pink); font-size:20px; letter-spacing:.34em; }
.tagline { margin:0; color:#241a2b; font-size:27px; font-weight:400; line-height:1.5; }
.hero-band { position:relative; width:100%; height:470px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:52px 20px 44px; background:url("assets/hero-city.png") center 48% / cover no-repeat; }
.hero-fade { position:absolute; inset:0; background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 10%,rgba(247,238,241,.9) 20%,rgba(247,238,241,.65) 30%,rgba(247,238,241,.38) 40%,rgba(247,238,241,.16) 50%,transparent 62%); pointer-events:none; }
.coming-soon { position:relative; text-align:center; animation:fp-float 6s ease-in-out infinite; }
.coming-soon h2 { margin:0 0 12px; padding-left:.36em; color:var(--pink); font-size:19px; letter-spacing:.36em; }
.ornament.small { gap:10px; margin:0; }
.ornament.small span { width:44px; }
.ornament.small i { width:5px; height:5px; }
.signup { position:relative; width:min(540px,100%); }
.form-row { display:flex; box-shadow:0 22px 44px rgba(20,10,25,.4); }
.signup input { min-width:0; flex:1; height:60px; padding:0 24px; border:0; outline:none; background:#141018; color:#fff; font:16px Poppins,sans-serif; }
.signup input::placeholder { color:#9a93a0; }
.signup input:focus { box-shadow:inset 0 0 0 2px #d97cb0; }
.signup button { height:60px; padding:0 32px; border:0; background:var(--pink); color:#fff; cursor:pointer; font:13px Michroma,sans-serif; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.signup button:hover { background:#b23c7f; }
.signup p { margin:14px 0 0; color:#3d3342; font-size:14px; text-align:center; }
.about,.follow,footer { width:min(900px,calc(100% - 48px)); margin-inline:auto; text-align:center; }
.about { max-width:640px; padding:56px 0 20px; }
.about .ornament { margin-bottom:26px; }
.about h2 { margin:26px 0; padding-left:.34em; color:var(--pink); font-size:18px; letter-spacing:.34em; }
.about > p:not(.status) { margin:0 0 30px; color:#2a2030; font-size:20px; line-height:1.75; text-wrap:pretty; }
.status { margin:0; padding-left:.28em; color:var(--pink); font-size:17px; letter-spacing:.28em; }
hr { max-width:820px; margin:44px auto; border:0; border-top:1px solid var(--line); }
.follow { padding:0 0 8px; }
.follow h2 { margin:0 0 34px; padding-left:.28em; color:var(--pink); font-size:17px; letter-spacing:.28em; }
.social-list { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.social-list a { display:flex; align-items:center; gap:11px; padding:6px 26px; color:#2a2030; font:12px Michroma,sans-serif; letter-spacing:.06em; text-transform:uppercase; transition:color .2s ease,transform .2s ease; }
.social-list a:hover { color:var(--pink); transform:scale(1.08); }
.social-list svg { width:21px; height:21px; flex:0 0 21px; color:var(--pink); }
.social-list span { width:1px; height:26px; background:#d4c7d1; }
footer { padding-bottom:56px; }
.footer-mark { margin-bottom:18px; color:#c48fb2; font:30px Michroma,sans-serif; letter-spacing:.1em; }
footer p { margin:0 0 6px; color:#2a2030; font-size:16px; }
footer > a { font-size:16px; letter-spacing:.02em; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes fp-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes ship-arrive { 0% { opacity:.25; transform:translate(-58px,24px) rotate(7deg) scale(.97); } 72% { opacity:.85; transform:translate(3px,-1px) rotate(10.4deg) scale(1); } 100% { opacity:.85; transform:translate(0,0) rotate(10deg) scale(1); } }
@media (max-width:900px) {
  .ship { display:none; }
  .site-header { width:calc(100% - 32px); padding-top:20px; }
  .brand,.brand img { width:52px; height:52px; }
  .header-socials { gap:16px; }
  .header-socials svg { width:23px; height:23px; }
  .title-panel { z-index:1; width:calc(100% - 32px); padding-top:28px; }
  .title-panel h1 { font-size:clamp(39px,10.3vw,62px); letter-spacing:.07em; }
  .ship { top:auto; right:clamp(40px,8vw,72px); bottom:-42px; width:112px; opacity:.78; transform:rotate(8deg); }
  .ornament { margin:22px 0 18px; }
  .ornament:not(.small) span { width:min(120px,27vw); }
  .series-label { font-size:clamp(12px,3vw,17px); letter-spacing:.24em; }
  .tagline { font-size:clamp(18px,4.5vw,23px); }
  .hero-band { height:440px; padding:42px 18px 32px; }
  .coming-soon h2 { font-size:15px; letter-spacing:.28em; }
  .about > p:not(.status) { font-size:17px; }
  .status,.follow h2 { font-size:14px; }
  .social-list { gap:16px 24px; }
  .social-list a { padding:0; }
  .social-list svg { width:26px; height:26px; flex-basis:26px; }
  .social-list span { display:none; }
}
@media (max-width:480px) {
  .header-socials { gap:14px; }
  .header-socials svg { width:24px; height:24px; }
  .social-list svg { width:28px; height:28px; flex-basis:28px; }
  .ship { right:4px; bottom:-26px; width:86px; }
  .title-panel { padding-bottom:22px; }
  .title-panel h1 { font-size:37px; }
  .series-label { margin-bottom:17px; font-size:11px; }
  .tagline { font-size:17px; }
  .hero-band { height:390px; padding-top:32px; background-size:auto 430px; background-position:center bottom; }
  .form-row { display:grid; }
  .signup button { height:54px; }
  .about { padding-top:48px; }
  .about h2 { font-size:15px; }
  .status { line-height:1.7; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .coming-soon,.ship { animation:none; } }