@charset "UTF-8";

/* =====================================================
   E3-HOSTING CRYSTAL THEME — DARK NEON + PARTICLES
   ===================================================== */

/* Root palette */
:root{
  --bg: #020617;
  --bg-alt: #05091a;
  --card: #05091a;
  --primary: #00e5ff;
  --accent: #15b6ff;
  --accent2: #4dffda;
  --danger: #ff4f7d;
  --text: #e6eef8;
  --muted: #98a3bd;
  --border-soft: rgba(255,255,255,0.06);
  --shadow: 0 18px 45px rgba(0,0,0,0.9);
  --radius: 14px;
  --transition-fast: .18s ease-in-out;
}

/* Reset-ish */
*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  height:100%;
}

/* =====================================================
   Background + particle canvas
   ===================================================== */

body{
  font-family:"Titillium Web",system-ui,-apple-system,BlinkMacSystemFont,
    "Segoe UI",Roboto,sans-serif;
  color:var(--text);
  background: radial-gradient(circle at top, #111827 0%, #020617 45%, #000 100%);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* full screen particle canvas */
#e3-particles{
  position:fixed;
  inset:0;
  z-index:-1;
  background:#020617;
}

/* overlay subtle vignette */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,0.18), transparent 55%),
    radial-gradient(circle at bottom right, rgba(59,130,246,0.18), transparent 60%);
  mix-blend-mode:screen;
}

/* =====================================================
   Preloader
   ===================================================== */

#preloader{
  position:fixed;
  inset:0;
  background:#020617;
  z-index:9999;
}

#status{
  width:200px;
  height:200px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.preloader-logo{
  width:140px;
  height:140px;
}

/* =====================================================
   Navbar
   ===================================================== */

.navbar-fixed nav{
  box-shadow:var(--shadow);
}

nav .nav-wrapper{
  background:linear-gradient(90deg, rgba(0,0,0,0.96), rgba(5,10,30,0.98));
  border-bottom:1px solid rgba(148,163,255,0.4);
  backdrop-filter:blur(10px);
}

nav .brand-logo{
  font-family:"Titillium Web","Hind",system-ui;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#e5f2ff;
  text-shadow:
    0 0 14px rgba(56,189,248,0.9),
    0 0 30px rgba(129,140,248,0.9);
}

nav .brand-logo:hover{
  filter:drop-shadow(0 0 16px rgba(56,189,248,1));
}

nav ul li a{
  color:var(--text);
  text-transform:uppercase;
  font-size:.86rem;
  letter-spacing:.08em;
  transition:all var(--transition-fast);
}

nav ul li a:hover{
  color:var(--primary);
  background:radial-gradient(circle at 50% 100%, rgba(56,189,248,0.18), transparent 65%);
}

nav ul.right li a i,
nav ul.left li a i{
  color:#a5b4fc;
}

.button-collapse i{
  color:var(--primary);
}

/* side nav */
.side-nav{
  background:radial-gradient(circle at 0 0, rgba(56,189,248,0.2), transparent 60%), #020617;
}

.side-nav li > a{
  color:var(--text);
  font-size:.95rem;
}

.side-nav li > a:hover{
  background:rgba(56,189,248,0.16);
  color:#e0f2fe;
}

.side-nav .collapsible-header{
  border-bottom:1px solid rgba(255,255,255,0.04);
}

.side-nav .material-icons{
  color:#93c5fd;
}

/* =====================================================
   Dropdown menus (desktop)
   ===================================================== */

.dropdown-content{
  background:radial-gradient(circle at 0 0, rgba(56,189,248,0.20), transparent 60%), #020617 !important;
  border-radius:18px !important;
  border:1px solid rgba(148,163,255,0.7) !important;
  box-shadow:var(--shadow) !important;
  overflow:hidden !important;
  max-height:70vh;
  overflow-y:auto;
  padding:0 !important;
  min-width:260px;
}

.dropdown-content li{
  border-bottom:1px solid rgba(255,255,255,0.03);
  background:transparent;
}

.dropdown-content li:last-child{border-bottom:none}

/* base link style */
.dropdown-content li > a,
.dropdown-content li > span{
  display:flex;
  align-items:center;
  gap:12px;
  color:#e5edff !important;
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:10px 18px;
  line-height:1.4;
  background:transparent !important;
}

/* remove grey hover from materialize */
.dropdown-content li > a:hover{
  background:transparent !important;
}

.dropdown-content li > a i.material-icons{
  color:#bfdbfe !important;
  font-size:20px;
  margin-right:4px;
}

/* hover row */
.dropdown-content li:hover,
.dropdown-content li.active{
  background:radial-gradient(circle at 0 0, rgba(56,189,248,0.28), transparent 70%) !important;
}

.dropdown-content li:hover > a,
.dropdown-content li.active > a{
  color:#e0f2fe !important;
}

/* =====================================================
   Text + links + buttons
   ===================================================== */

a{
  color:var(--primary);
  transition:color var(--transition-fast);
}

a:hover{
  color:var(--accent2);
}

.btn,
.btn-large{
  border-radius:999px;
  background:linear-gradient(135deg, #22d3ee 0%, #38bdf8 40%, #818cf8 100%);
  box-shadow:0 0 26px rgba(59,130,246,0.7);
  text-transform:uppercase;
  letter-spacing:.09em;
}

.btn:hover,
.btn-large:hover{
  box-shadow:0 0 36px rgba(129,140,248,0.95);
  filter:brightness(1.06);
}

.btn-flat{
  border-radius:999px;
  background:transparent;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.btn-flat:hover{
  background:rgba(56,189,248,0.12);
  color:var(--accent2);
}

/* waves */
.waves-effect.waves-red .waves-ripple,
.waves-effect.waves-light .waves-ripple{
  background-color:rgba(56,189,248,0.45) !important;
}

/* =====================================================
   Sections / cards
   ===================================================== */

.section{
  padding:40px 0;
}

.section-title{
  font-size:1.6rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.section-subtitle{
  font-size:.95rem;
}

.card{
  border-radius:var(--radius);
  background:radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 60%), var(--card);
  box-shadow:var(--shadow);
  border:1px solid var(--border-soft);
}

.card .card-content{color:var(--text)}

.card .card-title{
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.crystal-card{
  position:relative;
  overflow:hidden;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.crystal-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0, rgba(56,189,248,0.28), transparent 55%);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease-out;
}

.crystal-card:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 60px rgba(0,0,0,0.95);
  border-color:rgba(148,163,255,0.8);
}

.crystal-card:hover::before{opacity:1}

.crystal-card .card-action{
  border-top:1px solid rgba(255,255,255,0.04);
}

/* feature icons */
.feature-icon{
  width:68px;
  height:68px;
  border-radius:50%;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 30% 0, rgba(56,189,248,0.45), transparent 70%);
  box-shadow:0 0 18px rgba(56,189,248,0.85);
}

.feature-icon i{
  font-size:32px;
  color:#e0f2fe;
}

/* =====================================================
   HERO
   ===================================================== */

.section-hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 0 60px;
  position:relative;
  overflow:hidden;
}

.hero-inner{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 18px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,0.8);
  background:radial-gradient(circle at 0 0, rgba(56,189,248,0.22), transparent 70%);
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#e0f2fe;
  box-shadow:0 0 18px rgba(56,189,248,0.8);
}

.hero-title{
  margin-top:26px;
  margin-bottom:18px;
  font-size:2.8rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.hero-gradient-text{
  background:linear-gradient(120deg, #e5edff, #bae6fd);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-subtitle{
  max-width:720px;
  margin:0 auto 30px;
  color:var(--muted);
  font-size:1.02rem;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-bottom:24px;
}

.hero-pills{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.hero-pills .pill{
  border-radius:999px;
  border:1px solid rgba(56,189,248,0.7);
  padding:6px 16px;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#dbeafe;
  background:radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 70%);
  box-shadow:0 0 18px rgba(56,189,248,0.45);
}

/* =====================================================
   Old “standard / features / plans” strips so other pages still look good
   ===================================================== */

.standard.grey.lighten-3,
.features.grey.lighten-3,
.standard,
.features{
  background:#020617 !important;
  border-top:1px solid rgba(148,163,255,0.6);
  border-bottom:1px solid rgba(148,163,255,0.4);
  box-shadow:0 20px 60px rgba(0,0,0,0.9);
  color:#e5edff;
}

.standard h4,
.features h3{
  color:#e5edff;
  text-align:center;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:18px;
  margin-bottom:26px;
  text-shadow:
    0 0 12px rgba(56,189,248,0.9),
    0 0 28px rgba(129,140,248,0.85);
}

.standard h5,
.features h5{
  color:#e5edff;
  font-weight:500;
  letter-spacing:.03em;
}

.standard img,
.features img{
  filter:drop-shadow(0 0 16px rgba(56,189,248,0.9));
}

.features .col.s12.l3{
  margin-top:14px;
  margin-bottom:14px;
}

/* plans wrapper used on game pages */
.plans .card{
  background:radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 60%), #05091a;
}

.plans .card .card-image img{
  filter:brightness(.96) saturate(1.06);
}

.plans .card .card-action a.btn-flat{
  border-radius:999px;
  border:1px solid rgba(148,163,255,0.6);
  padding:6px 20px;
}

/* =====================================================
   Footer
   ===================================================== */

.page-footer,
.crystal-footer{
  background:radial-gradient(circle at top left, #111827 0, #020617 40%, #000 100%);
  padding-top:32px;
  border-top:1px solid rgba(148,163,255,0.7);
  box-shadow:0 -10px 40px rgba(0,0,0,0.85);
}

.page-footer h5,
.crystal-footer h5{
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.page-footer p,
.crystal-footer p{
  color:rgba(226,232,240,0.84);
  line-height:1.6;
  font-size:.95rem;
}

.page-footer a{color:#bfdbfe}

.crystal-footer .payment-logos img{
  filter:drop-shadow(0 0 18px rgba(56,189,248,0.7));
}

.footer-copyright-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:.86rem;
  color:rgba(148,163,184,0.9);
}

.footer-copyright-inner a{color:#e0f2fe}

/* =====================================================
   Back-to-top
   ===================================================== */

#to_top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:998;
  background:linear-gradient(135deg, #38bdf8, #818cf8);
  box-shadow:0 12px 35px rgba(37,99,235,0.8);
}

#to_top:hover{
  background:linear-gradient(135deg, #e0f2fe, #a5b4fc);
  box-shadow:0 16px 45px rgba(129,140,248,0.95);
}

/* =====================================================
   Responsive
   ===================================================== */

@media (max-width:992px){
  .hero-title{font-size:2.1rem;}
  .hero-subtitle{font-size:.95rem;}
  .hero-actions{flex-direction:column;}
}

@media (max-width:600px){
  nav .brand-logo{
    font-size:1.2rem;
    letter-spacing:.12em;
  }
  .section-hero{padding-top:70px;}
  .footer-copyright-inner{
    flex-direction:column;
    text-align:center;
  }
}

/* Modern ghost button */
.btn-ghost-main {
    border-radius: 999px;
    padding: 0 26px;
    height: 44px;
    line-height: 44px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid #33e4ff;
    color: #33e4ff !important;
    box-shadow: 0 0 18px rgba(51, 228, 255, 0.35);
    transition: 0.25s ease;
}

.btn-ghost-main:hover {
    background: rgba(51, 228, 255, 0.15);
    box-shadow: 0 0 26px rgba(51, 228, 255, 0.55);
    transform: translateY(-2px);
}