/* =========================================================
   THE UNHOLY WAY — Anthracite Theme (single-file drop-in)
   Base tone: #393D47 (anthracite) with depth #2F333B
   Gold accent: warm brand gold gradient
   ========================================================= */

/* ----------------------- Variables ----------------------- */
:root{
  /* Anthracite base */
  --anthracite-1: #393D47;
  --anthracite-2: #2F333B;

  /* Subtle metal feel */
  --metal-sheen:  #ffffff12; /* highlight veils */
  --metal-grain:  #00000010; /* fine grain lines */
  --lighten-alpha: 0.08;     /* brightness of veils (lower = darker) */

  /* Text + accents */
  --text-body: #E9EDF2;
  --muted:     #cfd2d4;

  --gold-1: #f2e9b1;
  --gold-2: #d7b25a;
  --gold-3: #8c6f1d;

  /* Surfaces */
  --card-bg: rgba(25,28,35,0.78);
  --card-border: rgba(255,255,255,0.06);
}

/* ------------------------- Base -------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; min-height: 100%; }

body {
  margin: 0;
  color: var(--text-body);
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  /* Layered anthracite metal background (no external images) */
  background:
    radial-gradient(1200px 800px at -15% -20%, rgba(255,255,255,var(--lighten-alpha)), transparent 60%),
    radial-gradient(1000px 700px at 115% 120%, rgba(255,255,255,calc(var(--lighten-alpha)*1.2)), transparent 65%),
    repeating-linear-gradient(90deg, var(--metal-grain), var(--metal-grain) 1px, transparent 1px, transparent 3px),
    linear-gradient(135deg, var(--anthracite-1), var(--anthracite-2));
  background-attachment: fixed;
}

main { max-width: 1200px; margin: 0 auto; padding: 2rem; flex: 1; }

/* -------------------- Particles (optional) ------------------- */
#particle-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.particle {
  position: absolute; width: 2px; height: 2px;
  background: var(--gold-2); border-radius: 50%;
  animation: float 8s infinite ease-in-out; opacity: .55;
}
@keyframes float {
  0%   { transform: translateY(0) scale(1);   opacity: .25; }
  50%  { transform: translateY(-40px) scale(1.5); opacity: 1; }
  100% { transform: translateY(0) scale(1);   opacity: .25; }
}

/* ---------------- Header / Nav / Footer ----------------- */
header.top-bar, .footer {
  width: 100%;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(3px);
  padding: .8rem 2rem;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Brand — use:
   The <span class="brand">The <span class="brand-gold">Unholy</span> Way</span>
*/
.brand, .logo, .site-brand {
  font-weight: 800;
  letter-spacing: .6px;
  font-family: 'Russo One', sans-serif;
  color: var(--text-body);
  white-space: nowrap;
}
.brand-gold {
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2), var(--gold-1));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(215,178,90,0.12);
}

nav.center-nav { display: flex; gap: 1.2rem; }
.center-nav a {
  color: #e6e6e6; text-decoration: none; padding: .5rem .75rem; position: relative; font-weight: 600;
}
.center-nav a::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(to right, transparent, var(--gold-2), transparent);
  transform: scaleX(0); transform-origin: bottom center; transition: transform .3s ease-in-out;
}
.center-nav a:hover::after { transform: scaleX(1); }
.center-nav a.active { color: var(--gold-2); font-weight: 700; }
.center-nav a.active::after { transform: scaleX(1); }

.auth-controls { display: flex; align-items: center; gap: 1rem; }
.auth-controls a {
  color: #eaeaea; text-decoration: none; border: 1px solid var(--gold-2);
  padding: .4rem .6rem; border-radius: 6px; background: transparent; transition: background .25s, color .25s;
}
.auth-controls a:hover { background: var(--gold-2); color: #111; }

.footer { justify-content: center; color: #d8d8df; font-weight: 500; border-top: 1px solid var(--card-border); }

/* ---------------- HERO / INTRO (Home + Services + About) -------- */
/* Tighten hero height & add gold “dust” overlay */
.hero,
.services-hero,
.hero-about {
  position: relative;
  margin: 12px auto 16px;
  padding: 26px 20px;
  border-radius: 16px;
  background: rgba(25,28,35,.78);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  min-height: unset !important; /* kill any leftover min-height */
}

.hero::before,
.services-hero::before,
.hero-about::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(1200px 800px at -15% -20%, rgba(212,175,55,.08), transparent 60%),
    radial-gradient(1000px 700px at 115% 120%, rgba(212,175,55,.06), transparent 65%);
  z-index: 0;
}
.hero > *, .services-hero > *, .hero-about > * { position: relative; z-index: 1; }

.hero .content { max-width: 1000px; margin: 0 auto; text-align: center; }
.hero h1 {
  font-size: 3rem; color: var(--gold-2); margin-bottom: 1rem;
  text-shadow: 1px 1px 5px rgba(215,178,90,.28);
}
.hero p { font-size: 1.2rem; color: #e6e9ee; margin-bottom: 1rem; }

/* ---------------- Cinematic Videos (Home) ---------------- */
.video-promo { max-width: 100vw; padding: 16px 0 24px; position: relative; overflow: visible; }
.video-container { position: relative; width: min(100%, 1000px); margin: 0 auto; padding: 0 8px; }
.video-box {
  max-width: 820px; margin: 0 auto; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--gold-2);
  box-shadow: 0 0 24px rgba(212,175,55,.28);
  position: relative; z-index: 10; animation: glow-pulse 4s ease-in-out infinite;
}
.video-box video { width: 100%; height: auto; display: block; }

.video.side {
  position: absolute; width: clamp(360px, 55vw, 600px);
  height: auto; border: 1px solid var(--gold-2); border-radius: 12px;
  box-shadow: 0 0 20px rgba(212,175,55,.18);
  object-fit: cover; top: -12px; z-index: 5; background: #000;
  animation: glow-pulse 4s ease-in-out infinite;
}
.video.side.left  { left: -420px; }
.video.side.right { right: -420px; }

@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 20px rgba(212,175,55,.2); }
  50%     { box-shadow: 0 0 42px rgba(212,175,55,.5); }
}
@media (max-width: 1200px) {
  .video-container { width: min(100%, 920px); }
  .video-box { max-width: 760px; }
  .video.side { width: clamp(320px, 48vw, 520px); top: -10px; }
  .video.side.left  { left: -360px; }
  .video.side.right { right: -360px; }
}
@media (max-width: 900px) {
  .video.side { display: none; }
  .video-container { width: min(100%, 720px); }
  .video-box { max-width: 680px; }
}

/* ---------------- Generic Cards / Panels ---------------- */
.card, .panel, .box, .content-container {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  backdrop-filter: blur(2px);
}

/* ---------------- Services Page Cards ---------------- */
.section-head {
  margin-top: 28px; margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--card-border); color: var(--gold-2);
  font-family: 'Russo One', sans-serif; letter-spacing: .5px;
  display: flex; align-items: center; gap: 10px;
}
.section-head .divider {
  height: 2px; flex: 1;
  background: linear-gradient(90deg,var(--gold-2),transparent);
  box-shadow: 0 0 8px rgba(212,175,55,.45);
}
.service-grid {
  display: grid; gap: 1.2rem; margin-top: 1.2rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .service-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .25s, transform .25s;
}
.service-card:hover { box-shadow: 0 0 14px rgba(212,175,55,.45); transform: translateY(-4px); }
.badge {
  display: inline-block; border: 1px solid var(--gold-2); color: var(--gold-2);
  padding: 2px 8px; border-radius: 999px; font-size: .75rem;
  background: rgba(212,175,55,.08);
}
.service-card h3 { margin: 4px 0 0; color: #fff; }
.service-card p { margin: 0; color: #d7dbe0; }
.feature-list { margin: 6px 0 0; padding-left: 18px; color: #dfe3e8; }
.feature-list li { margin: 4px 0; }
.actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.btn-primary, .btn-ghost {
  text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 700;
  display: inline-block; transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.btn-primary {
  background: linear-gradient(145deg,var(--gold-1),var(--gold-2));
  color: #111; border: 1px solid var(--gold-2);
  box-shadow: 0 0 10px rgba(212,175,55,.36);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 14px rgba(212,175,55,.65); }
.btn-ghost {
  border: 1px solid #5a6168; color: #f0f3f7; background: #242830;
}
.btn-ghost:hover { background: #2b3038; }

/* ---------------- About Page ---------------- */
.about-section h1 {
  font-size: 2.5rem; margin-bottom: 30px; color: var(--gold-2);
  text-align: center; font-family: 'Russo One', sans-serif;
}
.about-section p { margin-bottom: 20px; font-size: 1.08rem; color: #e6ebf2; }
.about-wrapper {
  display: flex; flex-direction: column; gap: 40px;
  padding: 100px 40px; max-width: 1300px; width: 95%; margin: 0 auto;
}
.about-card {
  background: var(--card-bg); border-left: 4px solid var(--gold-2);
  padding: 30px 50px; box-shadow: 0 0 15px rgba(212,175,55,.22);
  border-radius: 12px; color: #eef2f6; transition: transform .3s ease;
}
.about-card h2 {
  font-family: 'Russo One', sans-serif; color: var(--gold-2); margin-bottom: 15px; font-size: 1.8rem;
}
.about-card:hover { transform: translateY(-5px); box-shadow: 0 0 24px rgba(212,175,55,.38); }
.about-card p { line-height: 1.6; font-size: 1.05rem; color: #dfe4ea; }

/* ---------------- Results / Comparison Bars ---------------- */
.side-labels {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 10px 0 14px; font-weight: 900; font-size: 1.05rem;
}
.side-left  { color: var(--gold-2); text-align: center; justify-self: center; text-shadow: 0 0 6px rgba(212,175,55,.35); }
.side-right { color: var(--muted);   text-align: center; justify-self: center; text-shadow: 0 0 6px rgba(207,210,212,.25); }

.metric-row { padding: 10px 0 6px; }
.bar-wrap {
  position: relative; height: 20px; background: #2b2f36; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}
.bar-label {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: .95rem; color: #f3f6fa; white-space: nowrap;
}
.bar.s1 {
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2), var(--gold-3)) !important;
  height: 100%;
}
.bar.s2 {
  background: linear-gradient(90deg, #f8f9fa, #cfd2d4, #9aa0a6) !important;
  height: 100%; position: absolute; right: 0;
}
.bar-values {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  font-size: .9rem; color: #ecf1f7; padding: 0 6px; pointer-events: none;
}

/* ---------------- Utilities ---------------- */
.fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp .8s ease forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* Page width helper */
main.wide { max-width: 1400px; width: 95vw; }

/* ========= Glass helper for any top intro/hero if needed ========= */
:root{
  --panel-bg: rgba(25, 28, 35, .78);
  --panel-border: rgba(255,255,255,.08);
}
.glass,
:where(.page-hero,.section-hero,.section-intro,.intro,.intro-section,
       .banner,.lead,.header-panel,.page-header,.top-section,
       .section-header,.services-intro){
  background-color: var(--panel-bg) !important;
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

/* ——— Tabs ——— */
.ua-tabs { display:flex; gap:.6rem; margin:0.9rem 0 1.3rem; flex-wrap:wrap; }
.ua-tab {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.48rem .95rem; border-radius:.75rem;
  background:#151515; color:#e9e9e9; text-decoration:none; font-weight:600;
  border:1px solid rgba(255,255,255,.06);
}
.ua-tab:hover { filter:brightness(1.06); }
.ua-tab.is-active {
  background:#e7c34a; color:#111;
  border-color:rgba(231,195,74,.9);
  box-shadow:0 .25rem .8rem rgba(231,195,74,.28);
}

/* ——— Badges ——— */
.ua-badge {
  display:inline-block; min-width:1.25rem; padding:.05rem .45rem;
  border-radius:999px; font-size:.85rem; line-height:1.3; text-align:center;
}
.ua-badge-gold { background:#fff2b3; color:#111; border:1px solid #e7c34a; }

/* ===== Auth Pages ===== */
:root{
  --ua-gold:#d4af37;
  --ua-card:#121316;
  --ua-border:#2c2c2f;
  --ua-text:#e8e8ea;
  --ua-muted:#a7adb3;
  --ua-input:#0e0f12;
}

.ua-auth{max-width:560px;margin:56px auto;padding:0 16px;}
.ua-auth-card{
  background:var(--ua-card);
  border:1px solid var(--ua-border);
  border-radius:16px;
  padding:28px 24px;
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
}
.ua-auth-title{margin:0 0 6px;font-size:30px;font-weight:800;color:var(--ua-gold);letter-spacing:.3px;}
.ua-auth-sub{margin:0 0 18px;color:#cfcfcf}

.ua-form .ua-label{display:block;margin:12px 0 6px;color:#cfd2d4;font-size:.95rem}
.ua-field{display:flex;align-items:center;justify-content:space-between}
.ua-link{color:var(--ua-gold);text-decoration:none}
.ua-link:hover{text-decoration:underline}
.ua-link-right{font-size:.9rem;color:var(--ua-muted)}

.ua-input{
  width:100%;height:48px;padding:12px 14px;border-radius:12px;
  background:var(--ua-input);border:1px solid var(--ua-border);color:var(--ua-text);
  font-size:16px;transition:border-color .15s, box-shadow .15s, background .15s;
}
.ua-input::placeholder{color:#8d93a1}
.ua-input:focus{outline:none;border-color:var(--ua-gold);box-shadow:0 0 0 3px rgba(212,175,55,.20)}

.ua-btn{border-radius:12px;padding:10px 14px;font-weight:700}
.ua-btn-xl{height:48px;font-size:16px}
.ua-btn-block{width:100%}
.ua-btn-gold{background:var(--ua-gold);border:1px solid rgba(0,0,0,.35);color:#0d0d0d}
.ua-btn-gold:hover{filter:brightness(1.06)}
.ua-btn-ghost{background:#18191b;border:1px solid var(--ua-border);color:var(--ua-text)}
.ua-btn-ghost:hover{background:#202226}

.ua-divider{position:relative;text-align:center;margin:18px 0}
.ua-divider::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#2b2f35
}
.ua-divider span{position:relative;padding:0 8px;background:var(--ua-card);color:#9aa1ad;font-size:.9rem}

.ua-oauth .ua-btn + .ua-btn{margin-top:10px}
.ua-oauth-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.ua-oauth-dot.ua-google{background:#4285F4}
.ua-oauth-dot.ua-discord{background:#5865F2}

.ua-auth-foot{margin-top:14px;color:#c7c7c7;text-align:center}

.ua-alert{border-radius:12px;padding:10px 12px;margin-bottom:12px;font-weight:600}
.ua-alert-success{background:#0f2417;border:1px solid #256c41;color:#c7f9d4}
.ua-alert-danger{background:#2a1f1f;border:1px solid #b45353;color:#ffe4e6}

/* grid for register */
.ua-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ua-form-grid .span-2{grid-column:span 2}
@media (max-width:720px){ .ua-form-grid{grid-template-columns:1fr} }