/* ============ Weyv early access: one screen, always dark ============
   Motion rules: transform and opacity only for everything on the page and the popups themselves.
   Two tiny exceptions inside small SVGs: the 18px success tick draws its stroke, and the toggle
   in the last "Why Weyv" illustration changes fill colour.
   Every animation fills "backwards" only, so the resting state is always the plain CSS below:
   if an animation never runs (reduced motion, old browser), the page is simply there. */
/* Fallback faces sized to match Young Serif, so the headline keeps its line breaks when the web font swaps in. */
@font-face{font-family:"YS Georgia";src:local("Georgia");size-adjust:111%}
@font-face{font-family:"YS Times";src:local("Times New Roman");size-adjust:121%}
:root{
  --page:#060919; --ink:#F3F5FF; --blue:#3B5BFF; --navy:#0E1533; --mint:#38D9A9; --lilac:#B9A6FF;
  --serif:'Young Serif','YS Georgia','YS Times',Georgia,'Times New Roman',serif;
  --jak:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gap:12px; --r-card:40px;
  /* page padding, never smaller than the device safe area */
  --pt:max(var(--gap),env(safe-area-inset-top,0px)); --pr:max(var(--gap),env(safe-area-inset-right,0px));
  --pb:max(var(--gap),env(safe-area-inset-bottom,0px)); --pl:max(var(--gap),env(safe-area-inset-left,0px));
  --out:cubic-bezier(.2,.75,.2,1); --spring:cubic-bezier(.2,.9,.25,1.14);
  color-scheme:dark;
}

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--page);overscroll-behavior:none}
body{margin:0;padding:var(--pt) var(--pr) var(--pb) var(--pl);background:var(--page);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:12px}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:#F3F5FF;color:var(--navy);padding:12px 18px;border-radius:99px;font:700 15px var(--jak);text-decoration:none}
.skip:focus{top:calc(16px + env(safe-area-inset-top,0px))}

/* ============ logo ============ */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;padding:calc(var(--pt) + 8px) calc(var(--pr) + clamp(24px,5vw,72px)) 0 calc(var(--pl) + clamp(24px,5vw,72px));pointer-events:none}
.logo{display:block;line-height:0;border-radius:12px;margin-left:-4px;pointer-events:auto;animation:logo-in .5s var(--out) backwards}
.logo-mark{width:clamp(64px,5.5vw,80px);height:auto;transform-origin:26% 88%;animation:wave .9s .25s ease-in-out backwards}
@keyframes logo-in{from{opacity:0;transform:scale(.82)}}
@keyframes wave{0%,100%{transform:rotate(0)}22%{transform:rotate(-13deg)}46%{transform:rotate(9deg)}68%{transform:rotate(-6deg)}86%{transform:rotate(3deg)}}
@keyframes wave-again{0%,100%{transform:rotate(0)}22%{transform:rotate(-13deg)}46%{transform:rotate(9deg)}68%{transform:rotate(-6deg)}86%{transform:rotate(3deg)}}
.logo:active .logo-mark{animation:wave-again .7s ease-in-out}

/* ============ the screen ============ */
.foot{position:relative;overflow:hidden;border-radius:var(--r-card);color:#fff;
  background:linear-gradient(150deg,#6A55F2 0%,#4D4FF0 45%,#3B5BFF 100%);
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--pt) - var(--pb));min-height:calc(100dvh - var(--pt) - var(--pb));
  padding:clamp(96px,11vh,120px) clamp(24px,5vw,72px) clamp(20px,3vw,36px)}
.foot>*{position:relative}

/* soft gradient drift: three pre-blurred radial gradients, moved by transform only */
.drift{position:absolute!important;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;animation:fade-in 1.2s ease-out backwards}
.drift i{position:absolute;border-radius:50%;will-change:transform}
.drift i:nth-child(1){width:78vmax;height:78vmax;left:-30vmax;top:-34vmax;background:radial-gradient(closest-side,rgba(126,64,240,.55),rgba(126,64,240,0));animation:drift-a 19s ease-in-out infinite alternate}
.drift i:nth-child(2){width:86vmax;height:86vmax;right:-34vmax;bottom:-44vmax;background:radial-gradient(closest-side,rgba(24,44,200,.45),rgba(24,44,200,0));animation:drift-b 23s ease-in-out infinite alternate}
.drift i:nth-child(3){width:54vmax;height:54vmax;left:34%;top:38%;background:radial-gradient(closest-side,rgba(185,166,255,.2),rgba(185,166,255,0));animation:drift-c 27s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate3d(16vmax,10vmax,0) scale(1.12)}}
@keyframes drift-b{to{transform:translate3d(-18vmax,-12vmax,0) scale(1.1)}}
@keyframes drift-c{from{transform:translate3d(-10vmax,4vmax,0)}to{transform:translate3d(8vmax,-6vmax,0) scale(1.15)}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}

.foot-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.foot-title{font:400 clamp(30px,4vw,58px)/1.04 var(--serif);letter-spacing:-.025em;margin-bottom:28px}
.foot-title .ln{display:block}
.foot-title .w{display:inline-block;animation:rise .62s var(--out) backwards;animation-delay:calc(80ms + var(--i,0)*48ms)}
@keyframes rise{from{opacity:0;transform:translateY(.42em)}}

/* button: entrance uses transform, hover/press use the separate `scale` property;
   GSAP moves the .mag wrapper for the magnetic pull, so the two never fight */
.mag{display:inline-block;vertical-align:top}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:99px;border:0;font:700 15px/1 var(--jak);text-decoration:none;cursor:pointer;white-space:nowrap;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:scale .28s var(--spring);animation:rise-s .55s .42s var(--out) backwards}
.btn-white{background:#fff;color:var(--navy)}
.btn-lg{height:54px;padding:0 28px;font-size:16px}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 14px 34px rgba(14,21,51,.32);opacity:0;transition:opacity .28s ease;pointer-events:none}
.btn:active{scale:.955;transition-duration:.09s}
.btn:focus-visible{border-radius:99px}
@keyframes rise-s{from{opacity:0;transform:translateY(14px)}}

.foot-nav ul{display:grid;gap:12px;align-content:start}
.foot-nav a{position:relative;display:inline-block;font:600 16px var(--jak);color:#fff;text-decoration:none;touch-action:manipulation;transition:opacity .15s;animation:rise-s .55s .5s var(--out) backwards}
.foot-small a{position:relative;color:#fff;text-decoration:none;transition:opacity .15s}
/* underline that grows from the left (transform only) */
.foot-nav a::after,.foot-small a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--out)}
.foot-nav a:focus-visible::after,.foot-small a:focus-visible::after{transform:scaleX(1)}
.foot-nav a:active,.foot-small a:active{opacity:.6}

/* wordmark: a faint outline first, then the solid mark wipes in left to right.
   The wipe is two opposite translations (clip moves in, content moves back): compositor only. */
.foot-wm{flex:1 1 0;min-height:0;width:100%;align-self:stretch;margin-top:clamp(36px,5vw,70px);color:rgba(255,255,255,.94)}
.wm-par{position:absolute;inset:0}
.wm-par svg{position:absolute;inset:0;width:100%;height:100%}
.wm-ghost{opacity:0;animation:ghost 1.5s linear backwards}
.wm-clip,.wm-fill{position:absolute;inset:0}
.wm-clip{overflow:hidden;animation:wipe-clip 1.05s .34s cubic-bezier(.6,0,.2,1) backwards}
.wm-fill{animation:wipe-fill 1.05s .34s cubic-bezier(.6,0,.2,1) backwards}
@keyframes wipe-clip{from{transform:translateX(-100%)}}
@keyframes wipe-fill{from{transform:translateX(100%)}}
@keyframes ghost{0%{opacity:0}30%,82%{opacity:.2}100%{opacity:0}}

.foot-small{display:flex;justify-content:space-between;gap:16px;margin-top:20px;font:500 14px var(--sans);color:#fff;animation:fade-in .6s .75s ease-out backwards}

/* hover only where a real pointer can hover: nothing sticks on touch */
@media (hover:hover){
  .btn:hover{scale:1.035}
  .btn:hover::after{opacity:1}
  .btn:active{scale:.955}
  .foot-nav a:hover::after,.foot-small a:hover::after{transform:scaleX(1)}
  .logo:hover .logo-mark{animation:wave-again .7s ease-in-out}
  .wl-go:hover{background:#2f4ce6}
  .wl-x:hover{background:#E4E9FF}
  .why-x:hover{background:rgba(255,255,255,.2)}
}

/* ============ popups: shared motion ============ */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none}
dialog::backdrop{background:rgba(14,21,51,.62)}
dialog[open]{animation:fade-in .24s ease-out backwards}
dialog[open]::backdrop{animation:fade-in .3s ease-out backwards}
dialog.is-closing{animation:fade-out .2s ease-in forwards;pointer-events:none}
dialog.is-closing::backdrop{animation:fade-out .22s ease-in forwards}
@keyframes card-in{from{transform:translateY(18px) scale(.955)}}
@keyframes card-out{to{transform:translateY(10px) scale(.975)}}

/* ============ early-access popup ============ */
#wl-dlg{color:var(--navy);margin:auto;overflow:visible}
#wl-dlg[open] .wl-card{animation:card-in .44s var(--spring) backwards}
#wl-dlg.is-closing .wl-card{animation:card-out .2s ease-in forwards}
.wl-card{position:relative;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:28px;padding:34px 30px 28px;box-shadow:0 30px 80px rgba(14,21,51,.35);font-family:var(--sans)}
.wl-x{position:absolute;top:14px;right:14px;z-index:1;width:36px;height:36px;border-radius:50%;border:0;background:#F1F4FF;color:var(--navy);font-size:20px;line-height:1;cursor:pointer;touch-action:manipulation;transition:scale .2s var(--spring),background-color .15s}
.wl-x::before,.why-x::before{content:"";position:absolute;inset:-6px}   /* 44px+ touch target */
.wl-x:active,.why-x:active{scale:.9}
.wl-mk{width:44px;height:44px;margin-bottom:14px}
.wl-card h2{font:400 28px/1.15 var(--serif);margin:0}
.wl-sub{margin:8px 0 0;color:#4b5270;font-size:15px;line-height:1.45}
.wl-card form{margin-top:22px;display:flex;flex-direction:column}
.wl-f{margin-bottom:14px}
.wl-f label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.wl-f input{width:100%;height:50px;padding:0 16px;border:1.5px solid #D9DEF2;border-radius:14px;font:500 16px var(--sans);color:var(--navy);background:#F8F9FF}
.wl-f input::placeholder{color:#6a7089;opacity:1}
.wl-f input:focus{border-color:var(--blue);background:#fff;outline:none;box-shadow:0 0 0 4px rgba(59,91,255,.18)}
.wl-f input[aria-invalid=true]{border-color:#E5484D}
.wl-f input[aria-invalid=true]:focus{box-shadow:0 0 0 4px rgba(229,72,77,.16)}
.wl-err{color:#C2272D;font-size:13px;margin-top:6px}
.wl-err:empty{display:none}
/* honeypot: off-screen, not display:none (bots skip hidden fields, people never reach it) */
.wl-hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.wl-ts:not(:empty){display:flex;justify-content:center}
.wl-ts iframe{max-width:100%}
.wl-go{height:54px;border:0;border-radius:999px;background:var(--blue);color:#fff;font:600 17px var(--sans);cursor:pointer;margin-top:4px;touch-action:manipulation;transition:scale .25s var(--spring),background-color .15s,opacity .15s}
.wl-go:active{scale:.97;transition-duration:.09s}
.wl-go[disabled]{opacity:.6;cursor:default;scale:1}
.wl-fine{font-size:12.5px;color:#5d6380;text-align:center;margin:14px 0 0}
.wl-card :focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wl-go:focus-visible{border-radius:999px}
.wl-x:focus-visible,.why-x:focus-visible{border-radius:50%}

/* success: the logo waves, a mint tick pops on its corner and draws itself */
.wl-done{display:none;text-align:center}
.wl-card.sent{display:grid;align-content:center}
.wl-card.sent form,.wl-card.sent .wl-head{display:none}
.wl-card.sent .wl-done{display:block;animation:done-in .45s var(--out) backwards}
.wl-badge{position:relative;width:76px;height:76px;margin:0 auto 18px}
.wl-wave{width:76px;height:76px;transform-origin:26% 88%}
.wl-card.sent .wl-wave{animation:wave .95s .12s ease-in-out backwards}
.wl-tick{position:absolute;right:-8px;bottom:-4px;width:32px;height:32px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px #fff;display:grid;place-items:center}
.wl-card.sent .wl-tick{animation:pop .42s .55s var(--spring) backwards}
.wl-tick path{stroke-dasharray:1;stroke-dashoffset:0}
.wl-card.sent .wl-tick path{animation:draw .34s .8s ease-out backwards}
@keyframes done-in{from{opacity:0;transform:translateY(10px)}}
@keyframes pop{from{opacity:0;transform:scale(.3)}}
@keyframes draw{from{stroke-dashoffset:1}}

/* ============ Why Weyv popup: 4 columns ease in from the right, one by one ============ */
#why-dlg{color:#fff;margin:0;inset:0;width:100%;height:100%;overflow:hidden auto;overscroll-behavior:contain}
#why-dlg[open]{display:flex}
#why-dlg::backdrop{background:rgba(6,9,25,.94)}   /* no blur on touch devices, so darker */
#why-dlg.is-closing .why-card{animation:card-out .2s ease-in forwards}
.why-card{position:relative;margin:auto;width:min(1180px,calc(100% - 32px));padding:clamp(20px,3vw,40px);font-family:var(--sans)}
.why-card h2{font:400 clamp(28px,3.4vw,44px)/1.1 var(--serif);margin:0 0 clamp(22px,3vw,38px);max-width:14em;animation:rise-s .6s .04s var(--out) backwards}
.why-card h2 em{font-style:normal;color:#9DAEFF}
.why-x{position:fixed;z-index:2;top:calc(20px + env(safe-area-inset-top,0px));right:calc(20px + env(safe-area-inset-right,0px));width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer;touch-action:manipulation;transition:scale .2s var(--spring),background-color .15s}
.why-x:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
.why-col{animation:why-slide .7s var(--out) backwards}
.why-col:nth-child(1){animation-delay:.1s}.why-col:nth-child(2){animation-delay:.25s}.why-col:nth-child(3){animation-delay:.4s}.why-col:nth-child(4){animation-delay:.55s}
@keyframes why-slide{from{opacity:0;transform:translateX(64px)}}
.why-ill{height:140px;display:grid;place-items:center start;margin-bottom:14px}
.why-ill svg{width:120px;height:120px;overflow:visible}
.why-col h3{font:700 19px/1.2 var(--jak);margin:0 0 6px}
.why-col p{margin:0;color:rgba(255,255,255,.72);font-size:15px;line-height:1.45}
/* nearby: pin + radar rings */
.why-ill .ring{transform-origin:65px 70px;fill:none;stroke:#9DAEFF;stroke-width:2;opacity:0;animation:ring 2.6s ease-out infinite}
.why-ill .ring.r2{animation-delay:.9s}.why-ill .ring.r3{animation-delay:1.8s}
@keyframes ring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.why-ill .pin{transform-origin:65px 70px;animation:pinbob 2.6s ease-in-out infinite}
@keyframes pinbob{50%{transform:translateY(-5px)}}
.why-ill .dotp{animation:dotp 2.6s ease-in-out infinite;transform-origin:center}
.why-ill .dotp.d2{animation-delay:.7s}.why-ill .dotp.d3{animation-delay:1.4s}
@keyframes dotp{0%,100%{opacity:.25}50%{opacity:1}}
/* wave: hand waves, ripple */
.why-ill .hand{transform-origin:62px 98px;animation:hand 1.8s ease-in-out infinite}
@keyframes hand{0%,100%{transform:rotate(0)}15%{transform:rotate(22deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(20deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(0)}}
.why-ill .wr{fill:none;stroke:var(--mint);stroke-width:2.5;stroke-linecap:round;opacity:0;animation:wr 1.8s ease-out infinite}
.why-ill .wr.w2{animation-delay:.3s}
@keyframes wr{0%{opacity:0;transform:translateX(-6px)}30%{opacity:.9}100%{opacity:0;transform:translateX(8px)}}
/* chat: bubbles pop alternately */
.why-ill .b1{transform-origin:40px 62px;animation:b1 3.2s ease-in-out infinite}
.why-ill .b2{transform-origin:92px 92px;animation:b2 3.2s ease-in-out infinite}
@keyframes b1{0%,6%{transform:scale(0);opacity:0}14%,86%{transform:scale(1);opacity:1}100%{opacity:0;transform:scale(1)}}
@keyframes b2{0%,40%{transform:scale(0);opacity:0}50%,86%{transform:scale(1);opacity:1}100%{opacity:0;transform:scale(1)}}
.why-ill .td{animation:td 1s ease-in-out infinite}.why-ill .td.t2{animation-delay:.15s}.why-ill .td.t3{animation-delay:.3s}
@keyframes td{50%{transform:translateY(-3px);opacity:.5}}
/* visibility: eye + toggle */
.why-ill .lid{transform-origin:65px 56px;animation:blink 4s ease-in-out infinite}
@keyframes blink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
.why-ill .knob{animation:knob 4s ease-in-out infinite}
@keyframes knob{0%,35%{transform:translateX(0)}45%,85%{transform:translateX(22px)}95%,100%{transform:translateX(0)}}
.why-ill .trk{fill:rgba(255,255,255,.25);animation:trk 4s ease-in-out infinite}
@keyframes trk{0%,35%{fill:rgba(255,255,255,.25)}45%,85%{fill:#38D9A9}95%,100%{fill:rgba(255,255,255,.25)}}

/* background blur only for mouse devices: a full-screen blur is the costly part on phones */
@media (hover:hover) and (pointer:fine){
  dialog::backdrop{background:rgba(14,21,51,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  #why-dlg::backdrop{background:rgba(6,9,25,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
}

/* ============ responsive ============ */
@media (max-width:1000px){.why-grid{grid-template-columns:repeat(2,1fr)}.why-card{width:100%}}
@media (max-width:820px){
  :root{--gap:8px;--r-card:30px}
  .foot-top{flex-direction:column;gap:32px}
}
@media (max-width:640px){
  .bar{padding:calc(var(--pt) + 12px) calc(var(--pr) + 24px) 0 calc(var(--pl) + 24px)}
  .logo{margin-left:0}
  .logo-mark{width:56px}
  .foot{padding:88px 24px 20px}
  .foot-top{gap:0}
  .foot-title{font-size:clamp(34px,10.4vw,44px);line-height:1.06;margin-bottom:24px}
  .foot-blurb{display:flex;flex-direction:column;align-items:flex-start}
  .btn-lg{height:52px;padding:0 16px;font-size:14px}
  .foot-nav{margin-top:20px}
  .foot-nav a{padding:10px 0}
  .foot-nav a::after{bottom:7px}
  /* the wordmark keeps its 3:1 box (plus 24px breathing room) and takes any spare height */
  .foot-wm{flex:1 1 calc((100vw - var(--pl) - var(--pr) - 48px)/3 + 24px);margin:auto 0 0;align-self:center}
  .wm-par{inset:24px 0 0}
  .foot-small{margin-top:16px;font-size:13px}
  .wl-card{padding:30px 22px 24px}
  .why-grid{grid-template-columns:1fr 1fr;gap:28px 16px}
  .why-ill{height:110px}.why-ill svg{width:96px;height:96px}
  .why-col h3{font-size:16px}.why-col p{font-size:13.5px}
  .why-card{padding:calc(72px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px))}
  .why-col{animation-name:why-slide-s}
}
@keyframes why-slide-s{from{opacity:0;transform:translateX(36px)}}
@media (max-width:640px) and (max-height:620px){.foot-title{font-size:30px}.wm-par{inset:8px 0 0}.foot-wm{flex-basis:calc((100vw - var(--pl) - var(--pr) - 48px)/3 + 8px)}}

/* short landscape phones: tighten, and let the wordmark keep a readable size (the page may scroll a little) */
@media (min-width:641px) and (max-height:480px){
  .logo-mark{width:52px}
  .foot{padding-top:76px}
  .foot-title{margin-bottom:16px}
  .btn-lg{height:46px}
  .foot-wm{margin-top:16px;min-height:96px}
  .foot-small{margin-top:12px}
}

/* ============ reduced motion: calm and static ============
   Nothing moves. Popups cross-fade briefly (opacity only); everything else is simply in place. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  dialog[open]{animation:fade-in .16s linear backwards!important}
  dialog[open]::backdrop{animation:fade-in .16s linear backwards!important}
  dialog.is-closing{animation:fade-out .14s linear forwards!important}
  dialog.is-closing::backdrop{animation:fade-out .14s linear forwards!important}
  .why-ill .ring{opacity:.45;transform:scale(.8)}
  .why-ill .ring.r2{transform:scale(1.15);opacity:.25}
  .why-ill .ring.r3{opacity:0}
  .why-ill .wr{opacity:.7}
}