/* ============================================================
   LiteRP — Tokens
   ============================================================ */
:root{
  --bg:            #06090a;
  --bg-soft:       #0b1110;
  --panel:         #0e1614;
  --panel-line:    rgba(141, 255, 199, 0.10);
  --line:          rgba(141, 255, 199, 0.14);

  --green:         #34e8a0;
  --green-dim:     #1d8a63;
  --green-glow:    rgba(52, 232, 160, 0.55);

  --gold:          #cdb27a;
  --gold-dim:      #8a7752;

  --purple:        #9b6bff;
  --purple-2:      #6e3bff;
  --purple-glow:   rgba(155, 107, 255, 0.55);

  --text:          #e7f3ec;
  --text-dim:      #8fa39a;
  --text-faint:    #5c6c65;

  --font-display:  'Cormorant Garamond', serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  --radius:        2px;
  --container:     1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   Ambient texture
   ============================================================ */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.5;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.18) 3px);
}

/* ============================================================
   Topbar
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:32px;
  padding:18px clamp(20px, 5vw, 64px);
  background:rgba(6,9,10,0.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease, border-color .3s ease;
}

.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-mark{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:18px;
  border:1px solid var(--green-dim); color:var(--green);
  box-shadow:0 0 14px -2px var(--green-glow) inset;
}
.brand-mark--small{
  width:28px; height:28px; font-size:15px;
}
.brand-text{
  font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:0.04em; color:var(--text);
}

.nav{ display:flex; gap:34px; }
.nav a{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim); position:relative; padding:4px 0;
  transition:color .25s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--green); box-shadow:0 0 8px var(--green-glow);
  transition:width .25s ease;
}
.nav a:hover{ color:var(--text); }
.nav a:hover::after{ width:100%; }

.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; padding:0;
}
.burger span{ width:100%; height:1.5px; background:var(--text); transition:transform .25s ease, opacity .25s ease; }
.burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px);
  background:var(--bg-soft); border-left:1px solid var(--line);
  z-index:60; display:flex; flex-direction:column; gap:6px;
  padding:90px 28px 28px; transform:translateX(100%);
  transition:transform .35s cubic-bezier(.7,0,.3,1);
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav a{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-dim); padding:14px 0; border-bottom:1px solid var(--panel-line);
}
.mobile-nav .discord-btn{ margin-top:20px; justify-content:center; }

/* ============================================================
   Discord button
   ============================================================ */
.discord-btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  color:#f4eeff; padding:13px 26px; border-radius:var(--radius);
  border:1px solid rgba(155,107,255,0.5);
  background:linear-gradient(135deg, rgba(110,59,255,0.22), rgba(155,107,255,0.12));
  overflow:hidden; isolation:isolate;
  box-shadow:0 0 0 0 var(--purple-glow);
  transition:box-shadow .3s ease, border-color .3s ease, transform .15s ease;
}
.discord-btn:hover{
  box-shadow:0 0 28px -4px var(--purple-glow);
  border-color:rgba(155,107,255,0.9);
  transform:translateY(-1px);
}
.discord-btn:active{ transform:translateY(0); }
.discord-icon{ width:17px; height:17px; fill:currentColor; flex-shrink:0; }

.discord-btn__shimmer{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 48%, rgba(200,170,255,0.6) 52%, transparent 70%);
  background-size:220% 100%;
  animation:shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position:160% 0; }
  55%{ background-position:-60% 0; }
  100%{ background-position:-60% 0; }
}

.discord-btn--small{ padding:9px 18px; font-size:12px; }
.discord-btn--large{ padding:17px 36px; font-size:14px; }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:140px 24px 80px; gap:26px;
  overflow:hidden;
}

.hero-grid{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(to right, rgba(52,232,160,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(52,232,160,0.06) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 35%, black 10%, transparent 75%);
          mask-image:radial-gradient(ellipse 60% 50% at 50% 35%, black 10%, transparent 75%);
}
.hero-grid::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 40% at 50% 28%, rgba(52,232,160,0.10), transparent 70%);
}

.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); opacity:0.85;
}

.hero-title{ display:flex; flex-direction:column; gap:6px; }
.hero-title .line{
  font-size:clamp(56px, 11vw, 128px); line-height:0.96; font-weight:600; letter-spacing:-0.01em;
  color:var(--text);
  text-shadow:0 0 50px var(--green-glow), 0 0 110px rgba(52,232,160,0.18);
}
.hero-title .line--sub{
  font-size:clamp(20px, 3.4vw, 30px); font-weight:500; font-style:italic; letter-spacing:0;
  color:var(--text-dim); text-shadow:none;
}

.hero-desc{
  max-width:560px; font-size:16px; line-height:1.65; color:var(--text-dim);
}

.hero-meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin-top:6px;
}
.meta-item{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-faint);
}
.meta-dot{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green-glow);
}

.scroll-hint{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  width:1px; height:48px; background:linear-gradient(to bottom, var(--green), transparent);
  overflow:hidden;
}
.scroll-hint span{
  position:absolute; top:-48px; left:0; width:100%; height:48px;
  background:linear-gradient(to bottom, transparent, var(--green) 60%, transparent);
  animation:scrollDown 2.4s ease-in-out infinite;
}
@keyframes scrollDown{
  0%{ top:-48px; } 100%{ top:48px; }
}

/* ============================================================
   Tabs
   ============================================================ */
.content{
  max-width:var(--container); margin:0 auto; padding:60px 24px 100px;
}

.tab-rail{
  position:relative; display:flex; gap:4px; margin-bottom:48px;
  border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;
}
.tab-rail::-webkit-scrollbar{ display:none; }

.tab-btn{
  position:relative; display:flex; align-items:baseline; gap:10px;
  background:none; border:none; padding:16px 22px 18px; white-space:nowrap;
  color:var(--text-faint); transition:color .25s ease;
}
.tab-btn:hover{ color:var(--text-dim); }
.tab-btn.is-active{ color:var(--text); }

.tab-num{ font-family:var(--font-mono); font-size:11px; color:var(--green-dim); }
.tab-btn.is-active .tab-num{ color:var(--green); }
.tab-label{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.05em; text-transform:uppercase; }

.tab-indicator{
  position:absolute; bottom:-1px; height:2px; background:var(--green);
  box-shadow:0 0 12px var(--green-glow);
  transition:left .35s cubic-bezier(.7,0,.3,1), width .35s cubic-bezier(.7,0,.3,1);
}

.panel{
  display:none; animation:panelIn .45s ease;
}
.panel.is-active{ display:block; }
@keyframes panelIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.panel-head{ max-width:640px; margin-bottom:44px; }
.panel-kicker{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px;
}
.panel-title{ font-size:clamp(32px, 4vw, 44px); margin-bottom:14px; }
.panel-intro{ font-size:15.5px; line-height:1.7; color:var(--text-dim); }

/* ---- Regelwerk ---- */
.rule-list{ display:flex; flex-direction:column; }
.rule{
  display:grid; grid-template-columns:74px 1fr; gap:24px;
  padding:26px 0; border-top:1px solid var(--panel-line);
}
.rule:last-child{ border-bottom:1px solid var(--panel-line); }

.rule-num{
  font-family:var(--font-mono); font-size:13px; color:var(--green); padding-top:2px;
}
.rule-num::before{ content:"§"; opacity:0.6; margin-right:3px; }

.rule-body p{
  font-size:14.5px; line-height:1.75; color:var(--text-dim); margin-bottom:10px;
}
.rule-body p:last-child{ margin-bottom:0; }
.rule-body em{ color:var(--text); font-style:italic; }
.rule-sub{
  font-family:var(--font-mono); font-size:12.5px !important; color:var(--text-faint) !important;
  padding-left:14px; border-left:1px solid var(--panel-line);
}

/* ---- Mindestanforderungen ---- */
.spec-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--panel-line); border:1px solid var(--panel-line); margin-bottom:36px;
}
.spec-card{
  background:var(--bg); padding:36px 28px; display:flex; flex-direction:column; gap:10px;
  transition:background .25s ease;
}
.spec-card:hover{ background:var(--panel); }
.spec-icon{
  width:34px; height:34px; color:var(--green); margin-bottom:8px;
}
.spec-icon svg{ width:100%; height:100%; }
.spec-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint);
}
.spec-value{ font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--text); }
.spec-note{ font-size:12.5px; color:var(--text-faint); }

.spec-footnote{
  font-size:14px; line-height:1.7; color:var(--text-dim); max-width:640px;
  padding-left:18px; border-left:2px solid var(--green-dim);
}

/* ---- Warum LiteRP ---- */
.why-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--panel-line); border:1px solid var(--panel-line);
}
.why-card{
  background:var(--bg); padding:30px 26px; transition:background .25s ease;
}
.why-card:hover{ background:var(--panel); }
.why-card h3{
  font-size:18px; color:var(--text); margin-bottom:10px; font-weight:600;
}
.why-card p{ font-size:13.8px; line-height:1.65; color:var(--text-dim); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{
  text-align:center; padding:100px 24px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:radial-gradient(ellipse 60% 70% at 50% 50%, rgba(52,232,160,0.05), transparent 70%);
}
.cta-band h2{ font-size:clamp(30px, 4vw, 42px); color:var(--text); }
.cta-band p{ color:var(--text-dim); font-size:15px; margin-bottom:14px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  display:flex; align-items:center; gap:14px; justify-content:center;
  padding:30px 24px; border-top:1px solid var(--line);
}
.site-footer p{ font-size:12px; color:var(--text-faint); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 880px){
  .why-grid, .spec-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .discord-btn--small{ display:none; }
  .rule{ grid-template-columns:50px 1fr; gap:16px; }
}

@media (max-width: 600px){
  .why-grid, .spec-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:120px; gap:20px; }
  .hero-desc{ font-size:14.5px; }
  .tab-btn{ padding:14px 16px 16px; }
  .tab-label{ font-size:12px; }
}