:root {
  --bg: #07101f;
  --bg-2: #0a1426;
  --surface: rgba(17, 28, 48, .72);
  --surface-solid: #101b2e;
  --surface-2: #142238;
  --line: rgba(158, 178, 211, .14);
  --line-strong: rgba(167, 188, 224, .24);
  --text: #f4f7fb;
  --muted: #aab7ca;
  --muted-2: #7f8da3;
  --opal: #7388ad;
  --opal-strong: #9fb3d3;
  --opal-deep: #3c4c6c;
  --glow: rgba(119, 145, 190, .25);
  --success: #4fb57b;
  --warning: #d2a45e;
  --danger: #d06868;
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1180px;
  --shadow: 0 24px 80px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(900px 540px at 50% -120px, rgba(86, 113, 164, .22), transparent 66%),
    radial-gradient(650px 420px at 8% 26%, rgba(58, 78, 116, .11), transparent 70%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}
a { color: inherit; }
img { max-width: 100%; }
::selection { background: rgba(159,179,211,.28); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(7,16,31,.78);
  border-bottom: 1px solid var(--line);
}
.nav {
  width: min(calc(100% - 32px), var(--max)); margin: 0 auto;
  min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:760; letter-spacing:-.02em; }
.brand img { width:32px; height:32px; filter: drop-shadow(0 5px 16px rgba(164,184,217,.22)); }
.brand span { font-size:20px; }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a {
  color: var(--muted); text-decoration:none; padding:9px 12px; border-radius:10px;
  font-size:14px; font-weight:600; transition:.18s ease;
}
.nav-links a:hover, .nav-links a.active { color:var(--text); background:rgba(255,255,255,.055); }
.nav-links .discord-link { color:#e7edf8; border:1px solid var(--line-strong); margin-left:4px; }
.nav-links .discord-link:hover { background:rgba(115,136,173,.14); border-color:rgba(159,179,211,.38); }
.menu-btn { display:none; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:10px; padding:8px 10px; font-size:18px; }

.container { width:min(calc(100% - 36px), var(--max)); margin:0 auto; }
.hero { min-height: calc(100vh - 72px); display:flex; align-items:center; position:relative; overflow:hidden; }
.hero::after { content:""; position:absolute; width:480px; height:480px; border-radius:50%; right:-120px; top:80px; background:radial-gradient(circle, rgba(125,151,198,.14), transparent 68%); filter:blur(2px); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:70px; padding:86px 0 104px; }
h1 { font-size:clamp(48px,7vw,82px); letter-spacing:-.055em; line-height:.96; margin:0 0 24px; max-width:830px; }
.hero p { color:var(--muted); font-size:clamp(17px,2vw,20px); max-width:690px; margin:0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; font-weight:700; font-size:14px; padding:12px 17px; border-radius:11px; border:1px solid var(--line-strong); transition:.18s ease; }
.btn-primary { color:#07101f; background:linear-gradient(135deg,#dce7f7,#9dafcc); border-color:transparent; box-shadow:0 8px 30px rgba(130,154,194,.18); }
.btn-primary:hover { transform:translateY(-1px); filter:brightness(1.06); }
.btn-secondary { color:var(--text); background:rgba(255,255,255,.035); }
.btn-secondary:hover { background:rgba(255,255,255,.07); transform:translateY(-1px); }

.gem-stage { position:relative; display:grid; place-items:center; min-height:420px; }
.gem-stage::before { content:""; position:absolute; width:310px; height:310px; border:1px solid rgba(148,171,210,.14); border-radius:50%; box-shadow:0 0 100px rgba(98,127,179,.10) inset; }
.gem-stage::after { content:""; position:absolute; width:430px; height:1px; transform:rotate(-16deg); background:linear-gradient(90deg,transparent,rgba(151,174,214,.28),transparent); }
.gem-large { width:180px; position:relative; z-index:2; filter:drop-shadow(0 24px 58px rgba(107,135,185,.32)); animation:float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.metric-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:-32px; position:relative; z-index:4; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--line); box-shadow:var(--shadow); }
.metric { background:rgba(12,23,41,.93); padding:20px 22px; }
.metric strong { display:block; font-size:14px; margin-bottom:4px; }
.metric span { color:var(--muted-2); font-size:13px; }

.section { padding:96px 0; }
.section-tight { padding:70px 0; }
.section-head { max-width:710px; margin-bottom:38px; }
h2 { font-size:clamp(34px,5vw,54px); line-height:1.05; letter-spacing:-.04em; margin:0 0 16px; }
h3 { letter-spacing:-.02em; }
.section-head p, .lead { color:var(--muted); font-size:17px; margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:linear-gradient(180deg,rgba(20,34,56,.72),rgba(12,23,40,.76)); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:.2s ease; }
.card:hover { transform:translateY(-2px); border-color:rgba(159,179,211,.27); background:linear-gradient(180deg,rgba(23,39,64,.80),rgba(13,25,44,.84)); }
.card-icon { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:11px; margin-bottom:22px; color:var(--opal-strong); background:rgba(128,151,190,.07); }
.card h3 { margin:0 0 8px; font-size:18px; }
.card p { color:var(--muted); margin:0; font-size:14px; }
.card .tag { display:inline-block; margin-top:16px; color:var(--muted-2); font-size:12px; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.panel { border:1px solid var(--line); background:rgba(13,24,42,.78); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.panel-row { display:flex; justify-content:space-between; gap:22px; padding:14px 0; border-bottom:1px solid var(--line); }
.panel-row:last-child { border-bottom:0; }
.panel-row strong { font-size:14px; }
.panel-row span { color:var(--muted); font-size:13px; text-align:right; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--success); display:inline-block; margin-right:7px; }

.page-hero { padding:92px 0 54px; }
.page-hero h1 { font-size:clamp(42px,6vw,68px); }
.page-hero p { color:var(--muted); max-width:720px; font-size:18px; margin:0; }
.feature-section { display:grid; grid-template-columns:280px 1fr; gap:48px; padding:54px 0; border-top:1px solid var(--line); }
.feature-section h2 { font-size:28px; position:sticky; top:106px; align-self:start; }
.feature-items { display:grid; gap:14px; }
.feature-item { padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius-sm); background:rgba(14,25,43,.56); }
.feature-item h3 { margin:0 0 6px; font-size:17px; }
.feature-item p { margin:0; color:var(--muted); font-size:14px; }

.docs-layout { width:min(calc(100% - 36px), 1380px); margin:0 auto; display:grid; grid-template-columns:270px minmax(0,1fr); gap:54px; padding:52px 0 100px; }
.docs-sidebar { position:sticky; top:94px; align-self:start; max-height:calc(100vh - 120px); overflow:auto; padding-right:8px; scrollbar-width:thin; }
.docs-search { width:100%; background:rgba(16,28,48,.8); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline:none; margin-bottom:16px; }
.docs-search:focus { border-color:rgba(159,179,211,.42); box-shadow:0 0 0 3px rgba(115,136,173,.09); }
.docs-nav-group { margin:18px 0; }
.docs-nav-group strong { display:block; color:var(--muted-2); font-size:11px; text-transform:uppercase; letter-spacing:.09em; margin-bottom:6px; }
.docs-sidebar a { display:block; text-decoration:none; color:var(--muted); font-size:13px; padding:6px 8px; border-radius:7px; }
.docs-sidebar a:hover, .docs-sidebar a.active { color:var(--text); background:rgba(255,255,255,.05); }
.docs-content { min-width:0; }
.docs-doc { padding:0 0 70px; border-bottom:1px solid var(--line); margin-bottom:70px; }
.docs-doc:last-child { border-bottom:0; }
.docs-content h1 { font-size:42px; line-height:1.1; margin:0 0 24px; letter-spacing:-.035em; }
.docs-content h2 { font-size:28px; margin:42px 0 12px; letter-spacing:-.025em; }
.docs-content h3 { font-size:20px; margin:30px 0 10px; }
.docs-content h4 { font-size:16px; margin:24px 0 8px; }
.docs-content p, .docs-content li { color:#c1ccdc; font-size:15px; }
.docs-content a { color:#b8c9e5; }
.docs-content code { font-family:"SFMono-Regular",Consolas,monospace; font-size:.88em; background:#0b1525; border:1px solid var(--line); border-radius:6px; padding:2px 6px; color:#dce7f7; }
.docs-content pre { overflow:auto; padding:16px; background:#08111f; border:1px solid var(--line); border-radius:12px; }
.docs-content pre code { padding:0; background:none; border:0; }
.docs-content table { width:100%; border-collapse:collapse; margin:18px 0 26px; font-size:14px; }
.docs-content th, .docs-content td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.docs-content th { background:rgba(115,136,173,.08); color:#e5ebf6; }
.docs-content td { color:#bcc8d8; }
.docs-content blockquote { margin:20px 0; padding:12px 16px; border-left:3px solid var(--opal); background:rgba(115,136,173,.06); color:var(--muted); }
.docs-content hr { border:0; border-top:1px solid var(--line); margin:44px 0; }
.search-hit { outline:1px solid rgba(159,179,211,.40); background:rgba(115,136,173,.06); border-radius:10px; }

.legal { width:min(calc(100% - 36px), 880px); margin:0 auto; padding:78px 0 110px; }
.legal-header { padding-bottom:34px; margin-bottom:38px; border-bottom:1px solid var(--line); }
.legal h1 { font-size:48px; margin-bottom:12px; }
.legal .updated { color:var(--muted-2); font-size:13px; }
.legal h2 { font-size:24px; margin:40px 0 10px; }
.legal h3 { font-size:18px; }
.legal p, .legal li { color:#c1ccdc; }
.legal a { color:#c4d3e9; }
.notice { background:rgba(115,136,173,.07); border:1px solid var(--line); border-radius:12px; padding:15px 17px; color:var(--muted); font-size:14px; }

.cta { border:1px solid var(--line); border-radius:24px; padding:42px; background:radial-gradient(600px 240px at 90% 0%,rgba(112,140,190,.13),transparent), rgba(13,24,42,.7); display:flex; justify-content:space-between; gap:28px; align-items:center; }
.cta h2 { font-size:34px; margin-bottom:8px; }
.cta p { margin:0; color:var(--muted); }

.site-footer { margin-top:30px; border-top:1px solid var(--line); background:rgba(5,12,24,.55); }
.footer-inner { width:min(calc(100% - 36px),var(--max)); margin:0 auto; display:grid; grid-template-columns:1.3fr 2fr; gap:50px; padding:48px 0 30px; }
.footer-brand p { color:var(--muted-2); max-width:330px; font-size:13px; }
.footer-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.footer-col strong { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); margin-bottom:11px; }
.footer-col a { display:block; color:var(--muted); text-decoration:none; font-size:13px; margin:7px 0; }
.footer-col a:hover { color:var(--text); }
.footer-bottom { width:min(calc(100% - 36px),var(--max)); margin:0 auto; border-top:1px solid var(--line); padding:18px 0 28px; color:var(--muted-2); font-size:12px; display:flex; justify-content:space-between; gap:20px; }

@media (max-width: 900px) {
  .nav-links { position:absolute; display:none; top:72px; left:16px; right:16px; padding:10px; flex-direction:column; align-items:stretch; background:#0b1627; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:11px 12px; }
  .nav-links .discord-link { margin-left:0; }
  .menu-btn { display:block; }
  .hero-grid { grid-template-columns:1fr; gap:20px; padding-top:66px; }
  .gem-stage { min-height:250px; order:-1; }
  .gem-stage::before { width:220px; height:220px; }
  .gem-large { width:125px; }
  .metric-row { grid-template-columns:1fr 1fr; }
  .cards { grid-template-columns:1fr 1fr; }
  .split { grid-template-columns:1fr; }
  .feature-section { grid-template-columns:1fr; gap:18px; }
  .feature-section h2 { position:static; }
  .docs-layout { grid-template-columns:1fr; }
  .docs-sidebar { position:relative; top:0; max-height:none; border-bottom:1px solid var(--line); padding-bottom:22px; }
  .footer-inner { grid-template-columns:1fr; }
  .cta { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 620px) {
  .container, .nav, .footer-inner, .footer-bottom, .docs-layout, .legal { width:min(calc(100% - 24px), var(--max)); }
  .hero-grid { padding-bottom:78px; }
  h1 { font-size:48px; }
  .metric-row, .cards { grid-template-columns:1fr; }
  .section { padding:72px 0; }
  .footer-columns { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; }
  .cta { padding:28px; }
}

/* Site polish ----------------------------------------------------------- */
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 72%);
}

.site-header { box-shadow:0 1px 0 rgba(255,255,255,.015); }
.nav { min-height:70px; }
.brand img {
  width:30px;
  height:38px;
  object-fit:contain;
  filter:drop-shadow(0 7px 18px rgba(185,205,238,.18));
}
.brand span { font-size:19px; }
.nav-links a { padding:8px 11px; }

.hero { min-height:min(820px, calc(100vh - 70px)); }
.hero-grid { grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); gap:74px; padding:92px 0 118px; }
.hero-copy { position:relative; z-index:2; }
.hero h1 { max-width:760px; }
.headline-soft {
  color:#c9d5e8;
  background:linear-gradient(100deg,#f7f9fc 0%,#aebdd5 72%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero p { max-width:650px; line-height:1.7; }
.btn { min-height:44px; padding:11px 17px; }
.btn-ghost { border-color:transparent; color:var(--muted); padding-left:10px; padding-right:10px; }
.btn-ghost:hover { color:var(--text); transform:translateY(-1px); }

.gem-stage { min-height:470px; isolation:isolate; }
.gem-stage::before { width:330px; height:330px; border-color:rgba(183,202,232,.11); box-shadow:0 0 110px rgba(98,127,179,.13) inset; }
.gem-stage::after { width:490px; opacity:.75; }
.gem-halo { position:absolute; width:290px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(154,178,216,.18),rgba(89,117,167,.06) 48%,transparent 72%); filter:blur(18px); }
.gem-large { width:245px; max-height:335px; object-fit:contain; filter:drop-shadow(0 28px 64px rgba(143,169,211,.30)); }

.metric-row { border-radius:16px; box-shadow:0 22px 70px rgba(0,0,0,.22); }
.metric-row-three { grid-template-columns:repeat(3,1fr); max-width:980px; margin-left:auto; margin-right:auto; }
.metric { padding:22px 24px; background:linear-gradient(180deg,rgba(15,28,48,.96),rgba(10,21,37,.94)); }
.metric strong { font-size:13px; text-transform:uppercase; letter-spacing:.055em; color:#dfe6f1; }
.metric span { display:block; line-height:1.55; }
.metric code { color:#cbd8eb; font-family:"SFMono-Regular",Consolas,monospace; font-size:.9em; }

.section { padding:104px 0; }
.section-tight { padding:78px 0; }
.section-head { max-width:760px; margin-bottom:42px; }
.section-head p,.lead { line-height:1.72; }
.cards { gap:16px; }
.card { padding:26px; min-height:192px; box-shadow:0 16px 46px rgba(0,0,0,.08); }
.card-icon { margin-bottom:25px; }
.card p { line-height:1.65; }
.panel { padding:26px 28px; }
.panel-row { padding:15px 0; }
.cta { padding:44px 46px; }

.page-hero { padding:86px 0 48px; border-bottom:1px solid rgba(158,178,211,.055); }
.page-hero h1 { margin-bottom:18px; }
.page-hero p { line-height:1.72; }
.feature-section { grid-template-columns:245px minmax(0,1fr); gap:52px; padding:58px 0; }
.feature-section h2 { font-size:26px; top:102px; }
.feature-items { gap:12px; }
.feature-item { padding:23px 25px; transition:border-color .18s ease, background .18s ease, transform .18s ease; }
.feature-item:hover { border-color:rgba(159,179,211,.24); background:rgba(17,30,51,.68); transform:translateY(-1px); }
.feature-item p { line-height:1.65; }

/* Documentation readability */
.docs-layout { width:min(calc(100% - 44px), 1280px); grid-template-columns:236px minmax(0,1fr); gap:46px; padding:46px 0 108px; align-items:start; }
.docs-sidebar { top:88px; max-height:calc(100vh - 108px); padding:4px 18px 18px 0; border-right:1px solid var(--line); }
.docs-search { position:sticky; top:0; z-index:2; margin:0 0 18px; padding:11px 12px; background:rgba(11,23,40,.96); backdrop-filter:blur(10px); }
.docs-nav-group { margin:20px 0 24px; }
.docs-nav-group strong { margin:0 8px 8px; }
.docs-sidebar a { padding:5px 8px; line-height:1.45; border-left:2px solid transparent; border-radius:0 7px 7px 0; }
.docs-sidebar a:hover { background:rgba(255,255,255,.035); }
.docs-sidebar a.active { color:#e7edf7; background:rgba(115,136,173,.09); border-left-color:var(--opal-strong); }
.docs-content { width:100%; max-width:900px; min-width:0; }
.docs-doc { padding-bottom:58px; margin-bottom:58px; }
.docs-content h1 { font-size:38px; margin-bottom:20px; }
.docs-content h2 { font-size:26px; margin:38px 0 12px; scroll-margin-top:95px; }
.docs-content h3 { font-size:19px; margin:27px 0 9px; scroll-margin-top:95px; }
.docs-content p,.docs-content li { color:#c3cedd; font-size:15px; line-height:1.72; }
.docs-content ul,.docs-content ol { padding-left:22px; }
.docs-content li + li { margin-top:4px; }
.docs-content pre { margin:14px 0 22px; padding:15px 17px; border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.018); }
.docs-content table { margin:16px 0 24px; border-radius:10px; overflow:hidden; }
.docs-content th,.docs-content td { padding:11px 13px; line-height:1.55; }
.docs-content hr { margin:40px 0; }
.docs-content .command-title { display:flex; align-items:center; gap:10px; margin-top:42px; margin-bottom:10px; padding-top:28px; border-top:1px solid rgba(158,178,211,.10); }
.docs-content .command-title code { font-size:.78em; padding:6px 9px; border-color:rgba(159,179,211,.18); background:rgba(115,136,173,.075); color:#edf3fc; }
.command-meta { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.command-pill { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:5px 10px; border-radius:999px; border:1px solid rgba(159,179,211,.14); background:rgba(115,136,173,.055); color:#bdc9da; font-size:12px; line-height:1.2; }
.command-pill b { color:#e3eaf5; font-weight:700; }

.legal { max-width:830px; padding-top:72px; }
.legal-header { margin-bottom:34px; }
.legal p,.legal li { line-height:1.76; }
.site-footer { margin-top:18px; }
.footer-inner { padding-top:44px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .gem-large { animation:none; }
  .btn,.card,.feature-item { transition:none; }
}

@media (max-width: 1050px) {
  .hero-grid { grid-template-columns:1fr .72fr; gap:38px; }
  
  
  
}

@media (max-width: 900px) {
  .hero { min-height:auto; }
  .hero-grid { grid-template-columns:1fr; gap:20px; padding:72px 0 86px; }
  .gem-stage { min-height:330px; order:-1; }
  .gem-large { width:185px; max-height:250px; }
  
  .gem-stage::before { width:250px; height:250px; }
  .gem-stage::after { width:340px; }
  .metric-row-three { grid-template-columns:1fr; max-width:none; margin-top:-18px; }
  .feature-section { grid-template-columns:1fr; gap:18px; }
  .docs-layout { grid-template-columns:1fr; width:min(calc(100% - 32px), 900px); gap:28px; }
  .docs-sidebar { position:relative; top:0; max-height:none; border-right:0; border-bottom:1px solid var(--line); padding:0 0 22px; }
  .docs-content { max-width:none; }
}

@media (max-width:620px) {
  .hero-grid { padding-top:56px; }
  .gem-stage { min-height:260px; }
  .gem-large { width:150px; max-height:205px; }
  
  .cards { gap:12px; }
  .card { min-height:0; padding:22px; }
  .docs-layout { width:min(calc(100% - 24px), 900px); }
  .docs-content h1 { font-size:32px; }
  .docs-content h2 { font-size:23px; }
  .command-meta { gap:6px; }
  .command-pill { width:100%; border-radius:9px; }
  .cta { padding:28px; }
}