:root {
  --bg: #08090c;
  --bg-2: #0d0f14;
  --panel: #11141b;
  --panel-2: #171b24;
  --text: #f7f7f4;
  --muted: #9ba1ad;
  --gold: #f6c84b;
  --gold-2: #ffdc76;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --radius: 22px;
  --shadow: 0 20px 70px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
::selection { background: var(--gold); color: #111; }

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 78px;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(8,9,12,.78);
  backdrop-filter: blur(18px);
}
.brand, .footer-brand { display: flex; align-items: center; gap: 12px; }
.brand strong, .footer-brand strong { display:block; letter-spacing: .11em; font-size: 15px; }
.brand small, .footer-brand small { display:block; color: var(--muted); font-size: 8px; letter-spacing: .24em; }
.brand-mark {
  width: 38px; height: 38px; display:grid; place-items:center;
  font-weight: 950; color:#111; background: linear-gradient(135deg,var(--gold-2),var(--gold));
  clip-path: polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);
  box-shadow: 0 0 24px rgba(246,200,75,.23);
}
.brand-mark.large { width: 82px; height: 82px; font-size: 34px; }
.nav { display:flex; align-items:center; gap: 28px; color:#c9cdd5; font-size:13px; font-weight:700; letter-spacing:.04em; }
.nav a { transition:.2s ease; }
.nav a:hover { color: var(--gold); }
.discord-ghost { border: 1px solid var(--line-strong); padding:10px 16px; border-radius:999px; font-size:12px; font-weight:800; }
.menu-btn { display:none; border:0; background:transparent; font-size:24px; }

.hero {
  min-height: calc(100vh - 78px);
  position: relative;
  overflow: hidden;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
  gap: 4vw;
  padding: 80px clamp(22px, 7vw, 110px) 86px;
  background:
    radial-gradient(circle at 75% 30%, rgba(246,200,75,.07), transparent 25%),
    linear-gradient(180deg,#08090c 0%,#0a0c11 100%);
}
.hero-grid { position:absolute; inset:0; opacity:.12; background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.11) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.hero-glow { position:absolute; width:430px; height:430px; border-radius:50%; filter: blur(90px); opacity:.12; }
.hero-glow-a { right: 7%; top: 11%; background: var(--gold); }
.hero-glow-b { left: 22%; bottom: -18%; background:#506dff; opacity:.08; }
.hero-content { position:relative; z-index:2; max-width: 820px; }
.eyebrow, .section-kicker { color: var(--gold); font-size: 11px; font-weight:900; letter-spacing:.28em; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.eyebrow span { width:34px; height:1px; background: var(--gold); opacity:.6; }
.hero h1, .section h2, .community h2 {
  margin:0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight:900;
  letter-spacing:.015em;
  line-height:.9;
  text-transform:uppercase;
}
.hero h1 { font-size: clamp(64px, 8vw, 132px); }
.hero h1 em { font-style:normal; color:transparent; -webkit-text-stroke: 1.5px var(--gold); text-shadow: 0 0 40px rgba(246,200,75,.07); }
.hero-copy { max-width:680px; color:#b4bac5; font-size:clamp(17px,1.6vw,21px); margin:26px 0 30px; }
.server-actions { display:flex; gap:12px; flex-wrap:wrap; }
.server-pill { cursor:pointer; display:flex; align-items:center; gap:12px; border:1px solid rgba(246,200,75,.3); background:rgba(246,200,75,.07); border-radius:14px; padding:12px 14px; min-width:min(100%,330px); box-shadow: inset 0 0 24px rgba(246,200,75,.025); }
.server-pill.secondary { border-color:var(--line-strong); background:rgba(255,255,255,.03); }
.signal-dot { width:10px; height:10px; border-radius:50%; background:#55df7a; box-shadow:0 0 15px rgba(85,223,122,.55); }
.bedrock-icon { color:#84a7ff; }
.server-pill-copy { text-align:left; flex:1; }
.server-pill-copy small { display:block; color:var(--muted); font-size:9px; letter-spacing:.22em; }
.server-pill-copy strong { display:block; font-size:13px; letter-spacing:.02em; }
.copy-label { font-size:9px; font-weight:900; color:var(--gold); letter-spacing:.14em; }
.hero-ctas { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.btn { min-height:49px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 21px; border-radius:12px; font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; transition:.22s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#17130a; box-shadow:0 10px 35px rgba(246,200,75,.16); }
.btn-dark { border:1px solid var(--line-strong); background:rgba(255,255,255,.035); }
.btn.full { width:100%; }

.hero-card { position:relative; height:540px; z-index:1; perspective:1000px; }
.cube { position:absolute; background:linear-gradient(135deg,#272c37,#11151c); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); transform: rotate(45deg) skew(-4deg,-4deg); }
.cube::before { content:""; position:absolute; inset:14%; border:1px solid rgba(246,200,75,.18); }
.cube-a { width:300px; height:300px; right:12%; top:17%; }
.cube-b { width:170px; height:170px; left:9%; top:4%; opacity:.74; }
.cube-c { width:130px; height:130px; right:4%; bottom:4%; opacity:.48; }
.floating-panel { position:absolute; right:2%; bottom:14%; width:min(92%,350px); border:1px solid rgba(246,200,75,.24); background:rgba(8,9,12,.72); backdrop-filter:blur(16px); padding:25px; border-radius:18px; box-shadow:var(--shadow); }
.floating-panel small { color:var(--gold); letter-spacing:.24em; font-weight:900; }
.floating-panel strong { display:block; font-size:42px; letter-spacing:.08em; margin:4px 0; }
.floating-panel span { color:var(--muted); font-size:10px; letter-spacing:.14em; }
.scroll-hint { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:#757b86; font-size:8px; letter-spacing:.24em; }

.stat-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); background:#0b0d12; }
.stat-strip > div { padding:26px clamp(18px,3vw,44px); border-right:1px solid var(--line); }
.stat-strip > div:last-child { border-right:0; }
.stat-strip strong { display:block; font-size:20px; letter-spacing:.04em; }
.stat-strip span { color:var(--muted); font-size:11px; }

.section { padding:110px clamp(22px,7vw,110px); }
.section.split { display:grid; grid-template-columns:1fr .9fr; gap:clamp(40px,7vw,100px); align-items:center; }
.section h2, .community h2 { font-size:clamp(52px,6vw,96px); margin-top:14px; }
.section-lead { color:#aeb4bf; max-width:680px; font-size:18px; }
.feature-list { margin-top:42px; border-top:1px solid var(--line); }
.feature-list article { display:grid; grid-template-columns:50px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }
.feature-list article > span { color:var(--gold); font-size:11px; font-weight:900; }
.feature-list h3 { margin:0; font-size:18px; }
.feature-list p { margin:4px 0 0; color:var(--muted); }

.showcase { display:grid; gap:14px; }
.showcase-card { min-height:430px; border:1px solid var(--line); border-radius:var(--radius); padding:30px; background:linear-gradient(145deg,#151922,#0d1016); position:relative; overflow:hidden; }
.showcase-card::after { content:""; position:absolute; width:280px; height:280px; border-radius:50%; background:var(--gold); filter:blur(90px); opacity:.06; right:-40px; top:-40px; }
.chip { display:inline-flex; padding:7px 10px; border-radius:999px; border:1px solid rgba(246,200,75,.22); color:var(--gold); font-size:9px; font-weight:900; letter-spacing:.16em; position:relative; z-index:3; }
.showcase-card h3 { font-size:44px; line-height:.95; margin:20px 0 10px; position:relative; z-index:3; }
.showcase-card p { color:var(--muted); max-width:320px; position:relative; z-index:3; }
.pixel-landscape { position:absolute; left:0; right:0; bottom:0; height:210px; z-index:1; pointer-events:none; }
.moon { position:absolute; width:60px; height:60px; border-radius:50%; background:var(--gold); opacity:.85; right:18%; top:12px; box-shadow:0 0 45px rgba(246,200,75,.25); }
.mount { position:absolute; bottom:40px; width:200px; height:170px; background:#212732; clip-path:polygon(50% 0,100% 100%,0 100%); }
.m1 { left:0; }
.m2 { left:28%; height:130px; background:#1b2029; }
.m3 { right:-4%; height:190px; background:#171c24; }
.ground { position:absolute; bottom:0; left:0; right:0; height:55px; background:repeating-linear-gradient(90deg,#181d25 0 50px,#141920 50px 100px); border-top:1px solid rgba(255,255,255,.06); }
.showcase-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mini-card { border:1px solid var(--line); border-radius:18px; padding:24px; background:#0f1218; }
.mini-card span { display:block; color:var(--gold); font-size:24px; }
.mini-card strong { display:block; margin-top:16px; font-size:14px; letter-spacing:.08em; }
.mini-card small { color:var(--muted); }

.shop { background:#0b0d12; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:46px; }
.section-heading > p { max-width:520px; color:var(--muted); }
.section-heading.compact { margin-bottom:24px; }
.rank-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.rank-card { position:relative; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#12161e,#0d1016); padding:26px; overflow:hidden; display:flex; flex-direction:column; min-height:470px; }
.rank-card.featured { border-color:rgba(246,200,75,.42); box-shadow:0 20px 60px rgba(246,200,75,.07); }
.rank-card.featured::before { content:"MÁS POPULAR"; position:absolute; right:-41px; top:25px; transform:rotate(45deg); width:160px; text-align:center; padding:6px 0; background:var(--gold); color:#111; font-size:8px; font-weight:950; letter-spacing:.14em; }
.rank-icon { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(246,200,75,.22); border-radius:13px; background:rgba(246,200,75,.06); color:var(--gold); font-size:20px; }
.rank-card h3 { font-size:27px; margin:20px 0 0; }
.rank-tagline { color:var(--muted); min-height:42px; }
.price { display:flex; align-items:flex-end; gap:5px; margin:16px 0 18px; }
.price strong { font-size:36px; line-height:1; }
.price span { color:var(--muted); font-size:12px; }
.rank-card ul { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; color:#c5cad3; font-size:13px; }
.rank-card li::before { content:"✓"; color:var(--gold); margin-right:9px; font-weight:900; }
.rank-card .btn { margin-top:auto; width:100%; border:1px solid var(--line-strong); background:#151922; }
.rank-card.featured .btn { background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#111; border-color:transparent; }
.shop-note { margin-top:22px; border:1px solid var(--line); border-radius:14px; padding:15px 17px; display:flex; gap:11px; align-items:flex-start; color:var(--muted); font-size:12px; }
.shop-note p { margin:0; }
.shop-note span { color:var(--gold); }
code { color:#f3d57f; }

.steps { text-align:center; }
.steps h2 { margin-bottom:48px; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:left; }
.steps-grid article { border:1px solid var(--line); border-radius:20px; padding:28px; background:#0d1016; }
.steps-grid span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--gold); color:#111; font-weight:950; }
.steps-grid h3 { margin:24px 0 8px; }
.steps-grid p { color:var(--muted); margin:0; }

.faq { border-top:1px solid var(--line); }
.faq-list { max-width:920px; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { width:100%; border:0; background:transparent; padding:22px 0; display:flex; justify-content:space-between; gap:20px; text-align:left; cursor:pointer; font-weight:800; }
.faq-q span:last-child { color:var(--gold); transition:.2s; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .28s ease; color:var(--muted); }
.faq-a p { margin:0; padding:0 40px 22px 0; }
.faq-item.open .faq-a { max-height:220px; }
.faq-item.open .faq-q span:last-child { transform:rotate(45deg); }

.community { min-height:560px; position:relative; overflow:hidden; padding:110px clamp(22px,7vw,110px); display:flex; align-items:center; justify-content:space-between; gap:50px; border-top:1px solid var(--line); background:#11141a; }
.community-bg { position:absolute; inset:0; opacity:.18; background-image: linear-gradient(30deg, transparent 49%, rgba(246,200,75,.35) 50%, transparent 51%), linear-gradient(-30deg, transparent 49%, rgba(255,255,255,.11) 50%, transparent 51%); background-size:130px 130px; }
.community-copy, .community-badge { position:relative; z-index:2; }
.community-copy { max-width:760px; }
.community-copy p { max-width:620px; color:#b5bac3; font-size:18px; }
.community-badge { width:260px; height:260px; border:1px solid rgba(246,200,75,.23); border-radius:36px; background:rgba(8,9,12,.65); backdrop-filter:blur(14px); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:var(--shadow); transform:rotate(4deg); }
.community-badge strong { margin-top:14px; font-size:27px; letter-spacing:.1em; }
.community-badge small { color:var(--muted); letter-spacing:.25em; }

footer { padding:38px clamp(22px,7vw,110px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; color:var(--muted); font-size:11px; }
footer > p { text-align:right; }
.footer-links { display:flex; gap:20px; }

.toast { position:fixed; z-index:120; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#f6c84b; color:#111; padding:10px 14px; border-radius:10px; font-size:11px; font-weight:900; transition:.2s; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:translate(-50%,0); }

.modal { position:fixed; inset:0; z-index:110; display:none; align-items:center; justify-content:center; padding:18px; }
.modal.open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }
.modal-card { width:min(100%,470px); position:relative; z-index:1; background:#11151c; border:1px solid var(--line-strong); border-radius:22px; padding:30px; box-shadow:var(--shadow); }
.modal-card > small { color:var(--gold); letter-spacing:.2em; font-weight:900; }
.modal-card h3 { font-size:36px; margin:8px 0 4px; }
.modal-card p { color:var(--muted); }
.modal-card label { display:block; font-size:11px; font-weight:800; margin:22px 0 7px; }
.modal-card input { width:100%; background:#0b0e13; border:1px solid var(--line-strong); color:white; border-radius:12px; padding:14px; outline:none; margin-bottom:12px; }
.modal-card input:focus { border-color:rgba(246,200,75,.55); box-shadow:0 0 0 3px rgba(246,200,75,.08); }
.modal-close { position:absolute; right:16px; top:14px; border:0; background:transparent; font-size:27px; color:var(--muted); cursor:pointer; }
.tiny { font-size:10px; text-align:center; }

@media (max-width: 1050px) {
  .hero { grid-template-columns:1fr; padding-top:70px; }
  .hero-card { height:360px; margin-top:-10px; }
  .cube-a { width:220px; height:220px; right:20%; }
  .cube-b { width:120px; height:120px; left:18%; }
  .section.split { grid-template-columns:1fr; }
  .rank-grid { grid-template-columns:repeat(2,1fr); }
  footer { grid-template-columns:1fr; }
  footer > p { text-align:left; }
}

@media (max-width: 760px) {
  .topbar { height:68px; padding:0 18px; }
  .discord-ghost { display:none; }
  .menu-btn { display:block; }
  .nav { position:absolute; left:14px; right:14px; top:76px; display:none; flex-direction:column; align-items:stretch; gap:0; border:1px solid var(--line-strong); border-radius:16px; background:#0d1016; overflow:hidden; box-shadow:var(--shadow); }
  .nav.open { display:flex; }
  .nav a { padding:15px 18px; border-bottom:1px solid var(--line); }
  .hero { min-height:auto; padding:70px 20px 70px; }
  .hero h1 { font-size:clamp(56px,17vw,86px); }
  .hero-copy { font-size:16px; }
  .hero-card { height:310px; }
  .floating-panel { right:0; bottom:6%; }
  .scroll-hint { display:none; }
  .stat-strip { grid-template-columns:1fr 1fr; }
  .stat-strip > div:nth-child(2) { border-right:0; }
  .stat-strip > div { border-bottom:1px solid var(--line); }
  .section, .community { padding:78px 20px; }
  .section-heading { flex-direction:column; align-items:flex-start; gap:12px; }
  .section h2, .community h2 { font-size:clamp(48px,14vw,72px); }
  .rank-grid, .steps-grid { grid-template-columns:1fr; }
  .community { flex-direction:column; align-items:flex-start; }
  .community-badge { width:210px; height:210px; align-self:center; }
  .footer-links { flex-wrap:wrap; }
}

@media (max-width: 460px) {
  .server-pill { min-width:100%; }
  .hero-ctas .btn { width:100%; }
  .showcase-row { grid-template-columns:1fr; }
  .rank-grid { grid-template-columns:1fr; }
  .hero-card { display:none; }
  .hero { padding-bottom:80px; }
}

/* ===== Draxsitos v3 refinements ===== */
.brand-mark-pro { position:relative; overflow:hidden; isolation:isolate; }
.brand-mark-pro b { font-size:.9em; transform:translateX(-2px); }
.brand-mark-pro i { position:absolute; right:7px; bottom:4px; font-style:normal; font-size:.43em; font-weight:1000; opacity:.8; }
.brand-mark-pro::after { content:""; position:absolute; width:60%; height:2px; background:rgba(17,17,17,.55); transform:rotate(-45deg); z-index:-1; }
.server-pill-copy small b { margin-left:7px; color:var(--gold); font-size:8px; letter-spacing:.1em; }
.signal-dot.offline { background:#7f8793; box-shadow:none; }
.bedrock-icon.online { color:#55df7a; text-shadow:0 0 14px rgba(85,223,122,.45); }
.live-summary { margin-top:13px; color:var(--muted); font-size:11px; letter-spacing:.03em; }
.rank-grid.rank-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:980px; }
.rank-grid.rank-grid-two .rank-card { min-height:455px; }
.btn.disabled { opacity:.52; cursor:not-allowed; transform:none !important; }
.modal-summary { border:1px solid var(--line); background:#0b0e13; border-radius:14px; padding:14px 16px; margin:18px 0; }
.modal-summary ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; color:#c5cad3; font-size:13px; }
.modal-summary li::before { content:"✓"; color:var(--gold); margin-right:8px; }
.rules { background:#08090c; }
.rules-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.rule-card { border:1px solid var(--line); border-radius:18px; background:#0d1016; padding:24px; display:grid; grid-template-columns:48px 1fr; gap:16px; }
.rule-card > span { color:var(--gold); font-weight:900; font-size:11px; letter-spacing:.12em; }
.rule-card h3 { margin:0 0 8px; font-size:19px; }
.rule-card p { margin:0; color:var(--muted); font-size:13px; }
.staff { border-top:1px solid var(--line); background:#0b0d12; }
.staff-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.staff-card { border:1px solid var(--line); border-radius:18px; min-height:190px; padding:25px; background:linear-gradient(160deg,#12161e,#0c0f14); display:flex; flex-direction:column; justify-content:flex-end; }
.staff-card.owner { border-color:rgba(246,200,75,.36); box-shadow:inset 0 0 50px rgba(246,200,75,.035); }
.staff-card span { color:var(--gold); font-size:9px; font-weight:900; letter-spacing:.2em; }
.staff-card strong { margin-top:9px; font-size:22px; }
.staff-card small { color:var(--muted); margin-top:4px; }
.support-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.legal-page { background:#08090c; }
.legal-topbar { position:sticky; }
.legal-wrap { width:min(1100px,calc(100% - 40px)); margin:0 auto; padding:90px 0 100px; }
.legal-wrap > h1, .error-page h1 { margin:14px 0 22px; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:clamp(50px,7vw,96px); line-height:.92; letter-spacing:.015em; }
.legal-intro { max-width:800px; color:#aeb4bf; font-size:17px; margin-bottom:42px; }
.legal-card { border:1px solid var(--line); border-radius:18px; padding:26px; background:#0d1016; margin:14px 0; }
.legal-card h2 { margin:0 0 12px; font-size:22px; }
.legal-card p { color:var(--muted); margin:10px 0; }
.warning-card { border-color:rgba(246,200,75,.32); }
.legal-footer { display:block; border-top:1px solid var(--line); padding:28px 20px; text-align:center; }
.legal-footer p { text-align:center; margin:0; }
.error-page { min-height:100vh; display:grid; place-items:center; text-align:center; padding:30px; }
.error-page main { max-width:800px; }
.error-page .brand-mark { margin:0 auto 28px; }
.error-page p:not(.section-kicker) { color:var(--muted); margin-bottom:28px; }

@media (max-width:1050px) {
  .staff-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .rank-grid.rank-grid-two, .rules-grid, .staff-grid { grid-template-columns:1fr; }
  .nav { max-height:70vh; overflow:auto; }
  .legal-back { min-height:40px; padding:0 12px; font-size:9px; }
  .legal-wrap { width:min(100% - 36px,1100px); padding:66px 0 78px; }
}


/* ===== Draxsitos v4 mobile polish ===== */
:root { --topbar-h: 78px; }
.hero[id], .section[id], .community[id] { scroll-margin-top: calc(var(--topbar-h) + 18px); }
.hero h1, .section h2, .community h2 { text-wrap: balance; overflow-wrap: normal; word-break: normal; }
.section-heading h2 { max-width: 900px; }
.section-heading > p { line-height: 1.7; }
.staff-card, .rule-card, .rank-card, .steps-grid article, .mini-card { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
@media (hover:hover) {
  .staff-card:hover, .rule-card:hover, .rank-card:hover, .steps-grid article:hover, .mini-card:hover { transform: translateY(-3px); border-color: rgba(246,200,75,.28); }
}

@media (max-width: 760px) {
  :root { --topbar-h: 68px; }
  .hero[id], .section[id], .community[id] { scroll-margin-top: calc(var(--topbar-h) + 14px); }
  .brand strong { font-size: 14px; }
  .brand small { font-size: 7px; }
  .brand-mark { width: 36px; height: 36px; }
  .section, .community { padding-top: 86px; padding-bottom: 86px; }
  .section h2, .community h2 { font-size: clamp(44px, 12.6vw, 66px); line-height: .93; }
  .section-heading { margin-bottom: 34px; }
  .section-heading.compact { margin-bottom: 20px; }
  .section-heading > p, .section-lead, .community-copy p { font-size: 16px; line-height: 1.65; }
  .feature-list { margin-top: 34px; }
  .feature-list article { grid-template-columns: 42px 1fr; padding: 22px 0; }
  .showcase-card { min-height: 390px; padding: 26px; }
  .showcase-card h3 { font-size: 39px; }
  .pixel-landscape { height: 180px; }
  .rank-grid.rank-grid-two { gap: 18px; }
  .rank-grid.rank-grid-two .rank-card { min-height: 0; padding: 28px 26px; }
  .rank-card h3 { font-size: 29px; }
  .price strong { font-size: 40px; }
  .rules-grid, .staff-grid { gap: 16px; }
  .rule-card { grid-template-columns: 42px 1fr; padding: 23px 21px; }
  .staff-card { min-height: 165px; padding: 24px; }
  .steps { text-align: left; }
  .steps h2 { margin-bottom: 34px; }
  .steps-grid article { padding: 24px; }
  .faq-q { font-size: 16px; padding: 23px 0; }
  .faq-a p { padding-right: 20px; line-height: 1.65; }
  .community { min-height: auto; }
  .support-actions .btn { width: 100%; }
  footer { padding-top: 36px; padding-bottom: calc(70px + env(safe-area-inset-bottom)); gap: 24px; }
  footer > p { line-height: 1.6; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: clamp(53px, 16vw, 74px); }
  .server-pill { padding: 13px; }
  .server-pill-copy strong { font-size: 12px; }
  .copy-label { font-size: 8px; }
  .section h2, .community h2 { font-size: clamp(42px, 12vw, 58px); }
  .community-badge { width: 190px; height: 190px; }
  .brand-mark.large { width: 72px; height: 72px; }
}


/* ===== Draxsitos v6 custom logo ===== */
.brand-logo {
  width: 44px;
  height: 44px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(246,200,75,.14);
}
.brand-logo.large {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  margin: 0 auto;
}
.footer-brand .brand-logo {
  width: 40px;
  height: 40px;
}
.community-badge .brand-logo.large {
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .brand-logo {
    width: 38px;
    height: 38px;
  }
  .brand-logo.large {
    width: 84px;
    height: 84px;
  }
}