/* MorphBET landing — the app's own palette (lib/config/theme.dart): scaffold #06081C, card #0E1130,
   neon ramp #E040FB → #7C4DFF → #448AFF → #00F5FF, gold #F0C040. One stylesheet, no framework. */
:root{--bg:#06081c;--card:#0e1130;--surface:#141838;--line:rgba(255,255,255,.08);--fg:#eef0ff;--mut:#9aa0c7;--cyan:#00f5ff;--blue:#448aff;--violet:#7c4dff;--pink:#e040fb;--gold:#f0c040;--grad:linear-gradient(90deg,#e040fb 0%,#7c4dff 45%,#448aff 62%,#00f5ff 100%)}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;letter-spacing:-.01em}
h1{font-size:clamp(34px,6vw,64px);line-height:1.05;font-weight:800}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;margin-bottom:14px}
h3{font-size:18px;font-weight:700;margin:12px 0 6px}
.lead{color:var(--mut);font-size:clamp(16px,1.6vw,18px);max-width:560px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:700;color:var(--cyan);margin:0 0 14px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* the aurora behind everything */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(120% 80% at 50% -10%,#1b1f4a 0%,var(--bg) 60%)}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45;animation:drift 18s ease-in-out infinite alternate}
.aurora .a1{width:60vw;height:60vw;left:-15vw;top:-10vw;background:#7c4dff}
.aurora .a2{width:50vw;height:50vw;right:-15vw;top:10vw;background:#00f5ff;opacity:.22;animation-delay:-6s}
.aurora .a3{width:45vw;height:45vw;left:30vw;bottom:-25vw;background:#e040fb;opacity:.25;animation-delay:-12s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,4vw,0) scale(1.08)}}
.stars{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 70% 20%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 85% 70%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 40% 80%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 55% 50%,#fff6 50%,transparent 51%)}
@media (prefers-reduced-motion:reduce){.aurora span{animation:none}}

/* header */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,48px);backdrop-filter:blur(14px);background:rgba(6,8,28,.55);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.nav{display:flex;align-items:center;gap:clamp(10px,2vw,26px);font-size:14px;font-weight:600;color:var(--mut)}
.nav a:hover{color:var(--fg)}
.pill{padding:8px 14px;border-radius:999px;border:1px solid rgba(0,245,255,.35);color:var(--fg)!important;background:rgba(0,245,255,.08)}
@media (max-width:640px){.nav a:not(.pill){display:none}}

main{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
section{padding:clamp(48px,8vw,96px) 0}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);align-items:center;padding-top:clamp(40px,6vw,80px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:14px;font-weight:800;font-size:15px;letter-spacing:.02em;border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{background:linear-gradient(135deg,#7c4dff,#448aff);color:#fff;box-shadow:0 10px 30px rgba(124,77,255,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.primary:hover{box-shadow:0 14px 36px rgba(124,77,255,.5)}
.btn.ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--fg)}
.btn.ghost:hover{border-color:rgba(0,245,255,.4)}
.trust{list-style:none;padding:0;margin:0;display:flex;gap:22px;color:var(--mut);font-size:14px}
.trust b{color:var(--fg);font-size:18px;display:block;font-weight:800}
.phone{width:min(100%,300px);margin:0 auto;border-radius:34px;padding:10px;background:linear-gradient(160deg,#1b1f4a,#0a0d26);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(124,77,255,.18)}
.phone img{border-radius:26px}
.phone.small{width:min(100%,220px);padding:7px;border-radius:26px}.phone.small img{border-radius:20px}
.hero-shot{position:relative;overflow:visible}
.hero{overflow:hidden;border-radius:24px}
.hero-shot::before{content:"";position:absolute;inset:10% -10%;background:radial-gradient(closest-side,rgba(0,245,255,.18),transparent 70%);z-index:-1}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero-shot{order:-1}.phone{width:min(70%,260px)}}

/* how */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps li{position:relative;background:rgba(14,17,48,.7);border:1px solid var(--line);border-radius:18px;padding:22px 20px 20px;backdrop-filter:blur(8px)}
.steps .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#06081c;font-weight:900;font-size:15px}
.steps p{color:var(--mut);margin:0;font-size:15px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* features */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:rgba(14,17,48,.7);border:1px solid var(--line);border-radius:20px;padding:22px 20px;backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;text-align:center}
.card p{color:var(--mut);margin:0;font-size:15px}
.card em{color:var(--gold);font-style:normal;font-weight:700}
@media (max-width:860px){.grid{grid-template-columns:1fr}}

/* bot */
.bot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.chat{background:rgba(14,17,48,.8);border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.msg{max-width:88%;padding:10px 13px;border-radius:14px;line-height:1.45}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,#7c4dff,#448aff);border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg code{background:rgba(0,245,255,.12);color:var(--cyan);padding:1px 6px;border-radius:6px;font-weight:700}
.kb{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kb span{font-size:12px;padding:5px 9px;border-radius:9px;border:1px solid rgba(0,245,255,.35);color:var(--fg);background:rgba(0,245,255,.06)}
@media (max-width:860px){.bot{grid-template-columns:1fr}}

/* waitlist */
.waitlist{text-align:center}
.waitlist .lead{margin:0 auto 22px}
.wl-form{display:flex;gap:10px;max-width:520px;margin:0 auto}
.wl-form input{flex:1;min-width:0;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--fg);font:inherit;font-size:15px}
.wl-form input:focus{outline:none;border-color:rgba(0,245,255,.5);box-shadow:0 0 0 3px rgba(0,245,255,.12)}
.wl-out{min-height:1.5em;margin-top:12px;color:var(--mut);font-size:14px}
.wl-out.ok{color:#5df2a3}.wl-out.bad{color:#ff7b7b}
@media (max-width:520px){.wl-form{flex-direction:column}}

/* footer */
.foot{max-width:1120px;margin:0 auto;padding:30px clamp(16px,4vw,48px) 48px;border-top:1px solid var(--line);color:var(--mut);font-size:13px}
.foot-brand{display:flex;align-items:center;margin-bottom:12px}
.foot .fine a{color:var(--mut);text-decoration:underline}

/* THE MORPHBET WORDMARK (2026-08-28 rebrand — lib/widgets/common/morphbet_wordmark.dart, brand/wordmark-motion.html):
   heavy italic caps on the neon ramp, the O a ring holding a turning ball, the E two swap arrows that keep
   converting, a trophy on a swoosh over BET. Same geometry, colours and motion as the app's header. */
.mb-logo{position:relative;display:inline-flex;align-items:baseline;gap:.045em;font-size:var(--h,26px);line-height:1;padding:.82em .42em 0 .06em;filter:drop-shadow(0 .09em .42em rgba(124,77,255,.25));--ball-base:#fff;--ball-ink:#b546fe;--o-ring:#a748fe;--arrow:#27b6ff;--trophy:#2fbeff;--cutout:#06081c}
.mb-logo .L{font-family:Montserrat,"Arial Black",sans-serif;font-weight:900;font-style:italic;letter-spacing:-.012em;background-clip:text;-webkit-background-clip:text;color:transparent}
.mb-logo .g1{background-image:linear-gradient(180deg,#e040fb,#ba45fe)}.mb-logo .g3{background-image:linear-gradient(180deg,#954aff,#7555ff)}.mb-logo .g4{background-image:linear-gradient(180deg,#7555ff,#606cff)}.mb-logo .g5{background-image:linear-gradient(180deg,#606cff,#4b82ff)}.mb-logo .g6{background-image:linear-gradient(180deg,#4b82ff,#33a5ff)}.mb-logo .g8{background-image:linear-gradient(180deg,#1acdff,#00f5ff)}
.mb-logo .cell{display:inline-flex}.mb-logo .oCell svg{height:.8em;width:auto;position:relative;top:.05em}.mb-logo .eCell svg{height:.705em;width:auto;position:relative;top:.002em}
.mb-logo .oRing{stroke:var(--o-ring)}.mb-logo .ballBase{fill:var(--ball-base)}.mb-logo .ballInk{fill:var(--ball-ink)}.mb-logo .ballLine{stroke:var(--ball-ink)}.mb-logo .arrowP{fill:var(--arrow)}.mb-logo .trophyP{fill:var(--trophy)}.mb-logo .trophyH{stroke:var(--trophy)}.mb-logo .starC{fill:var(--cutout)}
.mb-logo .trophyG{filter:drop-shadow(0 0 10px rgba(0,213,255,.45));transform-box:fill-box;transform-origin:50% 100%}
.mb-logo .fx{position:absolute;top:0;right:0;height:1.02em;width:auto;pointer-events:none;overflow:visible}
.mb-logo .ball{animation:mbspin 6.5s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes mbspin{to{transform:rotate(360deg)}}
.mb-logo .arrowT,.mb-logo .arrowB{animation:mbswap 5.2s ease 1.4s infinite;transform-box:fill-box;transform-origin:center}
@keyframes mbswap{0%,40%{transform:scaleX(1)}46%{transform:scaleX(-1.12)}49%,90%{transform:scaleX(-1)}96%{transform:scaleX(1.12)}100%{transform:scaleX(1)}}
.mb-logo.play .gl{animation:mbrise .55s cubic-bezier(.2,1.3,.35,1) both;animation-delay:calc(var(--i)*70ms)}
@keyframes mbrise{from{opacity:0;transform:translateY(.38em) scale(.9)}to{opacity:1;transform:none}}
.mb-logo .swoosh{clip-path:inset(-20% 0% -20% 0%)}.mb-logo.play .swoosh{animation:mbdraw .55s ease-out .5s both}
@keyframes mbdraw{from{clip-path:inset(-20% 100% -20% 0%)}to{clip-path:inset(-20% 0% -20% 0%)}}
.mb-logo.play .trophyG{animation:mbpop .6s cubic-bezier(.25,1.5,.4,1) .82s both}@keyframes mbpop{from{transform:scale(0)}}
.mb-logo .starC{animation:mbtwinkle 4.6s ease-in-out 1.8s infinite;transform-box:fill-box;transform-origin:center}
@keyframes mbtwinkle{0%,84%,100%{transform:scale(1) rotate(0)}92%{transform:scale(1.28) rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.mb-logo *,.mb-logo.play .gl,.mb-logo.play .swoosh,.mb-logo.play .trophyG{animation:none!important}.mb-logo .swoosh{clip-path:none}}
.brand{line-height:0}