/* KISSA: graphite glass, moonlit edges, restrained motion. */
:root{--ease:cubic-bezier(.22,1,.36,1);--muted:#95a3b7;--ice:#c5e2ff}
main:focus{outline:none}
body{background:#080b10;overflow-x:clip}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 83% 0%,#29466924,transparent 54%);z-index:-1}
.ambient{background:radial-gradient(ellipse at 80% 20%,#132c4845,transparent 52%),radial-gradient(ellipse at 0% 80%,#1c294926,transparent 40%)}
.wordmark{font-weight:650;letter-spacing:6px}
.brand .wordmark{background:linear-gradient(115deg,#f8fcff,#c1d6ee 55%,#f4f8ff);background-clip:text;-webkit-text-fill-color:transparent}
.brand .wordmark>span{-webkit-text-fill-color:#95a3b7}
.catmark{color:#c0dbfa;filter:drop-shadow(0 0 10px #a2d5ff21)}
.page-heading h1{font-weight:650;letter-spacing:-1.1px}
.page-heading p{color:#8a9db5}
.nav button{position:relative;transition:background .35s,color .35s,transform .25s;isolation:isolate}
.nav button.active{background:linear-gradient(120deg,#223044,#162131);box-shadow:inset 0 1px #c5e2ff10,inset 0 0 0 1px #c5e2ff0a}
.nav button.active:after{content:"";position:absolute;bottom:0;left:30%;right:30%;height:1px;background:linear-gradient(90deg,transparent,#c5e2ff9c,transparent)}
.hero{border-color:#8dacc232;box-shadow:inset 0 1px #e3f2ff13,0 20px 60px #00000020;background:#101a28}
.hero:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(130deg,#d0e8ff10,transparent 20%,transparent 80%,#a5c9ff08);z-index:3}
.hero h2{font-size:43px;line-height:1.06;font-weight:650;letter-spacing:-1.8px}
.hero h2 em{font-style:normal;background:linear-gradient(100deg,#f0f7ff 2%,#b7d6fd 70%,#7298c5);background-clip:text;color:transparent}
.hero-art{animation:breath 12s ease-in-out infinite;will-change:transform}
.hero-glimmer{position:absolute;inset:-50% -30%;pointer-events:none;background:linear-gradient(110deg,transparent 45%,#b9e1ff04 48%,#b9e1ff07 50%,transparent 55%);transform:translateX(-60%);animation:moon-pass 14s ease-in-out infinite;z-index:1}
.hero-content{z-index:2}
.hero-orbit{width:410px;height:410px;right:-4%;top:-10%;border-color:#b9dcff13;box-shadow:0 0 90px #a5d2ff05,inset 0 0 80px #a5d2ff04;pointer-events:none}
.hero-orbit:after{content:"";position:absolute;inset:20px;border:1px solid #a1c3e50c;border-radius:50%}
.hero-note{font-size:10px;letter-spacing:4px;color:#aacbe37a}
.status{letter-spacing:1.2px;border-color:#b9dcff22;background:linear-gradient(110deg,#99cfff12,#99cfff05);backdrop-filter:blur(8px)}
.primary{position:relative;overflow:hidden;background:linear-gradient(125deg,#e4f2ff,#bdd8ff 55%,#b5c7ef);border:1px solid #e5f4ff42;box-shadow:inset 0 1px #ffffff65,0 4px 23px #9abfff12;transition:transform .25s var(--ease),box-shadow .3s,filter .3s}
.primary:after{content:"";position:absolute;inset:-100% -50%;transform:translateX(-90%) rotate(15deg);background:linear-gradient(90deg,transparent,#ffffff50,transparent);pointer-events:none;transition:transform .85s var(--ease)}
.primary:hover:after{transform:translateX(100%) rotate(15deg)}
.primary:hover{box-shadow:0 5px 35px #a6d4ff2a;filter:brightness(1.04)}
.primary:active{transform:scale(.975)}
.primary svg:last-child{margin-left:5px;transition:transform .3s}
.primary:hover svg:last-child{transform:translateX(2px)}
.panel,.stat,.plan{box-shadow:inset 0 1px #d7eaff05;backdrop-filter:blur(12px)}
.stat{background:linear-gradient(135deg,#182333aa,#0d131ed9);border-color:#bad9ff13}
.stat strong{font-variant-numeric:tabular-nums;letter-spacing:-.7px;font-weight:650;font-size:22px}
.stat>svg{stroke-width:1.3;width:23px;height:23px;color:#8daecf}
.section-heading h2{font-weight:650;letter-spacing:-.5px}
.panel{background:linear-gradient(120deg,#121b27cc,#0d141fcc);border-color:#bad9ff15}
.icon-tile{background:linear-gradient(135deg,#22324980,#131e2d);border-color:#bad9ff16;color:#a8c6e9;box-shadow:inset 0 1px #ddedff0b}
.invite-card{background:radial-gradient(ellipse at 100% 0%,#24425b88,#101823 75%)}
.invite-card h3{font-weight:650}
.invite-card:after{content:"";position:absolute;right:-56px;bottom:-90px;width:230px;height:230px;border:1px solid #b9dcff13;border-radius:50%;box-shadow:0 0 0 24px #b9dcff03,0 0 0 48px #b9dcff02;pointer-events:none}
.text-button{transition:color .25s,transform .25s;color:#b3d1f4}
.text-button:hover{color:#ebf6ff}
.plan{transition:border-color .3s,background .3s,box-shadow .3s,transform .3s var(--ease)}
.plan:hover{transform:translateY(-3px);border-color:#c1ddff44}
.plan.selected{background:radial-gradient(ellipse at 80% 0%,#2e4663aa,#152030 78%);box-shadow:inset 0 1px #cce6ff22,0 8px 30px #77b6ff0a;border-color:#afd4ff80}
.plan .radio{transition:all .25s}
.plan .tag{color:#c1d9f3;background:#b5d8ff0c;border:1px solid #b5d8ff0d}
.plan.selected .tag{background:#b5d8ff18}
.plan .price{font-weight:650;font-variant-numeric:tabular-nums}
.page-banner{box-shadow:inset 0 1px #d7eaff08;background:linear-gradient(120deg,#17263a,#0b141f)}
.page-banner h2{font-weight:650;letter-spacing:-1.1px}
.page-banner img{opacity:.7}
.profile-head>img{box-shadow:0 0 35px #8bbcff11}
.profile-head>div{min-width:0;overflow-wrap:anywhere}
.profile-head h2{letter-spacing:-.6px}
.settings-button{transition:color .25s,background .25s}
.settings-button:hover{color:#c7e2ff}
.settings-button:hover .chevron{transform:translateX(3px)}
.settings-button .chevron{transition:transform .25s}
.settings-button small{color:#8d9eb5}
dialog{background:radial-gradient(ellipse at 100% 0%,#263d5566,transparent 50%),linear-gradient(130deg,#162131,#0e1621);border-color:#adcaeb33;box-shadow:0 35px 130px #000c,inset 0 1px #deefff15}
dialog::backdrop{background:#03070cbb;backdrop-filter:blur(12px)}
dialog .dialog-top .eyebrow{letter-spacing:4px;color:#8ca2bd}
dialog h2{font-weight:650;letter-spacing:-.8px}
.platforms button{transition:border-color .25s,background .25s;min-height:51px}
.platforms button.selected{background:linear-gradient(130deg,#a9d1ff18,#a9d1ff08);border-color:#aacfff88}
.success-icon{box-shadow:0 0 45px #a4d3ff12,inset 0 0 25px #a4d3ff08;animation:success-in .6s var(--ease)}
.intro{transition:opacity .5s var(--ease),visibility .5s}
.intro video{filter:contrast(1.04);background:#05090e}
.intro-shade{background:linear-gradient(0deg,#03070b 0%,#03070ba6 18%,transparent 64%),linear-gradient(180deg,#03070b80,transparent 25%)}
.intro-bottom h1{font-weight:600;letter-spacing:-2.2px;text-shadow:0 3px 50px #091426}
.intro-bottom .eyebrow{color:#b5cce5;font-weight:500}
.intro-progress{display:flex;align-items:center;gap:15px}
.intro-progress>span{font-size:9px;letter-spacing:2px;color:#778da7;font-variant-numeric:tabular-nums}
.intro-line{width:155px;background:#c3dbff26}
.intro-line span{animation:none;box-shadow:0 0 14px #badfff66}
.intro.playing .intro-line span{animation:loading 5s linear both}
.intro.playing .intro-bottom h1{animation:intro-title 1.1s var(--ease) both}
.intro.playing .intro-bottom .eyebrow{animation:page-in .8s .1s var(--ease) both}
.intro.playing .intro-top{animation:page-in .7s var(--ease) both}
.intro-top .ghost{background:#07101a44;backdrop-filter:blur(8px);border-color:#d8eaff2b}
.intro-bottom p{letter-spacing:.3px;font-size:12px}
.intro.out{pointer-events:none}
.page{animation:page-in .55s var(--ease)}
.page>.grid-stats{animation:page-in .6s .06s var(--ease) both}
.page>.lower-grid{animation:page-in .6s .1s var(--ease) both}
::view-transition-old(root){animation:fade-out .17s ease-out both}
::view-transition-new(root){animation:page-in .4s var(--ease) both}
.footer{color:#718097;letter-spacing:.2px}
@keyframes fade-out{to{opacity:0;transform:translateY(-5px)}}
@keyframes breath{50%{transform:scale(1.025) translateY(-3px)}}
@keyframes moon-pass{0%,25%{transform:translateX(-60%)}70%,100%{transform:translateX(60%)}}
@keyframes success-in{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@keyframes intro-title{from{opacity:0;transform:translateY(20px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(min-width:761px){.hero{height:398px}.hero-content{padding:32px 38px}.hero h2{margin-top:20px}.grid-stats{gap:15px}.plan{min-height:247px}.home-links{padding-inline:4px}}
@media(max-width:560px){
  .shell{padding:env(safe-area-inset-top,0px) 20px 0}
  .header{height:78px}
  .page-heading{margin-bottom:23px}
  .page-heading h1{font-size:25px;line-height:1.18}
  .page-heading p{font-size:12px;line-height:1.5;margin-top:8px;max-width:290px}
  .hero{height:362px;border-radius:22px}
  .hero h2{font-size:36px;line-height:1.07;letter-spacing:-1.4px;margin-top:23px;max-width:210px}
  .hero-art{width:122%;height:120%;right:-34%;top:-4%;object-position:45% 45%}
  .hero-content{padding:23px 22px}
  .hero:after{background:linear-gradient(90deg,#101927ed 0%,#10192799 35%,#10192710 80%),linear-gradient(0deg,#101824 0%,#10182435 45%,transparent 80%)}
  .hero-actions{margin-top:auto}
  .hero-actions .primary{font-size:14px;min-height:50px;padding:12px 14px;border-radius:12px}
  .hero-note{bottom:98px;right:14px;font-size:8px}
  .status{font-size:10px;letter-spacing:1.4px;padding:5px 9px}
  .grid-stats{margin-top:13px;margin-bottom:28px;gap:8px}
  .stat{min-width:0;padding:13px 11px 12px;border-radius:13px}
  .stat strong{font-size:19px;line-height:1.45;font-weight:650}
  .stat small{font-size:11px;color:#8b9cb2}
  .stat strong span{font-size:11px}
  .stat:last-child strong{font-size:17px;line-height:1.65}
  .panel{padding:19px;border-radius:17px}
  .row-copy strong{font-size:14px}
  .row-copy small,.row-meta{font-size:12px}
  .icon-tile{width:41px;height:44px}
  .section-heading{margin-bottom:13px}
  .section-heading h2{font-size:17px}
  .section-heading .text-button{font-size:12px}
  .lower-grid{gap:23px}
  .invite-card h3{font-size:23px;margin-top:12px;line-height:1.25}
  .invite-card p{font-size:13px;line-height:1.6}
  .invite-card .text-button{margin-top:15px;font-size:13px}
  .home-links{margin-top:22px;gap:12px;flex-wrap:wrap}
  .home-links .text-button{font-size:12px}
  .nav{padding:9px 11px calc(9px + env(safe-area-inset-bottom));border-color:#c7dfff17;background:linear-gradient(180deg,#101824e8,#0b111cec);box-shadow:0 -8px 35px #04081030}
  .nav button{padding:8px 1px 5px;gap:6px;font-size:10px;color:#7e8fa6;border-radius:12px;min-height:53px}
  .nav button.active{background:radial-gradient(ellipse at 50% 0%,#a1caff18,transparent 80%);box-shadow:none;color:#cde5ff}
  .nav button.active:after{top:-9px;bottom:auto;height:2px;left:25%;right:25%;background:linear-gradient(90deg,transparent,#c5e2ff,transparent);box-shadow:0 2px 14px #badbff60}
  .nav button.active svg{filter:drop-shadow(0 0 9px #a4d3ff50)}
  .nav button svg{stroke-width:1.5;width:22px;height:22px}
  .plan{padding:19px 20px;min-height:110px;border-radius:18px}
  .plan:hover{transform:none}
  .plan h3{font-size:16px;font-weight:650}
  .plan .price{font-size:31px}
  .plan>p{font-size:12px}
  .plan-foot{padding:20px}
  .features{font-size:13px;line-height:1.5;gap:16px 20px}
  .referral-link{flex-wrap:wrap}
  .referral-link code{font-size:12px;min-width:170px}
  .page-banner .banner-copy{max-width:85%}
  .page-banner p{font-size:13px;line-height:1.6}
  .page-banner h2{font-size:29px}
  .profile-head{gap:15px;align-items:center}
  .profile-head h2{font-size:23px}
  .profile-head .status{margin-left:auto;flex-shrink:0}
  .profile-head>img{width:64px;height:64px;border-radius:18px}
  .profile-head p{font-size:12px}
  .settings-button{font-size:14px;line-height:1.4;padding:20px 0}
  .settings-button small{font-size:12px;line-height:1.5;margin-top:5px}
  .intro-top{top:max(24px,env(safe-area-inset-top));left:23px;right:23px}
  .intro-bottom{left:28px;right:25px;bottom:10%}
  .intro-bottom h1{font-size:45px;line-height:1.06;letter-spacing:-2px;max-width:300px;margin:20px 0 26px}
  .intro video{object-position:center 40%}
  .intro-bottom .eyebrow{font-size:9px;letter-spacing:2px}
  dialog{margin:auto auto calc(10px + env(safe-area-inset-bottom));width:calc(100% - 20px);max-height:88dvh;border-radius:26px;padding:24px 22px;animation:sheet-in .4s var(--ease)}
  dialog:before{content:"";position:absolute;width:35px;height:3px;left:calc(50% - 17px);top:9px;border-radius:3px;background:#b8cce534}
  .dialog-top{margin-top:4px}
  dialog h2{font-size:26px;line-height:1.2}
  dialog p{font-size:14px;line-height:1.6}
  .toast{bottom:calc(97px + env(safe-area-inset-bottom));font-size:13px;line-height:1.5;text-align:center}
  .footer{padding-bottom:calc(109px + env(safe-area-inset-bottom));font-size:10px}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:360px){
  .shell{padding-inline:16px}.wordmark{font-size:20px;letter-spacing:3.5px}.header{gap:7px}.catmark svg{width:24px;height:24px}.hero-content{padding:22px 19px}.hero h2{font-size:33px}.stat{padding:12px 8px}.stat strong{font-size:18px}.stat small{font-size:10px}.stat:last-child strong{font-size:15px}.plan .price{font-size:27px}.intro-bottom h1{font-size:40px}.demo-badge{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero-art{will-change:auto}.hero-glimmer{display:none}::view-transition-group(*){animation:none!important}
}