/* ═══════════════════════════════════════════════════
   DXRP Landing — Modern Red & Black DA (v5 overlay)
   Enhances style.css with contemporary polish :
   deeper blacks, dramatic red accents, modern motion
   ═══════════════════════════════════════════════════ */

/* ── Root tweaks : deeper blacks, saturated reds ─── */
body{
  background:
    radial-gradient(1400px 800px at 50% -200px, rgba(225,29,72,.06), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(159,18,57,.04), transparent 60%),
    #050507;
}

/* Subtle global grain for cinematic feel */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .38 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.06;mix-blend-mode:overlay;
}

/* ── NAV : stronger glass + red bottom glow ──────── */
.nav-header{
  background:rgba(5,5,7,.72) !important;
  backdrop-filter:blur(22px) saturate(1.6) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.03) inset,
    0 20px 40px -30px rgba(225,29,72,.35);
}
.nav-link{position:relative;transition:color .18s var(--ease)}
.nav-link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:linear-gradient(90deg, #fb7185, #e11d48);
  border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav-link:hover::after,.nav-link.nav-active::after{transform:scaleX(1)}
.nav-link.nav-active{color:#fb7185}

/* ── HERO : modern dramatic ──────────────────────── */
.hero{
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(225,29,72,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(159,18,57,.08) 0%, transparent 55%),
    linear-gradient(180deg, #050507 0%, #0a0a0f 100%);
}

/* Scan line sweep across hero */
.hero::before{
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(225,29,72,.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(159,18,57,.08) 0%, transparent 50%) !important;
}

.hero-badge{
  background:linear-gradient(90deg, rgba(225,29,72,.08), rgba(168,85,247,.04));
  border-color:rgba(225,29,72,.28) !important;
  backdrop-filter:blur(8px);
  box-shadow:0 0 24px rgba(225,29,72,.12), inset 0 1px 0 rgba(255,255,255,.04);
  color:var(--sub) !important;
  font-weight:600 !important;letter-spacing:.02em;
}
.hero-badge .badge-dot{box-shadow:0 0 12px var(--accent),0 0 24px rgba(225,29,72,.4)}

.hero-title{
  font-weight:900 !important;
  letter-spacing:-.045em !important;
  line-height:1 !important;
  text-shadow:0 0 60px rgba(225,29,72,.15);
}
.gradient-text{
  background:linear-gradient(135deg,#fecdd3 0%,#fb7185 25%,#e11d48 55%,#9f1239 85%,#500724 100%) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;
  background-clip:text !important;
  filter:drop-shadow(0 4px 24px rgba(225,29,72,.35));
}

.hero-desc{font-size:clamp(1.05rem,1.7vw,1.18rem) !important}
.hero-desc strong{color:#fecdd3 !important;font-weight:600 !important}

/* CTA buttons : modern magnetic feel */
.btn-primary{
  background:linear-gradient(135deg, #e11d48 0%, #9f1239 100%) !important;
  box-shadow:
    0 8px 28px -8px rgba(225,29,72,.6),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.2) !important;
  border:1px solid rgba(251,113,133,.25) !important;
  font-weight:700 !important;
}
.btn-primary:hover{
  transform:translateY(-2px) !important;
  box-shadow:
    0 16px 40px -10px rgba(225,29,72,.7),
    0 0 0 1px rgba(251,113,133,.5),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-ghost{
  background:rgba(255,255,255,.03) !important;
  backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.12) !important;
}
.btn-ghost:hover{
  border-color:rgba(225,29,72,.4) !important;
  color:#fb7185 !important;
  background:rgba(225,29,72,.05) !important;
}

/* Hero server pills – modern premium */
.hero-servers span[style],
.hero-servers a[style]{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)) !important;
  border-color:rgba(255,255,255,.1) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:all .25s var(--ease) !important;
}
.hero-servers a[style]:hover{
  background:linear-gradient(180deg, rgba(225,29,72,.12), rgba(225,29,72,.04)) !important;
  border-color:rgba(225,29,72,.4) !important;
  transform:translateY(-2px);
  box-shadow:0 8px 24px -8px rgba(225,29,72,.4);
}

/* Hero stats : red accent numbers, sharp typography */
.hero-stats{
  padding:20px 28px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border:1px solid var(--border);border-radius:var(--r-lg);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.stat-val{
  font-size:2.2rem !important;
  background:linear-gradient(180deg, #fff 0%, #fb7185 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-weight:800 !important;
}
.stat-val span{color:#e11d48 !important;-webkit-text-fill-color:#e11d48}
.stat-lbl{color:var(--muted) !important;font-weight:600 !important}
.stat-sep{background:linear-gradient(180deg, transparent, var(--border), transparent) !important;height:48px !important}

/* ── SECTIONS : modern dividers + eyebrows ───────── */
.section-tag{
  position:relative;
  padding:6px 14px;
  background:rgba(225,29,72,.08);
  border:1px solid rgba(225,29,72,.25);
  border-radius:999px;
  color:#fb7185 !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
}
.section-tag::before{
  content:"";display:inline-block;
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-right:8px;vertical-align:middle;
  box-shadow:0 0 8px var(--accent);
}

.section-title{
  font-weight:800 !important;
  letter-spacing:-.03em !important;
  line-height:1.05 !important;
}
.section-title .gradient-text,
.section-title span{
  background:linear-gradient(135deg,#fb7185,#e11d48 55%,#9f1239);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.section-desc{
  color:#a1a1aa !important;
  font-size:1.08rem !important;
  line-height:1.7 !important;
}

/* Section red accent line between sections */
.section{position:relative}
.section + .section::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(225,29,72,.5), transparent);
}

/* ── CARDS : uniform modern treatment ────────────── */
.feature-card,
.job-card,
.system-card,
.server-card,
.step-card,
.live-preview-card,
.about-preview{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  backdrop-filter:blur(4px);
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease) !important;
}
.feature-card::after,
.job-card::after,
.system-card::after,
.server-card::after,
.step-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,-20%), rgba(225,29,72,.18), transparent 55%);
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none;z-index:0;
}
.feature-card > *,
.job-card > *,
.system-card > *,
.server-card > *,
.step-card > *{position:relative;z-index:1}
.feature-card:hover::after,
.job-card:hover::after,
.system-card:hover::after,
.server-card:hover::after,
.step-card:hover::after{opacity:1}
.feature-card:hover,
.job-card:hover,
.system-card:hover,
.server-card:hover,
.step-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(225,29,72,.3) !important;
  box-shadow:
    0 20px 40px -20px rgba(0,0,0,.6),
    0 0 0 1px rgba(225,29,72,.15),
    0 0 40px -10px rgba(225,29,72,.2) !important;
}

/* Section backgrounds alternating */
.about,.systems,.faq{
  background:#050507 !important;
  position:relative;
}
.features,.jobs,.howto,.servers-pick{
  background:#09090b !important;
}

/* About preview / image premium frame */
.about-preview{
  box-shadow:
    0 40px 80px -40px rgba(0,0,0,.8),
    0 0 0 1px rgba(225,29,72,.12),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.about-preview-label{
  background:linear-gradient(180deg, rgba(5,5,7,.92), rgba(5,5,7,.75)) !important;
  border-top:1px solid rgba(225,29,72,.2) !important;
  backdrop-filter:blur(8px);
}

/* About metric tiles */
.about-metric,
.about-metrics > *{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  transition:all .25s var(--ease);
}
.about-metric:hover{
  border-color:rgba(225,29,72,.3) !important;
  transform:translateY(-2px);
}

/* About badges */
.about-badge{
  background:rgba(225,29,72,.06) !important;
  border:1px solid rgba(225,29,72,.22) !important;
  color:#fb7185 !important;
}

/* ── Footer modernization ────────────────────────── */
.footer{
  background:linear-gradient(180deg, #050507 0%, #020204 100%) !important;
  border-top:1px solid rgba(225,29,72,.15) !important;
  position:relative;
}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(225,29,72,.5) 50%, transparent 100%);
}
.footer-nav a{transition:color .18s, transform .18s}
.footer-nav a:hover{color:#fb7185 !important;transform:translateX(2px)}

/* ── FAQ modern treatment ────────────────────────── */
details{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  transition:border-color .25s var(--ease);
  margin-bottom:10px;
}
details[open]{border-color:rgba(225,29,72,.3) !important}
details summary{padding:16px 18px !important;font-weight:600}
details[open] summary{color:#fb7185 !important}

/* ── Mobile tuning ───────────────────────────────── */
@media (max-width:900px){
  .hero-title{font-size:clamp(2.4rem,10vw,4rem) !important}
  .hero-stats{padding:14px 18px}
  .stat-val{font-size:1.6rem !important}
  .stat{padding:4px 16px !important}
}
@media (max-width:640px){
  .section{padding:72px 0 !important}
  .section-header{margin-bottom:44px !important}
}

/* ── Reduced motion respect ──────────────────────── */
@media (prefers-reduced-motion:reduce){
  .feature-card,.job-card,.system-card,.server-card,.step-card,.btn-primary,.hero-servers a{transition:none !important;transform:none !important}
  body::before{display:none}
}

/* ═══ HERO SPLIT — logo + title integration ═══ */
.hero-split{
  display:grid;
  grid-template-columns:minmax(220px, 0.9fr) minmax(320px, 1.4fr);
  align-items:center;
  gap:clamp(32px, 6vw, 88px);
  max-width:1180px;
  margin:0 auto 32px;
  padding:0 clamp(16px, 3vw, 32px);
  text-align:left;
}
.hero-split .hero-logo-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1/1;
  width:100%;
  max-width:380px;
  margin-left:auto;
  margin-right:0;
}
.hero-split .hero-logo-glow{
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(225,29,72,.55) 0%, rgba(225,29,72,.18) 35%, transparent 70%);
  filter:blur(28px);
  animation:heroLogoPulse 6s ease-in-out infinite;
  z-index:0;
}
.hero-split .hero-logo-img{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  max-width:340px;
  filter:
    drop-shadow(0 12px 28px rgba(225,29,72,.35))
    drop-shadow(0 4px 12px rgba(0,0,0,.6));
  transform:translateZ(0);
}
@keyframes heroLogoPulse{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
.hero-split .hero-head{
  min-width:0;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
}
.hero-split .hero-head::before{
  content:"";
  position:absolute;
  left:-24px;top:10%;bottom:10%;
  width:2px;
  background:linear-gradient(180deg, transparent, rgba(225,29,72,.6) 30%, rgba(225,29,72,.6) 70%, transparent);
  border-radius:2px;
}
.hero-split .hero-title{
  text-align:left;
  margin:0;
  line-height:1.02;
  letter-spacing:-.02em;
}
.hero-split .hero-desc{
  text-align:left;
  margin:0;
  max-width:58ch;
}

/* Tablet / small desktop: tighten gap */
@media (max-width:960px){
  .hero-split{
    grid-template-columns:1fr;
    gap:24px;
    text-align:center;
    margin-bottom:24px;
  }
  .hero-split .hero-logo-wrap{
    margin:0 auto;
    max-width:240px;
  }
  .hero-split .hero-head{
    text-align:center;
    align-items:center;
  }
  .hero-split .hero-head::before{display:none}
  .hero-split .hero-title,
  .hero-split .hero-desc{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .hero-split .hero-logo-glow{animation:none}
}

/* ═══ HERO — fit in single viewport on desktop ═══ */
.hero{
  min-height:100svh;
  max-height:100svh;
  padding:calc(var(--nav-h) + 16px) 24px 16px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-content{
  max-width:1180px;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(12px, 1.8vh, 22px);
}
.hero-split{
  margin:0 auto !important;
  gap:clamp(24px, 4vw, 64px);
}
.hero-split .hero-logo-wrap{
  max-width:clamp(180px, 22vw, 280px);
}
.hero-split .hero-logo-img{
  max-width:clamp(180px, 22vw, 280px);
}
.hero-split .hero-head{gap:clamp(10px, 1.4vh, 16px)}
.hero-title{
  font-size:clamp(2rem, 4.2vw, 4rem) !important;
  margin:0 !important;
  line-height:1.02;
}
.hero-desc{
  font-size:clamp(.92rem, 1.1vw, 1.05rem) !important;
  margin:0 !important;
  line-height:1.55;
}
.hero-actions{
  margin:0 !important;
  justify-content:center;
}
.hero-actions .btn{
  padding:12px 22px !important;
  font-size:.95rem !important;
}
.hero-servers{margin-top:0 !important}
.hero-stats{
  padding:14px 28px !important;
  margin:0 auto;
}
.hero-stats .stat-val{font-size:1.6rem !important}
.hero-stats .stat-lbl{font-size:.7rem !important}
.hero-scroll-hint{bottom:8px !important}

/* Short-height laptops (≤800px tall): tighten further */
@media (max-height:820px) and (min-width:961px){
  .hero-split{gap:clamp(20px, 3vw, 48px)}
  .hero-split .hero-logo-wrap,
  .hero-split .hero-logo-img{max-width:clamp(150px, 18vw, 220px)}
  .hero-title{font-size:clamp(1.8rem, 3.4vw, 3rem) !important}
  .hero-desc{font-size:.9rem !important;line-height:1.5}
  .hero-stats{padding:10px 22px !important}
  .hero-stats .stat-val{font-size:1.3rem !important}
}

/* Mobile / small tablet: let it scroll, keep readable */
@media (max-width:960px){
  .hero{
    max-height:none;
    min-height:auto;
    padding:calc(var(--nav-h) + 24px) 20px 40px !important;
  }
  .hero-content{gap:18px}
  .hero-split .hero-logo-wrap,
  .hero-split .hero-logo-img{max-width:180px}
}

/* ═══ NAV — mobile overflow + visibility fix ═══ */
@media(max-width:768px){
  .nav-header{
    padding:0 14px !important;
    background:rgba(5,5,7,.96) !important;
    backdrop-filter:blur(12px) saturate(1.4) !important;
    -webkit-backdrop-filter:blur(12px) saturate(1.4) !important;
    border-bottom:1px solid rgba(225,29,72,.28) !important;
    box-shadow:
      0 6px 24px rgba(0,0,0,.7),
      0 0 0 1px rgba(225,29,72,.08) inset !important;
  }
  .nav-header::after{opacity:1 !important;z-index:2}
  .nav-container{gap:10px !important}
  .nav-logo-img{
    height:32px !important;
    filter:drop-shadow(0 2px 8px rgba(225,29,72,.4));
  }
  .nav-actions{gap:6px !important;margin-left:auto}
  /* Hide verbose nav items on small screens — keep lang + hamburger */
  .nav-actions .btn-primary,
  .nav-actions #nav-server-status,
  .nav-actions #nav-auth{display:none !important}
  .lang-switcher{
    font-size:.75rem;
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.14) !important;
  }
  .lang-btn{padding:4px 8px !important}
  .nav-hamburger{
    width:36px;height:36px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
  }
  .nav-hamburger span{background:#fff !important}
  /* Mobile menu panel — clear dark bg */
  .nav-links{
    background:rgba(5,5,7,.98) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    border-top:1px solid rgba(225,29,72,.2) !important;
  }
}
@media(max-width:420px){
  .nav-header{padding:0 10px !important}
  .nav-logo-img{height:28px !important}
  .nav-container{gap:6px !important}
}