/* Zen Macro — projectreal.gg design system, ported.
Tokens, scale, easing and component shapes mirror projectreal.gg's stylesheet.
Kept separate from proto.css so the other prototype-*.html pages still render. */
:root {
/* palette taken from the Zen Macro app UI: navy panels, blue action colour,
and the gold/elixir/dark resource accents used in its stat row */
/* page is pure black below the hero; --bg-2/-3 stay navy so panels lift off it */
--bg: #000000; --bg-2: #111827; --bg-3: #1a2233;
--surface: rgba(150,175,220,.05); --surface-2: rgba(150,175,220,.09);
--surface-glass: rgba(20,31,52,.72); --surface-glass-strong: rgba(22,35,59,.9);
--border: rgba(150,175,220,.13); --border-2: rgba(150,175,220,.22);
--fg: #e9edf6;
--fg-90: rgba(233,237,246,.92); --fg-70: rgba(233,237,246,.72);
--fg-60: rgba(233,237,246,.6); --fg-50: rgba(233,237,246,.5);
--fg-40: rgba(233,237,246,.4); --fg-30: rgba(233,237,246,.3);
--fg-15: rgba(233,237,246,.15);
--accent: #3b7bf5; --accent-hover: #2f6ae4; --accent-soft: rgba(59,123,245,.16);
--accent-pale: #8eb8ff; --cyan: #2fd4e8; --accent-cyan: #78e7f2;
--gold: #f5c542; --elixir: #e356c8; --dark-elixir: #8b5cf6;
--hl: #3b7bf5;
--r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 36px;
--shadow-1: 0 1px 2px rgba(0,0,0,.4);
--shadow-2: 0 20px 40px -16px rgba(0,0,0,.7);
--shadow-3: 0 40px 100px rgba(0,0,0,.6);
--shadow-glow: 0 24px 90px -38px rgba(75,132,255,.58);
--s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px;
--font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
--ease: cubic-bezier(.22, 1, .36, 1);
--dur: .6s; --dur-sm: .3s;
}
*, *:before, *:after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
background: var(--bg); color-scheme: dark; scroll-behavior: smooth;
scroll-padding-top: 88px; -webkit-text-size-adjust: 100%;
overflow-x: hidden; max-width: 100%;
}
body {
background: var(--bg); color: var(--fg); font-family: var(--font);
font-weight: 400; font-size: 17px; line-height: 1.5; letter-spacing: -.005em;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-pale); outline-offset: 4px; }
img, video { max-width: 100%; }
/* fine grain over everything — large flat darks band badly without it, and it's
what stops the gradients reading as cheap. */
body::after {
content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
opacity: .05; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* ── type ─────────────────────────────────────────────────── */
.display, h1.display { font-size: clamp(56px,9.5vw,132px); font-weight: 700; line-height: .96; letter-spacing: -.04em; margin: 0; }
.headline, h2.headline { font-size: clamp(40px,5.6vw,80px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; margin: 0;
background: linear-gradient(178deg, #ffffff 34%, #8fa2c4 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.subheadline { font-size: clamp(28px,3.4vw,44px); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; margin: 0; }
.lede { font-size: clamp(19px,1.6vw,24px); font-weight: 400; line-height: 1.45; color: var(--fg-70); letter-spacing: -.012em; }
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--fg-70); margin: 0 0 var(--s3); display: inline-block; }
.small { font-size: 13px; line-height: 1.45; color: var(--fg-50); }
.gradient-text { background: linear-gradient(180deg,#fff 30%,rgba(233,237,246,.55)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
::selection { background: var(--accent-soft); }
/* ── layout ───────────────────────────────────────────────── */
.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px,4vw,40px); }
.section { padding-block: clamp(80px,12vw,160px); position: relative; }
.section-tight { padding-block: clamp(48px,8vw,96px); }
.section-head { position: relative; text-align: center; margin-inline: auto; margin-bottom: clamp(48px,6vw,80px); max-width: 880px; }
/* accent bloom behind each section title, so sections read as lit rather than
as text floating on flat black */
.section-head::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
left: 50%; top: -40%; transform: translateX(-50%);
width: min(760px, 92vw); height: 300px;
background: radial-gradient(closest-side, rgba(59,123,245,.17), transparent 72%);
filter: blur(16px);
}
/* hairline that fades at both ends, between stacked sections.
.section-tight is deliberately excluded — the stats band draws its own borders. */
.section + .section::before {
content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: min(1280px, 92vw); height: 1px;
background: linear-gradient(90deg, transparent, var(--border-2), transparent);
}
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,96px); align-items: center; }
.text-center { text-align: center; }
.img-full { width: 100%; height: auto; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* ── buttons ──────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 44px; padding-inline: 22px; border: 0; border-radius: 999px;
font-size: 14px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
transition: transform .18s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.stat-value, .ring-num { font-variant-numeric: tabular-nums; }
/* matches the app's blue "start" button */
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 20px -8px rgba(59,123,245,.7); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--bg-3); color: var(--fg); border: 1px solid var(--border); }
.btn-ghost:hover { background: #212b3f; border-color: var(--border-2); }
/* sits on the bright hero, so it's a dark tint rather than a light one */
.btn-glass { background: rgba(0,0,0,.08); color: #000; border: 0; }
.btn-glass:hover { background: rgba(0,0,0,.14); }
.btn-link { height: auto; padding: 0; background: transparent; color: var(--accent); border-radius: 0; }
.btn-link:after { content: "→"; margin-left: 4px; transition: transform .18s var(--ease); }
.btn-link:hover:after { transform: translateX(3px); }
.btn-sm { height: 32px; padding-inline: 14px; font-size: 13px; }
.btn-lg { height: 52px; padding-inline: 30px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-discord { background: #5865f2; color: #fff; }
.btn-discord:hover { background: #4752c4; }
.btn svg { flex: none; }
/* ── motion primitives ────────────────────────────────────── */
/* staged hero entrance — fires on load, not on scroll */
@keyframes enter { to { opacity: 1; transform: none; } }
.enter-1, .enter-2, .enter-3, .enter-4, .enter-5, .enter-mockup {
opacity: 0; transform: translateY(20px); animation: enter 1s var(--ease) forwards;
}
.enter-2 { animation-delay: .08s; }
.enter-3 { animation-delay: .16s; }
.enter-4 { animation-delay: .24s; }
.enter-5 { animation-delay: .32s; }
.enter-mockup { animation-delay: .4s; transform: translateY(60px); }
.scroll-progress {
position: fixed; top: 0; left: 0; height: 1px; width: var(--p, 0%);
background: var(--fg-50); z-index: 200; opacity: 0;
transition: width .1s linear, opacity var(--dur-sm);
}
.scroll-progress.active { opacity: 1; }
/* .js is set by an inline script in . Without it these stay visible, so a
failed/disabled script can never leave the page blank below the fold. */
.js [data-reveal], .js [data-stagger] > * {
opacity: 0; transform: translateY(28px);
transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform;
}
.js [data-reveal].revealed, .js [data-stagger].revealed > * { opacity: 1; transform: none; }
[data-stagger].revealed > *:nth-child(2) { transition-delay: 80ms; }
[data-stagger].revealed > *:nth-child(3) { transition-delay: .16s; }
[data-stagger].revealed > *:nth-child(4) { transition-delay: .24s; }
[data-stagger].revealed > *:nth-child(5) { transition-delay: .32s; }
[data-stagger].revealed > *:nth-child(6) { transition-delay: .4s; }
/* ── nav ──────────────────────────────────────────────────── */
/* Dark glyphs over the bright hero, light once scrolled onto the navy page —
the two-state trick projectreal.gg uses. */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; background: transparent;
transition: background .26s ease, backdrop-filter .26s ease, border-color .26s ease;
border-bottom: 1px solid transparent; }
.nav.scrolled, .nav.menu-open {
background: rgba(0,0,0,.86); border-bottom-color: var(--border);
backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.nav-inner { height: 64px; display: flex; align-items: center; gap: 12px;
max-width: 1536px; margin-inline: auto; padding-inline: clamp(16px,3vw,24px); }
.nav-logo { display: flex; align-items: center; gap: 8px; line-height: 0; flex-shrink: 0;
color: #000; font-weight: 600; font-size: 15px; letter-spacing: -.02em;
transition: color var(--dur-sm); }
.nav-logo img { width: 22px; height: 22px; border-radius: 6px; }
.nav.scrolled .nav-logo, .nav.menu-open .nav-logo { color: var(--fg); }
.nav-links { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.nav-links a { position: relative; font-size: 13px; font-weight: 500; letter-spacing: -.01em;
color: rgba(0,0,0,.72); padding: 6px 16px; transition: color var(--dur-sm); }
.nav-links a:hover { color: #000; }
.nav.scrolled .nav-links a, .nav.menu-open .nav-links a { color: var(--fg-70); }
.nav.scrolled .nav-links a:hover, .nav.menu-open .nav-links a:hover { color: var(--fg); }
.nav-links a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px;
background: var(--accent); transform: scaleX(0); transform-origin: left;
transition: transform .3s var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.nav-cta .btn { height: 32px; padding-inline: 14px; font-size: 13px; }
.nav-signin { background: rgba(0,0,0,.08); color: #000; border: 1px solid transparent; }
.nav-signin:hover { background: rgba(0,0,0,.14); }
.nav.scrolled .nav-signin, .nav.menu-open .nav-signin { background: var(--surface-2); color: var(--fg); border-color: var(--border); }
.nav.scrolled .nav-signin:hover { background: rgba(150,175,220,.14); }
.nav-try { background: var(--accent); color: #fff; }
.nav-try:hover { background: var(--accent-hover); }
/* Signed-in identity chip. Replaces the "Dashboard" text link: people recognise their own
face faster than they read a word, and it doubles as proof of WHICH account is signed in
-- which matters here because Google and Discord can both sign you in and the Discord
identity wins the name (see 0013_discord_link_profile.sql).
Mirrors .nav-signin's two states: the nav sits transparent over the hero and turns to a
surface once scrolled, so anything in it has to read on both. */
.nav-profile { display: inline-flex; align-items: center; gap: 8px; height: 32px;
padding: 3px 12px 3px 3px; border-radius: 999px; text-decoration: none;
background: rgba(0,0,0,.08); color: #000; border: 1px solid transparent;
transition: background var(--dur-sm), border-color var(--dur-sm), color var(--dur-sm); }
.nav-profile:hover { background: rgba(0,0,0,.14); }
.nav.scrolled .nav-profile, .nav.menu-open .nav-profile {
background: var(--surface-2); color: var(--fg); border-color: var(--border); }
.nav.scrolled .nav-profile:hover { background: rgba(150,175,220,.14); }
.nav-profile .pfp { width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
flex: none; display: block; background: var(--surface-2); }
/* Initial-letter fallback: a Discord CDN URL can 404 or be blocked, and a broken image
icon where someone's face should be looks like the site is broken. */
.nav-profile .pfp-fallback { width: 26px; height: 26px; border-radius: 50%; flex: none;
display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1;
background: var(--accent); color: #fff; text-transform: uppercase; }
.nav-profile .who { font-size: 13px; font-weight: 600; max-width: 130px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Drawer version: full width, left aligned, no pill. */
.nav-drawer .drawer-profile { display: flex; align-items: center; gap: 10px; }
.nav-drawer .drawer-profile .pfp,
.nav-drawer .drawer-profile .pfp-fallback { width: 30px; height: 30px; }
.nav-mobile-btn { display: none; width: 44px; height: 44px; padding: 0; flex-direction: column;
justify-content: center; align-items: center; gap: 4px; color: #000; background: transparent; border: 0; cursor: pointer; }
.nav.scrolled .nav-mobile-btn, .nav.menu-open .nav-mobile-btn { color: var(--fg); }
.nav-mobile-btn span { width: 18px; height: 2px; display: block; background: currentColor; border-radius: 999px;
transition: transform .32s var(--ease), opacity .18s ease, background-color var(--dur-sm); }
.nav-mobile-btn[aria-expanded="true"] span:nth-child(1) { transform: translate3d(0,6px,0) rotate(45deg); }
.nav-mobile-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.35); }
.nav-mobile-btn[aria-expanded="true"] span:nth-child(3) { transform: translate3d(0,-6px,0) rotate(-45deg); }
.nav-drawer {
position: fixed; inset: 64px 0 0; background: rgba(0,0,0,.97);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
z-index: 99; padding: var(--s4); display: flex; flex-direction: column; overflow-y: auto;
opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0,-100%,0);
transition: transform .44s var(--ease), opacity .26s ease, visibility 0s linear .44s;
}
.nav-drawer.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.nav-drawer a { display: flex; align-items: center; font-size: 22px; font-weight: 500; letter-spacing: -.02em;
padding: 14px 4px; border-bottom: 1px solid var(--border); color: var(--fg);
opacity: 0; transform: translate3d(0,-18px,0);
transition: opacity .26s ease, transform .42s var(--ease); }
.nav-drawer.open a { opacity: 1; transform: none; }
.nav-drawer.open > :nth-child(1) { transition-delay: 90ms; }
.nav-drawer.open > :nth-child(2) { transition-delay: 125ms; }
.nav-drawer.open > :nth-child(3) { transition-delay: .16s; }
.nav-drawer.open > :nth-child(4) { transition-delay: 195ms; }
.nav-drawer.open > :nth-child(5) { transition-delay: .23s; }
.nav-drawer.open > :nth-child(6) { transition-delay: 265ms; }
.nav-drawer.open > :nth-child(7) { transition-delay: .3s; }
.nav-drawer.open > :nth-child(8) { transition-delay: 335ms; }
.nav-drawer .drawer-primary { margin-top: 12px; font-size: 17px; padding: 15px 16px;
border-bottom: none !important; border-radius: 999px; background: var(--accent); color: #fff;
justify-content: center; }
.nav-drawer .drawer-ghost { font-size: 17px; padding: 15px 16px; margin-top: 8px;
border-bottom: none !important; border-radius: 999px; background: var(--surface-2);
justify-content: center; }
/* ── hero ─────────────────────────────────────────────────── */
/* A bright, blurred village loop behind black type — the inverse of the rest of
the page, which is what gives projectreal.gg its opening contrast. */
/* Bright, drifting hero — the light half of the page, so the black wordmark
reads. Everything below the fold stays navy; the vignette does the handoff. */
.hero-atmosphere {
position: absolute; inset: 0 0 auto; height: min(1240px,120vw); min-height: 860px;
overflow: hidden; pointer-events: none; isolation: isolate;
background: #cfe0f2;
}
.hero-atmosphere > * { position: absolute; inset: 0; }
.hero-atmosphere-base {
background: linear-gradient(180deg, #f2f8ff 0%, #d8e8fa 36%, #b6d0ee 62%, #8fb0d8 100%);
}
/* four slow blobs, heavily blurred — the drift is what keeps the sky alive */
.hero-aurora { filter: blur(90px); opacity: .9; }
.hero-aurora i { position: absolute; display: block; border-radius: 50%; }
.hero-aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 1%; top: -8%; background: #74acff; animation: drift 32s ease-in-out infinite; }
.hero-aurora i:nth-child(2) { width: 40vw; height: 40vw; left: 55%; top: 6%; background: #54d6ea; animation: drift 40s ease-in-out infinite reverse; }
.hero-aurora i:nth-child(3) { width: 38vw; height: 38vw; left: 25%; top: -14%; background: #a98cff; animation: drift 36s ease-in-out infinite; }
.hero-aurora i:nth-child(4) { width: 32vw; height: 32vw; left: 70%; top: 40%; background: #ffffff; opacity: .7; animation: drift 46s ease-in-out infinite reverse; }
@keyframes drift {
0%, 100% { transform: none; }
33% { transform: translate(8vw, 5vh) scale(1.16); }
66% { transform: translate(-6vw, -3vh) scale(.88); }
}
.hero-atmosphere-sheen {
background:
radial-gradient(ellipse at 50% 4%, rgba(255,255,255,.55), transparent 46%),
linear-gradient(116deg, transparent 18%, rgba(255,255,255,.3) 37%, transparent 51%),
repeating-linear-gradient(112deg, transparent 0 16px, rgba(255,255,255,.03) 17px 18px);
mix-blend-mode: soft-light; opacity: .8;
animation: hero-sheen 16s ease-in-out infinite alternate;
}
@keyframes hero-sheen {
from { transform: translate3d(-4%,0,0) scale(1.04); }
to { transform: translate3d(5%,1%,0) scale(1.1); }
}
/* multiply, not screen: on the bright sky the digits have to read as dark ink */
#byteField { width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; opacity: .8; }
/* hands the bright hero back to the navy page below */
.hero-atmosphere-vignette {
background:
radial-gradient(ellipse at center, transparent 45%, rgba(18,38,74,.26) 100%),
linear-gradient(to bottom, transparent 38%, rgba(0,0,0,.72) 78%, var(--bg) 97%);
}
.hero-header { position: relative; z-index: 1; padding-bottom: clamp(40px,5vw,80px); text-align: center; }
.hero-copy { min-height: max(720px,100svh); padding-block: clamp(80px,10vh,120px);
display: flex; flex-direction: column; justify-content: center; }
.hero-copy .display {
font-weight: 600; background: none; filter: none;
color: #000; -webkit-text-fill-color: #000;
text-shadow: 0 2px 30px rgba(255,255,255,.45);
}
.hero-copy .lede { color: rgba(0,0,0,.72); }
.hero-eyebrow { color: rgba(0,0,0,.58); font-size: 13px; font-weight: 500; margin-bottom: 18px; }
.hero-main-lede { position: relative; z-index: 2; max-width: 660px; margin: 14px auto 0;
font-size: clamp(15px,1.25vw,18px); line-height: 1.45; letter-spacing: -.01em; }
.hero-cta { margin-top: 22px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { height: 40px; padding-inline: 20px; border-radius: 40px; font-size: 14px; }
.hero-disclaimer { margin-top: 16px; font-size: 13px; color: rgba(0,0,0,.6); }
.hero-disclaimer a { color: #000; text-decoration: underline; text-decoration-color: rgba(0,0,0,.34); text-underline-offset: 3px; }
.hero-disclaimer a:hover { text-decoration-color: #000; }
.hero-partners { width: min(100%,980px); margin: clamp(48px,6vw,78px) auto 0; text-align: center; }
.hero-partners-label { margin: 0; color: rgba(0,0,0,.52); font-size: clamp(13px,1vw,15px); font-weight: 500; letter-spacing: -.01em; }
.hero-partners-strip { margin-top: 16px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
align-items: center; justify-items: center; gap: clamp(14px,2.2vw,30px); }
.hero-partner-logo { font-size: clamp(13px,1.15vw,16px); font-weight: 600; letter-spacing: -.02em;
color: rgba(0,0,0,.55); opacity: .85; transition: opacity .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.hero-partner-logo:hover { opacity: 1; color: #000; transform: translateY(-1px); }
/* rotation: only the slots the script marks visible are shown; the rest sit out of flow.
.is-swapping is the 400ms fade-out/in window — the duration is hard-coded in the JS too. */
.hero-partner-logo.is-swapping { opacity: 0; transform: translate3d(0, var(--swap-y, 6px), 0); }
.hero-partners-strip:not(.is-rotating) .hero-partner-logo:nth-child(n+6),
.hero-partners-strip.is-rotating .hero-partner-logo.is-partner-hidden { display: none; }
.hero-mockup { position: relative; z-index: 1; margin-top: clamp(56px,9vh,120px); padding-inline: clamp(20px,4vw,40px); }
.hero-mockup-split { max-width: 1060px; margin-inline: auto; display: grid;
grid-template-columns: 1fr 240px; gap: clamp(40px,6vw,64px); align-items: center; }
/* uptime ring — the shape projectreal fills with its sUNC score */
.ring-aside { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.ring-wrap { position: relative; width: 152px; height: 152px; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--border-2); stroke-width: 6; }
.ring-fill { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
filter: drop-shadow(0 0 10px rgba(59,123,245,.6));
stroke-dasharray: 415; stroke-dashoffset: 415; transition: stroke-dashoffset 1.6s var(--ease); }
/* circumference is 2*pi*66 = 415; offset = 415 * (1 - pct), so 99% -> 4 */
.revealed .ring-fill { stroke-dashoffset: 4; }
.ring-num { position: absolute; inset: 0; display: grid; place-items: center;
font-size: 34px; font-weight: 600; letter-spacing: -.04em; }
.ring-label { font-size: 13px; font-weight: 500; color: var(--fg-50); margin-top: 8px; }
.ring-meta { display: flex; flex-direction: column; align-items: center; gap: 10px;
padding-top: 24px; border-top: 1px solid var(--border); width: 100%; }
.ring-copy { font-size: 13.5px; line-height: 1.65; color: var(--fg-50); margin: 0; }
/* ── app mockups ──────────────────────────────────────────── */
.mock { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border);
background: var(--bg-3); box-shadow: var(--shadow-3); }
/* a real screenshot rather than a CSS mock — the frame keeps the same chrome */
.mock-shot { line-height: 0; }
.mock-shot > img { display: block; width: 100%; height: auto; }
.mock-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); }
.mock-bar img { width: 15px; height: 15px; border-radius: 5px; }
.mock-bar b { font-size: 10px; letter-spacing: .2em; font-weight: 600; }
.mock-tabs { display: flex; gap: 4px; margin-left: auto; }
.mock-tabs span { font-size: 10px; color: var(--fg-50); padding: 4px 10px; border-radius: 7px; }
.mock-tabs span.on { color: #fff; background: var(--accent); }
.mock-body { display: grid; grid-template-columns: 1.5fr 1fr; }
.mock-l { padding: 16px; border-right: 1px solid var(--border); }
.mock-r { padding: 16px; }
.k { font-size: 10px; color: var(--fg-50); letter-spacing: .12em; text-transform: uppercase; }
.chart { height: 96px; margin: 12px 0 16px;
background: linear-gradient(180deg, rgba(59,123,245,.75), rgba(59,123,245,.03) 88%);
clip-path: polygon(0 92%,14% 90%,28% 91%,42% 87%,55% 88%,64% 83%,71% 4%,76% 74%,86% 70%,100% 66%,100% 100%,0 100%); }
.cells { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 9px; }
.cell { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 11px; background: var(--surface); }
.cell b { display: block; font-size: 13px; font-weight: 600; }
/* same resource colours the app uses in its stat row */
.cell b.g { color: var(--gold); }
.cell b.e { color: var(--elixir); }
.cell b.d { color: var(--dark-elixir); }
.cell span { font-size: 9px; color: var(--fg-50); letter-spacing: .08em; text-transform: uppercase; }
.lic { font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin: 8px 0 13px; }
.mrow { display: flex; justify-content: space-between; font-size: 11px; color: var(--fg-50);
padding: 7px 0; border-bottom: 1px solid var(--border); }
.mrow b { color: var(--fg); font-weight: 500; }
.keybox { margin-top: 14px; border-radius: var(--r-sm); padding: 12px;
border: 1px solid rgba(59,123,245,.4); background: var(--accent-soft); }
.keybox b { font-size: 12px; letter-spacing: .14em; font-family: var(--mono); }
.keybox span { display: block; font-size: 9px; color: var(--fg-50); margin-top: 4px; }
/* leaderboard mock */
.mock-pad { padding: 16px 18px 18px; }
.lb { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.lb:last-child { border-bottom: 0; }
.lb i { font-style: normal; width: 22px; font-family: var(--mono); font-size: 11px; color: var(--fg-40); }
.lb u { text-decoration: none; width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg,#555,#222); flex: none; overflow: hidden; }
.lb u img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb b { font-weight: 500; }
.lb span { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--fg-50); }
.lb.top b { font-weight: 600; }
.lb.top span { color: var(--fg); }
/* settings / toggles mock */
.set { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.set:last-child { border-bottom: 0; }
.set em { font-style: normal; display: block; font-size: 10px; color: var(--fg-40); margin-top: 2px; }
.sw { margin-left: auto; width: 34px; height: 19px; border-radius: 999px; background: rgba(255,255,255,.1); position: relative; flex: none; }
.sw:after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--fg-40); transition: .2s var(--ease); }
.sw.on { background: var(--accent); }
.sw.on:after { left: 18px; background: #fff; }
/* webhook feed mock */
.hook { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.hook:last-child { border-bottom: 0; }
.hook u { text-decoration: none; width: 24px; height: 24px; border-radius: 50%; flex: none; background: #5865f2; }
.hook b { display: block; font-weight: 600; font-size: 11px; }
.hook p { margin: 3px 0 0; color: var(--fg-50); font-size: 11px; line-height: 1.5; }
.hook time { margin-left: auto; font-size: 10px; color: var(--fg-30); font-family: var(--mono); }
/* activity log mock */
.log { font-family: var(--mono); font-size: 11.5px; line-height: 2; color: var(--fg-50); margin: 0; padding: 18px 20px; }
.log b { color: var(--fg); font-weight: 400; }
.log i { font-style: normal; color: var(--fg-30); }
/* base-grid art */
.grid-art { aspect-ratio: 4 / 3; border-radius: var(--r-xl); border: 1px solid var(--border);
background:
repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 12.5%),
repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 12.5%),
var(--bg-2);
box-shadow: var(--shadow-3); position: relative; overflow: hidden; }
.grid-art i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 12px rgba(59,123,245,.8); animation: troop 6s ease-in-out infinite; }
.grid-art i:nth-child(1) { left: 18%; top: 70%; animation-delay: 0s; }
.grid-art i:nth-child(2) { left: 33%; top: 78%; animation-delay: -1.2s; }
.grid-art i:nth-child(3) { left: 52%; top: 74%; animation-delay: -2.4s; }
.grid-art i:nth-child(4) { left: 68%; top: 80%; animation-delay: -3.6s; }
.grid-art i:nth-child(5) { left: 82%; top: 68%; animation-delay: -4.8s; }
.grid-art b { position: absolute; left: 50%; top: 34%; transform: translate(-50%,-50%);
width: 26%; aspect-ratio: 1; border: 1px solid var(--fg-30); border-radius: var(--r-sm); }
@keyframes troop { 0%,100% { transform: translate(0,0); opacity: .5; } 50% { transform: translate(0,-38%); opacity: 1; } }
/* ── product video ────────────────────────────────────────── */
.product-video-stage { position: relative; max-width: 980px; margin: clamp(32px,4vw,56px) auto 0; }
/* ambient light: a 64x36 canvas painted with the current video frame, blown up and
blurred behind the player so the page picks up the colour of what's on screen */
.product-video-glow {
position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
border-radius: var(--r-2xl); transform: scale(1.35,1.55) translateZ(0);
filter: blur(50px) saturate(1.35);
-webkit-mask-image: radial-gradient(ellipse at center,#000 34%,transparent 70%);
mask-image: radial-gradient(ellipse at center,#000 34%,transparent 70%);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
opacity: 0; transition: opacity .9s var(--ease); pointer-events: none;
}
.product-video-stage.glow-on .product-video-glow { opacity: .55; }
.product-video { position: relative; z-index: 1; aspect-ratio: 16 / 9; border-radius: var(--r-xl);
overflow: hidden; background: #000; box-shadow: var(--shadow-3); }
.product-video-el { width: 100%; height: 100%; display: block; object-fit: cover; }
.product-video-unmute { position: absolute; top: 14px; right: 14px; z-index: 2;
display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
border: 1px solid var(--border-2); border-radius: 999px; background: rgba(0,0,0,.6);
color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; backdrop-filter: blur(8px);
transition: background var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease); }
.product-video-unmute:hover { background: var(--accent); color: #fff; border-color: transparent; }
.product-video-unmute:active { transform: scale(.96); }
.product-video-unmute[hidden] { display: none; }
/* ── screen tour ──────────────────────────────────────────── */
.screen-stack { display: flex; flex-direction: column; gap: clamp(60px,8vw,120px); }
.screen-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px,5vw,80px); align-items: center; }
.screen-row.reverse { grid-template-columns: 1.4fr 1fr; }
.screen-row.reverse .screen-text { order: 2; }
.screen-row.reverse .screen-shot { order: 1; }
.screen-text .eyebrow { color: var(--fg-70); margin-bottom: 18px; display: block; }
.screen-title { font-size: clamp(32px,4vw,56px); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; margin: 0 0 22px; }
.screen-body { font-size: 17px; line-height: 1.55; color: var(--fg-70); max-width: 42ch; margin: 0; }
.screen-shot { border-radius: 12px; overflow: hidden; border: 1px solid var(--border);
box-shadow: var(--shadow-3); background: var(--bg-2); }
/* direct children only — the mock inside a screen-shot has its own 15px bar icon */
.screen-shot > video, .screen-shot > img { width: 100%; height: auto; display: block; }
/* holds the box open before metadata arrives, so the row doesn't jump on load */
.screen-shot > video { aspect-ratio: 16 / 9; object-fit: cover; }
.screen-shot .mock { border: 0; border-radius: 0; box-shadow: none; }
/* ── community marquee ────────────────────────────────────── */
.showcase { position: relative; margin-top: clamp(36px,4vw,56px); }
.showcase-viewport { overflow: hidden;
-webkit-mask-image: linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
mask-image: linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); }
/* ponytail: pure-CSS marquee over a doubled track — no JS carousel needed. */
.showcase-track { display: flex; width: max-content; padding-block: 6px; margin: 0; padding-inline: 0; list-style: none;
animation: showcase-marquee 80s linear infinite; }
.showcase:hover .showcase-track { animation-play-state: paused; }
@keyframes showcase-marquee { to { transform: translateX(-50%); } }
.showcase-item { flex: 0 0 auto; width: clamp(258px,26vw,340px); margin-right: clamp(14px,1.6vw,22px); }
.quote-card { height: 100%; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--r-lg);
background: var(--bg-2); display: flex; flex-direction: column; gap: 14px;
transition: transform var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease); }
.quote-card:hover { transform: translateY(-4px); border-color: var(--border-2); }
.quote-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg-70); }
.quote-card .stars { color: var(--gold); font-size: 13px; letter-spacing: 2px; line-height: 1; }
.quote-who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.quote-who u { text-decoration: none; width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg,#2b3b57,#161d2b); flex: none;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600; color: var(--fg-70); }
.quote-who b { font-size: 13px; font-weight: 600; }
.quote-who span { font-size: 11px; color: var(--fg-40); display: block; }
/* ── why cards ────────────────────────────────────────────── */
.why-row { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,1.4vw,22px); }
.why-card { position: relative; isolation: isolate; overflow: hidden;
background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-2xl);
padding: clamp(22px,2vw,30px); display: flex; flex-direction: column; gap: 12px; min-height: 360px;
transition: transform .35s var(--ease), border-color .35s var(--ease); }
.why-card:hover { transform: translateY(-4px); border-color: var(--border-2); }
/* spotlight tracking the cursor — --mx/--my are written by the page script */
.why-card::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(59,123,245,.20), transparent 68%);
opacity: 0; transition: opacity .35s var(--ease);
}
.why-card:hover::before { opacity: 1; }
.why-card .why-art { transition: transform .45s var(--ease), color .35s var(--ease); }
.why-card:hover .why-art { transform: translateY(-4px) scale(1.04); color: var(--accent); }
.why-eyebrow { font-size: 12px; font-weight: 500; color: var(--fg-50); margin-bottom: 4px; }
.why-card h4 { font-size: clamp(18px,1.5vw,22px); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; margin: 0; }
.why-card p { font-size: 13px; color: var(--fg-50); line-height: 1.55; margin: 0; max-width: 28ch; }
.why-art { margin-top: auto; height: 130px; display: flex; align-items: center; justify-content: center; color: var(--fg-30); }
/* ── mode switcher ────────────────────────────────────────── */
.switcher { max-width: 940px; margin: clamp(28px,3.5vw,48px) auto 0; }
.switch-stage { position: relative; border-radius: var(--r-md);
overflow: hidden; box-shadow: var(--shadow-3); background: var(--bg-2); }
/* first slide stays in flow so it sets the stage height; the rest stack on top of it */
.switch-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.switch-slide:first-child { position: relative; }
.switch-slide.is-active { opacity: 1; }
.switch-slide .mock { height: 100%; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
.switch-slide .mock-pad { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.switch-slide .log { flex: 1; } /* stays a — flexing it would split every line into an item */
.switch-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px; border: 1px solid var(--border-2); background: rgba(0,0,0,.5);
color: #fff; cursor: pointer; backdrop-filter: blur(8px); transition: background .2s var(--ease); }
.switch-arrow--prev { left: 12px; }
.switch-arrow--next { right: 12px; }
.switch-arrow:hover { background: rgba(0,0,0,.72); }
.switch-caption { margin: 14px 0 0; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
/* ── accordion ────────────────────────────────────────────── */
.acc-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px,6vw,96px); align-items: start; }
.acc-item { border-top: 1px solid var(--border); padding-block: clamp(20px,2.2vw,28px); }
.acc-item:last-child { border-bottom: 1px solid var(--border); }
.acc-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer;
width: 100%; text-align: left; background: none; border: 0; padding: 0;
font-size: clamp(20px,1.8vw,26px); font-weight: 600; letter-spacing: -.018em; line-height: 1.2; color: var(--fg); }
.acc-arrow { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
color: var(--fg-50); transition: transform .25s var(--ease); flex: none; }
.acc-item.open .acc-arrow { transform: rotate(180deg); color: var(--fg); }
.acc-body { display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .4s var(--ease), margin-top .3s var(--ease);
font-size: 15px; color: var(--fg-70); line-height: 1.6; }
.acc-body-inner { overflow: hidden; min-height: 0; }
.acc-item.open .acc-body { grid-template-rows: 1fr; margin-top: 16px; }
/* ── stats ────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s4); justify-items: center; text-align: center; }
.stat-value { font-size: clamp(36px,4.5vw,60px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
/* ── plan table ───────────────────────────────────────────── */
.pt-section { padding-top: clamp(8px,2vw,24px); }
.pt-scroll { max-width: 940px; margin-inline: auto; overflow-x: auto; padding-top: 18px; }
.pt-grid { min-width: 760px; }
.pt-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: stretch; }
.pt-c { padding: 15px clamp(8px,1.4vw,18px); font-size: 14px; display: flex; align-items: center;
justify-content: center; text-align: center; color: var(--fg-70); border-bottom: 1px solid var(--border); }
.pt-perk { justify-content: flex-start; text-align: left; color: var(--fg-60); font-weight: 500; font-size: 13.5px; }
.pt-strong { color: var(--fg); font-weight: 600; }
.pt-yes { color: var(--fg); }
.pt-no { color: var(--fg-30); }
.pt-headcell { flex-direction: column; gap: 3px; padding-block: 20px 18px; position: relative; border-bottom-color: var(--border-2); }
.pt-name { font-weight: 700; font-size: 15px; color: var(--fg); letter-spacing: -.01em; }
.pt-price { font-size: 22px; font-weight: 750; color: var(--fg); line-height: 1; margin-top: 2px; }
.pt-sub { font-size: 11.5px; color: var(--fg-50); }
.pt-hl { border-left: 1px solid var(--hl); border-right: 1px solid var(--hl); border-bottom-color: rgba(59,123,245,.35); }
.pt-head .pt-hl { border-top: 1px solid var(--hl); border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
.pt-ctarow .pt-hl { border-bottom: 1px solid var(--hl); border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.pt-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
color: var(--hl); background: var(--bg); font-size: 10px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; padding: 0 8px; white-space: nowrap; }
.pt-ctarow .pt-c { padding: 18px clamp(8px,1.4vw,14px); }
.pt-ctacell { align-items: stretch; }
.pt-ctacell .btn { width: 100%; }
.pt-foot { margin-top: 22px; font-size: 13px; color: var(--fg-50); margin-inline: auto; }
.pt-mobile { display: none; }
/* ── discord cta ──────────────────────────────────────────── */
.discord-cta { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
border: 1px solid var(--border); border-radius: var(--r-2xl); padding: clamp(40px,5vw,72px);
display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center; }
/* ── footer ───────────────────────────────────────────────── */
.footer { background: var(--bg); border-top: 1px solid var(--border);
padding-block: var(--s6) var(--s4); margin-top: clamp(24px,3.5vw,48px);
color: var(--fg-50); font-size: 13px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: var(--s5);
padding-bottom: var(--s5); border-bottom: 1px solid var(--border); }
.footer-logo { display: flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 600; font-size: 17px; margin-bottom: var(--s3); }
.footer-logo img { width: 22px; height: 22px; border-radius: 6px; }
.footer-desc { max-width: 320px; line-height: 1.55; margin: 0; }
.footer-desc + p { margin-top: 16px; font-size: 12px; color: var(--fg-30); }
.footer-col-title { color: var(--fg); font-weight: 500; font-size: 13px; margin: 0 0 var(--s3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--fg-50); transition: color var(--dur-sm); }
.footer-col a:hover { color: var(--fg); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
padding-top: var(--s4); font-size: 12px; color: var(--fg-30); flex-wrap: wrap; }
.footer-bottom a { color: var(--fg-30); }
.footer-bottom a:hover { color: var(--fg-70); }
.footer-bottom nav { display: flex; align-items: center; gap: 14px; }
.footer-bottom strong { color: var(--fg-50); }
.footer-socials { justify-content: center; gap: 22px; }
.footer-socials a { display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; color: var(--fg-40);
transition: color var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease); }
.footer-socials a:hover { color: var(--fg); transform: translateY(-1px); }
.footer-socials svg { width: 16px; height: 16px; display: block; }
.lang { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px;
border: 1px solid var(--border); background: var(--surface); color: var(--fg-50); }
.lang svg { width: 15px; height: 15px; }
.lang b { display: block; font-size: 12px; font-weight: 600; color: var(--fg-70); }
.lang small { display: block; font-size: 11px; }
/* ── studio refinement ──────────────────────────────────────
One atmosphere, used sparingly: soft blue light behind crisp product glass. */
body {
background:
radial-gradient(900px 520px at 50% 24%, rgba(40,84,165,.10), transparent 72%),
var(--bg);
}
.container { max-width: 1320px; }
.section { padding-block: clamp(96px,11vw,168px); isolation: isolate; }
.section-head { max-width: 820px; margin-bottom: clamp(52px,6vw,84px); }
.section-head::before {
width: min(820px,94vw); height: 340px; top: -54%;
background: radial-gradient(closest-side, rgba(64,120,235,.20), rgba(48,100,208,.07) 45%, transparent 74%);
filter: blur(24px);
}
.headline, h2.headline {
letter-spacing: -.048em;
background: linear-gradient(178deg,#fff 24%,#cbd8ed 62%,#8195b9 100%);
-webkit-background-clip: text; background-clip: text;
}
.eyebrow {
color: var(--accent-pale); font-family: var(--mono); font-size: 11px;
font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.btn {
border: 1px solid transparent;
transition: transform .2s var(--ease), background .25s ease, color .25s ease,
border-color .25s ease, box-shadow .25s ease;
}
.btn-primary {
border-color: rgba(255,255,255,.16);
background: linear-gradient(180deg,#326ee7 0%,#2457c5 100%);
box-shadow: 0 12px 34px -16px rgba(59,123,245,.95), inset 0 1px rgba(255,255,255,.18);
}
.btn-primary:hover {
background: linear-gradient(180deg,#2f6ae4 0%,#2b63da 100%);
box-shadow: 0 16px 40px -16px rgba(78,139,255,.92), inset 0 1px rgba(255,255,255,.22);
}
.btn-ghost {
background: linear-gradient(180deg,rgba(37,50,77,.9),rgba(23,33,53,.92));
box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.nav.scrolled, .nav.menu-open {
background: linear-gradient(180deg,rgba(7,12,22,.92),rgba(5,9,17,.82));
border-bottom-color: rgba(151,178,222,.16);
box-shadow: 0 12px 40px rgba(0,0,0,.22);
backdrop-filter: saturate(150%) blur(24px);
-webkit-backdrop-filter: saturate(150%) blur(24px);
}
.nav-inner { max-width: 1420px; height: 68px; }
.nav-logo { gap: 9px; font-size: 15.5px; letter-spacing: -.025em; }
.nav-logo img { width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 6px 20px rgba(35,78,164,.18); }
.nav-links a { padding-inline: 14px; }
.nav-links a::after {
left: 14px; right: 14px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg,var(--accent),var(--accent-cyan));
box-shadow: 0 0 14px rgba(87,147,255,.55);
}
.nav-try { box-shadow: 0 8px 24px -12px rgba(59,123,245,.9); }
.nav-drawer {
inset: 68px 0 0;
background:
radial-gradient(640px 320px at 100% 0%,rgba(62,111,220,.16),transparent 72%),
rgba(3,7,13,.98);
}
.hero-atmosphere {
background: #cbdff5;
box-shadow: inset 0 -180px 180px -120px rgba(0,0,0,.76);
}
.hero-atmosphere-base {
background:
radial-gradient(ellipse at 18% 12%,rgba(255,255,255,.92),transparent 34%),
linear-gradient(180deg,#f3f8ff 0%,#d9e9fb 34%,#b7d1ef 61%,#809fc9 100%);
}
.hero-aurora { filter: blur(105px) saturate(1.08); opacity: .86; }
.hero-aurora i:nth-child(1) { background: #6ca8ff; }
.hero-aurora i:nth-child(2) { background: #63d9e8; }
.hero-aurora i:nth-child(3) { background: #a69cff; }
.hero-atmosphere-vignette {
background:
radial-gradient(ellipse at 50% 20%,transparent 34%,rgba(35,65,111,.18) 74%,rgba(9,18,35,.46) 100%),
linear-gradient(to bottom,transparent 36%,rgba(0,0,0,.66) 79%,var(--bg) 97%);
}
.hero-copy { min-height: max(760px,100svh); padding-top: clamp(96px,12vh,138px); }
.hero-copy .display {
font-weight: 650; letter-spacing: -.076em;
text-shadow: 0 1px rgba(255,255,255,.38), 0 24px 70px rgba(31,65,128,.18);
}
.hero-eyebrow {
color: rgba(0,0,0,.57); font-family: var(--mono); font-size: 11px;
letter-spacing: .12em; text-transform: uppercase;
}
.hero-main-lede {
max-width: 680px; margin-top: 18px;
font-size: clamp(17px,1.45vw,21px); line-height: 1.48; letter-spacing: -.018em;
}
.hero-cta { margin-top: 26px; gap: 10px; }
.hero-cta .btn { height: 44px; padding-inline: 22px; }
.hero-cta .btn-primary { box-shadow: 0 14px 32px -14px rgba(30,71,151,.56), inset 0 1px rgba(255,255,255,.24); }
.btn-glass {
background: rgba(255,255,255,.22); border-color: rgba(0,0,0,.10);
box-shadow: inset 0 1px rgba(255,255,255,.38); backdrop-filter: blur(12px);
}
.hero-partners {
width: min(100%,1020px); margin-top: clamp(54px,7vw,86px);
padding-top: 24px; border-top: 1px solid rgba(0,0,0,.09);
}
.hero-partners-label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.hero-partner-logo { color: rgba(0,0,0,.58); font-size: clamp(13px,1.08vw,15px); }
.hero-mockup { margin-top: clamp(72px,10vh,128px); }
.hero-mockup::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
width: min(980px,86vw); height: 280px; left: 50%; bottom: -8%; transform: translateX(-50%);
background: radial-gradient(ellipse,rgba(75,132,255,.23),transparent 68%); filter: blur(30px);
}
.hero-mockup-split { max-width: 1120px; grid-template-columns: minmax(0,1fr) 250px; gap: clamp(40px,5vw,72px); }
.hero-mockup .mock-shot {
border-color: rgba(153,185,237,.25); border-radius: 18px;
box-shadow: 0 44px 120px -52px rgba(62,113,226,.78), 0 22px 66px -34px rgba(0,0,0,.9);
}
.ring-aside {
padding: 28px 24px; border: 1px solid var(--border); border-radius: var(--r-xl);
background: linear-gradient(155deg,rgba(27,42,69,.76),rgba(13,22,38,.72));
box-shadow: inset 0 1px rgba(255,255,255,.035), var(--shadow-glow);
backdrop-filter: blur(14px);
}
.ring-track { stroke: rgba(151,178,222,.16); }
.ring-fill { stroke: var(--accent-pale); }
.section--demo .product-video {
border: 1px solid rgba(145,178,235,.24);
box-shadow: 0 38px 120px -54px rgba(71,122,231,.72), 0 18px 48px -30px rgba(0,0,0,.92);
}
.product-video { border-radius: var(--r-2xl); }
.product-video-stage.glow-on .product-video-glow { opacity: .62; }
.screen-stack { position: relative; gap: clamp(84px,10vw,136px); }
.screen-shot {
border-color: rgba(145,178,235,.20); border-radius: var(--r-md);
box-shadow: 0 34px 100px -52px rgba(75,128,238,.62), 0 20px 60px -38px rgba(0,0,0,.95);
}
.screen-title { letter-spacing: -.042em; }
.quote-card {
border-color: rgba(151,178,222,.15);
background: linear-gradient(150deg,rgba(27,39,62,.84),rgba(14,23,39,.9));
box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.quote-card:hover { border-color: rgba(143,182,249,.28); box-shadow: 0 20px 60px -38px rgba(73,123,229,.62); }
.section--features .why-card {
background: linear-gradient(155deg,rgba(27,40,65,.9),rgba(13,22,38,.88));
border-color: rgba(151,178,222,.15);
box-shadow: inset 0 1px rgba(255,255,255,.028);
}
.why-card:hover { border-color: rgba(139,180,249,.32); box-shadow: 0 28px 72px -48px rgba(66,119,233,.78); }
.why-eyebrow { color: var(--accent-pale); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.why-art { color: rgba(142,184,255,.32); }
.switch-stage {
border: 1px solid rgba(151,178,222,.20); border-radius: var(--r-xl);
box-shadow: 0 38px 110px -54px rgba(70,122,231,.68), 0 20px 64px -42px rgba(0,0,0,.95);
}
.switch-arrow { background: rgba(7,12,22,.68); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.acc-item { border-color: rgba(151,178,222,.16); }
.acc-head { transition: color .22s ease; }
.acc-head:hover { color: var(--accent-pale); }
.acc-arrow { border: 1px solid var(--border); border-radius: 50%; }
.section--faq .mock { border-color: rgba(151,178,222,.20); box-shadow: var(--shadow-glow), var(--shadow-3) !important; }
.section--stats {
position: relative;
background: linear-gradient(90deg,transparent,rgba(52,92,166,.11),transparent);
}
.section--stats::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse at 50% 50%,rgba(64,118,230,.10),transparent 68%);
}
.stat-value {
font-weight: 650;
background: linear-gradient(180deg,#fff 30%,#91b8ff 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.section--pricing .pt-scroll {
border: 1px solid rgba(151,178,222,.15); border-radius: var(--r-xl);
background: linear-gradient(155deg,rgba(24,36,58,.62),rgba(10,18,31,.78));
box-shadow: 0 30px 90px -58px rgba(76,128,238,.62); padding-top: 18px;
}
.section--pricing .pt-hl {
background: linear-gradient(180deg,rgba(67,113,215,.17),rgba(40,76,151,.07));
}
.section--pricing .pt-badge {
color: #b7ceff; background: #0b1321; border: 1px solid rgba(116,160,255,.28);
border-radius: 999px; padding: 4px 9px; top: -12px;
}
.section--discord .discord-cta {
position: relative; overflow: hidden; border-color: rgba(151,178,222,.18);
background:
radial-gradient(500px 210px at 88% 0%,rgba(100,130,255,.25),transparent 70%),
linear-gradient(150deg,var(--surface-glass-strong),rgba(12,21,36,.92));
box-shadow: 0 34px 100px -58px rgba(76,113,230,.65), inset 0 1px rgba(255,255,255,.04);
}
.footer { background: linear-gradient(180deg,rgba(7,12,21,.94),#000 55%); }
.footer-grid { border-bottom-color: rgba(151,178,222,.11); }
.footer-logo img { box-shadow: 0 8px 24px -12px rgba(69,119,228,.72); }
.footer-col a:hover { color: var(--accent-pale); }
/* ── account dashboard ────────────────────────────────────── */
.dash-shell { display: grid; grid-template-columns: 264px minmax(0,1fr);
gap: clamp(32px,5vw,72px); max-width: 1280px; margin-inline: auto;
padding: 120px clamp(20px,4vw,40px) clamp(80px,10vw,120px); }
.dash-rail { position: sticky; top: 96px; align-self: start; }
.dash-user { display: flex; align-items: center; gap: 12px; padding: 0 14px clamp(20px,2.4vw,28px); }
.dash-user u { text-decoration: none; width: 44px; height: 44px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg,#2b3b57,#141b28); border: 1px solid var(--border);
font-size: 16px; font-weight: 600; color: var(--fg-70); }
.dash-user b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.dash-user span { display: block; font-size: 12.5px; color: var(--fg-50);
max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
border-radius: var(--r-sm); font-size: 14px; color: var(--fg-70);
transition: background .2s var(--ease), color .2s var(--ease); }
.dash-nav a:hover { background: var(--surface); color: var(--fg); }
.dash-nav a.on { background: var(--bg-3); color: var(--fg); font-weight: 500; }
.dash-nav svg { width: 17px; height: 17px; flex: none;
stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dash-main h1 { font-size: clamp(32px,4vw,46px); font-weight: 700; letter-spacing: -.032em; line-height: 1.05; margin: 0; }
.dash-sub { color: var(--fg-50); font-size: 15px; margin: 12px 0 clamp(28px,4vw,42px); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-card { position: relative; background: var(--bg-3); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 22px 24px; min-height: 98px;
transition: border-color .25s var(--ease), transform .25s var(--ease); }
.dash-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.dash-card b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; padding-right: 28px; }
.dash-card span { display: block; font-size: 14px; color: var(--fg-50); margin-top: 7px; word-break: break-word; }
.dash-ic { position: absolute; top: 21px; right: 21px; width: 18px; height: 18px; color: var(--fg-30);
stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Account surfaces use the same blue edge light as the product frames, at a
quieter intensity so the information stays in charge. */
.dash-shell {
position: relative; isolation: isolate; grid-template-columns: 280px minmax(0,1fr);
gap: clamp(42px,6vw,92px); max-width: 1320px;
padding-top: 128px;
}
.dash-shell::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
width: min(900px,72vw); height: 520px; right: -12%; top: 30px;
background: radial-gradient(ellipse,rgba(55,106,218,.13),transparent 70%);
filter: blur(20px);
}
.dash-rail {
padding: 18px; border: 1px solid var(--border); border-radius: var(--r-xl);
/* flat black panel — the border and the blue glow do all the lifting */
background: #000;
box-shadow: inset 0 1px rgba(255,255,255,.03), 0 32px 90px -60px rgba(59,123,245,.5);
}
.dash-user { padding: 4px 4px 22px; }
.dash-user u {
width: 48px; height: 48px; color: #fff; border-color: rgba(255,255,255,.16);
background: linear-gradient(145deg,#8fb7ff,#4c75e7);
box-shadow: 0 14px 34px -16px rgba(78,126,244,.92), inset 0 1px rgba(255,255,255,.24);
}
.dash-user b { font-size: 15.5px; }
.dash-user span { margin-top: 2px; }
.dash-nav { gap: 4px; }
.dash-nav a {
position: relative; min-height: 44px; padding: 11px 12px;
border: 1px solid transparent; border-radius: 12px;
}
.dash-nav a:hover { background: rgba(150,175,220,.07); border-color: rgba(151,178,222,.1); }
.dash-nav a.on {
background: linear-gradient(90deg,rgba(59,123,245,.18),rgba(59,123,245,.06));
border-color: rgba(111,155,244,.19); box-shadow: inset 0 1px rgba(255,255,255,.025);
}
/* inside the rail: at -19px it landed on the page background, outside the border */
.dash-nav a.on::before {
content: ""; position: absolute; left: -11px; top: 13px; bottom: 13px; width: 2px;
border-radius: 2px; background: linear-gradient(var(--accent-cyan),var(--accent));
box-shadow: 0 0 14px rgba(87,147,255,.72);
}
.dash-nav a.on svg { color: var(--accent-pale); filter: drop-shadow(0 0 8px rgba(85,142,255,.35)); }
.dash-heading { margin-bottom: clamp(32px,4vw,48px); }
.dash-heading .eyebrow { margin-bottom: 14px; }
.dash-heading .dash-sub { max-width: 560px; margin: 12px 0 0; }
.dash-main h1 {
font-size: clamp(38px,4.8vw,56px); letter-spacing: -.05em;
background: linear-gradient(178deg,#fff 28%,#a7bad9 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.dash-grid { gap: 18px; }
.dash-card {
min-height: 142px; padding: 24px 26px; overflow: hidden;
background: #000;
border-color: var(--border);
box-shadow: inset 0 1px rgba(255,255,255,.022), 0 18px 58px -46px rgba(59,123,245,.6);
}
.dash-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
background: radial-gradient(320px circle at 100% 0%,rgba(82,137,252,.13),transparent 62%);
transition: opacity .3s ease;
}
.dash-card:hover {
transform: translateY(-3px); border-color: rgba(139,180,249,.3);
box-shadow: inset 0 1px rgba(255,255,255,.04), 0 26px 72px -48px rgba(74,126,238,.74);
}
.dash-card:hover::before { opacity: 1; }
.dash-card b { font-size: 14px; color: var(--fg-70); font-weight: 500; }
.dash-card span { margin-top: 12px; color: var(--fg); font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.dash-ic {
top: 20px; right: 20px; width: 38px; height: 38px; padding: 9px;
color: var(--accent-pale); border: 1px solid rgba(142,184,255,.16); border-radius: 11px;
background: rgba(87,132,225,.08); box-shadow: inset 0 1px rgba(255,255,255,.03);
}
/* ── leaderboard ────────────────────────────────────────────
Same black-panel rule as the account page: the metric's colour lives in the
bar fill, the pedestal edge and the tab pill, never in a panel background. */
.lb-shell { position: relative; isolation: isolate; max-width: 1080px;
margin-inline: auto; padding: 128px clamp(20px,4vw,32px) clamp(80px,10vw,140px); }
.lb-shell::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
width: min(900px,80vw); height: 480px; left: 50%; top: 40px; translate: -50% 0;
background: radial-gradient(ellipse,rgba(55,106,218,.14),transparent 70%); filter: blur(20px); }
.lb-shell .dash-heading { text-align: center; margin-bottom: clamp(26px,3vw,34px); }
.lb-shell .dash-sub { max-width: 52ch; margin-inline: auto; }
.lb-live { width: 7px; height: 7px; margin-right: 9px; border-radius: 50%;
display: inline-block; background: #66e2ae;
box-shadow: 0 0 0 4px rgba(102,226,174,.12), 0 0 16px rgba(102,226,174,.6); }
.lb-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px;
width: max-content; max-width: 100%; margin: 0 auto clamp(36px,5vw,56px); padding: 3px;
border: 1px solid var(--border); border-radius: 999px; background: #000; }
.lb-tabs button { padding: 9px 20px; border: 0; border-radius: 999px; cursor: pointer;
background: transparent; color: var(--fg-50); font-size: 13.5px; font-weight: 500;
transition: color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease); }
.lb-tabs button:hover { color: var(--fg); }
.lb-tabs button.on { background: var(--accent); color: #fff;
box-shadow: 0 6px 18px -8px rgba(59,123,245,.8); }
/* podium — 2nd / 1st / 3rd, pedestals of decreasing height */
.lb-podium { display: grid; grid-template-columns: repeat(3,1fr); align-items: end;
gap: clamp(10px,1.6vw,20px); margin-bottom: clamp(30px,4vw,44px); }
.lb-pod { display: flex; flex-direction: column; align-items: center; }
.lb-pod-who { display: flex; flex-direction: column; align-items: center; gap: 10px;
padding-bottom: 18px; text-align: center; min-width: 0; max-width: 100%; }
.lb-pod-who u { text-decoration: none; width: 62px; height: 62px; border-radius: 50%;
overflow: hidden; flex: none; display: grid; place-items: center;
background: #000; border: 1px solid var(--border-2);
font: 700 20px/1 var(--font); color: var(--fg-60); }
.lb-pod-who u img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-pod-who b { font-size: 15px; font-weight: 600; letter-spacing: -.01em;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pod-who span { font-family: var(--mono); font-size: 13px; color: var(--lb-tint); }
.lb-ped { position: relative; width: 100%; display: grid; place-items: center;
border: 1px solid var(--border); border-bottom: 0;
border-radius: var(--r-md) var(--r-md) 0 0; background: #000;
box-shadow: inset 0 1px rgba(255,255,255,.03); }
.lb-ped::before { content: ""; position: absolute; inset-inline: 18%; top: -1px; height: 2px;
border-radius: 2px; background: var(--lb-tint); box-shadow: 0 0 18px var(--lb-tint); }
.lb-ped i { font-style: normal; font-family: var(--mono); font-size: 26px; font-weight: 500;
color: var(--fg-30); }
/* p1 is the middle slot (rank 1) — the tallest pedestal */
.lb-pod.p1 .lb-ped { height: 132px; }
.lb-pod.p1 .lb-pod-who u { width: 82px; height: 82px; border-color: rgba(142,184,255,.4);
box-shadow: 0 16px 44px -18px rgba(78,126,244,.9); }
.lb-pod.p1 .lb-pod-who b { font-size: 18px; }
.lb-pod.p2 .lb-ped { height: 96px; }
.lb-pod.p3 .lb-ped { height: 74px; }
/* ranked rows, #4 onward — one card per row, same as the live board.
The bar is an absolute background layer scaled to the leader, not a column. */
.lb-standings { max-width: 760px; margin-inline: auto; display: grid; gap: 8px; }
.lb-srow { position: relative; overflow: hidden;
display: grid; grid-template-columns: 46px 34px minmax(0,1fr) auto;
align-items: center; gap: 14px; padding: 13px 18px;
background: #000; border: 1px solid var(--border); border-radius: var(--r-sm); }
/* scoped, not a bare .lb-bar — `.lb-srow > *` below ties on specificity and would
win on order, dropping the bar back into the grid flow as a fifth column */
.lb-srow .lb-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 0;
background: linear-gradient(90deg,color-mix(in srgb,var(--lb-tint) 16%,transparent),transparent);
transition: width .8s var(--ease); }
.lb-srow > * { position: relative; z-index: 1; }
.lb-rank { font-family: var(--mono); font-size: 13px; font-weight: 700;
color: var(--fg-40); font-variant-numeric: tabular-nums; }
.lb-srow u { text-decoration: none; width: 30px; height: 30px; border-radius: 50%;
overflow: hidden; display: grid; place-items: center;
background: color-mix(in srgb,var(--lb-tint) 20%,var(--bg-3));
font: 600 12.5px/1 var(--font); color: var(--accent-pale); }
.lb-srow u img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-srow b { font-size: 14.5px; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font-family: var(--mono); font-size: 13px; font-weight: 700;
color: var(--accent-pale); font-variant-numeric: tabular-nums; }
/* rows rise in on render, staggered by --i, capped so the tail is not a wait */
.js .lb-srow { animation: lbRise .4s var(--ease) both; animation-delay: calc(min(var(--i) * 30ms, .4s)); }
@keyframes lbRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lb-foot { margin-top: 22px; text-align: center; font-size: 13px; color: var(--fg-40); }
@media (max-width: 700px) {
.lb-shell { padding-top: 96px; }
.lb-podium { gap: 6px; }
.lb-pod-who u, .lb-pod.p1 .lb-pod-who u { width: 46px; height: 46px; }
.lb-pod-who b, .lb-pod.p1 .lb-pod-who b { font-size: 13px; }
.lb-pod.p1 .lb-ped { height: 92px; }
.lb-pod.p2 .lb-ped { height: 70px; }
.lb-pod.p3 .lb-ped { height: 56px; }
.lb-srow { padding: 12px 14px; gap: 10px; grid-template-columns: 34px 30px minmax(0,1fr) auto; }
}
/* ── overview: loot, resource split, session tiles ──────────── */
.dash-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.loot-range { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 18px;
border: 1px solid var(--border); border-radius: 999px; background: #000; }
.loot-range button { padding: 7px 18px; border: 0; border-radius: 999px; cursor: pointer;
background: transparent; color: var(--fg-50); font-size: 13px; font-weight: 500;
transition: color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease); }
.loot-range button:hover { color: var(--fg); }
.loot-range button.on { background: var(--accent); color: #fff;
box-shadow: 0 6px 18px -8px rgba(59,123,245,.8); }
.loot-hero { position: relative; overflow: hidden; padding: 28px 30px 30px;
border: 1px solid var(--border); border-radius: var(--r-lg); background: #000;
box-shadow: inset 0 1px rgba(255,255,255,.022), 0 24px 70px -50px rgba(59,123,245,.7); }
.loot-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(460px circle at 88% 0%,rgba(59,123,245,.14),transparent 66%); }
.loot-hero .eyebrow { margin-bottom: 10px; }
.loot-hero b { display: block; font-size: clamp(46px,6vw,72px); font-weight: 800;
line-height: 1; letter-spacing: -.045em;
background: linear-gradient(170deg,var(--gold) 15%,#f0dda6 95%);
-webkit-background-clip: text; background-clip: text; color: transparent; }
.loot-hero span { display: block; margin-top: 14px; font-size: 14px; color: var(--fg-50); }
.loot-bars { display: grid; gap: 4px; margin: 26px 0 clamp(26px,3vw,34px); }
.loot-bar { display: grid; align-items: center; gap: 16px; padding: 14px 4px;
grid-template-columns: 110px 100px minmax(0,1fr);
border-bottom: 1px solid var(--border); }
.loot-bar:last-child { border-bottom: 0; }
/* the dot and the fill are the one place the resource colours are allowed to shout */
.loot-bar span { display: inline-flex; align-items: center; gap: 10px;
font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
font-family: var(--mono); color: var(--fg-60); }
.loot-bar span::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
background: var(--tint); box-shadow: 0 0 14px -1px var(--tint); }
.loot-bar b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.loot-bar u { text-decoration: none; height: 7px; border-radius: 999px;
background: var(--surface); overflow: hidden; }
.loot-bar u::before { content: ""; display: block; height: 100%; width: var(--pct);
border-radius: inherit; background: linear-gradient(90deg,color-mix(in srgb,var(--tint) 55%,#000),var(--tint));
box-shadow: 0 0 16px -2px var(--tint); }
/* ── label/value rows, shared by personal, security and licence ── */
.info-card { min-height: 0; padding: 6px 26px; }
.info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
padding: 18px 0; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: 0; }
.info-row span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
font-family: var(--mono); color: var(--fg-50); }
.info-row b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-align: right; }
.info-row b.is-ok { color: #9cf0ce; }
.info-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 22px 0 24px;
border-top: 1px solid var(--border); }
.plan-card { display: grid; grid-template-columns: minmax(0,1fr) 230px;
gap: clamp(28px,4vw,56px); padding: 30px 32px; min-height: 0; }
/* .dash-card b sets 14px/500 — needs the extra class to outrank it */
.plan-card b.plan-card-name { display: block; margin-bottom: 10px;
font-size: clamp(38px,4.4vw,52px); font-weight: 800; line-height: 1; letter-spacing: -.045em;
background: linear-gradient(170deg,#bcd4ff 10%,var(--accent) 95%);
-webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-card .info-row:first-of-type { border-top: 1px solid var(--border); margin-top: 18px; }
.plan-card-side { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
/* Extra licence cards. The buy/link buttons are per-ACCOUNT, so clones drop .plan-card-side
and the grid would leave a 230px hole where it used to be. */
#plan-extra .plan-card { grid-template-columns: minmax(0,1fr); margin-top: 14px; }
.plan-card-side .btn { width: 100%; }
.plan-card-link { text-align: center; font-size: 13.5px; color: var(--fg-60); }
.plan-card-link:hover { color: var(--fg); }
@media (max-width: 900px) {
.dash-grid--3 { grid-template-columns: 1fr 1fr; }
.loot-bar { grid-template-columns: 100px minmax(0,1fr); row-gap: 10px; }
.loot-bar b { justify-self: end; }
.loot-bar u { grid-column: 1 / -1; }
.plan-card { grid-template-columns: minmax(0,1fr); }
/* minmax(0,1fr), not 1fr: the nav's nowrap items give the track a huge min-content
size, which blows the grid past the viewport and gets it clipped instead of scrolled */
.dash-shell { grid-template-columns: minmax(0,1fr); padding-top: 96px; }
.dash-rail, .dash-main { min-width: 0; }
.dash-rail { position: static; padding: 16px; }
.dash-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px;
scroll-snap-type: x proximity; scrollbar-width: none; }
.dash-nav::-webkit-scrollbar { display: none; }
.dash-nav a { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
.dash-nav a.on::before { left: 12px; right: 12px; top: auto; bottom: -1px; width: auto; height: 2px; }
}
/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1080px) {
.why-row { grid-template-columns: 1fr 1fr; }
.why-card { min-height: 300px; }
}
@media (max-width: 980px) {
.nav-links { display: none; }
.nav-mobile-btn { display: flex; }
.nav-cta .btn { display: none; }
.hero-mockup-split { grid-template-columns: 1fr; }
.ring-aside { order: -1; }
.screen-row, .screen-row.reverse { grid-template-columns: 1fr; }
.screen-row.reverse .screen-text { order: 0; }
.screen-row.reverse .screen-shot { order: 0; }
.split-2 { grid-template-columns: 1fr; }
.acc-split { grid-template-columns: 1fr; }
.discord-cta { grid-template-columns: 1fr; text-align: left; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.hero-partners-strip { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 18px; overflow: hidden; }
/* no-JS fallback shows 3 here, matching visible() in the rotation script */
.hero-partners-strip:not(.is-rotating) .hero-partner-logo:nth-child(n+4) { display: none; }
.stats-grid { grid-template-columns: 1fr 1fr; row-gap: var(--s5); }
.mock-body { grid-template-columns: 1fr; }
.mock-l { border-right: 0; border-bottom: 1px solid var(--border); }
.footer-bottom { justify-content: flex-start; }
}
@media (max-width: 639px) {
.dash-shell { padding-inline: 16px; padding-top: 92px; gap: 32px; }
.dash-rail { margin-inline: -4px; border-radius: 20px; }
.dash-user { padding-bottom: 16px; }
.dash-heading { margin-bottom: 28px; }
.dash-grid { grid-template-columns: minmax(0,1fr); }
.dash-card { min-height: 124px; padding: 22px; }
.why-row { grid-template-columns: 1fr; }
.pt-desktop { display: none; }
.pt-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.pt-card { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 14px 12px 12px;
display: flex; flex-direction: column; gap: 10px; background: var(--bg-2); }
.pt-card--hl { border-color: var(--hl); background: var(--accent-soft); }
.pt-card-badge { display: block; font-size: 9px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--hl); margin-bottom: 4px; }
.pt-card-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pt-card-title-row .pt-name { font-size: 13px; }
.pt-card-title-row .pt-price { font-size: 16px; }
.pt-card-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; }
.pt-card-row { display: flex; align-items: center; justify-content: space-between; gap: 6px;
padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.pt-card-row:last-child { border-bottom: none; }
.pt-card-label { color: var(--fg-50); flex: 1; min-width: 0; line-height: 1.3; }
.pt-card-val { flex-shrink: 0; color: var(--fg-70); }
.pt-card-val.pt-strong { color: var(--fg); font-weight: 600; }
.pt-card .btn { font-size: 12px; height: 34px; }
.footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; }
/* .enter-* start at opacity 0 and rely on the animation to reach 1 — without this
they would never appear once animations are off. */
.js [data-reveal], .js [data-stagger] > *,
.enter-1, .enter-2, .enter-3, .enter-4, .enter-5, .enter-mockup {
opacity: 1 !important; transform: none !important;
}
.hero-partner-logo.is-swapping { opacity: .8 !important; transform: none !important; }
html { scroll-behavior: auto; }
}
/* ── account dialogs, key delivery and inline notes ─────────