html{scroll-behavior:smooth}
body{margin:0;background:#F2F3EF;color:#14171A;font-family:'Plus Jakarta Sans',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#0F6E47;text-decoration:none}
a:hover{color:#14171A}
input::placeholder{color:#9AA096}
h1,h2,h3,p{font-family:'Plus Jakarta Sans',sans-serif}

@keyframes bdRing{0%{transform:scale(.12);opacity:0}12%{opacity:.7}100%{transform:scale(1.45);opacity:0}}
@keyframes bdFloatA{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-12px)}}
@keyframes bdFloatB{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(5deg) translateY(-9px)}}
@keyframes bdMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bdPulse{0%{box-shadow:0 0 0 0 rgba(214,248,76,.65)}70%{box-shadow:0 0 0 12px rgba(214,248,76,0)}100%{box-shadow:0 0 0 0 rgba(214,248,76,0)}}
@keyframes bdBurst{0%{clip-path:circle(0% at 50% 50%);opacity:1}30%{clip-path:circle(120% at 50% 50%);opacity:1}78%{opacity:1}100%{clip-path:circle(120% at 50% 50%);opacity:0}}
@keyframes bdPop{0%{transform:scale(.2) rotate(-12deg);opacity:0}30%{transform:scale(1.15) rotate(-4deg);opacity:1}45%{transform:scale(1) rotate(-4deg)}80%{opacity:1}100%{transform:scale(1.08) rotate(-4deg);opacity:0}}
@keyframes bdRingFast{0%{transform:scale(.1);opacity:.9}100%{transform:scale(3.4);opacity:0}}
@keyframes bdBit{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

.anim-floatA{animation:bdFloatA 6s ease-in-out infinite}
.anim-floatB{animation:bdFloatB 7s ease-in-out 1s infinite}
.anim-marquee{animation:bdMarquee 40s linear infinite}
.anim-pulse{animation:bdPulse 2.2s ease-out infinite}

/* Ripple rings behind the hero phone and the join card */
.rings{position:absolute;pointer-events:none}
.rings i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(214,248,76,.35);animation:bdRing 7.5s cubic-bezier(.2,.6,.3,1) infinite both}
.rings i:nth-child(2){animation-delay:2.5s}
.rings i:nth-child(3){animation-delay:5s}
.rings b{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#D6F84C;animation:bdPulse 2.4s ease-out infinite}

/* Scroll reveal */
.reveal-pending{opacity:0;translate:0 32px}
.reveal-ready{transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1)}

.hover-grow{transition:transform .2s}
.hover-grow:hover{transform:scale(1.05)}
.safe-card{transition:background .3s}
.safe-card:hover{background:rgba(214,248,76,.1)!important}
.safe-card.reveal-ready{transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1),background .3s}

/* Phone placeholder shown until real screenshots are added */
.shot-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#E2E4DD,#F2F3EF);font:700 22px 'Barlow Condensed',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9AA096}

[hidden]{display:none!important}

@media (max-width:720px){
  .nav-links{display:none!important}
}
@media (max-width:480px){
  .email-row{flex-direction:column;border-radius:24px!important;padding:6px!important}
  .email-row input{padding:12px 14px!important}
  .float-card-a{left:-6px!important}
  .float-card-b{right:-6px!important}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* The "Sound familiar?" intro only pins beside the chat when the two sit side by side */
@media (min-width:900px){
  .pin-wide{position:sticky;top:96px}
}

/* Discord pill sits on a dark background, so keep its text light on hover */
a[href="/discord"]:hover{color:#F2F3EF!important}

/* Promo film: hero button and pop-up player */
.film-btn{display:inline-flex;align-items:center;gap:12px;font:700 15px 'Plus Jakarta Sans',sans-serif;background:rgba(0,0,0,.2);color:#F2F3EF;border:none;border-radius:999px;padding:8px 22px 8px 8px;cursor:pointer;transition:background .2s}
.film-btn:hover{background:rgba(0,0,0,.32)}
.film-btn:hover .film-play{transform:scale(1.08)}
.film-play{width:40px;height:40px;border-radius:50%;background:#F2F3EF;color:#14171A;display:flex;align-items:center;justify-content:center;padding-left:3px;box-sizing:border-box;transition:transform .2s}
.film-len{font:600 13px 'Plus Jakarta Sans',sans-serif;color:rgba(242,243,239,.6)}
.film-len:empty{display:none}
.film-modal{position:fixed;inset:0;z-index:100;background:rgba(20,23,26,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .25s}
.film-modal.open{opacity:1}
.film-frame{position:relative;width:min(1100px,100%,calc((100vh - 120px) * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:20px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5);transform:scale(.96);transition:transform .25s}
.film-modal.open .film-frame{transform:scale(1)}
.film-frame video{display:block;width:100%;height:100%;background:#000}
.film-close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:none;background:rgba(20,23,26,.7);color:#F2F3EF;font:700 16px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.film-close:hover{background:#D6F84C;color:#14171A}
@media (max-width:560px){.film-modal{padding:12px}.film-frame{border-radius:14px}}

/* Analytics cookie banner (consent.js) */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;max-width:560px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;background:#14171A;color:#F2F3EF;border-radius:20px;padding:16px 18px;box-shadow:0 12px 40px rgba(20,23,26,.25)}
.consent p{flex:1 1 260px;margin:0;font:500 14px/1.5 'Plus Jakarta Sans',sans-serif}
.consent a{color:#D6F84C;text-decoration:underline;text-underline-offset:2px}
.consent-btns{display:flex;gap:8px;margin-left:auto}
.consent button{font:700 13px 'Plus Jakarta Sans',sans-serif;border:0;border-radius:999px;padding:9px 16px;cursor:pointer}
.consent-no{background:rgba(242,243,239,.12);color:#F2F3EF}
.consent-yes{background:#D6F84C;color:#14171A}