*{box-sizing:border-box;margin:0;padding:0}
:root{--white:#f5f5f5}
html,body{width:100%;height:100%;background:#000}
body{min-height:100vh;min-height:100svh;background:#000;color:var(--white);font-family:"Segoe UI",Arial,sans-serif;overflow:hidden}
.page{width:100%;height:100vh;height:100svh;min-height:100%;background:#000;position:relative;overflow:hidden}
.hero{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;padding-top:clamp(28px,7vh,78px);padding-bottom:clamp(105px,15vh,145px)}
.logo-stage{position:relative;width:min(760px,82vw);aspect-ratio:1200/801;flex:none}
.logo-video,.logo-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}
.logo-video{z-index:1;object-fit:cover;background:#000;opacity:0;visibility:hidden;transition:opacity .25s ease}
/* The transparent PNG's alpha channel is the exact logo shape. */
.logo-video.mask-ready{-webkit-mask-image:url("assets/trailx_logo_white_transparent.png");mask-image:url("assets/trailx_logo_white_transparent.png");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-mode:alpha;mask-mode:alpha}
.logo-video.playing{opacity:1;visibility:visible}
.logo-fallback{z-index:2;object-fit:contain;opacity:1;transition:opacity .25s ease}
.logo-fallback.hide{opacity:0}
.content{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(10px,2.2vh,24px);flex:none}
.tagline{font-size:clamp(1.2rem,2.5vw,1.75rem);line-height:1.2;letter-spacing:-0.02em;color:#ddd}
.notify-btn{margin-top:clamp(12px,2vh,20px);min-width:108px;padding:11px 22px;border:1px solid rgba(255,255,255,.8);background:transparent;color:#fff;font-size:.9rem;cursor:pointer}
.notify-btn:hover{background:#fff;color:#000}
.footer{position:absolute;left:0;right:0;bottom:clamp(16px,4.5vh,44px);display:flex;flex-direction:column;align-items:center;gap:13px}
.coming{font-size:.8rem;color:#cfcfcf;letter-spacing:.17em}
.socials{display:flex;gap:28px;align-items:center}
.socials a{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#d0d0d0;transition:color .3s ease,transform .3s ease;text-decoration:none}
.socials a:hover{color:#ff7a1a;transform:translateY(-2px)}
.socials svg{width:22px;height:22px;fill:currentColor;stroke:none}
.socials a:last-child svg .dot{fill:currentColor;stroke:none}
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.86);opacity:0;pointer-events:none;transition:opacity .2s}
.modal.open{opacity:1;pointer-events:auto}
.modal-card{width:min(420px,92vw);padding:34px 28px 28px;background:#0b0b0b;border:1px solid #333;text-align:center;position:relative}
.modal-card h2{margin-bottom:10px;font-weight:500}
.modal-card>p{margin-bottom:20px;color:#999;font-size:.9rem;line-height:1.5}
.modal-close{position:absolute;top:6px;right:12px;border:0;background:none;color:#777;font-size:1.7rem;cursor:pointer}
#notifyForm{display:flex;flex-direction:column;gap:10px}
#notifyForm input{padding:12px;background:#050505;color:#fff;border:1px solid #333}
#notifyForm button{padding:12px;border:1px solid #fff;background:#fff;color:#000;font-weight:600}
.form-msg{min-height:1.2em;margin:12px 0 0!important;color:#aaa!important}

/* Narrow phones: keep the composition compact without changing desktop sizing. */
@media(max-width:640px){
  .hero{padding-top:30px;padding-bottom:95px}
  .logo-stage{width:min(92vw,60vh)}
  .content{margin-top:10px}
  .tagline{font-size:1.15rem}
  .notify-btn{margin-top:15px}
  .footer{bottom:16px;gap:9px}
  .coming{font-size:.68rem}
}

/* Short laptop / 768p-class displays. This is the main fix for the screenshot. */
@media (min-width:641px) and (max-height:850px){
  .hero{padding-top:clamp(18px,4.5vh,42px);padding-bottom:112px}
  .logo-stage{width:min(700px,78vw,58vh)}
  .content{margin-top:8px}
  .notify-btn{margin-top:12px}
  .footer{bottom:14px;gap:9px}
}

/* Very short screens: shrink the logo further so the button and footer always have room. */
@media (min-width:641px) and (max-height:700px){
  .hero{padding-top:12px;padding-bottom:90px}
  .logo-stage{width:min(620px,76vw,52vh)}
  .content{margin-top:6px}
  .tagline{font-size:1.05rem}
  .notify-btn{margin-top:9px;padding:9px 18px}
  .footer{bottom:8px;gap:6px}
  .coming{font-size:.65rem}
  .socials{gap:20px}
  .socials a{width:21px;height:21px}
  .socials svg{width:19px;height:19px}
}

/* Modern mobile browsers use dynamic viewport units; this prevents URL bars from causing clipping. */
@supports (height:100dvh){
  body,.page{height:100dvh}
}