:root{
  --primary:#0004f3;
  --accent:#4d6bff;
  --dark:#0b0b14;
  --light:#eaeaff;
  --bg-dark:#0b0b14;
  --bg-light:#f4f6ff;
  --text-dark:#0a0a12;
  --text-light:#eaeaff;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,system-ui,-apple-system,Arial,sans-serif;}

html,body{overflow-x:hidden;}
body{background:var(--bg-dark);color:var(--text-light);}

body.light{background:var(--bg-light);color:var(--text-dark);}

/* Page Loader */
#pageLoader{
  position:fixed;inset:0;
  background:radial-gradient(circle at center,#0a0d2b,#050510);
  display:flex;justify-content:center;align-items:center;
  z-index:9999;
  transition:opacity .6s ease, visibility .6s ease;
}
#pageLoader.hidden{opacity:0;visibility:hidden;}
.loader-content{text-align:center;animation:fadeInUp .8s ease;}
.loader-content img{width:140px;max-width:60vw;margin-bottom:25px;filter:drop-shadow(0 0 25px rgba(0,90,255,.8));}
.loader-bar{width:220px;height:6px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden;margin:0 auto;}
.loader-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--accent));animation:loadingBar 1.8s ease-in-out infinite;}

@keyframes loadingBar{0%{width:0}50%{width:80%}100%{width:0}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}

/* Top Bar */
.top-bar{
  position:fixed;top:0;left:0;right:0;height:56px;
  background:rgba(5,5,20,.78);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;z-index:1000;
  border-bottom:1px solid rgba(0,4,243,.25);
}
body.light .top-bar{background:rgba(255,255,255,.78);}
.top-bar .left{display:flex;align-items:center;gap:10px;}
.brand-accent{height:3px;width:120px;border-radius:99px;background:linear-gradient(90deg,var(--primary),var(--accent));}
.top-title{font-weight:900;letter-spacing:.12em;font-size:.85rem;opacity:.9}
.controls{display:flex;align-items:center;gap:10px;}
.chip{
  background:transparent;color:inherit;
  border:1px solid rgba(0,4,243,.45);
  padding:7px 10px;border-radius:10px;
  cursor:pointer;
}

/* Hero */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding-top:70px;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,4,243,.28), transparent 45%),
    radial-gradient(circle at 70% 35%, rgba(77,107,255,.22), transparent 45%),
    linear-gradient(135deg,#0004f3,#00001a);
  opacity:.95;
}
.hero-content{position:relative;z-index:1;max-width:920px;padding:0 6%;}
.hero-logo{width:120px;max-width:45vw;filter:drop-shadow(0 0 24px rgba(0,90,255,.75));margin-bottom:12px;}
.hero-content h1{font-size:3rem;line-height:1.05;margin-bottom:10px;}
.hero-content p{font-size:1.1rem;opacity:.95;}
.hero-buttons{margin-top:24px;}
.btn{
  display:inline-block;
  padding:12px 24px;margin:0 8px;
  text-decoration:none;
  border-radius:10px;
  font-weight:700;
}
.primary{background:var(--light);color:var(--primary);}
.secondary{border:2px solid var(--light);color:var(--light);}
body.light .secondary{border-color:rgba(0,4,243,.6);color:var(--text-dark);}
.hero-badges{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.badge{
  padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-size:.85rem;
}

/* Sections */
section{padding:80px 10%;}
h2{font-size:2rem;}
.muted{opacity:.85;margin-top:10px;line-height:1.6;}
.about p{margin-top:15px;line-height:1.75;}

/* Service cards */
.service-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;margin-top:40px;
}
.service-card{
  background:#11112a;
  padding:25px;border-radius:14px;
  box-shadow:0 0 25px rgba(0,4,243,.22);
  border:1px solid rgba(0,4,243,.22);
}
body.light .service-card{background:#fff;}
.service-card ul{margin-top:15px;}
.service-card li{margin-bottom:8px;}

/* Tebex highlights */
.tebex-highlights{background:linear-gradient(180deg, rgba(0,4,243,.06), transparent);}
.highlight-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;margin-top:40px;
}
.highlight-card{
  background:#11112a;
  padding:30px;border-radius:14px;
  border:1px solid rgba(0,4,243,.4);
  box-shadow:0 0 30px rgba(0,4,243,.25);
  transition:transform .3s;
}
body.light .highlight-card{background:#fff;}
.highlight-card:hover{transform:translateY(-6px);}

/* Tebex iframe */
.tebex-frame{
  width:100%;
  height:600px;
  margin-top:30px;
  border-radius:14px;
  border:1px solid rgba(0,4,243,.22);
}

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:26px;margin-top:35px;
}
.price-card{
  background:#0e0e22;
  border:1px solid rgba(0,4,243,.35);
  border-radius:14px;padding:28px;
  box-shadow:0 0 28px rgba(0,4,243,.18);
  position:relative;
}
body.light .price-card{background:#fff;}
.price-card .price{font-size:2rem;margin:14px 0 10px;font-weight:900;}
.price-card ul{margin-top:12px;}
.price-card li{margin:10px 0;opacity:.95;}
.price-card.featured{
  border:1px solid rgba(0,4,243,.85);
  box-shadow:0 0 40px rgba(0,4,243,.35);
  transform:translateY(-6px);
}
.badge-pill{
  position:absolute;top:14px;right:14px;
  font-size:.8rem;padding:6px 10px;border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  color:#fff;
}

/* Discord cards */
.discord-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;margin-top:40px;
}
.discord-card{
  background:#0e0e22;
  padding:30px;border-radius:14px;
  text-decoration:none;color:inherit;
  border:1px solid rgba(0,4,243,.55);
  transition:transform .3s, box-shadow .3s;
}
body.light .discord-card{background:#fff;}
.discord-card:hover{transform:translateY(-6px);box-shadow:0 0 30px rgba(0,4,243,.45);}

/* Contact form */
.contact-form{margin-top:30px;display:grid;gap:14px;}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.contact-form input,.contact-form textarea{
  width:100%;
  padding:12px 14px;border-radius:12px;
  border:1px solid rgba(0,4,243,.35);
  background:rgba(255,255,255,.04);
  color:inherit;outline:none;
}
body.light .contact-form input, body.light .contact-form textarea{background:#fff;}
.contact-form textarea{resize:vertical;min-height:120px;}

/* Footer */
footer{padding:30px;text-align:center;background:#05050c;}
body.light footer{background:#e9ecff;}

/* Scroll animations */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease, transform .65s ease;will-change:opacity,transform;}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal.fade-left{transform:translateX(-18px);}
.reveal.fade-right{transform:translateX(18px);}
.reveal.fade-left.in-view,.reveal.fade-right.in-view{transform:translateX(0);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* Mobile */
@media (max-width:768px){
  section{padding:70px 6%;}
  .hero-content h1{font-size:2.1rem;}
  .hero-content p{font-size:1rem;}
  .btn{padding:10px 18px;font-size:.92rem;margin:6px;}
}
@media (max-width:640px){
  .service-grid,.highlight-grid,.discord-links,.pricing-grid{grid-template-columns:1fr;}
  .top-bar{height:60px;}
  .controls{gap:8px;}
  #languageSelect{font-size:.85rem;}
  .contact-form .row{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .tebex-frame{height:480px;}
}


/* === HERO BANNER BACKGROUND (SUCHMXN) === */
.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(5, 5, 20, 0.75),
      rgba(0, 4, 243, 0.55),
      rgba(5, 5, 20, 0.85)
    ),
    url("../images/hero-banner.png") center / cover no-repeat;
}

/* subtle cinematic motion */
.hero-bg{
  animation: heroZoom 25s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.05); }
}

@media (max-width:768px){
  .hero-bg{
    background-position:center top;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation: none; }
}

/* ===== FIXED BANNER STRIP (1536x447) ===== */
.banner-strip {
  width: 100%;
  max-width: 1536px;
  aspect-ratio: 1536 / 447;
  margin: 0 auto;
  background-image: url('assets/banner.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.hero {
  min-height: 60vh !important;
  background: linear-gradient(135deg, #02024a, #0505ff);
}