:root{--ai-ink:#17213b;--ai-blue:#3156df;--ai-violet:#7854e8;--ai-cyan:#38bddc}
.brand-mark{position:relative;overflow:hidden;font-size:0;background:linear-gradient(145deg,#182b76,#4c54db 56%,#36b8d6);box-shadow:0 7px 18px #354ed43b}
.brand-mark::before{content:"✦";font-size:25px;font-weight:400;color:#fff;text-shadow:0 0 12px #a4e9ff}
.brand-mark::after{content:"";position:absolute;inset:3px;border:1px solid #ffffff57;border-radius:8px;pointer-events:none}
.hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,#15245d 0%,#283fa5 53%,#4657d8 100%);box-shadow:0 15px 34px #23368921}
.hero::before{content:"";position:absolute;z-index:-1;width:350px;height:350px;right:8%;top:-215px;border-radius:50%;background:radial-gradient(circle,#70d7f57a 0%,#a07cff3d 35%,transparent 70%);filter:blur(9px)}
.hero::after{content:"";position:absolute;z-index:-1;width:340px;height:260px;right:-130px;bottom:-175px;border:1px solid #ffffff2e;border-radius:50%;box-shadow:0 0 0 38px #ffffff08,0 0 0 83px #ffffff08;transform:rotate(-25deg)}
.hero h1{max-width:660px;letter-spacing:-.025em}.hero .eyebrow{color:#bdeefa;opacity:1}
.hero-status{display:inline-flex;align-items:center;gap:4px;backdrop-filter:blur(12px);background:#ffffff1c}
.hero-status .dot{box-shadow:0 0 0 4px #70e1a52a,0 0 12px #70e1a5}
.metrics .metric,.onboarding,.card,.plan-card,.table-wrap{box-shadow:0 6px 22px #202b6410}
.tab.active{color:var(--ai-blue);border-bottom-color:var(--ai-violet)}
.primary{background:linear-gradient(120deg,#2e50d2,#6755db);box-shadow:0 3px 9px #344bba2e}
.primary:hover{filter:brightness(1.06)}
.card-icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#edf0ff,#dff7fb);color:#5146cf}
.info-card{position:relative;overflow:hidden}.info-card::after{content:"";position:absolute;right:-52px;top:-56px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#87dcf835,transparent 70%);pointer-events:none}
@media(prefers-reduced-motion:no-preference){.hero::before{animation:ai-hero-glow 8s ease-in-out infinite alternate}@keyframes ai-hero-glow{to{transform:translate(-35px,18px) scale(1.12)}}}
@media(max-width:720px){.hero::before{right:-90px}.hero h1{font-size:24px}}
/* BeeZee mascot brand mark. */
.brand-mark{background:#142536;box-shadow:0 7px 18px #1425363b}
.brand-mark::before,.brand-mark::after{content:none}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}