/* Static responsive landing page. System fonts avoid third-party font requests. */

*{box-sizing:border-box}
html{background:#050e16;color:#f6f8f9;font-family:Arial,Helvetica,sans-serif}
body{margin:0}
.hero{--u:calc(100vw / 1448);position:relative;width:100%;height:calc(528 * var(--u));min-height:430px;overflow:hidden;border-bottom:1px solid #344c5b}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
header{position:relative;z-index:1;height:calc(86 * var(--u));display:flex;align-items:center;padding:0 calc(61 * var(--u));gap:calc(92 * var(--u));white-space:nowrap}
.brand{display:flex;align-items:center;gap:calc(15 * var(--u));color:#eaf0f5;text-decoration:none;font-weight:600;font-size:calc(14 * var(--u));letter-spacing:calc(3 * var(--u))}
.brand img{width:calc(64 * var(--u));margin-left:calc(-6 * var(--u))}
nav{display:flex;gap:calc(40 * var(--u));font-size:calc(14 * var(--u));margin-left:calc(-3 * var(--u))}
a{color:inherit;text-decoration:none}
a:hover{color:#4df4e3}
a:focus-visible,button:focus-visible{outline:2px solid #3ce6db;outline-offset:5px}
.actions{display:flex;gap:calc(16 * var(--u));margin-left:calc(156 * var(--u))}
.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #38e6db;border-radius:6px;height:calc(40 * var(--u));padding:0 calc(25 * var(--u));font-size:calc(15 * var(--u));white-space:nowrap}
.primary{background:#2cdad1;color:#03151c;font-weight:600}
.primary:hover{background:#62eee3;color:#03151c}
.copy{position:absolute;z-index:1;left:calc(61 * var(--u));top:calc(117 * var(--u))}
.eyebrow{font-size:calc(11 * var(--u));letter-spacing:calc(3 * var(--u));color:#769aad;margin:0 0 calc(20 * var(--u))}
h1{font-weight:600;font-size:calc(74 * var(--u));line-height:1.05;letter-spacing:calc(-2.5 * var(--u));margin:0 0 calc(34 * var(--u))}
h1 span{color:#1dd2cd}
.description{font-size:calc(21 * var(--u));color:#c0ccda;margin:0 0 calc(29 * var(--u));white-space:normal;max-width:calc(570 * var(--u));line-height:1.45}
.cta{display:flex;align-items:center;gap:calc(36 * var(--u))}
.cta .button{height:calc(46 * var(--u));min-width:calc(189 * var(--u))}
.secondary{font-size:calc(15 * var(--u));color:#b7ccdb}
.note{margin:calc(105 * var(--u)) 0 0;color:#7092a6;font-size:calc(12 * var(--u))}
#motion{position:absolute;right:20px;bottom:18px;width:30px;height:30px;border:1px solid #27434b;border-radius:50%;background:#061119aa;color:#79b8bd;display:grid;place-items:center;cursor:pointer}
#motion svg{width:10px;height:10px}
.concept-label{z-index:2;position:absolute;right:2.2%;top:16px;font-size:9px;letter-spacing:1px;color:#769aad}
@media(max-width:1300px){.concept-label{display:none}
}
.community{padding:38px 4.2vw 32px}
.community p{color:#769aad;font-size:11px;letter-spacing:3px;margin:0 0 16px}
.community h2{font-size:clamp(28px,4vw,58px);line-height:1.1;font-weight:600;letter-spacing:-2px;margin:0}

@media(min-width:1600px){.hero{--u:calc(1600px / 1448);max-width:1600px;margin:auto}
.community{max-width:1600px;margin:auto}
}

@media(max-width:1100px){header{gap:30px}
nav{gap:22px}
.actions{margin-left:auto}
.hero{min-height:430px}
.copy{top:110px}
h1{font-size:66px}
.eyebrow{font-size:10px}
.description{font-size:16px}
.button,.secondary{font-size:12px}
.button{min-height:34px}
.note{font-size:10px}
.brand{font-size:11px;letter-spacing:2px}
.brand img{min-width:48px}
nav{font-size:12px}
}

@media(max-width:760px){.hero{height:760px}
header{height:80px;padding:0 22px}
.brand{font-size:10px;letter-spacing:2px;gap:8px}
.brand img{width:48px}
nav,.actions{display:none}
.copy{left:24px;top:123px;right:24px}
.eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:24px}
h1{font-size:clamp(42px,10vw,72px);line-height:1;letter-spacing:-1.5px;margin-bottom:22px}
.description{font-size:16px;white-space:normal;line-height:1.55;max-width:330px;margin-bottom:24px}
.cta{gap:20px;flex-wrap:wrap}
.cta .button{height:44px;min-width:168px}
.secondary{font-size:12px}
.note{font-size:10px;margin-top:24px}
.community{padding:28px 24px}
.community h2{letter-spacing:-1px}
}

header .socials{margin-left:auto;margin-right:calc(150 * var(--u));gap:calc(54 * var(--u));display:flex}
@media(max-width:760px){header .socials{margin:0 0 0 auto;gap:14px;font-size:11px}
.note{margin-top:34px}
.brand{font-size:9px;letter-spacing:1px}
.brand img{width:40px;min-width:40px}
header{gap:14px;padding:0 18px}
}
html{scroll-behavior:smooth}