:root{
  --black:#000;
  --white:#f5f5f7; --grey:#8b8d88; --dim:#4a4d47;
  --lime:#b6f24d; --limeDeep:#7fbb1c;
  --hair:rgba(255,255,255,.09);
  --e:cubic-bezier(.28,.11,.32,1);
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--white);font-family:var(--sys);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:17px;line-height:1.47}
::selection{background:var(--lime);color:#000}
.narrow{max-width:680px;margin:0 auto;padding:0 24px}
.lime{color:var(--lime)}

/* nav */
nav{position:fixed;inset:0 0 auto;z-index:60;height:52px;
  background:rgba(0,0,0,.66);backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid transparent;transition:border-color .6s var(--e)}
nav.on{border-bottom-color:var(--hair)}
nav .narrow{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:1000px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--white)}
.brand .bead{width:8px;height:8px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 30%,#e6ffb8,var(--lime) 45%,var(--limeDeep));
  box-shadow:0 0 10px rgba(182,242,77,.7);animation:beadPulse 2.8s ease-in-out infinite}
@keyframes beadPulse{0%,100%{box-shadow:0 0 8px rgba(182,242,77,.55)}50%{box-shadow:0 0 16px rgba(182,242,77,.95)}}
.brand .name{font-size:14px;font-weight:500}
.navlink{font-size:13.5px;color:var(--white);text-decoration:none;opacity:.8;transition:opacity .3s}
.navlink:hover{opacity:1}

/* type */
h1{font-size:clamp(23px,5.4vw,64px);font-weight:600;line-height:1.08;letter-spacing:-.038em}
h2{font-size:clamp(30px,5vw,56px);font-weight:600;line-height:1.07;letter-spacing:-.034em}
.kicker{font-size:clamp(18px,2.2vw,23px);color:var(--grey);letter-spacing:-.016em;line-height:1.45}
.body{font-size:clamp(16.5px,1.9vw,20px);color:var(--grey);line-height:1.55;letter-spacing:-.012em}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:110px 0 70px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;
  background:linear-gradient(180deg,transparent,var(--black));pointer-events:none}
.hero > *{position:relative;z-index:2}

.orbwrap{width:min(268px,54vw);aspect-ratio:1;position:relative;margin-bottom:48px;
  animation:float 11s ease-in-out infinite}
.orb{position:absolute;inset:0;overflow:hidden;
  border-radius:50% 49% 51% 50% / 50% 51% 49% 50%;
  background:radial-gradient(circle at 36% 30%,#f2ffd4 0%,#cbf87a 13%,var(--lime) 29%,#79b81f 55%,#2a3d0d 76%,#080d03 100%);
  box-shadow:
    0 0 70px rgba(182,242,77,.30),
    0 0 190px rgba(182,242,77,.16),
    0 24px 80px rgba(0,0,0,.9),
    inset -18px -26px 60px rgba(0,0,0,.55),
    inset 8px 10px 40px rgba(255,255,255,.10);
  animation:breathe 6s ease-in-out infinite, morph 13s ease-in-out infinite, jitter 3.1s ease-in-out infinite}
.orb::before{content:"";position:absolute;inset:-25%;
  background:conic-gradient(from 0deg,transparent 0%,rgba(255,255,255,.20) 14%,transparent 38%,rgba(255,255,255,.10) 62%,transparent 84%);
  mix-blend-mode:overlay;filter:blur(9px);animation:spin 14s linear infinite;-webkit-mask:radial-gradient(circle,#000 54%,transparent 72%);mask:radial-gradient(circle,#000 54%,transparent 72%)}
.orb::after{content:"";position:absolute;inset:-30%;
  background:conic-gradient(from 180deg,transparent 0%,rgba(230,255,180,.16) 22%,transparent 46%,rgba(120,200,40,.16) 74%,transparent 96%);
  mix-blend-mode:soft-light;filter:blur(16px);animation:spinBack 22s linear infinite;-webkit-mask:radial-gradient(circle,#000 54%,transparent 72%);mask:radial-gradient(circle,#000 54%,transparent 72%)}
.halo{position:absolute;inset:-24%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(182,242,77,.22) 0%,transparent 62%);
  animation:pulse 6s ease-in-out infinite, shimmer 1.9s ease-in-out infinite}
.ring{position:absolute;inset:-9%;border-radius:50%;border:1px solid rgba(182,242,77,.16);
  animation:pulse 6s ease-in-out infinite .5s}
.ring2{position:absolute;inset:-16%;border-radius:50%;border:1px solid rgba(182,242,77,.07);
  animation:pulse 6s ease-in-out infinite 1s}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes jitter{0%,100%{translate:0 0}25%{translate:.9px -.7px}50%{translate:-.6px .9px}75%{translate:.5px .6px}}
@keyframes morph{
  0%,100%{border-radius:50% 49% 51% 50% / 50% 51% 49% 50%}
  33%{border-radius:52% 48% 49% 51% / 48% 50% 52% 50%}
  66%{border-radius:48% 52% 50% 49% / 51% 49% 50% 52%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.055)}}
@keyframes shimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinBack{to{transform:rotate(-360deg)}}

.hero .kicker{margin-top:24px;max-width:52ch}

/* the one form */
form{margin:40px auto 0;max-width:470px;width:100%;display:flex;gap:10px;padding:0 4px}
input{flex:1;min-width:0;background:rgba(255,255,255,.06);color:var(--white);
  border:1px solid var(--hair);border-radius:980px;padding:15px 22px;
  font-family:inherit;font-size:16px;letter-spacing:-.01em;
  transition:border-color .3s,background .3s,box-shadow .3s}
input::placeholder{color:var(--dim)}
input:focus{outline:none;border-color:rgba(182,242,77,.55);background:rgba(255,255,255,.09);
  box-shadow:0 0 0 4px rgba(182,242,77,.08)}
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  background:var(--lime);color:#080b04;border:0;border-radius:980px;
  padding:15px 28px;font-family:inherit;font-size:16px;font-weight:500;letter-spacing:-.01em;
  cursor:pointer;text-decoration:none;transition:opacity .3s var(--e),transform .3s var(--e)}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.fine{margin-top:16px;font-size:13px;color:var(--dim)}
.err{margin-top:10px;font-size:13px;color:#ff8f7a;min-height:17px}
.ok{display:none;margin-top:40px}
.ok.on{display:block;animation:fade .8s var(--e) both}
.ok .tick{width:46px;height:46px;margin:0 auto;border-radius:50%;
  border:1px solid rgba(182,242,77,.42);display:grid;place-items:center;color:var(--lime);font-size:19px}
.ok h3{margin-top:20px;font-size:24px;font-weight:600;letter-spacing:-.026em}
.ok p{margin:10px auto 0;max-width:34ch;font-size:16px;color:var(--grey);line-height:1.55}
form.gone,.fine.gone{display:none}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* device */
.stage{padding:clamp(80px,12vw,150px) 0;text-align:center}
.stage .body{margin:20px auto 0;max-width:44ch}

.phone{width:344px;max-width:84vw;aspect-ratio:9/19.2;margin:66px auto 0;position:relative;
  border-radius:54px;padding:11px;
  background:linear-gradient(160deg,#2c3028,#0c0f0a 42%,#1c211a);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 90px rgba(182,242,77,.10),
    inset 0 1px 0 rgba(255,255,255,.10)}
.screen{position:absolute;inset:11px;border-radius:44px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% -8%,#16210a 0%,#060803 55%,#000 100%);
  display:flex;flex-direction:column;align-items:center;padding:24px 14px 18px}
.island{width:80px;height:23px;border-radius:20px;background:#000;margin-bottom:22px;flex:none}
.time{font-size:54px;font-weight:250;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.date{margin-top:5px;font-size:13px;color:var(--grey)}

.feed{width:100%;margin-top:auto;display:flex;flex-direction:column;justify-content:flex-end;
  gap:8px;min-height:250px}
.notif{border-radius:20px;padding:13px 14px;text-align:left;
  background:rgba(255,255,255,.085);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.09);transform-origin:bottom center;
  animation:slideIn .7s var(--e) both}
.notif.old{opacity:.42;transform:scale(.955);filter:blur(.4px);
  transition:opacity .6s var(--e),transform .6s var(--e),filter .6s}
.notif.older{opacity:.16;transform:scale(.915)}
.notif.out{animation:slideOut .5s var(--e) both}
@keyframes slideIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
@keyframes slideOut{to{opacity:0;transform:translateY(-14px) scale(.94)}}
.nhead{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.nicon{width:19px;height:19px;border-radius:6px;flex:none;
  background:radial-gradient(circle at 34% 30%,#e6ffb8,var(--lime) 48%,var(--limeDeep));
  box-shadow:0 0 8px rgba(182,242,77,.4)}
.napp{font-size:10.5px;letter-spacing:.05em;color:rgba(255,255,255,.6);text-transform:uppercase}
.nwhen{margin-left:auto;font-size:10.5px;color:rgba(255,255,255,.4)}
.ntext{font-size:13.5px;line-height:1.43;letter-spacing:-.008em;color:rgba(255,255,255,.95);min-height:1.43em}
.ncaret{display:inline-block;width:2px;height:.95em;background:var(--lime);
  margin-left:2px;vertical-align:-2px;animation:blink .95s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.nsrc{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.07);
  font-size:10.5px;line-height:1.6;color:rgba(255,255,255,.42);
  opacity:0;transition:opacity .6s var(--e)}
.nsrc.in{opacity:1}
.nsrc b{color:rgba(182,242,77,.85);font-weight:500;letter-spacing:.04em;text-transform:uppercase;font-size:9.5px}

/* platform */
.platform{padding:clamp(80px,12vw,140px) 0 clamp(90px,13vw,150px);text-align:center}
.winwrap{max-width:1120px;margin:66px auto 0;padding:0 24px}
.win{border-radius:16px;overflow:hidden;text-align:left;
  background:linear-gradient(180deg,#0e120b,#050703);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 70px 140px -50px rgba(0,0,0,.98),0 0 100px rgba(182,242,77,.09),
    inset 0 1px 0 rgba(255,255,255,.07)}
.winbar{display:flex;align-items:center;gap:8px;padding:12px 16px;
  background:rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.07)}
.dot{width:11px;height:11px;border-radius:50%;flex:none}
.dot.r{background:#3a3d37}.dot.y{background:#33362f}.dot.g{background:#2d3029}
.wintitle{margin-left:12px;font-size:12px;color:var(--dim)}
.winbody{display:grid;grid-template-columns:196px 1fr 216px;min-height:430px}

.side{border-right:1px solid rgba(255,255,255,.06);padding:20px 14px;background:rgba(0,0,0,.25)}
.sbrand{display:flex;align-items:center;gap:8px;padding:0 8px 18px}
.sbrand .bead{width:9px;height:9px}
.sbrand span{font-size:13.5px;font-weight:500}
.snav{display:flex;flex-direction:column;gap:2px}
.snav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  font-size:13.5px;color:var(--grey);text-decoration:none;transition:background .2s,color .2s}
.snav a:hover{background:rgba(255,255,255,.04);color:var(--white)}
.snav a.act{background:rgba(182,242,77,.10);color:var(--lime)}
.snav a i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75;flex:none}
.slab{margin:22px 0 10px;padding:0 10px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.ment{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--grey)}
.mav{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:9.5px;font-weight:600;color:#0a0d05}

.main{padding:26px 28px;display:flex;flex-direction:column}
.mhead{display:flex;align-items:baseline;gap:10px;margin-bottom:20px}
.mhead h4{font-size:19px;font-weight:600;letter-spacing:-.02em}
.mhead span{font-size:12.5px;color:var(--dim)}
.mhead .pill{margin-left:auto;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lime);border:1px solid rgba(182,242,77,.28);background:rgba(182,242,77,.07);
  border-radius:500px;padding:5px 11px}
.acard{border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:22px;
  background:linear-gradient(180deg,rgba(182,242,77,.05),rgba(255,255,255,.012));
  transition:opacity .55s var(--e),transform .55s var(--e)}
.acard.fade{opacity:0;transform:translateY(10px)}
.awho{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.awho .mav{width:24px;height:24px;font-size:10px}
.awho b{font-size:13px;font-weight:500}
.awho em{font-style:normal;font-size:12px;color:var(--dim);margin-left:auto}
.asaid{font-size:17.5px;line-height:1.5;letter-spacing:-.014em;color:rgba(255,255,255,.96)}
.awhy{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);
  font-size:11.5px;line-height:1.75;color:var(--dim)}
.awhy b{color:rgba(182,242,77,.85);font-weight:500;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.aacts{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.abtn{border-radius:500px;padding:9px 17px;font-size:13px;font-family:inherit;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--white);transition:background .2s}
.abtn:hover{background:rgba(255,255,255,.06)}
.abtn.pri{background:var(--lime);color:#080b04;border-color:transparent;font-weight:500}
.abtn.pri:hover{opacity:.9;background:var(--lime)}
.queue{margin-top:auto;padding-top:22px}
.qlab{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.qitem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  font-size:13px;color:var(--grey);transition:background .3s,color .3s}
.qitem i{width:5px;height:5px;border-radius:50%;background:var(--dim);flex:none;transition:background .3s}
.qitem.act{background:rgba(255,255,255,.045);color:var(--white)}
.qitem.act i{background:var(--lime);box-shadow:0 0 8px rgba(182,242,77,.8)}
.qitem span{margin-left:auto;font-size:11.5px;color:var(--dim)}
.rail{border-left:1px solid rgba(255,255,255,.06);padding:24px 18px;background:rgba(0,0,0,.25)}
.rlab{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.src{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:13px;color:var(--grey)}
.src .tickmark{width:15px;height:15px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:8px;color:#0a0d05;background:var(--lime)}
.src em{font-style:normal;margin-left:auto;font-size:11px;color:var(--dim)}
.rnote{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);
  font-size:11.5px;line-height:1.65;color:var(--dim)}

/* new: modes + moat line (light) */
.modes{margin-top:22px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey)}
.creed{margin-top:20px;font-size:clamp(14px,1.6vw,16px);color:var(--dim);letter-spacing:-.006em}
.creed .lime{color:var(--lime)}
.moatline{padding:clamp(64px,10vw,120px) 0;text-align:center}
.moatline p{font-size:clamp(16px,2vw,20px);color:var(--grey);letter-spacing:-.012em;max-width:34ch;margin:0 auto}

/* footer */
footer{border-top:1px solid var(--hair);padding:34px 0 46px;text-align:center}
.love{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--grey)}
.love svg{width:14px;height:14px;fill:var(--lime);animation:shimmer 3.2s ease-in-out infinite}
.fmeta{margin-top:10px;font-size:12px;color:var(--dim)}
.fmeta a{color:var(--grey);text-decoration:none;transition:color .3s}
.fmeta a:hover{color:var(--lime)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--e),transform 1s var(--e)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

@media (max-width:1000px){
  .winbody{grid-template-columns:180px 1fr}
  .rail{display:none}
}
@media (max-width:820px){
  .phone{margin-top:50px}
  .winbody{grid-template-columns:1fr;min-height:0}
  .side{display:none}
  .main{padding:22px 20px}
  .asaid{font-size:16px}
  .winwrap{margin-top:46px;padding:0 18px}
}
@media (max-width:560px){
  form{flex-direction:column;gap:9px}
  .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}