/* Nowrox — app selector.
   Inherits the SSO login theme wholesale: obsidian glass card, indigo #5B5FEF
   and cyan #2FE6D9, Space Grotesk over Inter, aurora backdrop and graph motif.
   Only the card's contents are new, because this page is a sibling of the
   login and register screens, not a separate identity. */
:root{
  --bg:#0a0a0c; --ink:#F3F4FA; --muted:#9aa0b4;
  --gold:#5B5FEF; --gold-2:#2FE6D9;
  --glass:rgba(22,21,27,.62); --glass-line:rgba(255,255,255,.07);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh; display:grid; justify-items:center; align-content:safe center;
  padding:24px; position:relative; overflow-x:hidden; overflow-y:auto;
}
.bg{position:fixed; inset:0; z-index:0; overflow:hidden; background:
  radial-gradient(1100px 620px at 18% -8%, rgba(91,95,239,.10), transparent 60%),
  radial-gradient(900px 600px at 100% 110%, rgba(47,230,217,.10), transparent 55%),
  linear-gradient(160deg,#0b0a0e 0%, #100e15 48%, #0a090d 100%);}
.bg::before{content:""; position:absolute; width:60vw; height:60vw; left:-10vw; top:-20vw;
  background:radial-gradient(closest-side, rgba(91,95,239,.16), transparent);
  filter:blur(40px); animation:drift 18s ease-in-out infinite alternate;}
.bg::after{content:""; position:absolute; right:-15vw; bottom:-20vw; width:55vw; height:55vw;
  background:radial-gradient(closest-side, rgba(47,230,217,.14), transparent);
  filter:blur(48px); animation:drift 22s ease-in-out infinite alternate-reverse;}
.grain{position:fixed; inset:0; z-index:1; opacity:.035; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
.motif{position:fixed; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; opacity:.5}
.motif .edge{stroke-width:1; vector-effect:non-scaling-stroke}
.motif .node{filter:drop-shadow(0 0 6px rgba(91,95,239,.5))}
.motif .pulse{transform-box:fill-box; transform-origin:center; animation:nodepulse 6s ease-in-out infinite}
.motif .pulse.b{animation-delay:2s}.motif .pulse.c{animation-delay:4s}
@keyframes nodepulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vw,3vw,0) scale(1.12)}}

.card{position:relative; z-index:2; width:100%; max-width:468px;
  background:radial-gradient(130% 64% at 50% -12%, rgba(91,95,239,.08), transparent 62%), var(--glass);
  border:1px solid var(--glass-line); border-radius:24px; padding:52px 44px 34px;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 0 64px -30px rgba(91,95,239,.28),
    0 44px 100px -28px rgba(0,0,0,.88), 0 0 0 1px rgba(0,0,0,.45);
  backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
  animation:cardRise .65s cubic-bezier(.2,.7,.2,1) both;}
.card::before{content:""; position:absolute; inset:0; border-radius:24px; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(91,95,239,.55), rgba(91,95,239,.06) 32%, transparent 50%, rgba(91,95,239,.08) 68%, rgba(91,95,239,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;}
.card::after{content:""; position:absolute; left:14%; right:14%; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(47,230,217,.55), transparent);}

.brand{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:26px}
.mark{width:56px; height:56px; display:grid; place-items:center; margin-bottom:16px;
  filter:drop-shadow(0 10px 22px rgba(91,95,239,.35));}
.mark svg{width:56px; height:56px}
.wordmark{font-family:'Space Grotesk','Poppins',Inter,system-ui,sans-serif; font-weight:700;
  font-size:32px; letter-spacing:-0.5px; line-height:1; color:#F3F4FA;}

h1{margin:0 0 8px; text-align:center; font-family:'Space Grotesk',Inter,system-ui,sans-serif;
  font-size:21px; font-weight:600; letter-spacing:-0.2px; color:var(--ink);}
/* The sentence that makes the choice light: it is one account either way, so
   picking an app here is a starting point, not a commitment. */
.lede{margin:0 0 26px; text-align:center; font-size:13.5px; line-height:1.55; color:var(--muted);}

.apps{display:flex; flex-direction:column; gap:10px; margin:0 0 24px}
.app{display:flex; align-items:center; gap:14px; padding:15px 16px; text-decoration:none; color:inherit;
  background:rgba(255,255,255,.028); border:1px solid var(--glass-line); border-radius:14px;
  transition:border-color .18s ease, background .18s ease, transform .18s cubic-bezier(.2,.7,.2,1);}
.app:hover{background:rgba(91,95,239,.09); border-color:rgba(91,95,239,.45); transform:translateY(-1px)}
.app:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px}
.app-mark{flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:rgba(91,95,239,.14); border:1px solid rgba(91,95,239,.24); color:#cfd2ff}
.app:hover .app-mark{color:var(--gold-2); border-color:rgba(47,230,217,.4)}
.app-mark svg{width:21px; height:21px}
.app-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.app-text strong{font-size:15px; font-weight:600; letter-spacing:-0.1px}
.app-text span{font-size:12.5px; line-height:1.45; color:var(--muted)}
.app-go{flex:0 0 auto; color:var(--muted); transition:transform .18s ease, color .18s ease}
.app:hover .app-go{color:var(--gold-2); transform:translateX(3px)}

/* Signing up is one act, so it gets one action. The apps below it are what the
   account includes, not a fork to choose between. */
.cta{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:15px 20px; margin:0 0 26px; text-decoration:none;
  font-size:15px; font-weight:600; letter-spacing:-0.1px; color:#0a0a0c;
  background:linear-gradient(135deg,#7d80f5 0%, #5B5FEF 46%, #2FE6D9 100%);
  border:0; border-radius:14px; cursor:pointer;
  box-shadow:0 10px 30px -12px rgba(91,95,239,.75);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, filter .18s ease;}
.cta:hover{transform:translateY(-1px); filter:brightness(1.06);
  box-shadow:0 16px 38px -12px rgba(47,230,217,.55)}
.cta:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px}
.cta svg{transition:transform .18s ease}
.cta:hover svg{transform:translateX(3px)}

.included{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:14px}
.included li{display:flex; align-items:flex-start; gap:13px}
.included .app-mark{width:34px; height:34px; border-radius:10px}
.included .app-mark svg{width:18px; height:18px}
.included .app-text strong{font-size:14px}

.card .cta{animation:fadeUp .55s .24s both}
.card .included{animation:fadeUp .55s .30s both}

.foot{margin:0; padding-top:20px; border-top:1px solid var(--glass-line);
  text-align:center; font-size:12.5px; color:var(--muted)}
.foot a{color:#c9cbff; text-decoration:none; font-weight:500}
.foot a:hover{color:var(--gold-2); text-decoration:underline; text-underline-offset:3px}

/* One authored moment: the card rises, then its contents settle in order. */
.card .brand{animation:fadeUp .55s .06s both}
.card h1{animation:fadeUp .55s .14s both}
.card .lede{animation:fadeUp .55s .18s both}
/* Every card settles, not just the first two.
   The sequence stopped at nth-of-type(2), so the third card — Tasks — had no
   animation at all and snapped in while the two above it were still rising.
   One rule carries the entrance; the index only carries the delay, so adding a
   fourth app is a line rather than a rewrite. */
.card .app{animation:fadeUp .55s both}
.card .app:nth-of-type(1){animation-delay:.24s}
.card .app:nth-of-type(2){animation-delay:.30s}
.card .app:nth-of-type(3){animation-delay:.36s}
.card .app:nth-of-type(4){animation-delay:.42s}
.card .foot{animation:fadeUp .55s .50s both}
@keyframes cardRise{from{opacity:0; transform:translateY(18px) scale(.985)}to{opacity:1; transform:none}}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}
@media (max-width:520px){
  .card{padding:40px 24px 28px; border-radius:20px}
  .wordmark{font-size:28px}
}