@property --ring{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--ink:#18203a;--ink2:#46526f;--muted:#7482a1;--line:rgba(110,145,205,.28);--blue:#4f86f7;--violet:#7c6cf6;--sky:#7ac8ff;--navy:#161b3a;--pink:#f08aa6;--grad:linear-gradient(120deg,#8b7cf8 0%,#4f86f7 55%,#6cc3ff 100%);--shadow:0 30px 70px -30px rgba(40,85,170,.45),0 2px 8px rgba(40,85,170,.08);--display:'Inter Tight',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:#eaf2fe;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(60vw 50vw at 0% 0%,#f7faff 0,transparent 60%),radial-gradient(55vw 45vw at 100% 20%,#d6e6fd 0,transparent 65%),radial-gradient(70vw 60vw at 90% 100%,#a9cbf6 0,transparent 60%),radial-gradient(50vw 50vw at 10% 90%,#c4dbfa 0,transparent 60%),#e6effd}
a{color:var(--blue);text-decoration:none}a:hover{color:var(--violet)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.95;margin:0;text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.eyebrow{font:600 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pill-tag{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 14px -6px rgba(40,85,170,.3);font:600 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.frame{padding:12px;border-radius:44px;background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.75);box-shadow:var(--shadow)}
.glass{border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(246,250,255,.66));border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 10px 30px -18px rgba(40,85,170,.35);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;border:0;font:600 16px/1 var(--body);cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:#12141b;color:#fff;box-shadow:0 14px 28px -12px rgba(18,20,27,.6)}.btn-dark:hover{color:#fff;background:#1d2030}
.btn-glass{background:rgba(255,255,255,.78);color:var(--ink);border:1px solid #c8daf7;box-shadow:0 8px 20px -14px rgba(40,85,170,.5)}.btn-glass:hover{color:var(--ink);background:#fff}
.btn-sm{height:42px;padding:0 20px;font-size:14px}
.btn svg{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid #d3e1f8;font:500 15px/1 var(--body);color:var(--ink);cursor:pointer;transition:all .2s;white-space:nowrap}
.chip.on,.chip:hover{background:#0f1526;color:#fff;border-color:#0f1526}
.ic{display:inline-flex;width:22px;height:22px}.ic svg{width:100%;height:100%}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* logo */
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo-word{font:800 24px/1 var(--display);letter-spacing:-.045em;white-space:nowrap}
.logo-word b{font-weight:800;font-style:italic;margin-left:-.12em;letter-spacing:-.03em}
.badge{--s:44px;position:relative;flex:none;width:var(--s);height:var(--s);border-radius:50%;padding:calc(var(--s)*.075);background:conic-gradient(from var(--ring),#8b7cf8,#4f86f7,#7ad0ff,#b49bff,#8b7cf8);animation:ring 5s linear infinite;box-shadow:0 0 calc(var(--s)*.35) -2px rgba(124,108,246,.55)}
.badge::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;filter:blur(calc(var(--s)*.12));opacity:.55;z-index:-1}
.badge i{display:block;width:100%;height:100%;border-radius:50%;background:url(assets/bella/badge.png) center/cover,radial-gradient(circle at 50% 35%,#fff,#e8e6ff)}
.badge:not(.glyph) i{position:relative;animation:tilt 5.6s ease-in-out infinite;transform-origin:50% 62%}
.badge:not(.glyph) i::before,.badge:not(.glyph) i::after{content:"";position:absolute;border-radius:50% 50% 46% 46%/40% 40% 60% 60%;background:linear-gradient(#fbfcff,#e9edf6);border-bottom:max(1px,calc(var(--s)*.018)) solid #1c2640;transform:scaleY(0);transform-origin:50% 0;animation:blink 4.2s infinite}
.badge:not(.glyph) i::before{left:28.5%;top:40.6%;width:14.6%;height:14.2%}
.badge:not(.glyph) i::after{left:58.4%;top:38.2%;width:12.8%;height:12.8%;transform:scaleY(0) rotate(-6deg)}
@keyframes blink{0%,90%,100%{transform:scaleY(0)}93.5%{transform:scaleY(1)}96%{transform:scaleY(.15)}}
@keyframes tilt{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}55%{transform:rotate(3deg)}78%{transform:rotate(-1.5deg)}}
.badge.still i,.badge.still i::before,.badge.still i::after{animation:none}
.badge.glyph i{display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#fff,#e6e8ff)}
.badge.glyph i svg{width:52%;height:52%;color:#5a6cf2}
.orb{--s:30px;flex:none;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 6%,#cfdffd 20%,#7aa5f5 52%,#3b62cf 100%);box-shadow:0 calc(var(--s)*.25) calc(var(--s)*.5) -4px rgba(60,100,210,.5);position:relative;overflow:hidden}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from var(--ring),transparent 0 70%,rgba(180,155,255,.75) 82%,transparent 95%);animation:ring 4s linear infinite;mix-blend-mode:screen}
@keyframes ring{to{--ring:360deg}}
.appicon{--s:120px;width:var(--s);height:var(--s);border-radius:calc(var(--s)*.24);display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 0%,#2c3470 0,#161b3a 60%,#0e1230 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 20px 40px -18px rgba(22,27,58,.8)}
.appicon .badge{--s:calc(var(--s)*.7)}
.appicon.light{background:linear-gradient(180deg,#fff,#e4eefd);box-shadow:inset 0 1px 0 #fff,0 20px 40px -20px rgba(40,85,170,.6)}
@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;transition:none!important}}