:root { --purple:#6c4ab6; --deep:#241c37; --lilac:#bfa7f2; --cream:#fff9ef; --yellow:#ffd66b; --coral:#ef8e78; --ink:#26202f; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family: ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif; line-height:1.55; }
img { max-width:100%; display:block; }
.section-wrap { width:min(1160px, calc(100% - 40px)); margin-inline:auto; }
.site-header { width:min(1160px, calc(100% - 40px)); margin:auto; min-height:76px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--deep); text-decoration:none; display:flex; gap:10px; align-items:center; font-weight:900; letter-spacing:-.03em; font-size:1.08rem; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:var(--white); background:var(--purple); border-radius:10px 12px 10px 4px; transform:rotate(-8deg); }
.header-link { color:var(--purple); font-weight:800; text-decoration:none; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; padding:76px 0 100px; }
.eyebrow { color:var(--purple); text-transform:uppercase; letter-spacing:.13em; font-size:.76rem; font-weight:900; margin:0 0 12px; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(3.2rem, 7vw, 6.8rem); line-height:.94; letter-spacing:-.075em; max-width:700px; margin-bottom:26px; color:var(--deep); } h2 { font-size:clamp(2rem, 4vw, 3.7rem); line-height:1; letter-spacing:-.065em; color:var(--deep); margin-bottom:18px; }
.lede { font-size:1.2rem; max-width:570px; color:#5b5068; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 17px; }.button { display:inline-flex; gap:10px; align-items:center; text-decoration:none; border-radius:999px; padding:13px 20px; font-weight:900; }.primary { color:var(--white); background:var(--purple); box-shadow:0 7px 0 #4c3187; }.secondary { color:var(--purple); border:2px solid var(--lilac); }.light { color:var(--deep); background:var(--yellow); }.button:focus-visible { outline:4px solid var(--coral); outline-offset:4px; }
.microcopy { font-size:.8rem; color:#8c7f91; }.hero-art { transform:rotate(2deg); }.hero-art img { border-radius:35px; box-shadow:15px 15px 0 var(--yellow); }
.strip { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:30px 0 100px; }.strip > div { border-top:3px solid var(--deep); padding-top:17px; }.number { color:var(--coral); font-weight:900; }.strip h2 { font-size:1.45rem; margin:10px 0 8px; }.strip p,.feature p,.battery-card p { color:#65596d; }
.promos { padding:10px 0 120px; }.promos-heading { max-width:660px; margin-bottom:28px; }.promos-heading > p:not(.eyebrow) { color:#65596d; }.promo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.promo-card { min-height:310px; display:flex; flex-direction:column; align-items:flex-start; padding:27px; border-radius:26px; color:var(--deep); }.promo-card h3 { margin:8px 0 12px; font-size:1.6rem; line-height:1.05; letter-spacing:-.05em; }.promo-card p { color:#5d5266; }.promo-label { padding:5px 10px; border-radius:999px; font-size:.73rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.promo-muse { background:#ede5fb; }.promo-muse .promo-label { color:#6c4ab6; background:#d9c9fb; }.promo-manus { background:#dff3ef; }.promo-manus .promo-label { color:#14685e; background:#b8e7de; }.promo-teamily { background:#fff0cf; }.promo-teamily .promo-label { color:#8e5a00; background:#ffe09a; }.promo-code-row { display:flex; align-items:center; gap:10px; margin-top:auto; margin-bottom:14px; }.promo-code-row code { padding:8px 11px; border:1px dashed currentColor; border-radius:9px; background:rgba(255,255,255,.48); font-size:1.1rem; font-weight:900; letter-spacing:.12em; }.copy-code { padding:8px 10px; border:0; border-radius:999px; color:var(--deep); background:rgba(255,255,255,.62); cursor:pointer; font:inherit; font-size:.76rem; font-weight:900; }.copy-code:hover,.copy-code:focus-visible { background:var(--white); outline:3px solid rgba(36,28,55,.14); }.promo-card > a { color:var(--deep); font-weight:900; text-decoration:none; }.promo-card > a:hover { text-decoration:underline; }
.feature { display:grid; grid-template-columns:.95fr 1.05fr; gap:70px; align-items:center; padding:30px 0 120px; }.feature-art img { border-radius:28px; box-shadow:-14px 14px 0 var(--lilac); }.feature-copy { max-width:520px; }.pill-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:25px; }.pill-row span { border:2px solid var(--lilac); border-radius:999px; padding:6px 12px; font-weight:800; font-size:.86rem; }
.battery-card { background:#ede5fb; border-radius:35px; padding:42px 55px; display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:120px; }.battery-card > div { max-width:600px; }.battery-card h2 { font-size:clamp(2rem, 4vw, 3.1rem); }.battery-card img { width:min(260px, 36%); transform:rotate(5deg); }
.community { display:grid; grid-template-columns:1fr 390px; gap:70px; align-items:center; padding:0 0 110px; }.community-copy { max-width:560px; }.community-copy p:not(.eyebrow) { color:#65596d; }.discord-frame { background:#241c37; border-radius:28px; padding:18px; box-shadow:14px 14px 0 var(--coral); }.discord-frame iframe { display:block; width:100%; max-width:350px; height:500px; margin:auto; border:0; border-radius:14px; }
.support-card { background:#fff0cf; border:2px solid var(--yellow); border-radius:35px; padding:42px 55px; display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:110px; }.support-card > div { max-width:650px; }.support-card h2 { font-size:clamp(2rem, 4vw, 3.1rem); }.support-card p:not(.eyebrow) { color:#65596d; }
.email-list { background:#241c37; color:var(--white); border-radius:35px; padding:48px 55px; margin-bottom:110px; }.email-list-copy { max-width:760px; }.email-list h2 { color:var(--white); }.email-list-copy > p:not(.eyebrow) { color:#d8cfee; }.email-list-button { display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:10px; width:min(100%,620px); margin-top:26px; padding:13px 17px; border:1px solid #4a3f68; border-radius:14px; color:#eee9fb; background:#302746; text-align:left; cursor:pointer; font:inherit; }.email-list-button:hover,.email-list-button:focus-visible { border-color:var(--lilac); outline:none; box-shadow:0 0 0 3px rgba(191,167,242,.22); }.email-status-dot { width:10px; height:10px; border-radius:50%; background:#23a55a; box-shadow:0 0 8px #23a55a; }.email-list-hint { color:#a99dc4; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.email-modal { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; padding:20px; background:rgba(20,14,33,.82); backdrop-filter:blur(12px); }.email-modal.active { display:flex; }.email-modal-card { position:relative; width:min(100%,430px); max-height:90vh; overflow:auto; padding:34px; border:1px solid #40365a; border-radius:25px; color:var(--white); background:#14111f; box-shadow:0 20px 70px rgba(0,0,0,.5); }.email-modal-card h2 { color:var(--white); font-size:2.1rem; margin-bottom:8px; }.email-modal-card .eyebrow { color:var(--yellow); }.email-modal-close { position:absolute; top:14px; right:17px; border:0; background:transparent; color:#b8add0; font-size:1.8rem; cursor:pointer; }.modal-sub { color:#b8add4; margin-bottom:22px; }.email-modal-card label { display:block; margin:13px 0 6px; color:#c9c0df; font-size:.84rem; font-weight:800; }.email-modal-card input { width:100%; border:1px solid #3d3553; border-radius:10px; padding:12px; color:var(--white); background:#211b31; font:inherit; }.email-modal-card input:focus { outline:3px solid rgba(191,167,242,.25); border-color:var(--lilac); }.modal-submit { margin-top:22px; border:0; cursor:pointer; }.modal-submit:disabled { opacity:.55; cursor:wait; }.email-message { min-height:24px; margin-top:12px; border-radius:8px; padding:5px 8px; font-size:.82rem; }.email-message:empty { display:none; }.email-message.error { color:#fecaca; background:rgba(239,68,68,.14); }.email-message.success { color:#a7f3d0; background:rgba(16,185,129,.14); }.email-message.info { color:#bfdbfe; background:rgba(59,130,246,.14); }.email-modal-toggle { margin-top:20px; color:#aaa0c0; text-align:center; font-size:.88rem; }.email-modal-toggle button { color:var(--lilac); border:0; background:none; cursor:pointer; font:inherit; font-weight:800; }.email-logged-in { text-align:center; }.email-logged-in[hidden] { display:none; }.email-logged-in p { color:#c9c0df; }.email-avatar { display:grid; place-items:center; width:70px; height:70px; margin:0 auto 15px; border-radius:50%; background:linear-gradient(135deg,#7c5cfc,#a78bfa); font-size:1.8rem; font-weight:900; }.email-logged-in h2 { margin-bottom:4px; }
.cta { background:var(--purple); color:var(--white); border-radius:35px; padding:50px 55px; display:flex; align-items:center; justify-content:space-between; gap:25px; }.cta h2 { color:var(--white); margin:0; }.cta .eyebrow { color:var(--yellow); }.site-footer { display:flex; justify-content:space-between; gap:20px; padding:30px 0 45px; color:#8c7f91; font-size:.82rem; }
@media (max-width:800px) { .hero,.feature,.community { grid-template-columns:1fr; gap:30px; padding-top:45px; }.hero { padding-bottom:75px; }.hero-art { order:-1; }.strip { grid-template-columns:1fr; padding-bottom:75px; }.promos { padding-bottom:80px; }.promo-grid { grid-template-columns:1fr; }.promo-card { min-height:240px; }.feature { padding-bottom:80px; }.battery-card,.support-card,.email-list,.cta { padding:30px; flex-direction:column; align-items:flex-start; margin-bottom:75px; }.battery-card img { width:190px; align-self:center; }.discord-frame { width:100%; }.email-list-button { grid-template-columns:auto auto 1fr auto; }.email-modal-card { padding:28px 24px; }.site-footer { flex-direction:column; }.header-link { font-size:.85rem; } }