/* Rhythm United Systems — landing page styles. All assets are local. */

@font-face { font-family: "Sora"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/sora-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/manrope-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2"); }

:root {
    --bg:      #070030;
    --accent:  #FF004E;
    --grey:    #C4C4C4;
    --ink:     #F4F2FF;
    --muted:   #9A97C2;
    --line:    rgba(196, 196, 196, 0.14);
    --panel:   rgba(255, 255, 255, 0.035);

    --font-display: "Sora", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Fluid spacing — scales with the smaller viewport dimension so it fits everywhere. */
    --pad-x: clamp(16px, 4vw, 64px);
    --pad-y: clamp(10px, 2.2vh, 28px);
    --gap:   clamp(8px, 1.6vh, 20px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;              /* never scroll */
    overscroll-behavior: none;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: clamp(13px, 1.05vw + 0.5vh, 17px);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ---------- Background: pure-CSS starfield (no JS, no mouse-follow) ---------- */

.stars {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    background-repeat: repeat;
    will-change: transform;
    transform: translateZ(0);          /* own compositing layer */
    backface-visibility: hidden;
}
.stars-far {
        background-image:
        radial-gradient(1px 1px at 154px 266px, rgba(255,255,255,0.51) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 173px 27px, rgba(255,255,255,0.34) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 76px 105px, rgba(255,255,255,0.31) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 460px 421px, rgba(255,255,255,0.27) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 343px 336px, rgba(255,255,255,0.23) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 503px 414px, rgba(255,255,255,0.27) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 248px 35px, rgba(255,255,255,0.23) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 194px 259px, rgba(255,255,255,0.31) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 262px 167px, rgba(255,255,255,0.24) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 23px 273px, rgba(255,255,255,0.5) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 224px 243px, rgba(255,255,255,0.2) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 307px 286px, rgba(255,255,255,0.44) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 343px 458px, rgba(255,255,255,0.52) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 280px 443px, rgba(255,255,255,0.26) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 123px 128px, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 229px 119px, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 198px 446px, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 82px 117px, rgba(255,255,255,0.2) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 322px 411px, rgba(255,255,255,0.39) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 55px 168px, rgba(255,255,255,0.53) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 341px 12px, rgba(255,255,255,0.4) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 111px 95px, rgba(255,255,255,0.29) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 87px 308px, rgba(255,255,255,0.48) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 199px 224px, rgba(255,255,255,0.38) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 12px 160px, rgba(255,255,255,0.52) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 138px 319px, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 111px 397px, rgba(255,255,255,0.28) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 202px 231px, rgba(255,255,255,0.31) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 399px 142px, rgba(255,255,255,0.36) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 3px 183px, rgba(255,255,255,0.48) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 318px 414px, rgba(255,255,255,0.52) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 303px 211px, rgba(255,255,255,0.42) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 147px 101px, rgba(255,255,255,0.3) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 396px 382px, rgba(255,255,255,0.34) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 473px 101px, rgba(255,255,255,0.4) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 216px 10px, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 348px 15px, rgba(255,255,255,0.3) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 102px 2px, rgba(255,255,255,0.27) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 211px 415px, rgba(255,255,255,0.23) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 368px 289px, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 141px 384px, rgba(255,255,255,0.34) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 260px 3px, rgba(255,255,255,0.23) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 503px 326px, rgba(255,255,255,0.47) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 299px 461px, rgba(255,255,255,0.33) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 53px 356px, rgba(255,255,255,0.54) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 376px 20px, rgba(255,255,255,0.37) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 145px 303px, rgba(255,255,255,0.25) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 372px 358px, rgba(255,255,255,0.25) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 235px 443px, rgba(255,255,255,0.36) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 400px 397px, rgba(255,255,255,0.49) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 297px 518px, rgba(255,255,255,0.43) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 303px 85px, rgba(255,255,255,0.29) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 128px 476px, rgba(255,255,255,0.37) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 362px 335px, rgba(255,255,255,0.25) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 126px 274px, rgba(255,255,255,0.39) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 379px 400px, rgba(255,255,255,0.39) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 314px 482px, rgba(255,255,255,0.53) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 139px 131px, rgba(255,255,255,0.51) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 78px 174px, rgba(255,255,255,0.3) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 325px 87px, rgba(255,255,255,0.29) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 98px 135px, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 507px 40px, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 483px 400px, rgba(255,255,255,0.46) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 97px 137px, rgba(255,255,255,0.38) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 428px 175px, rgba(255,255,255,0.36) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 495px 156px, rgba(255,255,255,0.27) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 296px 120px, rgba(255,255,255,0.36) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 479px 69px, rgba(255,255,255,0.42) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 117px 222px, rgba(255,255,255,0.45) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 212px 518px, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 60%);
        background-size: 520px 520px;
        top: -560px; left: 0; right: 0; height: calc(100% + 560px);
        animation: s-far 60s linear infinite, twinkle 6s ease-in-out infinite;
        opacity: 0.75;
    }
.stars-mid {
        background-image:
        radial-gradient(1px 1px at 437px 242px, rgba(255,255,255,0.43) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 125px 383px, rgba(255,255,255,0.5) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 190px 416px, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 171px 410px, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 262px 374px, rgba(255,255,255,0.48) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 91px 304px, rgba(255,255,255,0.48) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 59px 143px, rgba(255,255,255,0.5) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 45px 273px, rgba(255,255,255,0.51) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 350px 226px, rgba(255,255,255,0.44) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 366px 22px, rgba(255,255,255,0.59) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 422px 413px, rgba(255,255,255,0.47) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 306px 288px, rgba(255,255,255,0.36) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 140px 119px, rgba(255,255,255,0.33) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 354px 274px, rgba(255,255,255,0.46) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 171px 401px, rgba(255,255,255,0.49) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 85px 261px, rgba(255,255,255,0.46) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 259px 12px, rgba(255,255,255,0.31) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 130px 393px, rgba(255,255,255,0.39) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 157px 273px, rgba(255,255,255,0.52) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 347px 32px, rgba(255,255,255,0.3) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 295px 379px, rgba(255,255,255,0.36) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 327px 36px, rgba(255,255,255,0.45) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 21px 0px, rgba(255,255,255,0.56) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 199px 276px, rgba(255,255,255,0.58) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 47px 146px, rgba(255,255,255,0.61) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 439px 338px, rgba(255,255,255,0.4) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 53px 228px, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 325px 60px, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 95px 339px, rgba(255,255,255,0.36) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 149px 0px, rgba(255,255,255,0.32) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 114px 218px, rgba(255,255,255,0.52) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 193px 342px, rgba(255,255,255,0.51) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 329px 399px, rgba(255,255,255,0.49) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 67px 163px, rgba(255,255,255,0.3) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 47px 260px, rgba(255,255,255,0.48) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 90px 423px, rgba(255,255,255,0.37) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 420px 178px, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 390px 149px, rgba(255,255,255,0.36) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 155px 417px, rgba(255,255,255,0.37) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 43px 60px, rgba(255,255,255,0.31) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 316px 79px, rgba(255,255,255,0.56) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 180px 157px, rgba(255,255,255,0.63) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 428px 11px, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 228px 0px, rgba(255,255,255,0.57) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 359px 240px, rgba(255,255,255,0.57) 0, rgba(255,255,255,0) 60%),
        radial-gradient(1px 1px at 26px 12px, rgba(255,255,255,0.33) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 260px 434px, rgba(255,255,255,0.45) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 235px 319px, rgba(255,255,255,0.33) 0, rgba(255,255,255,0) 60%);
        background-size: 440px 440px;
        top: -560px; left: -560px; width: calc(100% + 560px); height: calc(100% + 560px);
        animation: s-mid 44s linear infinite, twinkle 4.5s ease-in-out infinite;
        opacity: 0.9;
    }
.stars-near {
        background-image:
        radial-gradient(2px 2px at 219px 36px, rgba(255,255,255,0.85) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 8px 132px, rgba(255,255,255,0.89) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 269px 300px, rgba(255,255,255,0.77) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 2px 161px, rgba(255,255,255,0.7) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 53px 170px, rgba(255,255,255,0.79) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 60px 288px, rgba(255,255,255,0.85) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 117px 231px, rgba(255,255,255,0.64) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 287px 35px, rgba(255,255,255,0.79) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 125px 128px, rgba(255,255,255,0.84) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 255px 22px, rgba(255,255,255,0.82) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 236px 42px, rgba(255,255,255,0.86) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 297px 267px, rgba(255,255,255,0.72) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 290px 125px, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 20px 67px, rgba(255,255,255,0.89) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 233px 160px, rgba(255,255,255,0.7) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 153px 60px, rgba(255,255,255,0.79) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 145px 75px, rgba(255,255,255,0.52) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 119px 130px, rgba(255,255,255,0.71) 0, rgba(255,255,255,0) 60%),
        radial-gradient(2px 2px at 257px 5px, rgba(255,255,255,0.58) 0, rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 243px 234px, rgba(255,255,255,0.59) 0, rgba(255,255,255,0) 60%);
        background-size: 300px 300px;
        top: 0; bottom: 0; left: -560px; width: calc(100% + 560px);
        animation: s-near 34s linear infinite, twinkle 3.4s ease-in-out infinite;
    }
.stars-pink {
        background-image:
        radial-gradient(3px 3px at 463px 30px, rgba(255,0,78,0.78) 0, rgba(255,0,78,0) 60%),
        radial-gradient(2px 2px at 145px 409px, rgba(255,0,78,0.52) 0, rgba(255,0,78,0) 60%),
        radial-gradient(3px 3px at 178px 251px, rgba(255,0,78,0.67) 0, rgba(255,0,78,0) 60%),
        radial-gradient(2px 2px at 465px 461px, rgba(255,0,78,0.48) 0, rgba(255,0,78,0) 60%),
        radial-gradient(3px 3px at 111px 369px, rgba(255,0,78,0.59) 0, rgba(255,0,78,0) 60%),
        radial-gradient(2px 2px at 334px 166px, rgba(255,0,78,0.58) 0, rgba(255,0,78,0) 60%),
        radial-gradient(1px 1px at 274px 204px, rgba(255,0,78,0.41) 0, rgba(255,0,78,0) 60%),
        radial-gradient(2px 2px at 73px 242px, rgba(255,0,78,0.63) 0, rgba(255,0,78,0) 60%),
        radial-gradient(1px 1px at 379px 261px, rgba(255,0,78,0.59) 0, rgba(255,0,78,0) 60%),
        radial-gradient(1px 1px at 131px 1px, rgba(255,0,78,0.61) 0, rgba(255,0,78,0) 60%),
        radial-gradient(1px 1px at 20px 115px, rgba(255,0,78,0.67) 0, rgba(255,0,78,0) 60%),
        radial-gradient(1px 1px at 8px 68px, rgba(255,0,78,0.77) 0, rgba(255,0,78,0) 60%),
        radial-gradient(1px 1px at 198px 268px, rgba(255,0,78,0.62) 0, rgba(255,0,78,0) 60%),
        radial-gradient(2px 2px at 104px 131px, rgba(255,0,78,0.78) 0, rgba(255,0,78,0) 60%),
        radial-gradient(2px 2px at 111px 361px, rgba(255,0,78,0.75) 0, rgba(255,0,78,0) 60%),
        radial-gradient(1px 1px at 24px 129px, rgba(255,0,78,0.61) 0, rgba(255,0,78,0) 60%),
        radial-gradient(2px 2px at 354px 225px, rgba(255,0,78,0.57) 0, rgba(255,0,78,0) 60%),
        radial-gradient(1px 1px at 380px 189px, rgba(255,0,78,0.79) 0, rgba(255,0,78,0) 60%);
        background-size: 480px 480px;
        top: -560px; left: 0; right: 0; height: calc(100% + 560px);
        animation: s-pink 52s linear infinite, twinkle 5s ease-in-out infinite;
        opacity: 0.85;
    }
@keyframes twinkle  { 0%,100% { opacity: var(--tw, 0.8); } 50% { opacity: calc(var(--tw, 0.8) * 0.6); } }

@keyframes s-far  { from { transform: translate3d(0, 0, 0); }        to { transform: translate3d(0, 520px, 0); } }
@keyframes s-mid  { from { transform: translate3d(0, 0, 0); }        to { transform: translate3d(440px, 440px, 0); } }
@keyframes s-near { from { transform: translate3d(0, 0, 0); }        to { transform: translate3d(300px, 0, 0); } }
@keyframes s-pink { from { transform: translate3d(0, 480px, 0); }    to { transform: translate3d(0, 0, 0); } }

.glow {
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}
.glow-a {
    width: 55vmax; height: 55vmax;
    left: -18vmax; top: -22vmax;
    background: radial-gradient(circle, rgba(255, 0, 78, 0.26) 0%, rgba(255, 0, 78, 0.10) 30%, rgba(255, 0, 78, 0) 68%);
    animation: glow-a 26s ease-in-out infinite alternate;
}
.glow-b {
    width: 60vmax; height: 60vmax;
    right: -25vmax; bottom: -30vmax;
    background: radial-gradient(circle, rgba(74, 60, 255, 0.28) 0%, rgba(74, 60, 255, 0.10) 30%, rgba(74, 60, 255, 0) 68%);
    animation: glow-b 32s ease-in-out infinite alternate;
}
@keyframes glow-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(8vmax,6vmax,0) scale(1.15); } }
@keyframes glow-b { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-7vmax,-8vmax,0) scale(0.95); } }

/* ---------- Page grid: header / hero / capabilities / footer ---------- */

.page {
    position: relative;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: var(--gap);
    padding: var(--pad-y) var(--pad-x);
    padding-bottom: max(var(--pad-y), env(safe-area-inset-bottom));
    max-width: 1600px;
    margin-inline: auto;
}

/* ---------- Header ---------- */

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 0;
}
.lead {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.4vw, 20px);
}
.brand img {
    height: clamp(34px, 5.4vh, 52px);
    width: auto;
    transition: transform 0.2s ease;
}
.brand:hover img { transform: translateY(-1px); }
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--muted);
    padding: 0.45em 0.95em;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(7, 0, 48, 0.55);
    white-space: nowrap;
}
.status .dot {
    width: 0.55em; height: 0.55em;
    border-radius: 50%;
    background: #33E38C;
    box-shadow: 0 0 0 0 rgba(51, 227, 140, 0.6);
    animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(51, 227, 140, 0.55); }
    70%  { box-shadow: 0 0 0 0.6em rgba(51, 227, 140, 0); }
    100% { box-shadow: 0 0 0 0 rgba(51, 227, 140, 0); }
}
.status time { color: var(--ink); font-variant-numeric: tabular-nums; }
.status .date { color: var(--muted); margin-right: 0.35em; }
.status .tz { font-size: 0.85em; opacity: 0.7; }
.sep { opacity: 0.4; }

/* ---------- Hero ---------- */

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 0;
    gap: clamp(6px, 1.4vh, 18px);
}
.hero-logo {
    position: relative;
    display: grid;
    place-items: center;
}
.hero-logo img {
    position: relative;
    z-index: 2;
    width: min(60vw, 68vh * (896 / 301), 640px);
    height: auto;
}

/* Stars orbiting the logo. Rings are centred on the logo; each carries satellites
   pinned to its edge and spins, so the satellites trace a circular path. */
.orbits {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    z-index: 1;
    pointer-events: none;
}
.orbit {
    position: absolute;
    left: 50%; top: 50%;
    border: 1px solid rgba(196, 196, 196, 0.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
}
.orbit-1 { width: min(46vw, 52vh * (896/301), 500px); height: min(24vw, 27vh, 260px); animation: spin 26s linear infinite; }
.orbit-2 { width: min(58vw, 64vh * (896/301), 640px); height: min(30vw, 33vh, 330px); animation: spin 40s linear infinite reverse; border-color: rgba(255,0,78,0.10); }
.orbit-3 { width: min(70vw, 78vh * (896/301), 780px); height: min(37vw, 40vh, 400px); animation: spin 58s linear infinite; }
.sat {
    position: absolute;
    top: -3px; left: 50%;
    width: 6px; height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px 1px rgba(255, 0, 78, 0.7);
}
.orbit-2 .sat { background: #FFFFFF; box-shadow: 0 0 7px 1px rgba(255,255,255,0.7); }
.orbit-3 .sat { width: 4px; height: 4px; margin-left: -2px; top: -2px; background: var(--grey); box-shadow: 0 0 6px 1px rgba(196,196,196,0.6); }
.sat-b { top: auto; bottom: -3px; }
@keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2vw + 1.5vh, 42px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 24ch;
    text-wrap: balance;
}
.lede {
    color: var(--muted);
    max-width: 62ch;
    font-size: clamp(12px, 0.7vw + 0.55vh, 17px);
    line-height: 1.55;
    text-wrap: pretty;
}
.actions {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-top: clamp(2px, 0.8vh, 10px);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 0.01em;
    padding: 0.75em 1.7em;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary {
    color: #fff;
    background: var(--accent);
    box-shadow: 0 8px 28px rgba(255, 0, 78, 0.35);
}
.btn-primary:hover, .btn-primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(255, 0, 78, 0.5);
    background: #FF1F63;
    outline: none;
}
.btn-note {
    color: var(--muted);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Capabilities — editorial strip ---------- */

.caps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.2vw, 20px);
    min-height: 0;
    margin-bottom: 50px;
}
.cap {
    position: relative;
    min-width: 0;
    padding: clamp(12px, 1.8vh, 22px) clamp(14px, 1.5vw, 24px);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.028);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.cap:hover, .cap:focus-within {
    border-color: rgba(196, 196, 196, 0.3);
    background: rgba(255, 255, 255, 0.05);
}
/* Pink top rule: appears on hover, no slide */
.cap::after {
    content: "";
    position: absolute; left: -1px; right: -1px; top: -1px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.cap:hover::after, .cap:focus-within::after { opacity: 1; }
.cap-head {
    display: flex;
    align-items: center;
    gap: 0.55em;
    min-width: 0;
    margin-bottom: clamp(5px, 1vh, 10px);
}
.cap-icon {
    width: clamp(16px, 2.3vh, 22px);
    height: clamp(16px, 2.3vh, 22px);
    color: var(--accent);
    flex: 0 0 auto;
}
.cap-icon svg { width: 100%; height: 100%; }
.cap h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(12px, 0.62vw + 0.55vh, 15px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
}
.cap p {
    color: var(--muted);
    font-size: clamp(11px, 0.58vw + 0.5vh, 14px);
    line-height: 1.5;
}

/* ---------- Footer ---------- */

.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.78em;
    color: var(--muted);
    padding-top: var(--gap);
    border-top: 1px solid var(--line);
}
.pulse { display: inline-flex; align-items: center; gap: 0.7em; white-space: nowrap; }
.pulse-label { font-variant-numeric: tabular-nums; color: var(--ink); transition: color 0.3s; white-space: nowrap; }
.pulse-label b { font-weight: 700; letter-spacing: 0.04em; margin-right: 0.15em; }
.pulse-label .chg { font-weight: 600; }
.pulse-label .win { color: var(--muted); font-size: 0.85em; letter-spacing: 0.06em; margin-left: 0.15em; }
.pulse-label .chg { color: var(--accent); }        /* pink by default (down) */
.pulse.up   .chg { color: #22C55E; }
.pulse.up   .scope-trace { stroke: #22C55E; filter: drop-shadow(0 0 2px rgba(34,197,94,0.5)); }
.pulse.up   .scope-head  { fill: #22C55E; }
.pulse.down .pulse-label { color: #FF6B8F; }
.scope {
    display: block;
    width: clamp(96px, 11vw, 160px);
    height: 1.6em;
    overflow: visible;
}
.scope-mid   { stroke: rgba(196, 196, 196, 0.18); stroke-width: 1; stroke-dasharray: 2 3; }
.scope-trace { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(255,0,78,0.55)); }
.scope-head  { fill: var(--accent); animation: scope-blip 1.4s ease-in-out infinite; }
@keyframes scope-blip { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.pulse.down .scope-trace { stroke: rgba(196, 196, 196, 0.5); filter: none; }
.pulse.down .scope-head  { fill: rgba(196, 196, 196, 0.5); animation: none; }

/* ---------- Entrance animation ---------- */

.reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: reveal 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: calc(var(--d, 0) * 110ms + 120ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ---------- Responsive: narrow and short viewports ---------- */

@media (max-width: 760px) {
    .caps { grid-template-columns: repeat(2, 1fr); }
    .cap p { display: none; }
    .cap-head { margin-bottom: 0; }
    .status > span:nth-child(2), .status .sep { display: none; }   /* drop the label, keep dot + clock */
    .status .date { display: none; }
    .pulse-label { display: none; }
        .hero-logo img { width: min(78vw, 40vh * (896 / 301)); }
    .bottom { flex-direction: column; gap: 2px; text-align: center; }
}

@media (max-width: 440px) {
    .caps { gap: 8px; }
    .cap { padding: 10px 12px; }
    .cap h2 { font-size: 11px; letter-spacing: 0.05em; }
    .cap-icon { width: 15px; height: 15px; }
}

@media (max-height: 820px) {
    .caps { margin-bottom: 30px; }
}
@media (max-height: 700px) {
    .caps { margin-bottom: 0; }
}
@media (min-width: 761px) and (max-height: 700px) {
    .cap p { -webkit-line-clamp: 3; line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
    .cap { padding: clamp(8px, 1.2vh, 14px) clamp(12px, 1.4vw, 20px); }
}
@media (max-height: 700px) {
    .lede { -webkit-line-clamp: 3; line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Short landscape screens (phones rotated, small laptops with toolbars) */
@media (max-height: 560px) {
    .caps { display: none; }
    .orbits { display: none; }
    .hero-logo img { width: min(50vw, 34vh * (896 / 301)); }
    .lede { display: none; }
}
@media (max-height: 420px) {
    .hero-logo img { width: min(40vw, 26vh * (896 / 301)); }
    .hero { gap: clamp(4px, 1vh, 10px); }
    .bottom { display: none; }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; transform: none; }
    .glow, .status .dot, .stars, .stars-far, .stars-mid, .stars-near, .stars-pink, .orbit, .scope-head { animation: none; }
    .orbits { display: none; }
}

/* Stagger delays (classes rather than inline styles, to satisfy the CSP) */
.d0 { --d: 0; } .d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; } .d4 { --d: 4; } .d5 { --d: 5; } .d6 { --d: 6; }

/* ---------- Buttons (extra) ---------- */

button.btn { border: 0; cursor: pointer; font: inherit; font-family: var(--font-display); font-weight: 700; }
.btn-ghost {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line) !important;
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--grey) !important; outline: none; }
.btn-login {
    position: relative;
    top: 5px;                       /* nudged down to sit lower than the logo baseline */
    color: var(--ink);
    background: transparent;
    border: 1px solid rgba(196, 196, 196, 0.28);
    padding: 0.5em 1.3em;
    font-size: 0.82em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: border-color 0.2s ease, color 0.2s ease;
}
/* Pink underline: appears on hover, no slide */
.btn-login::after {
    content: "";
    position: absolute;
    left: 1.3em; right: 1.3em; bottom: 0.35em;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.btn-login:hover, .btn-login:focus-visible {
    color: #fff;
    border-color: rgba(196, 196, 196, 0.45);
    outline: none;
}
.btn-login:hover::after, .btn-login:focus-visible::after { opacity: 1; }

/* ---------- Contact modal ---------- */

.modal {
    position: fixed; inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vmin, 32px);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.modal.open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.22s ease;
}
.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(3, 0, 24, 0.72);
}
.modal-card-sm { width: min(100%, 500px); }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.8em; }
.login-row .check { display: inline-flex; align-items: center; gap: 0.45em; color: var(--muted); font-weight: 500; cursor: pointer; }
.login-row .check input { width: 14px; height: 14px; accent-color: var(--accent); }
.login-forgot { color: var(--muted); border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.login-forgot:hover { color: var(--ink); border-color: var(--accent); }
.modal-card {
    position: relative;
    width: min(100%, 560px);
    max-height: 100%;
    overflow: auto;                       /* internal scroll only if the viewport is tiny */
    padding: clamp(18px, 3vmin, 34px);
    border-radius: 18px;
    background: var(--bg);
    border: 1px solid rgba(196, 196, 196, 0.18);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 0, 78, 0.12);
    transform: translateY(10px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.modal.open .modal-card-sm { width: min(100%, 500px); }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.8em; }
.login-row .check { display: inline-flex; align-items: center; gap: 0.45em; color: var(--muted); font-weight: 500; cursor: pointer; }
.login-row .check input { width: 14px; height: 14px; accent-color: var(--accent); }
.login-forgot { color: var(--muted); border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.login-forgot:hover { color: var(--ink); border-color: var(--accent); }
.modal-card { transform: none; }
.modal-close {
    position: absolute; top: 10px; right: 12px;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 24px; line-height: 1;
    cursor: pointer;
}
.modal-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.modal-card h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(18px, 1.4vw + 1vh, 26px);
    margin-bottom: 0.25em;
}
.modal-sub { color: var(--muted); font-size: 0.9em; margin-bottom: clamp(10px, 2vh, 18px); }
.login-row.login-row-end { justify-content: flex-end; }
#login .modal-sub { white-space: nowrap; }
#login .form-msg { white-space: nowrap; font-size: 0.82em; }
@media (max-width: 520px) {
    #login .modal-sub, #login .form-msg { white-space: normal; }
}

.modal form { display: grid; gap: clamp(8px, 1.4vh, 14px); }
.modal .row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.4vh, 14px); }
.modal label { display: grid; gap: 0.35em; font-size: 0.82em; font-weight: 500; color: var(--muted); }
.modal input, .modal textarea {
    width: 100%;
    font: inherit;
    font-size: 1.05em;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.6em 0.8em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.modal textarea { resize: none; min-height: 5.5em; max-height: 30vh; }
.modal input:focus, .modal textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 0, 78, 0.18);
}
.form-actions { display: flex; gap: 0.75em; align-items: center; margin-top: 4px; }
.form-msg { font-size: 0.85em; min-height: 1.2em; color: var(--muted); }
.form-msg.err { color: #FF6B8F; }
.form-msg.ok  { color: #33E38C; font-size: 1em; }
/* Contact modal: a reserved status line at the bottom, so the modal keeps the
   same size whether or not a confirmation is showing. */
.form-status {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 3.8em;
    margin: clamp(8px, 1.6vh, 16px) 0 0;
    padding-top: clamp(8px, 1.6vh, 14px);
    border-top: 1px solid var(--line);
    font-size: 0.85em;
    line-height: 1.35;
    color: var(--muted);
    transition: color 0.2s ease;
}
.form-status.ok  { color: #33E38C; }
.form-status.err { color: #FF6B8F; }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none !important; }

/* Honeypot: off-screen, not display:none (some bots skip those) */
.hp {
    position: absolute;
    left: -10000px; top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
}

@media (max-width: 520px) {
    .modal .row { grid-template-columns: 1fr; }
}
@media (max-height: 520px) {
    .modal-sub { display: none; }
    .modal textarea { min-height: 3.5em; }
}