* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg-1: #f5f6f7;
  --bg-2: #e6e7e9;
  --panel: #d6d7da;
  --muted: #6b6f75;
  --text: #111217;
  --accent: #8b8f94;
  --glass: rgba(255,255,255,0.06);
}
[data-theme="dark"]{
  --bg-1: #0b0b0f;
  --bg-2: #0f1114;
  --panel: #141619;
  --muted: #9aa0a6;
  --text: #e7e9eb;
  --accent: #7f92a0;
  --glass: rgba(255,255,255,0.03);
}
html,body{height:100%;}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.container{max-width:1100px;margin:0 auto;padding:28px;}
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg-1: #f5f6f7;
  --bg-2: #e6e7e9;
  --panel: #d6d7da;
  --muted: #6b6f75;
  --text: #111217;
  --accent: #8b8f94;
  --glass: rgba(255,255,255,0.06);
}
[data-theme="dark"]{
  --bg-1: #0b0b0f;
  --bg-2: #0f1114;
  --panel: #141619;
  --muted: #9aa0a6;
  --text: #e7e9eb;
  --accent: #7f92a0;
  --glass: rgba(255,255,255,0.03);
}
html,body{height:100%;}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.container{max-width:1100px;margin:0 auto;padding:28px;}

.site-header{backdrop-filter: blur(6px); background: transparent; border-bottom: 1px solid rgba(0,0,0,0.04);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;flex-direction:column;position:relative}
.logo{font-weight:800;font-size:1.25rem;color:var(--text);letter-spacing:0.02em;position:relative;z-index:2}
.tag{font-size:0.8rem;color:var(--muted);position:relative;z-index:2}

.brand-mark{position:absolute;left:-60px;top:50%;transform:translateY(-50%);width:52px;height:52px;opacity:0.92;z-index:1;pointer-events:none;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.18))}

.nav{display:flex;gap:14px}
.nav-link{color:var(--accent);text-decoration:none;font-weight:600;cursor:pointer}
.footer-links a, a { cursor: pointer }

body, body *:not(input):not(textarea):not(select) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.btn, .theme-toggle { cursor: pointer; }

input, textarea, select { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; }

.theme-toggle{appearance:none;border-radius:10px;padding:10px 14px;display:inline-flex;align-items:center;gap:8px;justify-content:center;background:transparent;border:1px solid rgba(80,85,90,0.18);color:var(--text);cursor:pointer;transition:transform 180ms ease,box-shadow 220ms ease,background 220ms ease,border-color 180ms ease;backdrop-filter:blur(4px)}
.theme-toggle:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(2,6,23,0.07);border-color:rgba(80,85,90,0.26)}
.theme-toggle:focus{outline:none;box-shadow:0 16px 36px rgba(2,6,23,0.06)}
[data-theme="dark"] .theme-toggle{border-color:rgba(255,255,255,0.06);color:var(--text)}
[data-theme="dark"] .theme-toggle:hover{border-color:rgba(255,255,255,0.12)}

.theme-toggle .toggle-text{font-weight:700;color:var(--accent);font-size:0.95rem}
[data-theme="dark"] .theme-toggle{border-color:rgba(255,255,255,0.06);color:var(--text)}
[data-theme="dark"] .theme-toggle:hover{border-color:rgba(255,255,255,0.12)}

.icon{width:18px;height:18px;display:block;transition:opacity 240ms ease, transform 240ms ease}
.icon-moon{opacity:1;transform:rotate(0) scale(1)}
.icon-sun{opacity:0;transform:rotate(0) scale(0.95)}

.hero{padding:64px 0;background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0));border-bottom:1px solid rgba(0,0,0,0.03)}
.hero-inner{text-align:center;padding:36px;border-radius:12px}
.hero-logo{display:block;margin:0 auto 18px;max-width:680px;width:78%;height:auto;opacity:0.98;pointer-events:none;user-select:none}
.hero-title{font-size:clamp(28px,5vw,48px);font-weight:800;color:var(--text);margin-bottom:8px}
.hero-sub{color:var(--muted);margin-bottom:20px}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-bottom:10px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);background:transparent;color:var(--text);cursor:pointer;text-decoration:none;font-weight:700;transition:transform 180ms ease,box-shadow 220ms ease,background 220ms ease}
.btn:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(2,6,23,0.09)}
.btn:focus{outline:2px solid rgba(0,0,0,0.06);outline-offset:3px}
.btn-primary{background:linear-gradient(180deg,#bfc2c6,#9fa3a8);box-shadow:0 6px 20px rgba(16,24,40,0.06);transition:transform 180ms ease,box-shadow 220ms ease,background 220ms ease}
.btn-primary:hover{background:linear-gradient(180deg,#aeb2b6,#8f9498);box-shadow:0 18px 36px rgba(2,6,23,0.12)}

.small{color:var(--muted);font-size:0.9rem;margin-top:8px}

.copy-field{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.copy-field input{appearance:none;border-radius:10px;padding:12px 18px;font-weight:800;letter-spacing:0.04em;text-align:center;border:1px solid rgba(80,85,90,0.18);background:transparent;cursor:pointer;color:var(--text);min-width:260px;transition:box-shadow 220ms ease,transform 180ms ease,background 220ms ease,border-color 180ms ease;backdrop-filter:blur(4px)}
.copy-field input:focus{outline:none;box-shadow:0 16px 36px rgba(2,6,23,0.06);border-color:rgba(80,85,90,0.28)}
.copy-field input:hover{box-shadow:0 18px 40px rgba(2,6,23,0.07);transform:translateY(-4px);border-color:rgba(80,85,90,0.26)}
.copy-field input[readonly]{caret-color:transparent}
.copy-feedback{position:absolute;left:50%;top:-42px;transform:translateX(-50%) translateY(0);opacity:0;pointer-events:none;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--accent);background:rgba(255,255,255,0.98);color:var(--text);font-size:0.86rem;font-weight:700;letter-spacing:0.01em;transition:opacity 180ms ease,transform 180ms ease,background 180ms ease,border-color 180ms ease}
.copy-feedback-icon{width:16px;height:16px;color:var(--accent);flex-shrink:0}
.copy-field.copied .copy-feedback{opacity:1;transform:translateX(-50%) translateY(-8px)}
@media (prefers-reduced-motion: no-preference){.copy-field.copied .copy-feedback{animation:copy-pulse 0.35s ease-out}}
@keyframes copy-pulse{0%{transform:translateX(-50%) translateY(4px) scale(0.98);opacity:0}50%{transform:translateX(-50%) translateY(-8px) scale(1.03);opacity:1}100%{transform:translateX(-50%) translateY(-6px) scale(1);opacity:1}}

[data-theme="dark"] .copy-feedback{background:rgba(20,20,25,0.96);color:#fff;border-color:rgba(255,255,255,0.16)}

.features{padding:44px 0}
.section-title{font-size:1.25rem;margin-bottom:18px;color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);padding:18px;border-radius:12px;box-shadow:0 4px 18px rgba(16,24,40,0.04);transition:transform 220ms ease,box-shadow 220ms ease}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(2,6,23,0.06)}
.card h3{margin-bottom:8px;font-size:1rem}
.card p{color:var(--muted);font-size:0.95rem}

.site-footer{position:fixed;left:0;right:0;bottom:0;background:transparent;border-top:1px solid rgba(0,0,0,0.04);backdrop-filter:blur(6px);color:var(--muted);z-index:60}
.site-footer .container{padding-left:20px;padding-right:20px}
.footer-inner{display:flex;justify-content:center;align-items:center;gap:12px;padding:10px 0;text-align:center}
.footer-contact{color:var(--muted);font-weight:600}
.footer-links a{color:var(--accent);text-decoration:none;font-weight:600}

body{padding-bottom:84px}
[data-theme="dark"] .site-footer{border-top:1px solid rgba(255,255,255,0.03)}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .grid{grid-template-columns:1fr}
  .hero-inner{padding:20px}
  .hero-actions{flex-direction:column}
}

.theme-toggle, .theme-toggle * { cursor: pointer !important; }

@media (max-width:900px){
  .hero-logo{max-width:520px;width:84%}
}
@media (max-width:600px){
  .hero-logo{display:block;margin-bottom:12px;max-width:320px;width:86%}
}

@media (max-width:600px){
  .brand-mark{left:-12px;width:44px;height:44px;opacity:0.9;transform:translateY(-50%)}
}

@media (max-width:900px){
  .brand-mark{display:none}
}

.server-status{display:inline-flex;align-items:center;gap:8px;margin-left:12px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,0.02);color:var(--muted);font-weight:700;font-size:0.95rem}
.server-status .status-icon{width:18px;height:18px;display:block;opacity:0.95}
.server-status .status-icon path{fill:var(--accent)}
.server-status .status-text{color:var(--muted)}
.server-status #playerCount{color:var(--text);font-weight:900;margin-right:4px}
[data-theme="dark"] .server-status{background:rgba(255,255,255,0.02)}