/* ═══════════════════════════════════════════════════
   Engels811 RP — Public Site CSS  (Gold / Dark)
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark}

:root{
  /* ── NextLife Music Theme ── */
  --bg:#06000E;--card:#120820;--card2:#1A0E2C;
  --border:rgba(139,43,226,.18);--border2:rgba(139,43,226,.28);
  --gold:#8B2BE2;--gold-h:#A040FF;--gold-l:rgba(139,43,226,.08);
  --cyan:#BF5FFF;--success:#57F287;--danger:#ED4245;--warn:#FF8C00;
  --text1:#F0EEF5;--text2:#B8A8D0;--muted:#6B5A8A;
  --font-head:'Bebas Neue',sans-serif;--font-body:'Barlow Condensed',sans-serif;--font-mono:'JetBrains Mono',monospace;
  --r:10px;--r-lg:16px;--shadow:0 4px 32px rgba(0,0,0,.8);
}

body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;overflow-x:hidden;line-height:1.5;display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px;opacity:.3}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.05;letter-spacing:2px}

/* NAV */
nav.site-nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:999;
  display:flex;align-items:center;padding:0 clamp(1.25rem,3.5vw,3.5rem);gap:1.5rem;
  background:rgba(2,2,10,.92);backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 32px rgba(0,0,0,.5);
  transition:background .3s,box-shadow .3s;
}
nav.site-nav.scrolled{
  background:rgba(2,2,10,.98);backdrop-filter:blur(32px);
  border-bottom:1px solid var(--border2);box-shadow:0 4px 48px rgba(0,0,0,.8);
}
.nav-logo{
  font-family:var(--font-head);font-size:1.5rem;letter-spacing:3px;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-h),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 12px rgba(139,43,226,.35));
}
.nav-links{display:flex;gap:0;margin-left:auto;list-style:none;align-items:center}
.nav-links li a{
  display:block;padding:.45rem .9rem;
  font-size:.75rem;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;
  color:#d4cfc6;
  text-shadow:0 1px 6px rgba(0,0,0,.8),0 0 20px rgba(0,0,0,.5);
  transition:color .2s,text-shadow .2s;
  position:relative;
}
.nav-links li a::after{
  content:'';position:absolute;bottom:-2px;left:.9rem;right:.9rem;height:1px;
  background:var(--gold);opacity:0;transition:opacity .2s,transform .2s;transform:scaleX(0);
}
.nav-links li a:hover{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.3);}
.nav-links li a:hover::after,.nav-links li a.active::after{opacity:1;transform:scaleX(1)}
.nav-links li a.active{color:var(--gold);text-shadow:0 0 16px rgba(139,43,226,.4);}

/* Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown>a{padding-right:.7rem !important}
.nav-dropdown>a::before{
  content:'▾';position:absolute;right:.15rem;top:50%;transform:translateY(-50%);
  font-size:.5rem;opacity:.6;transition:transform .2s;
}
.nav-dropdown:hover>a::before{transform:translateY(-50%) rotate(180deg);opacity:1}
.nav-submenu{
  position:absolute;top:calc(100% + .75rem);left:50%;transform:translateX(-50%) translateY(-6px);
  background:rgba(4,4,14,.97);
  border:1px solid rgba(139,43,226,.2);border-radius:12px;
  padding:.5rem;min-width:200px;
  opacity:0;visibility:hidden;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  z-index:9999;backdrop-filter:blur(24px);
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);
}
.nav-submenu::before{
  content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;background:rgba(4,4,14,.97);
  border-left:1px solid rgba(139,43,226,.2);border-top:1px solid rgba(139,43,226,.2);
  clip-path:polygon(0 100%,100% 100%,100% 0);
  transform:translateX(-50%) rotate(45deg);
}
.nav-dropdown:hover .nav-submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-submenu a{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem 1rem;border-radius:8px;
  font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  color:#b0aaa0;text-shadow:none !important;
  transition:all .15s;white-space:nowrap;
}
.nav-submenu a::after{display:none !important}
.nav-submenu a:hover,.nav-submenu a.active{color:var(--gold);background:rgba(139,43,226,.08)}

/* CTA Buttons — same style as normal links, subtle distinction */
.nav-cta{
  background:transparent !important;
  color:#d4cfc6 !important;
  border-radius:0 !important;
  padding:.45rem .9rem !important;
  font-weight:700 !important;
  font-size:.75rem !important;
  letter-spacing:1.8px !important;
  text-shadow:0 1px 6px rgba(0,0,0,.8),0 0 20px rgba(0,0,0,.5) !important;
  box-shadow:none !important;
  transition:color .2s,text-shadow .2s !important;
  position:relative;
}
.nav-cta:hover{
  color:#fff !important;
  text-shadow:0 0 12px rgba(255,255,255,.3) !important;
  box-shadow:none !important;
  transform:none !important;
}
.nav-cta::after{
  content:'' !important;display:block !important;
  position:absolute !important;bottom:-2px !important;left:.9rem !important;right:.9rem !important;
  height:1px !important;background:var(--gold) !important;
  opacity:0 !important;transition:opacity .2s,transform .2s !important;transform:scaleX(0) !important;
}
.nav-cta:hover::after{opacity:1 !important;transform:scaleX(1) !important}
.nav-login{
  border:1px solid rgba(139,43,226,.4) !important;color:var(--gold) !important;
  border-radius:8px !important;padding:.38rem .9rem !important;font-weight:600 !important;
  font-size:.75rem !important;letter-spacing:1.8px !important;
  transition:all .2s !important;margin-left:.4rem !important;
  text-shadow:none !important;
  backdrop-filter:blur(8px);background:rgba(139,43,226,.05) !important;
}
.nav-login:hover{background:rgba(139,43,226,.12) !important;border-color:var(--gold) !important;box-shadow:0 0 16px rgba(139,43,226,.2) !important}
.nav-login::after{display:none !important}

/* Burger */
.nav-burger{
  display:none;background:none;border:1px solid rgba(255,255,255,.15);
  border-radius:8px;color:#fff;font-size:1.2rem;cursor:pointer;
  padding:.3rem .6rem;transition:all .2s;margin-left:auto;
}
.nav-burger:hover{border-color:var(--gold);color:var(--gold)}

/* Mobile Nav */
.nav-mobile{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;
  background:rgba(3,3,12,.99);backdrop-filter:blur(30px);
  border-bottom:1px solid rgba(139,43,226,.15);
  padding:1rem 1.25rem 1.5rem;z-index:998;
  flex-direction:column;gap:.15rem;
  box-shadow:0 20px 60px rgba(0,0,0,.8);
}
.nav-mobile.open{display:flex}
.nav-mobile>a{
  padding:.75rem 1rem;font-size:.82rem;letter-spacing:2px;text-transform:uppercase;
  font-weight:700;color:#c8c2b8;border-radius:9px;transition:all .15s;
  border:1px solid transparent;
}
.nav-mobile>a:hover{color:var(--gold);background:rgba(139,43,226,.06);border-color:rgba(139,43,226,.15)}
.nav-mobile-sub{padding:.1rem 0 .3rem 1rem;display:flex;flex-direction:column;gap:.05rem}
.nav-mobile-sub a{
  padding:.6rem 1rem;font-size:.75rem;letter-spacing:1.8px;text-transform:uppercase;
  font-weight:600;color:#7a746c;border-radius:8px;transition:all .15s;
  border-left:2px solid rgba(139,43,226,.2);display:flex;align-items:center;gap:.6rem;
}
.nav-mobile-sub a:hover{color:var(--gold);background:rgba(139,43,226,.06);border-left-color:var(--gold)}
.nav-mobile-divider{height:1px;background:rgba(255,255,255,.05);margin:.4rem 0}

/* LAYOUT */
.container{max-width:1200px;margin:0 auto;padding:0 clamp(1.5rem,4vw,3rem)}
section{padding:clamp(5rem,10vh,8rem) 0;position:relative}

/* TYPOGRAPHY */
.section-label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:.75rem;display:flex;align-items:center;gap:.75rem}
.section-label::before{content:'';width:24px;height:1px;background:var(--gold)}
.section-title{font-family:var(--font-head);font-size:clamp(2.5rem,5vw,4rem);letter-spacing:3px;line-height:1;margin-bottom:1rem}
.section-sub{color:var(--text2);font-size:1.05rem;max-width:540px;line-height:1.7}

/* BUTTONS */
.btn-gold{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2rem;background:linear-gradient(135deg,var(--gold),#a07800);color:#000;font-family:var(--font-head);font-size:1.1rem;letter-spacing:2px;border-radius:10px;border:none;cursor:pointer;transition:all .2s;box-shadow:0 4px 30px rgba(139,43,226,.3);text-decoration:none}
.btn-gold:hover{box-shadow:0 6px 40px rgba(139,43,226,.55);transform:translateY(-2px)}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2rem;background:transparent;color:var(--text);font-family:var(--font-head);font-size:1.1rem;letter-spacing:2px;border-radius:10px;border:1px solid var(--border2);cursor:pointer;transition:all .2s;text-decoration:none}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}

/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem;position:relative;overflow:hidden;transition:all .25s}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.4}
.card:hover{border-color:var(--border2);transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.card:hover::before{opacity:1}

/* BADGE */
.badge{display:inline-flex;align-items:center;padding:.2rem .75rem;border-radius:100px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;border:1px solid}
.badge-gold{color:var(--gold);border-color:rgba(139,43,226,.3);background:rgba(139,43,226,.06)}
.badge-green{color:var(--green);border-color:rgba(87,242,135,.3);background:rgba(87,242,135,.05)}
.badge-cyan{color:var(--cyan);border-color:rgba(0,212,255,.3);background:rgba(0,212,255,.05)}
.badge-red{color:#ff8888;border-color:rgba(214,40,40,.3);background:rgba(214,40,40,.06)}
.badge-gray{color:var(--text2);border-color:var(--border2);background:rgba(255,255,255,.03)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:var(--nav-h);position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(2,2,10,.82) 0%, rgba(2,2,10,.55) 45%, rgba(2,2,10,.15) 100%),
    linear-gradient(0deg, rgba(2,2,10,.6) 0%, transparent 40%);
  pointer-events:none;z-index:1}
.hero .container{position:relative;z-index:2}
.hero .hero-grid-bg,.hero .hero-orb1,.hero .hero-orb2{z-index:1}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(139,43,226,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(139,43,226,.025) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%)}
.hero-orb1{position:absolute;top:20%;left:60%;width:500px;height:500px;background:radial-gradient(circle,rgba(139,43,226,.07) 0%,transparent 70%);pointer-events:none}
.hero-orb2{position:absolute;top:50%;left:15%;width:400px;height:400px;background:radial-gradient(circle,rgba(30,111,214,.05) 0%,transparent 70%);pointer-events:none;transform:translateY(-50%)}

/* FORMS */
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--text2);margin-bottom:.4rem}
.field label .req{color:var(--gold);margin-left:.2rem}
.field input,.field textarea,.field select{width:100%;background:var(--card2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--font-body);font-size:.95rem;padding:.7rem 1.1rem;outline:none;transition:all .2s;-webkit-appearance:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(139,43,226,.5);background:rgba(139,43,226,.025);box-shadow:0 0 0 3px rgba(139,43,226,.07)}
.field textarea{resize:vertical;min-height:120px;font-size:.88rem;line-height:1.6}
.field-hint{font-size:.78rem;color:var(--muted);margin-top:.35rem;line-height:1.5}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}

/* STATUS DOT */
.sdot{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.65rem;letter-spacing:1.5px}
.sdot::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.sdot.online{color:#57F287;animation:pulse 2s infinite}
.sdot.offline{color:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* PAGE HERO (inner pages) */
.page-hero{padding:calc(var(--nav-h) + 4rem) 0 4rem;background:var(--surface);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(2,2,10,.85) 0%, rgba(2,2,10,.6) 50%, rgba(2,2,10,.35) 100%),
    linear-gradient(0deg, rgba(2,2,10,.5) 0%, transparent 50%);
  z-index:0;pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.page-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.3;z-index:2}
/* Text in hero/page-hero always readable over any background image */
.page-hero .section-label,
.page-hero .section-title,
.page-hero .section-sub,
.page-hero h1,.page-hero h2,.page-hero p{
  text-shadow:0 1px 12px rgba(0,0,0,.95),0 2px 32px rgba(0,0,0,.8);
}
.page-hero .section-sub,.page-hero p{color:#c8c3ba}
/* Hero main page */
.hero .section-label,.hero h1,.hero h2{
  text-shadow:0 2px 20px rgba(0,0,0,.9),0 4px 60px rgba(0,0,0,.7);
}

/* FOOTER */
footer.site-footer{background:var(--surface);border-top:1px solid var(--border);padding:3.5rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-brand h3{font-family:var(--font-head);font-size:1.6rem;letter-spacing:3px;color:var(--gold);margin-bottom:.75rem}
.footer-brand p{font-size:.88rem;color:var(--text2);line-height:1.7;max-width:320px}
.footer-col h4{font-family:var(--font-mono);font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.footer-col ul li a{font-size:.88rem;color:var(--text2);transition:color .15s}
.footer-col ul li a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;font-size:.75rem;color:var(--muted);font-family:var(--font-mono)}
.discord-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.5rem;background:rgba(88,101,242,.1);border:1px solid rgba(88,101,242,.25);border-radius:10px;color:#7289DA;font-family:var(--font-head);font-size:1rem;letter-spacing:1.5px;transition:all .2s;margin-top:1rem}
.discord-btn:hover{background:rgba(88,101,242,.18);border-color:rgba(88,101,242,.4);box-shadow:0 0 24px rgba(88,101,242,.2)}

/* TABLE */
.table-wrap{overflow-x:auto;border-radius:var(--r)}
table{width:100%;border-collapse:collapse}
thead th{font-size:.62rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);padding:.62rem 1rem;text-align:left;border-bottom:1px solid var(--border);background:rgba(0,0,0,.2);font-family:var(--font-mono)}
tbody td{padding:.7rem 1rem;border-bottom:1px solid var(--border);font-size:.9rem;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(139,43,226,.03)}

/* FAQ accordion */
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .2s;margin-bottom:.6rem}
.faq-item.open{border-color:rgba(139,43,226,.25)}
.faq-q{width:100%;padding:1.25rem 1.75rem;text-align:left;background:none;border:none;color:var(--text);font-family:var(--font-body);font-size:.95rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:color .15s}
.faq-q:hover,.faq-item.open .faq-q{color:var(--gold)}
.faq-chevron{transition:transform .25s;flex-shrink:0}
.faq-item.open .faq-chevron{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-inner{padding:0 1.75rem 1.25rem;font-size:.9rem;color:var(--text2);line-height:1.7}

/* UTILS */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.text-gold{color:var(--gold)}
.text-muted{color:var(--text2)}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.alert-error{background:rgba(214,40,40,.07);border:1px solid rgba(214,40,40,.25);border-radius:10px;padding:.9rem 1.25rem;color:#ff8888;font-size:.9rem;margin-bottom:1.25rem}
.alert-success{background:rgba(87,242,135,.06);border:1px solid rgba(87,242,135,.2);border-radius:10px;padding:1.5rem;text-align:center;margin-bottom:1.25rem}

@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.form-grid{grid-template-columns:1fr}}
@media(max-width:700px){.nav-links{display:none}.nav-burger{display:block}.footer-grid{grid-template-columns:1fr}}
/* ── Copy-Widget (TinyMCE copybox plugin) ───────────── */
.copy-widget{display:inline-flex;align-items:center;gap:.6rem;background:var(--card2);border:1px solid var(--border2);border-radius:9px;padding:.35rem .85rem .35rem 1rem;margin:.2rem 0;max-width:100%;box-sizing:border-box;vertical-align:middle}
.cw-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0}
.cw-value{font-family:var(--font-mono);font-size:.88rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.cw-btn{background:rgba(139,43,226,.08);border:1px solid rgba(139,43,226,.22);border-radius:6px;color:var(--gold);cursor:pointer;font-size:.9rem;padding:.22rem .55rem;flex-shrink:0;line-height:1;transition:all .15s}
.cw-btn:hover{background:rgba(139,43,226,.18);border-color:var(--gold)}
.cw-btn.cw-copied{background:rgba(87,242,135,.12);border-color:rgba(87,242,135,.35);color:#57F287}