/* Streamflow join page. Values are carried over 1:1 from the approved design. */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;font-family:'Heebo',sans-serif}
[hidden]{display:none!important}
.s{display:inline-block;max-width:100%;text-wrap:balance}
br.m{display:none}
a{color:#A78BFF}a:hover{color:#C9B8FF}
input::placeholder{color:rgba(255,255,255,.46)}

.page{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;background:#000;color:#fff;font-family:'Heebo',sans-serif;direction:rtl}

/* ---------- background: the poster wall, darkened where the text sits ---------- */
.bg{position:absolute;top:0;left:0;right:0;overflow:hidden;pointer-events:none;background-color:#000;background-image:url(posters.webp);background-size:cover;background-position:50% 28%;background-repeat:no-repeat;transition:opacity .5s ease}
.bg-veil{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 58% 34% at 50% 30%,rgba(0,0,0,.84) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.06) 100%),radial-gradient(ellipse 36% 9% at 50% 56%,rgba(0,0,0,.5),rgba(0,0,0,0))}
.bg-top{position:absolute;top:0;left:0;right:0;height:200px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.bg-bottom{position:absolute;left:0;right:0;bottom:0;height:420px;background:linear-gradient(180deg,rgba(0,0,0,0),#000)}
body.is-open .bg{height:1180px}
body:not(.is-open) .bg{bottom:0}
body.is-loading .bg{opacity:0}
@media (max-width:700px){.bg{background-image:url(posters-m.webp)}}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:56px 24px 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.logo{display:block;width:min(420px,74vw);height:auto}
.slogan{margin-top:10px;font-size:24px;font-weight:700;letter-spacing:.2px}
.gates{position:relative;margin-top:52px;width:min(648px,100%);display:flex;flex-direction:column;align-items:center;justify-content:center}
.gates-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:0 16px}
.pill{display:inline-flex;align-items:center;gap:12px;height:39px;box-sizing:border-box;padding:0 26px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);font-size:16px;font-weight:700;color:#fff;min-width:201px;white-space:nowrap;justify-content:center}
.pill-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,#7B52FF,#6A38F5);box-shadow:0 0 10px 2px rgba(113,64,255,.65)}
h1{margin:22px 0 0;font-size:clamp(38px,10.4vw,80px);line-height:1;font-weight:800;background:linear-gradient(180deg,#fff 30%,#CDBFFF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.lead{margin:40px 0 0;max-width:660px;font-size:20px;line-height:1.75;color:#E2E2EA;text-shadow:0 2px 16px rgba(0,0,0,.9)}
body.is-loading .gates-inner,body.is-loading .lead{visibility:hidden}

/* ---------- email card (round open) ---------- */
.card-wrap{position:relative;margin-top:44px;width:min(660px,100%)}
.card{position:relative;z-index:1;box-sizing:border-box;padding:26px;border-radius:34px;background:rgba(255,255,255,.035);-webkit-backdrop-filter:blur(7px) saturate(170%);backdrop-filter:blur(7px) saturate(170%);border:1px solid rgba(255,255,255,.24);box-shadow:0 24px 60px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);text-align:right}
.card-sheen{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:34px;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 40%)}
.card-body{position:relative;z-index:1}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.email{flex:1 1 250px;min-width:0;height:58px;box-sizing:border-box;padding:0 24px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-family:'Heebo',sans-serif;font-size:17px;direction:ltr;text-align:left;outline:none;box-shadow:none}
.email:focus{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12);box-shadow:0 0 0 4px rgba(167,139,255,.22)}
.send{flex:0 0 auto;height:58px;padding:0 32px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:linear-gradient(180deg,#7B52FF,#6A38F5);color:#fff;font-family:'Heebo',sans-serif;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 10px 26px rgba(113,64,255,.45),inset 0 1px 0 rgba(255,255,255,.26)}
.send:focus-visible{outline:3px solid rgba(201,184,255,.9);outline-offset:3px}
.send:disabled{opacity:.62;cursor:not-allowed}
.hint{margin:14px 6px 0;font-size:14px;color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.msg{margin:10px 6px 0;font-size:15px;font-weight:600;line-height:1.5;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.85)}
.msg:empty{display:none}
.msg.ok{color:#D8CCFF}
.msg.err{color:#FFB6B6}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.ts-box{display:flex;justify-content:center}

/* ---------- countdown (round over): flip clock ---------- */
.cd{display:flex;flex-direction:column;align-items:center}
.cd-label{margin-top:44px;font-size:17px;font-weight:700;color:#F1F1F6;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.cd-timer{margin-top:20px;display:flex;flex-wrap:nowrap;justify-content:center;gap:clamp(10px,1.8vw,22px)}
.cd-unit{display:flex;flex-direction:column;align-items:center;gap:14px}
.cd-card{position:relative;box-sizing:border-box;min-width:clamp(68px,10.5vw,136px);padding:0 clamp(8px,1.4vw,18px);height:clamp(88px,12.6vw,164px);display:flex;align-items:center;justify-content:center;border-radius:clamp(22px,2.7vw,36px);corner-shape:squircle;background:linear-gradient(180deg,rgba(40,34,70,.74) 0%,rgba(40,34,70,.74) 50%,rgba(20,16,38,.82) 50%,rgba(20,16,38,.82) 100%);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);border:1px solid rgba(255,255,255,.2);box-shadow:0 20px 48px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16)}
.cd-num{font-size:clamp(46px,7.4vw,96px);font-weight:800;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums;direction:ltr;color:#fff}
.cd-split{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(0,0,0,.62);box-shadow:0 1px 0 rgba(255,255,255,.1)}
.cd-hinge-l{position:absolute;top:50%;left:-1px;width:7px;height:14px;margin-top:-7px;border-radius:0 7px 7px 0;background:rgba(255,255,255,.24)}
.cd-hinge-r{position:absolute;top:50%;right:-1px;width:7px;height:14px;margin-top:-7px;border-radius:7px 0 0 7px;background:rgba(255,255,255,.24)}
.cd-name{font-size:15px;font-weight:700;color:#E8E8EF;text-shadow:0 1px 10px rgba(0,0,0,.85)}
.cd-date{margin-top:26px;font-size:16px;color:rgba(255,255,255,.86);text-shadow:0 1px 12px rgba(0,0,0,.9)}

/* ---------- counter (round open) ---------- */
.counter{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:150px 24px 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.counter-veil{position:absolute;z-index:-1;top:36px;left:-22%;right:-22%;height:400px;pointer-events:none;background:radial-gradient(ellipse 62% 50% at 50% 50%,rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 52%,rgba(0,0,0,0) 100%)}
h2{margin:0;font-size:clamp(34px,4.6vw,56px);line-height:1.15;font-weight:800}
.counter-sub{margin:14px 0 0;max-width:560px;font-size:19px;line-height:1.7;color:#C9C9D3}
.gate-light{position:relative;margin-top:56px;width:min(780px,100%);height:24px}
.gate-bar{position:absolute;left:7%;right:7%;top:0;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(167,139,255,0),#C9B8FF 20%,#fff 50%,#C9B8FF 80%,rgba(167,139,255,0));box-shadow:0 0 46px 12px rgba(113,64,255,.7)}
.gate-cone{position:absolute;left:0;right:0;top:10px;height:300px;background:radial-gradient(ellipse 52% 100% at 50% 0,rgba(113,64,255,.36),rgba(113,64,255,0) 100%);clip-path:polygon(7% 0,93% 0,100% 100%,0 100%)}
.legend{position:relative;z-index:2;margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:28px;font-size:15px;color:#C9C9D3}
.legend-item{display:inline-flex;align-items:center;gap:10px}
.sq-taken{aspect-ratio:1/1;box-sizing:border-box;border-radius:10px 10px 6px 6px;background:linear-gradient(160deg,#9B7BFF,#7140FF);border:1px solid #A78BFF;box-shadow:0 0 16px rgba(113,64,255,.6),inset 0 2px 0 rgba(255,255,255,.3)}
.sq-free{aspect-ratio:1/1;box-sizing:border-box;border-radius:10px 10px 6px 6px;background:#12101C;border:1px solid #2D2942;box-shadow:inset 0 2px 0 rgba(255,255,255,.05)}
.sq-hidden{aspect-ratio:1/1;visibility:hidden}
.legend .sq-taken,.legend .sq-free{width:18px}
.nums{position:relative;z-index:2;margin-top:52px;width:100%;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:18px}
.num{flex:0 1 190px;aspect-ratio:1/1;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:72px;corner-shape:squircle;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.num-main{flex:0 1 232px;border-radius:86px;background:linear-gradient(180deg,rgba(113,64,255,.2),rgba(113,64,255,.06));border:1px solid rgba(167,139,255,.55);box-shadow:0 20px 60px rgba(113,64,255,.25)}
.num-val{font-size:clamp(40px,4.6vw,62px);line-height:1;font-weight:800}
.num-main .num-val{font-size:clamp(54px,6.4vw,88px);background:linear-gradient(180deg,#fff,#B9A2FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.num-label{margin-top:10px;font-size:16px;color:#C9C9D3}
.num-main .num-label{font-size:19px;font-weight:700;color:#E4DBFF}
.progress{margin-top:36px;width:min(720px,100%)}
.progress-row{display:flex;justify-content:space-between;font-size:15px;color:#C9C9D3}
.progress-track{margin-top:12px;height:12px;border-radius:999px;background:#17141F;border:1px solid #2A2638;overflow:hidden}
.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#6A38F5,#A78BFF);transition:width .6s ease}

/* ---------- telegram + footer ---------- */
.tg{position:relative;z-index:3;max-width:1100px;margin:0 auto;padding:48px 24px 12px;display:flex;flex-direction:column;align-items:center;text-align:center}
body.is-soldout .tg,body.is-loading .tg{padding-top:64px}
.tg-btn{display:inline-flex;align-items:center;gap:10px;height:58px;box-sizing:border-box;padding:0 36px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:linear-gradient(180deg,#7B52FF,#6A38F5);color:#fff;font-size:17px;font-weight:700;text-decoration:none;box-shadow:0 10px 26px rgba(113,64,255,.45),inset 0 1px 0 rgba(255,255,255,.26)}
.tg-btn:hover{color:#fff}
.footer{position:relative;z-index:2;padding:24px 24px 56px;text-align:center;font-size:14px;color:#8F8F9C}
.footer::before{content:"";position:absolute;z-index:-1;left:-20%;right:-20%;top:-90px;bottom:-40px;pointer-events:none;background:radial-gradient(ellipse 62% 50% at 50% 50%,rgba(0,0,0,.92) 0%,rgba(0,0,0,.84) 28%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.28) 78%,rgba(0,0,0,0) 100%)}
.footer-name{font-weight:700;color:#D4D4DD;text-shadow:0 1px 10px rgba(0,0,0,.95)}
.footer-sub{margin-top:6px;color:#A9A9B6;text-shadow:0 1px 10px rgba(0,0,0,.95)}
.nojs{position:relative;z-index:3;margin:24px;padding:16px;text-align:center;color:#fff;background:#17141F;border-radius:16px}

/* ---------- phone ---------- */
@media (max-width:560px){
br.m{display:inline}
.lead{font-size:18px}
.send{flex:1 1 100%}
.nums{flex-wrap:wrap;gap:12px}
.num{flex:1 1 calc(50% - 6px);max-width:calc(50% - 6px)}
.num-main{order:-1;flex:1 1 100%;max-width:100%;aspect-ratio:auto;min-height:168px;padding:24px 16px;border-radius:46px}
}