:root{
  --bg: #0b0b10;
  --bg-2: #0e0e15;
  --card: #12121a;
  --muted: #b9c0cf;
  --text: #e6e6f0;
  --accent: #ec4899; /* pink */
  --accent-2: #8b5cf6; /* purple */
  --ring: #ffffff22;
  --shadow: 0 10px 30px rgba(0,0,0,0.4);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(circle at 20% 80%, #8b5cf615 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, #ec489915 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, #ffffff08 0%, transparent 30%),
    conic-gradient(from 180deg at 50% 50%, transparent 0deg, #8b5cf608 60deg, transparent 120deg, #ec489908 240deg, transparent 300deg),
    linear-gradient(135deg, var(--bg) 0%, #0a0a0f 25%, var(--bg-2) 50%, #0a0a0f 75%, var(--bg) 100%);
  background-size: 100% 100%, 100% 100%, 80% 80%, 200% 200%, 100% 100%;
  background-position: 0% 0%, 0% 0%, 50% 50%, 0% 0%, 0% 0%;
  background-attachment: fixed;
}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* subtle entrance animations */
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes glowMove{0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}
@keyframes pulse{0%{transform:scale(1); box-shadow:0 0 20px #ec4899, 0 0 40px rgba(236, 72, 153, 0.8)} 100%{transform:scale(1.15); box-shadow:0 0 30px #ec4899, 0 0 60px rgba(236, 72, 153, 1)}}
.hero h2{animation:fadeUp .6s ease both .05s}
.hero p{animation:fadeUp .6s ease both .1s}
.cta{animation:fadeUp .6s ease both .15s}

/* animated background glow */
body::before{
  content:''; position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1; pointer-events:none;
  background:linear-gradient(45deg, transparent 30%, #8b5cf608 50%, transparent 70%);
  background-size:200% 200%; animation:glowMove 20s ease-in-out infinite;
  opacity:0.6;
}

/* nav */
header{
  position:sticky; top:0; z-index:10; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, #0b0b10cc, #0b0b1000);
  border-bottom: 1px solid #ffffff10;
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:40px; height:40px; object-fit:contain; filter: drop-shadow(0 2px 8px #0006) drop-shadow(0 0 20px #8b5cf620)}
.brand h1{font-size:18px; margin:0; font-weight:800; letter-spacing:0.3px}
.tag{font-size:12px; color:var(--muted)}
.nav-actions{display:flex; align-items:center; gap:10px}
.btn{padding:10px 14px; border-radius:12px; border:1px solid #ffffff1a; background:#ffffff08; color:var(--text); display:inline-flex; align-items:center; gap:10px; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; box-shadow: var(--shadow)}
.btn:hover{transform:translateY(-2px); border-color:#ffffff33; box-shadow:0 14px 36px rgba(0,0,0,.45)}
.btn.accent{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border:none}
.lang-switch{display:flex; gap:6px; padding:4px; border-radius:12px; background:#ffffff0a; border:1px solid #ffffff15}
.lang-switch button{padding:8px 10px; border:none; background:transparent; color:var(--muted); border-radius:8px; cursor:pointer; font-weight:600; transition:background .2s ease, color .2s ease, transform .2s ease}
.lang-switch button:hover{transform:translateY(-1px)}
.lang-switch button.active{color:white; background:#ffffff14}

/* mobile navigation */
.mobile-menu-btn{display:none; background:none; border:none; color:var(--text); font-size:24px; cursor:pointer; padding:8px}
.mobile-menu{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(11, 11, 16, 0.95); backdrop-filter:blur(10px); z-index:9998; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease}
.mobile-menu.active{opacity:1; visibility:visible}
.mobile-menu-content{display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:20px; padding:40px}
.mobile-menu .btn{width:200px; justify-content:center; font-size:16px}
.mobile-menu .lang-switch{margin-top:20px}
.mobile-menu-close{position:absolute; top:20px; right:20px; background:none; border:none; color:var(--text); font-size:32px; cursor:pointer; padding:8px}

/* hero */
.hero{padding:72px 0 40px}
.hero-inner{display:grid; grid-template-columns:1.2fr 0.8fr; gap:28px; align-items:center}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#ffffff10; border:1px solid #ffffff18; color:#e9d5ff; transition:transform .2s ease, box-shadow .2s ease; box-shadow: 0 0 20px #8b5cf615, inset 0 1px 0 #ffffff20}
.badge .dot{width:10px; height:10px; border-radius:50%; background:#ec4899; display:inline-block; box-shadow:0 0 16px #ec4899, 0 0 32px rgba(236, 72, 153, 0.6); animation:pulse 2s ease-in-out infinite alternate; flex-shrink:0}
.badge:hover{transform:translateY(-1px); box-shadow:0 8px 24px #0006}
.hero h2{font-size:46px; line-height:1.05; margin:14px 0 12px; letter-spacing:-0.5px}
.hero p{color:var(--muted); font-size:18px; margin:0 0 22px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-card{background:linear-gradient(160deg, #12121acc, #0b0b10cc); border:1px solid #ffffff18; border-radius:18px; padding:18px; display:flex; gap:14px; align-items:center; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 #ffffff15, 0 0 40px #8b5cf610}
.hero-card > div{display:flex; flex-direction:column; justify-content:center}
.hero-card:hover{transform:translateY(-3px); border-color:#ffffff30; box-shadow:0 18px 44px rgba(0,0,0,.5)}
.hero-card img{width:64px; height:64px; object-fit:contain}

/* rules section */
.rules-container{display:grid; gap:16px}
.rule-item{background:rgba(255,255,255,0.06); border:1px solid #ffffff18; border-radius:14px; padding:16px 16px 14px; box-shadow:0 8px 28px rgba(0,0,0,.35); backdrop-filter: blur(6px)}
.rule-title{margin:0 0 8px; display:flex; align-items:baseline; gap:8px}
.rule-number{color:var(--accent); font-weight:800; margin-right:6px}
.rule-content{margin:8px 0 0 0; padding-left:18px; color:var(--muted)}
.rule-content li{margin:6px 0}
.welcome-section{margin-bottom:24px}
.rules-section{margin:24px 0}

/* spacing between rules and headers */
.section-title + .rules-container{margin-top:14px}
.rule-item + .rule-item{margin-top:8px}

/* responsive tweaks */
@media (max-width: 960px){
  .rules-container{gap:12px}
  .rule-item{padding:14px}
  .rule-content{padding-left:16px}
}
.section-title{font-size:28px; margin:0 0 14px; transition:color .2s ease, transform .2s ease}
.section-title:hover{color:#f0abfc; transform:translateY(-1px)}
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.card{background:var(--card); border:1px solid #ffffff14; border-radius:16px; padding:18px; box-shadow:var(--shadow); transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease}
.card:hover{transform:translateY(-4px) scale(1.01); border-color:#ffffff30; box-shadow:0 18px 44px rgba(0,0,0,.5)}
.card p{color:var(--muted)}

/* newcomer */
.callout{background:linear-gradient(180deg, #ffffff06, #ffffff00); border:1px solid #ffffff20; padding:22px; border-radius:16px; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease}
.callout:hover{transform:translateY(-3px); border-color:#ffffff33; box-shadow:0 16px 40px rgba(0,0,0,.45)}
.callout h3{margin-top:0}

/* gallery (home preview) */
.gallery{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px}
.gallery img{width:100%; height:240px; object-fit:cover; border-radius:12px; border:1px solid #ffffff12; transition:transform .25s ease, box-shadow .25s ease}
.gallery img:hover{transform:scale(1.03); box-shadow:0 12px 30px rgba(0,0,0,.45)}

/* gallery-grid for lightbox */
.gallery-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px}
.gallery-item{position:relative; overflow:hidden; border-radius:12px; border:1px solid #ffffff12; cursor:pointer; display:block; transition:transform .22s ease, box-shadow .22s ease}
.gallery-item img{width:100%; height:240px; object-fit:cover; display:block; transition: transform .3s ease, filter .3s ease}
.gallery-item::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.2)); opacity:0; transition:opacity .3s ease}
.gallery-item:hover{transform:translateY(-2px)}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item:hover::after{opacity:1}

/* lang support - default EN */
.lang{display:none}
.lang-en{display:block}

/* mod list */
.mods{columns:2; column-gap:20px}
.mods a{display:block; padding:6px 10px; margin:0 0 8px; background:#ffffff08; border:1px solid #ffffff12; border-radius:12px; color:#e2e8f0; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
.mods a:hover{transform:translateY(-2px); border-color:#ffffff30; box-shadow:0 12px 28px rgba(0,0,0,.45)}

/* pricing highlight */
.price-highlight{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px}

/* tutorial styles */
.tutorial-steps{display:flex; flex-direction:column; gap:24px; margin:32px 0}
.tutorial-step{display:flex; gap:20px; align-items:flex-start}
.step-number{width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex-shrink:0; box-shadow:0 4px 12px rgba(236, 72, 153, 0.3)}
.step-content{flex:1}
.step-content h4{margin:0 0 8px; color:var(--text)}
.step-content p{margin:8px 0}
.step-content ul{margin:12px 0; padding-left:20px}
.step-content li{margin:4px 0; color:var(--muted)}
.server-info{background:var(--card); border:1px solid #ffffff18; border-radius:12px; padding:16px; margin:12px 0}
.server-info code{background:#ffffff10; padding:4px 8px; border-radius:6px; font-family:monospace; color:var(--accent)}

/* responsive tutorial */
@media (max-width: 960px){
  .tutorial-step{flex-direction:column; gap:12px}
  .step-number{align-self:flex-start}
}

/* footer */
footer{padding:44px 0; border-top:1px solid #ffffff12; color:var(--muted)}

/* responsive */
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2, 1fr)}
  .gallery-grid{grid-template-columns:repeat(2, 1fr)}
  .cards{grid-template-columns:1fr}
  .mods{columns:1}
}

@media (max-width: 768px){
  .nav-actions{display:none}
  .mobile-menu-btn{display:block}
  .mobile-menu{display:block}
  .nav{flex-wrap:wrap}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none!important; transition:none!important}
}