:root{
  --u: min(calc(100vw / 1280), calc(100dvh / 760));
  --ink:#ffffff; --ink-muted:#ededed; --panel:#181818;
  --white-btn:#fdfdfd; --btn-ink:#050505;
  --glass-fill:rgba(0,0,0,.78); --glass-line:rgba(255,255,255,.09);
  --dx:8.5; --dy:13.1;
  --e-reveal:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.25,.8,.3,1);
}
@supports not (height: 100dvh){ :root{ --u: min(calc(100vw / 1280), calc(100vh / 760)); } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0;background:#06030D}
body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;color:var(--ink);
}

.hero{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#000}
@supports not (height: 100dvh){ .hero{height:100vh} }

.bg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100vw, calc(100dvh * 1.6));height:max(62.5vw, 100dvh);background-color:#000;
}
@supports not (height: 100dvh){ .bg{width:max(100vw, calc(100vh * 1.6));height:max(62.5vw, 100vh)} }

.nav{position:fixed;top:0;left:0;right:0;height:calc(67 * var(--u));
  display:flex;align-items:center;
  padding-left:calc(24.5 * var(--u));padding-right:calc(50.7 * var(--u));z-index:40;
  transition:background .3s var(--e-soft),border-color .3s var(--e-soft),backdrop-filter .3s var(--e-soft)}
.logo{font-weight:800;font-size:calc(19 * var(--u));letter-spacing:calc(0.2 * var(--u));
  transform:translateY(calc(-2.4 * var(--u)));line-height:1;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.nav-links{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translateX(calc(-23 * var(--u)));
  display:flex;align-items:center;gap:calc(24.3 * var(--u));white-space:nowrap}
.nav-links a{color:var(--ink-muted);text-decoration:none;font-size:calc(11.5 * var(--u));
  font-weight:500;letter-spacing:calc(-0.15 * var(--u));line-height:1;transition:color .18s ease}
.nav-links a:hover{color:#fff}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:calc(6.8 * var(--u))}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;
  text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.btn-login{height:calc(28 * var(--u));padding:0 calc(12.9 * var(--u));
  border-radius:calc(14 * var(--u));background:var(--panel);color:#e8e8e8;
  font-size:calc(11.5 * var(--u));font-weight:500;letter-spacing:calc(-0.15 * var(--u));
  transition:background .18s ease,color .18s ease}
.btn-login:hover{background:#232323;color:#fff}
.btn-nav-start{height:calc(28 * var(--u));padding-left:calc(13.5 * var(--u));
  padding-right:calc(14.5 * var(--u));border-radius:calc(14 * var(--u));
  background:var(--white-btn);color:var(--btn-ink);font-size:calc(11.1 * var(--u));
  font-weight:500;letter-spacing:0;gap:calc(7 * var(--u));transition:background .18s ease}
.btn-nav-start:hover{background:#fff}
.btn-nav-start .arw{width:calc(11.5 * var(--u));height:calc(9.6 * var(--u))}
.arw{flex:0 0 auto;display:block}
.burger{display:none;margin-left:auto;width:calc(40 * var(--u));height:calc(28 * var(--u));
  align-items:center;justify-content:center;background:var(--panel);
  border-radius:calc(14 * var(--u));border:0;cursor:pointer;padding:0}
.burger span{display:block;width:16px;height:1.5px;background:#ededed;border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;
  background:#ededed;border-radius:2px}
.burger span::before{top:-5px} .burger span::after{top:5px}

.hero-inner{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u)));
  width:max-content;text-align:center;z-index:2}
h1{margin:0;font-weight:500;font-size:calc(89 * var(--u));line-height:calc(90 * var(--u));
  letter-spacing:calc(-1 * var(--u));color:var(--ink)}
.ln{display:block} .ln-i{display:block}
.sub{margin:calc(16.1 * var(--u)) 0 0;font-weight:300;font-size:calc(17.4 * var(--u));
  line-height:calc(27 * var(--u));letter-spacing:calc(-0.30 * var(--u));color:#f6f6f6}
.ctas{margin-top:calc(21.8 * var(--u));display:flex;align-items:center;justify-content:center;
  transform:translateX(calc(-0.75 * var(--u)));gap:calc(7 * var(--u))}
.btn-lg{height:calc(39 * var(--u));border-radius:calc(19.5 * var(--u));
  font-size:calc(13.3 * var(--u));font-weight:500;letter-spacing:calc(-0.3 * var(--u));
  gap:calc(9 * var(--u))}
.btn-primary{background:var(--white-btn);color:var(--btn-ink);
  padding-left:calc(18.2 * var(--u));padding-right:calc(19.2 * var(--u));
  transition:background .18s ease,transform .18s ease}
.btn-primary:hover{background:#fff}
.btn-ghost{background:var(--glass-fill);color:#d9d9d9;padding:0 calc(17.4 * var(--u));
  border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background .18s ease,border-color .18s ease}
.btn-ghost:hover{background:rgba(0,0,0,.66);border-color:rgba(255,255,255,.16)}
.btn-lg .arw{width:calc(13 * var(--u));height:calc(10.8 * var(--u))}
a:focus-visible,button:focus-visible{outline:2px solid #a78bfa;outline-offset:3px;border-radius:99px}

.menu{display:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}

/* ---------------- TABLET ---------------- */
@media (max-width:1160px){
  :root{ --u: min(max(0.9px, min(calc(100vw / 1280), calc(100dvh / 760))),
                  calc((100vw - 72px) / 575), calc(100dvh / 620)); }
  .nav{height:max(58px, calc(67 * var(--u)));
    padding-left:max(24px, calc(28 * var(--u)));padding-right:max(24px, calc(28 * var(--u)))}
  .nav-links,.nav-actions{display:none}
  .burger{display:flex;width:max(46px, calc(48 * var(--u)));
    height:max(38px, calc(34 * var(--u)));border-radius:999px}
  .hero-inner{max-width:calc(100vw - 48px)}
  .sub{font-size:max(16px, calc(17.4 * var(--u)));line-height:max(25px, calc(27 * var(--u)))}
  .ctas{margin-top:max(26px, calc(21.8 * var(--u)));gap:max(10px, calc(7 * var(--u)))}
  .btn-lg{height:max(44px, calc(39 * var(--u)));border-radius:max(22px, calc(19.5 * var(--u)));
    font-size:max(15px, calc(13.3 * var(--u)));gap:max(10px, calc(9 * var(--u)))}
  .btn-primary{padding-left:max(21px, calc(18.2 * var(--u)));padding-right:max(22px, calc(19.2 * var(--u)))}
  .btn-ghost{padding-left:max(20px, calc(17.4 * var(--u)));padding-right:max(21px, calc(18.4 * var(--u)))}
  .btn-lg .arw{width:max(14px, calc(13 * var(--u)));height:max(11.6px, calc(10.8 * var(--u)))}
  .menu{position:fixed;top:calc(max(58px, calc(67 * var(--u))) - 6px);
    right:max(24px, calc(28 * var(--u)));width:min(320px, calc(100vw - 48px));
    background:rgba(10,10,12,.86);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:10px 8px 12px;
    flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.55);transform-origin:top right;z-index:5}
  .menu.open{display:flex;animation:menuIn .18s ease both}
  .menu a{color:var(--ink-muted);text-decoration:none;font-size:15px;font-weight:500;
    letter-spacing:calc(-0.15 * var(--u));padding:12px 14px;border-radius:12px;
    transition:background .18s ease,color .18s ease}
  .menu a:hover{background:rgba(255,255,255,.06);color:#fff}
  .menu .divider{height:1px;background:rgba(255,255,255,.08);margin:8px 14px}
  .menu .m-start{display:flex;align-items:center;justify-content:center;gap:9px;
    background:var(--white-btn);color:var(--btn-ink);margin:6px 8px 0;padding:13px 16px;
    border-radius:14px;font-weight:600}
  .menu .m-start:hover{background:#fff;color:var(--btn-ink)}
  .menu .m-start .arw{width:13px;height:11px}
}

/* ---------------- MOBILE ---------------- */
@media (max-width:552px){
  :root{--u:1px}
  .nav{height:56px;padding:0 20px}
  .logo{font-size:17px;letter-spacing:-.2px}
  .burger{width:42px;height:36px}
  .hero-inner{position:absolute;left:0;right:0;top:50%;width:auto;max-width:none;
    padding:0 20px;transform:translateY(-47%)}
  h1{font-size:min(74px, calc((100vw - 44px) / 6.9));line-height:1.04;letter-spacing:-.02em}
  .sub{margin-top:16px;font-size:clamp(15.5px, 4vw, 16.5px);line-height:1.6;letter-spacing:0;
    max-width:42ch;margin-left:auto;margin-right:auto}
  .sub br{display:none}
  .ctas{margin-top:24px;gap:10px;transform:none;flex-wrap:wrap}
  .btn-lg{height:46px;border-radius:23px;font-size:15px;gap:9px}
  .btn-primary{padding-left:20px;padding-right:21px}
  .btn-ghost{padding-left:19px;padding-right:20px}
  .btn-lg .arw{width:13px;height:11px}
  .menu{top:50px;left:16px;right:16px;width:auto}
  .menu a{font-size:15.5px;padding:13px 14px}
  .menu .m-start{padding:14px 16px}
}
@media (max-width:353px){
  .ctas{flex-direction:column;align-items:center}
  .btn-lg{width:min(100%,272px)}
}
@media (max-width:552px) and (max-height:460px){
  h1{font-size:min(44px, calc((100vw - 44px) / 6.9))}
  .sub{margin-top:12px;font-size:15px;line-height:1.5}
  .ctas{margin-top:18px}
  .hero-inner{transform:translateY(-44%)}
}

/* ---------------- ENTRANCE ---------------- */
html.anim .ln{overflow:hidden;padding-top:.26em;margin-top:-.26em}
html.anim .ln-i{transform:translateY(100%)}
html.anim .nav .logo, html.anim .nav-links a, html.anim .nav-actions .btn,
html.anim .burger, html.anim .hero .sub,
html.anim .hero > .hero-inner .ctas .btn{opacity:0}
.ln-i,.nav .logo,.nav-links a,.nav-actions .btn,.hero .sub,
.hero > .hero-inner .ctas .btn{will-change:transform,opacity}

@keyframes lineRise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes subIn{from{opacity:0;transform:translateY(calc(14 * var(--u)));filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}}
@keyframes subInFlat{from{opacity:0;transform:translateY(calc(12 * var(--u)))}to{opacity:1;transform:none}}
@keyframes pillIn{from{opacity:0;transform:translateY(calc(8 * var(--u))) scale(.972)}to{opacity:1;transform:none}}
@keyframes liftIn{from{opacity:0;transform:translateY(calc(9 * var(--u)))}to{opacity:1;transform:none}}
@keyframes logoIn{
  from{opacity:0;transform:translateY(calc(-2.4 * var(--u))) translateY(calc(9 * var(--u)))}
  to{opacity:1;transform:translateY(calc(-2.4 * var(--u)))}}

html.anim.go .ln-i{animation:lineRise 1.05s var(--e-reveal) both}
html.anim.go .ln:nth-child(1) .ln-i{animation-delay:.12s}
html.anim.go .ln:nth-child(2) .ln-i{animation-delay:.22s}
html.anim.go .nav .logo{animation:logoIn .62s var(--e-soft) .46s both}
html.anim.go .nav-links a{animation:liftIn .55s var(--e-soft) both}
html.anim.go .nav-links a:nth-child(1){animation-delay:.540s}
html.anim.go .nav-links a:nth-child(2){animation-delay:.585s}
html.anim.go .nav-links a:nth-child(3){animation-delay:.630s}
html.anim.go .nav-links a:nth-child(4){animation-delay:.675s}
html.anim.go .nav-links a:nth-child(5){animation-delay:.720s}
html.anim.go .hero .sub{animation:subIn .85s var(--e-reveal) .58s both}
html.anim.go .btn-login{animation:pillIn .55s var(--e-soft) .68s both}
html.anim.go .burger{animation:pillIn .55s var(--e-soft) .68s both}
html.anim.go .btn-nav-start{animation:pillIn .55s var(--e-soft) .73s both}
html.anim.go .hero > .hero-inner .ctas .btn-primary{animation:pillIn .70s var(--e-reveal) .90s both}
html.anim.go .hero > .hero-inner .ctas .btn-ghost{animation:pillIn .70s var(--e-reveal) .97s both}

@media (max-width:552px){
  html.anim.go .hero .sub{animation-name:subInFlat}
  html.anim.go .ln-i{animation-duration:.92s}
  html.anim.go .hero > .hero-inner .ctas .btn-primary{animation-delay:.84s}
  html.anim.go .hero > .hero-inner .ctas .btn-ghost{animation-delay:.90s}
}
@media (prefers-reduced-motion:reduce){
  html.anim .ln{overflow:visible;padding-top:0;margin-top:0}
  html.anim .ln-i{transform:none}
  html.anim .nav .logo, html.anim .nav-links a, html.anim .nav-actions .btn,
  html.anim .burger, html.anim .sub, html.anim .ctas .btn{opacity:1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}
  *{transition-duration:.01ms!important}}

/* ---- coded globe ---- */
.bg{background:radial-gradient(120% 95% at 50% 118%, #1A0E3C 0%, #0C0818 52%, #06030D 100%)}
.globe{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* current page in the nav */
.nav-links a[aria-current="page"]{color:#fff}
.menu a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.05)}