/* ═══════════════════════════════════════════════
   METIN2CHILE — Main Stylesheet
   style.css
═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:    #c9a84c;
  --gold2:   #f0d080;
  --red:     #8b1a1a;
  --red2:    #c0392b;
  --bg:      #07070d;
  --bg2:     #0f0f1a;
  --bg3:     #161625;
  --text:    #e8e0d0;
  --muted:   #9a9080;
  --border:  rgba(201,168,76,.25);
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 64px;
  background: rgba(7,7,13,.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.nav-logo img { height: 52px; width: auto; }

.nav-links { display: flex; gap: 1.8rem; list-style: none; }
.nav-links a {
  font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .2s;
}
.nav-links a:hover { color: var(--gold2); }
.nav-links a.active { color: var(--gold); }

.nav-actions { display: flex; align-items: center; gap: .75rem; }
.btn-ghost {
  padding: .45rem 1.1rem; border: 1px solid var(--border); background: transparent;
  color: var(--text); border-radius: 4px; font-size: .8rem; font-weight: 500;
  letter-spacing: .05em; cursor: pointer; transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold2); }
.btn-primary {
  padding: .45rem 1.2rem; border: 1px solid var(--gold);
  background: linear-gradient(135deg, var(--red), #5c0f0f);
  color: var(--gold2); border-radius: 4px; font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; cursor: pointer; transition: filter .2s;
}
.btn-primary:hover { filter: brightness(1.15); }

.lang-toggle {
  display: flex; gap: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
.lang-toggle button {
  padding: .35rem .65rem; background: transparent; border: none;
  color: var(--muted); font-size: .72rem; font-weight: 600; cursor: pointer;
  letter-spacing: .06em; transition: background .2s, color .2s;
}
.lang-toggle button.active { background: var(--gold); color: #07070d; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 22px; height: 2px; background: var(--gold); border-radius: 2px; transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.mobile-menu {
  display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 99;
  background: rgba(7,7,13,.97); backdrop-filter: blur(20px);
  padding: 1.5rem 2rem 2rem; flex-direction: column; gap: 1.2rem;
  border-bottom: 1px solid var(--border);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: .9rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .mob-actions { display: flex; gap: .75rem; padding-top: .5rem; }

/* ── HERO ── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden; padding-top: 76px;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('../img/hero-bg.jpg') center center / cover no-repeat;
}
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,7,13,.82) 0%, rgba(7,7,13,.55) 55%, rgba(7,7,13,.3) 100%);
  pointer-events: none; z-index: 1;
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,13,.1) 0%, rgba(7,7,13,.0) 60%, rgba(7,7,13,.9) 100%);
  pointer-events: none; z-index: 1;
}
.hero-glow {
  position: absolute; right: -10%; top: 10%; width: 60%; height: 80%;
  background: radial-gradient(ellipse at 70% 40%, rgba(139,26,26,.35) 0%, transparent 65%);
  pointer-events: none;
}
.hero-glow2 {
  position: absolute; left: 0; bottom: 0; width: 50%; height: 50%;
  background: radial-gradient(ellipse at 20% 80%, rgba(201,168,76,.08) 0%, transparent 60%);
  pointer-events: none;
}

/* ── EFFECTS SYSTEM ── */
#particleCanvas {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: .9;
}
.fog-wrap {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.fog {
  position: absolute; width: 200%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(7,7,20,0.55)' d='M0,192L60,181.3C120,171,240,149,360,154.7C480,160,600,192,720,197.3C840,203,960,181,1080,165.3C1200,149,1320,139,1380,133.3L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'/%3E%3C/svg%3E") repeat-x bottom;
  background-size: 50% 260px;
  opacity: .7;
}
.fog-1 { animation: fogDrift 28s linear infinite; bottom: 0; }
.fog-2 { animation: fogDrift 42s linear infinite reverse; bottom: -30px; opacity: .45; filter: blur(4px); }
.fog-3 { animation: fogDrift 18s linear infinite; bottom: 20px; opacity: .3; filter: blur(8px); }
@keyframes fogDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.info-card::before, .news-card::before, .quick-item::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(201,168,76,.06) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.info-card { position: relative; overflow: hidden; }
.news-card { position: relative; }
.quick-item { position: relative; }
.info-card:hover::before, .news-card:hover::before, .quick-item:hover::before { opacity: 1; }
.info-card::after, .news-card::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.07), transparent);
  transition: left .6s ease;
  pointer-events: none;
}
.info-card:hover::after, .news-card:hover::after { left: 140%; }

.glow-accent {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(80px);
}
.glow-gold  { background: radial-gradient(circle, rgba(201,168,76,.12) 0%, transparent 70%); }
.glow-red   { background: radial-gradient(circle, rgba(139,26,26,.15) 0%, transparent 70%); }
.glow-deep  { background: radial-gradient(circle, rgba(60,20,80,.10) 0%, transparent 70%); }

.ranking-table tbody tr:first-child td {
  position: relative;
  animation: goldRowPulse 3s ease-in-out infinite;
}
@keyframes goldRowPulse {
  0%,100% { background: transparent; }
  50%      { background: rgba(201,168,76,.06); }
}
.orb-core { animation: orbBreath 4s ease-in-out infinite; }
@keyframes orbBreath {
  0%,100% { box-shadow: 0 0 60px rgba(201,168,76,.08), inset 0 0 40px rgba(0,0,0,.6); }
  50%      { box-shadow: 0 0 100px rgba(201,168,76,.18), inset 0 0 40px rgba(0,0,0,.6); }
}
.section-label::before { animation: labelLinePulse 2.5s ease-in-out infinite; }
@keyframes labelLinePulse {
  0%,100% { opacity: .7; width: 20px; }
  50%      { opacity: 1;  width: 32px; }
}
.cta-download { position: relative; overflow: hidden; }
.cta-download::after {
  content: '';
  position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: btnShimmer 3.5s ease-in-out infinite;
}
@keyframes btnShimmer {
  0%   { left: -80%; }
  60%  { left: 140%; }
  100% { left: 140%; }
}
section { isolation: isolate; }

/* ── HERO CONTENT ── */
.hero-content {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; padding: 4rem 2rem;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.25rem;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: ''; display: block; width: 28px; height: 1px; background: var(--gold);
}
.hero-title {
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05; letter-spacing: .02em;
  background: linear-gradient(160deg, #fff 0%, var(--gold2) 40%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: clamp(.85rem, 1.5vw, 1rem); color: var(--muted); line-height: 1.7;
  margin-bottom: 1.8rem; max-width: 480px;
}
.hero-sub strong { color: var(--text); }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.cta-download {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1.8rem;
  background: linear-gradient(135deg, var(--red2), var(--red));
  border: 1px solid rgba(201,168,76,.4);
  border-radius: 4px; color: var(--gold2);
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 0 30px rgba(139,26,26,.4);
  transition: filter .25s, box-shadow .25s;
}
.cta-download:hover { filter: brightness(1.15); box-shadow: 0 0 50px rgba(192,57,43,.5); }
.cta-register {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1.8rem;
  background: transparent; border: 1px solid var(--gold);
  border-radius: 4px; color: var(--gold2);
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s;
}
.cta-register:hover { background: rgba(201,168,76,.12); }
.hero-version {
  margin-top: 1rem; font-size: .72rem; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
}
.hero-version span { color: var(--gold); font-weight: 600; }

/* ── ORB ── */
.hero-visual { display: flex; align-items: center; justify-content: center; }
.server-orb {
  position: relative; width: 320px; height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.orb-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid;
  animation: spin linear infinite;
}
.orb-ring:nth-child(1) { inset: 0; border-color: rgba(201,168,76,.2); animation-duration: 20s; }
.orb-ring:nth-child(2) { inset: 20px; border-color: rgba(201,168,76,.12); animation-duration: 15s; animation-direction: reverse; }
.orb-ring:nth-child(3) { inset: 40px; border-color: rgba(139,26,26,.25); animation-duration: 25s; border-style: dashed; }
@keyframes spin { to { transform: rotate(360deg); } }
.orb-core {
  position: relative; z-index: 2;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #1f1a2e, #07070d);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
}
.orb-status { display: flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #2ecc71; }
.orb-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 8px #2ecc71; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }
.orb-count { font-family: 'Cinzel', serif; font-weight: 700; font-size: 2.6rem; color: var(--gold2); letter-spacing: -.02em; line-height: 1; }
.orb-label { font-size: .7rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.orb-channel { font-size: .72rem; color: var(--gold); font-weight: 500; margin-top: .25rem; }

/* ── SECTIONS ── */
section { position: relative; }
.section-inner { max-width: 1200px; margin: 0 auto; padding: 5rem 2rem; }
.section-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .75rem;
}
.section-label::before { content: ''; display: block; width: 20px; height: 1px; background: var(--gold); }
.section-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: .03em;
  margin-bottom: 2.5rem; color: var(--text);
}
.section-title em { font-style: normal; color: var(--gold); }
.section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.section-header .section-title { margin-bottom: 0; }

/* ── CARDS GRID ── */
.cards-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.info-card {
  background: var(--bg2); padding: 2rem 1.5rem;
  display: flex; flex-direction: column; gap: .75rem;
  transition: background .2s;
}
.info-card:hover { background: var(--bg3); }
.card-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(201,168,76,.15), rgba(201,168,76,.05));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.card-title { font-family: 'Cinzel', serif; font-size: .85rem; font-weight: 700; color: var(--gold2); letter-spacing: .05em; text-transform: uppercase; }
.card-desc { font-size: .8rem; color: var(--muted); line-height: 1.6; }

/* ── NEWS ── */
.news-section { background: var(--bg2); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.news-card {
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  background: var(--bg); transition: border-color .2s, transform .2s;
}
.news-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.news-thumb {
  height: 160px; background: linear-gradient(135deg, #1a0a0a, #0a0714);
  display: flex; align-items: center; justify-content: center; font-size: 2.5rem;
}
.news-body { padding: 1.25rem; }
.news-date { font-size: .68rem; color: var(--muted); letter-spacing: .1em; margin-bottom: .5rem; }
.news-title { font-family: 'Cinzel', serif; font-size: .9rem; font-weight: 600; color: var(--text); margin-bottom: .5rem; line-height: 1.4; }
.news-excerpt { font-size: .78rem; color: var(--muted); line-height: 1.6; }
.news-tag {
  display: inline-block; margin-bottom: .6rem;
  padding: .2rem .6rem; border-radius: 3px; font-size: .65rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.tag-event  { background: rgba(192,57,43,.2); color: #e74c3c; }
.tag-update { background: rgba(201,168,76,.15); color: var(--gold); }
.tag-bonus  { background: rgba(46,204,113,.15); color: #2ecc71; }

/* ── RANKING ── */
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: .75rem 1rem; text-align: left;
  border-bottom: 1px solid var(--border);
}
.ranking-table td { padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04); font-size: .85rem; }
.ranking-table tr:last-child td { border-bottom: none; }
.ranking-table tr:hover td { background: rgba(255,255,255,.02); }
.rank-badge {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: .72rem;
}
.rank-1     { background: linear-gradient(135deg, #c9a84c, #f0d080); color: #07070d; box-shadow: 0 0 12px rgba(201,168,76,.4); }
.rank-2     { background: linear-gradient(135deg, #8a8a9a, #c0c0d0); color: #07070d; }
.rank-3     { background: linear-gradient(135deg, #cd7f32, #e8a060); color: #07070d; }
.rank-other { background: var(--bg3); color: var(--muted); border: 1px solid var(--border); }
.player-name  { font-weight: 600; color: var(--text); }
.player-class { font-size: .72rem; color: var(--muted); }
.player-level { font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }

/* ── QUICK ACCESS ── */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.quick-item {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg2); text-decoration: none;
  transition: border-color .2s, background .2s;
}
.quick-item:hover { border-color: var(--gold); background: var(--bg3); }
.quick-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 6px;
  background: rgba(201,168,76,.1); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.quick-label { font-family: 'Cinzel', serif; font-size: .78rem; font-weight: 600; color: var(--gold2); letter-spacing: .04em; }
.quick-desc  { font-size: .7rem; color: var(--muted); margin-top: .15rem; }

/* ── BUTTONS ── */
.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.5rem; border: 1px solid var(--border);
  background: transparent; color: var(--gold); border-radius: 4px;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: border-color .2s, background .2s;
}
.btn-outline:hover { border-color: var(--gold); background: rgba(201,168,76,.06); }

/* ── FOOTER ── */
footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 3rem 2rem 1.5rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
  margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border);
}
.footer-brand p { font-size: .82rem; color: var(--muted); line-height: 1.7; margin-top: .75rem; max-width: 260px; }
.footer-socials { display: flex; gap: .6rem; margin-top: 1rem; }
.social-btn {
  width: 34px; height: 34px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; cursor: pointer; text-decoration: none;
  transition: border-color .2s, background .2s;
}
.social-btn:hover { border-color: var(--gold); background: rgba(201,168,76,.08); }
.footer-col h4 {
  font-family: 'Cinzel', serif; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold2); margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { font-size: .8rem; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--gold2); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem; color: var(--muted); flex-wrap: wrap; gap: .5rem;
}
.footer-bottom a { color: var(--muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold); }

/* ── MODALS ── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.75); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 2rem; width: 100%; max-width: 420px; margin: 1rem; position: relative;
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer;
}
.modal-title {
  font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700;
  color: var(--gold2); margin-bottom: 1.5rem;
}
.form-group { display: flex; flex-direction: column; gap: .9rem; }
.form-label {
  font-size: .75rem; color: var(--muted); letter-spacing: .08em;
  text-transform: uppercase; display: block; margin-bottom: .4rem;
}
.form-input {
  width: 100%; padding: .65rem 1rem;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); font-size: .85rem; outline: none;
  transition: border-color .2s;
}
.form-input:focus { border-color: var(--gold); }
.form-submit {
  width: 100%; padding: .75rem;
  background: linear-gradient(135deg, var(--red2), var(--red));
  border: 1px solid var(--gold); border-radius: 4px;
  color: var(--gold2); font-family: 'Cinzel', serif;
  font-size: .88rem; font-weight: 700; letter-spacing: .1em;
  cursor: pointer; transition: filter .2s; margin-top: .25rem;
}
.form-submit:hover { filter: brightness(1.15); }
.form-switch { text-align: center; font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.form-switch a { color: var(--gold); text-decoration: none; }
.form-msg { text-align: center; font-size: .78rem; min-height: 1rem; margin-top: .25rem; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-actions .btn-ghost,
  .nav-actions .btn-primary { display: none; }
  .hamburger { display: flex; }
  .hero-content { grid-template-columns: 1fr; text-align: center; }
  .hero-text { order: 1; }
  .hero-visual { order: 0; }
  .hero-eyebrow { justify-content: center; }
  .hero-sub { margin: 0 auto 1.8rem; }
  .hero-cta { justify-content: center; }
  .server-orb { width: 220px; height: 220px; }
  .orb-core { width: 160px; height: 160px; }
  .orb-count { font-size: 2rem; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .cards-grid { grid-template-columns: 1fr; }
  nav { padding: 0 1.2rem; }
  .section-inner { padding: 3.5rem 1.2rem; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .fog-1, .fog-2, .fog-3 { animation: none; }
  .orb-core { animation: none; }
  .cta-download::after { animation: none; }
  .section-label::before { animation: none; }
  .ranking-table tbody tr:first-child td { animation: none; }
}