:root{ --cc-gradient: linear-gradient(135deg, #3f00ff, #8f00ff); }
.bg-white\/75 { background-color: rgba(255,255,255,.75) !important; }
.backdrop-blur { backdrop-filter: saturate(120%) blur(8px); }
.brand-dot{ display:inline-block;width:12px;height:12px;border-radius:50%; background: var(--cc-gradient); box-shadow: 0 0 12px rgba(143,0,255,.6), 0 0 3px rgba(63,0,255,.9); }
body { background: #070912; color:#e8e9f0; }
footer a { text-decoration: none; }

/* ======= Hero Landing (Dark, Animated, WOW) ======= */
.hero-landing{ min-height: 100vh; display: grid; place-items: center; position: relative;
  background: radial-gradient(1200px 700px at 20% 10%, rgba(143,0,255,.18), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(63,0,255,.18), transparent 60%),
              radial-gradient(700px 600px at 50% 90%, rgba(0,200,255,.12), transparent 60%), #070912; isolation:isolate; }
.hero-landing::before{ content:''; position:absolute; inset:-20%; background: conic-gradient(from 0deg, rgba(255,255,255,.06), rgba(255,255,255,0) 20% 80%, rgba(255,255,255,.06));
  filter: blur(60px); animation: ccSheen 10s linear infinite; opacity:.35; z-index:0; }
@keyframes ccSheen{ to { transform: rotate(1turn); } }
.cc-grid-overlay{ position:absolute; inset:0; background:
    linear-gradient(transparent 31px, rgba(255,255,255,.05) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.05) 32px);
  background-size: 32px 32px; mask-image: radial-gradient(closest-side, rgba(0,0,0,.8), transparent 100%); pointer-events:none; z-index:1; }
.cc-glow{ position:absolute; width:520px; height:520px; border-radius:50%; filter: blur(80px); opacity:.38; z-index:0; }
.cc-glow-1{ top:-120px; left:-120px; background: radial-gradient(circle, #8f00ff, transparent 60%); }
.cc-glow-2{ bottom:-140px; right:-140px; background: radial-gradient(circle, #3f00ff, transparent 60%); }
.cc-particles{ position:absolute; inset:0; z-index:0; opacity:.45; }
.cc-gradient-text{ background: linear-gradient(90deg, #bca7ff, #ffffff, #c6b3ff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 18px rgba(143,0,255,.35); }

/* Glass hero cards */
.cc-hero-card{ position:relative; display:block; border-radius:20px; overflow:hidden; background: rgba(12,14,26,.35);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
  transform-style: preserve-3d; backdrop-filter: blur(10px) saturate(120%);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-height:200px; color:#fff; }
.cc-hero-card:hover{ transform: translateY(-4px); box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.cc-hero-card::after{ content:''; position:absolute; inset:-2px; border-radius:22px; padding:2px;
  background: linear-gradient(135deg, rgba(143,0,255,.55), rgba(63,0,255,.55), rgba(0,200,255,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity .3s ease; }
.cc-hero-card:hover::after{ opacity:.6; }
.cc-hero-card-bg{ position:absolute; inset:0; z-index:0; opacity:.4; background: radial-gradient(600px 220px at 10% 0%, rgba(255,255,255,.15), transparent 60%); }
.cc-hero-card-radio::before, .cc-hero-card-gaming::before{ content:''; position:absolute; right:-120px; top:-120px; width:340px; height:340px; border-radius:50%; filter: blur(28px); opacity:.6; }
.cc-hero-card-radio::before{ background: radial-gradient(circle at 30% 30%, #8f00ff, transparent 60%); }
.cc-hero-card-gaming::before{ background: radial-gradient(circle at 30% 30%, #3f00ff, transparent 60%); }
.cc-hero-card-content{ position:relative; z-index:2; padding:28px; }
.cc-chip{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid rgba(255,255,255,.2); color:#fff; font-size:.85rem; padding:.2rem .55rem; border-radius:999px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 6px rgba(255,255,255,.06); margin-bottom:.75rem; }

/* Neon */
.neon-sign{ display:inline-block; padding:.1rem .35rem; border-radius:.5rem; background: rgba(0,0,0,.25);
  text-shadow:0 0 6px rgba(143,0,255,.9), 0 0 18px rgba(63,0,255,.9); box-shadow: inset 0 0 8px rgba(63,0,255,.35), 0 0 20px rgba(143,0,255,.35);
  transform: rotate(-2deg); animation: flicker 3s infinite; }
.hang{ position:relative; } .hang::before{ content:''; position:absolute; top:-16px; left:12px; width:2px; height:16px; background: rgba(255,255,255,.5); }
@keyframes flicker{ 0%,19%,21%,23%,80%,100% { opacity: 1; } 20%,22% { opacity: .4; } 81% { opacity: .85; } }