header{background:linear-gradient(90deg,#eaf8f5 0,#c1e8e8 25%,#49acc0 58%,#08708f 82%,#063750 100%);border-bottom-color:#83d2dc;color:#fff;box-shadow:0 10px 28px #0637502e}
.logo{align-self:stretch;display:flex;align-items:center;padding:0 25px 0 8px;background:linear-gradient(90deg,#f8fcfb 70%,transparent);border-radius:0 34px 34px 0}
nav a{color:#effcff;text-shadow:0 1px 1px #06375055}.login{color:#fff}
.hero,.hero.search,.hero.join{position:relative;color:#fff;background:radial-gradient(circle at 8% 0%,#49acc05c 0,transparent 28%),radial-gradient(circle at 91% 18%,#21a9c33d 0,transparent 27%),linear-gradient(150deg,#0b2635,#08708f 60%,#063750)}
.hero:after{content:"";position:absolute;right:-110px;bottom:-110px;width:320px;height:320px;border:1px solid #ffffff21;border-radius:50%;pointer-events:none}.hero-copy,.hero-visual{position:relative;z-index:1}.hero .kicker{color:#75e8ed}.hero-copy>p{color:#d3edf1}.hero .plain{color:#75e8ed}.hero-copy>small{color:#bfe4ea}
.search-demo,.join-demo{color:var(--ink);border-color:#8fe6ec66;background:#f8fcfcef}.network-demo{border:1px solid #7be1e75c;background:radial-gradient(circle at 20% 0%,#49acc04c,transparent 35%),linear-gradient(150deg,#0b4e73,#087f98);box-shadow:0 30px 80px #001c2b80}
.proof{color:#fff;background:linear-gradient(90deg,#07506b,#087b9b)}.proof div{border-color:#aeeeff30}.proof b{color:#ffcf6a}.proof span{color:#c5eaf0}.benefits{background:linear-gradient(155deg,#0b4e73,#087f98)}.signup{background:linear-gradient(135deg,#eaf8f5,#c1e8e8 50%,#eef9f8)}
.button{background:#f7bb3f;box-shadow:0 4px 0 #d9951e,0 10px 22px #092f3a30}.button:hover{transform:translateY(-1px)}.draft-switch{background:#063750f2;border:1px solid #75e8ed55}
@media(max-width:850px){.logo{padding-right:14px;border-radius:0 25px 25px 0}.hero,.hero.search,.hero.join{background:radial-gradient(circle at 12% 0%,#49acc05c 0,transparent 25%),linear-gradient(165deg,#0b2635,#08708f 66%,#063750)}}

body[data-variant="b"]{position:relative;background:#071f2d}
body[data-variant="b"] .hero.search{isolation:isolate;overflow:hidden;background:radial-gradient(circle at 76% 30%,#2fc8d42b 0,transparent 29%),radial-gradient(circle at 10% 4%,#49acc05c 0,transparent 27%),linear-gradient(150deg,#081e2d,#075c7d 55%,#052d45)}
body[data-variant="b"] .hero.search:before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(#61dbe40e 1px,transparent 1px),linear-gradient(90deg,#61dbe40e 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,transparent 4%,#000 42%,#000 92%,transparent);transform:perspective(650px) rotateX(55deg) scale(1.35) translateY(10%);transform-origin:bottom;opacity:.85}
body[data-variant="b"] .hero.search:after{content:"";position:absolute;inset:0;z-index:-1;border:0;border-radius:0;background:radial-gradient(circle at 18% 68%,#6ff6ff 0 3px,transparent 4px),radial-gradient(circle at 43% 31%,#6ff6ff 0 2px,transparent 3px),radial-gradient(circle at 68% 72%,#6ff6ff 0 3px,transparent 4px),radial-gradient(circle at 88% 22%,#ffd46b 0 3px,transparent 4px),linear-gradient(31deg,transparent 0 35%,#5edbe51c 35.2% 35.5%,transparent 35.7% 100%),linear-gradient(145deg,transparent 0 61%,#5edbe51b 61.2% 61.5%,transparent 61.7% 100%);filter:drop-shadow(0 0 8px #44dce866)}
.data-atmosphere{position:absolute;top:82px;left:0;right:0;height:640px;z-index:0;pointer-events:none;overflow:hidden}.data-atmosphere i{position:absolute;width:8px;height:8px;border:1px solid #75e8ed;border-radius:50%;background:#0b5973;box-shadow:0 0 0 7px #57dbe410,0 0 18px #57dbe488;animation:dataFloat 7s ease-in-out infinite}.data-atmosphere i:nth-child(1){left:8%;top:22%}.data-atmosphere i:nth-child(2){left:31%;top:72%;animation-delay:-2s}.data-atmosphere i:nth-child(3){left:48%;top:18%;animation-delay:-4s}.data-atmosphere i:nth-child(4){left:67%;top:58%;animation-delay:-1s}.data-atmosphere i:nth-child(5){left:84%;top:35%;animation-delay:-5s}.data-atmosphere i:nth-child(6){left:93%;top:79%;animation-delay:-3s}@keyframes dataFloat{50%{transform:translateY(-12px);opacity:.45}}
body[data-variant="b"] header,body[data-variant="b"] main,body[data-variant="b"] footer{position:relative;z-index:1}
@media(max-width:850px){.data-atmosphere{top:68px;height:720px}body[data-variant="b"] .hero.search:before{background-size:34px 34px;opacity:.5}.data-atmosphere i:nth-child(even){display:none}}

.tech-layer{position:absolute;top:82px;left:0;right:0;height:640px;z-index:0;pointer-events:none;overflow:hidden}.tech-layer:before,.tech-layer:after{content:"";position:absolute;inset:0}
body:is([data-variant="d"],[data-variant="e"],[data-variant="f"],[data-variant="g"],[data-variant="h"],[data-variant="i"],[data-variant="j"]) header,body:is([data-variant="d"],[data-variant="e"],[data-variant="f"],[data-variant="g"],[data-variant="h"],[data-variant="i"],[data-variant="j"]) main,body:is([data-variant="d"],[data-variant="e"],[data-variant="f"],[data-variant="g"],[data-variant="h"],[data-variant="i"],[data-variant="j"]) footer{position:relative;z-index:1}
body[data-variant="d"] .hero{background:radial-gradient(circle at 50% 42%,#22c1cb3b,transparent 28%),linear-gradient(145deg,#071d2b,#075f7f 58%,#041f31)}body[data-variant="d"] .tech-layer:before{background:repeating-radial-gradient(circle at 70% 45%,#6ef1f238 0 1px,transparent 2px 44px);opacity:.8}
body[data-variant="e"] .hero{background:linear-gradient(120deg,#071d2b 0 48%,#087995 48% 100%)}body[data-variant="e"] .hero-visual{transform:translateY(18px) rotate(2deg)}body[data-variant="e"] .tech-layer:before{background:linear-gradient(90deg,transparent 49.8%,#79eef02d 50%,transparent 50.2%)}
body[data-variant="f"] .hero{background:radial-gradient(ellipse at 75% 44%,#168cb6 0,#0a4666 34%,#061c2a 67%)}body[data-variant="f"] .tech-layer:before{background-image:radial-gradient(#7cf4f4 1px,transparent 1px);background-size:27px 27px;mask-image:linear-gradient(90deg,transparent,#000 58%,transparent)}
body[data-variant="g"] .hero{background:linear-gradient(155deg,#071b29,#063d5a 45%,#0698a4)}body[data-variant="g"] .hero-visual{filter:drop-shadow(22px 28px 0 #52e3e20f)}body[data-variant="g"] .tech-layer:before{background:repeating-linear-gradient(120deg,transparent 0 38px,#61e6e60d 39px 40px)}
body[data-variant="h"] .hero{background:radial-gradient(circle at 20% 30%,#25b9c254,transparent 25%),linear-gradient(135deg,#062334,#075d7d 63%,#06304a)}body[data-variant="h"] .hero-visual{transform:scale(1.04)}body[data-variant="h"] .tech-layer:before{background:radial-gradient(circle at 15% 38%,transparent 0 55px,#82f3ee24 56px 57px,transparent 58px 90px,#82f3ee17 91px 92px,transparent 93px)}
body[data-variant="i"] .hero{background:linear-gradient(135deg,#061b2b,#07546f 52%,#087f98)}body[data-variant="i"] .tech-layer:before{background:conic-gradient(from 90deg at 70% 50%,transparent,#50e5e518,transparent 24%,#50e5e512,transparent 52%);animation:radarSpin 18s linear infinite}@keyframes radarSpin{to{transform:rotate(360deg)}}
body[data-variant="j"] .hero{background:radial-gradient(circle at 78% 46%,#00b8c346 0 2%,transparent 30%),linear-gradient(145deg,#061b28,#064666 55%,#031c30)}body[data-variant="j"] .tech-layer:before{background-image:linear-gradient(30deg,#65eff312 12%,transparent 12.5%,transparent 87%,#65eff312 87.5%),linear-gradient(150deg,#65eff312 12%,transparent 12.5%,transparent 87%,#65eff312 87.5%),linear-gradient(30deg,#65eff312 12%,transparent 12.5%,transparent 87%,#65eff312 87.5%);background-size:80px 140px;background-position:0 0,0 0,40px 70px;opacity:.7}
body[data-variant="e"] .hero-copy,body[data-variant="g"] .hero-copy{padding:34px;border:1px solid #73e7eb2b;border-radius:24px;background:#041b2975;backdrop-filter:blur(8px)}
body[data-variant="h"] .join-demo{border-radius:50px 18px 50px 18px}body[data-variant="j"] .search-demo{border-radius:8px 38px 8px 38px}
.draft-switch{max-width:calc(100vw - 28px);overflow-x:auto}.draft-switch a{flex:0 0 28px}
@media(max-width:850px){.tech-layer{top:68px;height:720px}.draft-switch{left:8px;right:8px;justify-content:center}.draft-switch span{display:none}}

.form-heading{padding-bottom:14px;border-bottom:1px solid var(--line)}.form-heading h3,.otp-preview h3{margin:6px 0 0;font-size:22px}.form-step{color:#087b9b;font-size:9px;font-weight:900;letter-spacing:1.3px}.signup form label small{color:#778b90;font-size:10px;font-weight:500}.verification-roadmap{display:grid;gap:10px;margin:26px 0}.verification-roadmap>span{display:grid;grid-template-columns:34px 1fr;column-gap:11px;padding:12px;border:1px solid #b9dcda;border-radius:12px;background:#ffffff9c}.verification-roadmap b{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:#fff;background:#087b9b}.verification-roadmap strong{font-size:12px}.verification-roadmap small{margin-top:2px;color:#647b80;font-size:10px}.otp-preview{margin-top:8px;padding:20px;border:1px solid #8bd4d5;border-radius:16px;background:#eefafa}.otp-preview p{color:#60787e;font-size:11px;line-height:1.5}.otp-boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:15px}.otp-boxes i{height:44px;border:1px solid #a8d4d4;border-radius:9px;background:#fff;box-shadow:inset 0 -3px #d7eeee}
