:root{--gold:#e2b95f;--ink:#04080b;--paper:#f3ead8}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#020406}
body{margin:0;background:#020406;color:white;font-family:Georgia,"Times New Roman",serif}
.skip{position:fixed;top:-100px;left:12px;z-index:9999;background:#fff;color:#000;padding:10px 14px}.skip:focus{top:12px}
.design-shell{position:relative;width:min(100%,1600px);margin:0 auto;background:#05090d;line-height:0}
.design-image{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;display:block;background:transparent;border:0;cursor:pointer;z-index:5;padding:0}
.hotspot:focus-visible{outline:2px solid var(--gold);outline-offset:2px;background:rgba(226,185,95,.07)}
.anchor{position:absolute;left:0;width:1px;height:1px;scroll-margin-top:15px}

/* Coordinates are percentages of the approved 952×1652 concept. */
.nav-story{left:37.2%;top:.7%;width:6.3%;height:2.2%}
.nav-coins{left:45.7%;top:.7%;width:6.1%;height:2.2%}
.nav-auth{left:53.4%;top:.7%;width:8.9%;height:2.2%}
.nav-community{left:63.8%;top:.7%;width:7.6%;height:2.2%}
.nav-faq{left:72.4%;top:.7%;width:4.3%;height:2.2%}
.nav-join{left:79.0%;top:.45%;width:18.5%;height:3.1%}
.hero-release{left:4.3%;top:20.6%;width:22.8%;height:3.0%}
.hero-story{left:28.5%;top:20.5%;width:12.5%;height:3.1%}
.story-learn{left:35.2%;top:47.6%;width:17.6%;height:2.5%}
.auth-explore{left:4.8%;top:62.8%;width:22.0%;height:2.5%}
.coins-explore{left:4.7%;top:76.0%;width:16.8%;height:2.6%}
.waitlist-field{left:28.6%;top:86.8%;width:28.3%;height:2.5%}
.waitlist-button{left:57.0%;top:86.7%;width:15.5%;height:2.7%}

.semantic{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.modal-backdrop{position:fixed;z-index:1000;inset:0;background:rgba(0,0,0,.79);backdrop-filter:blur(7px);display:grid;place-items:center;padding:22px}
.modal-backdrop[hidden]{display:none}
.modal{position:relative;width:min(620px,100%);background:linear-gradient(145deg,#07131c,#06090d);border:1px solid rgba(226,185,95,.65);box-shadow:0 24px 80px #000;padding:46px 42px;text-align:center}
.modal:before{content:"";position:absolute;inset:8px;border:1px solid rgba(226,185,95,.18);pointer-events:none}
.modal-star{font-size:35px;color:var(--gold)}
.modal-kicker{color:var(--gold);font:700 12px Arial,sans-serif;letter-spacing:.22em}
.modal h2{font-size:40px;font-weight:400;text-transform:uppercase;letter-spacing:.04em;margin:7px 0 12px}
.modal>p:not(.modal-kicker):not(.form-message){font-size:17px;line-height:1.55;color:#ddd4c4}
.modal-close{position:absolute;right:14px;top:9px;border:0;background:transparent;color:#e9dfce;font-size:34px;cursor:pointer}
#waitlist-form{text-align:left;margin-top:24px}
#waitlist-form label{display:block;font:700 11px Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px;color:#ddd3c3}
.form-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.form-row input{min-width:0;height:50px;border:1px solid #aaa;padding:0 14px;font:15px Arial,sans-serif;background:#fff;color:#111}
.form-row button{height:50px;border:1px solid var(--gold);background:linear-gradient(110deg,#e0b45c,#f1d181);color:#101010;font:800 12px Arial,sans-serif;text-transform:uppercase;padding:0 20px;cursor:pointer}
.form-message{min-height:24px;color:#f0cd7e;font:14px Arial,sans-serif}
.modal small{display:block;color:#89847b;font:11px Arial,sans-serif;line-height:1.4;margin-top:12px}

@media(max-width:700px){
  .design-shell{width:100%}
  /* Make the approved design readable on phones by allowing a wider visual canvas.
     User can scroll horizontally slightly; this preserves the mockup rather than destroying it. */
  .design-image{width:118%;max-width:none;transform:translateX(-9%)}
  .hotspot{display:none}
  .modal{padding:38px 20px}
  .modal h2{font-size:31px}
  .form-row{grid-template-columns:1fr}
  .mobile-join{display:block}
}
.mobile-fab{display:none}
@media(max-width:700px){
  .mobile-fab{display:block;position:fixed;z-index:50;right:16px;bottom:16px;border:1px solid var(--gold);background:#071018;color:#f4e9d6;padding:13px 16px;font:700 11px Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 8px 28px rgba(0,0,0,.5)}
}