/* ============================================
   GREWDIS - CYBERPUNK NEON CSS
   Deep Purple + Neon Green Theme
   ============================================ */

/* ---- CSS VARIABLES ---- */
:root {
  --purple-deep:   #0a0010;
  --purple-dark:   #12001f;
  --purple-mid:    #2a0050;
  --purple-glow:   #7B2FBE;
  --purple-bright: #9D4EDD;
  --neon-green:    #00FF88;
  --neon-cyan:     #00F5FF;
  --neon-pink:     #FF006E;
  --neon-yellow:   #FFE600;
  --text-primary:  #FFFFFF;
  --text-secondary:#C0B8D4;
  --text-muted:    #7A6E8A;
  --card-bg:       rgba(30, 0, 60, 0.6);
  --card-border:   rgba(123, 47, 190, 0.3);
  --font-display:  'Orbitron', monospace;
  --font-body:     'Rajdhani', sans-serif;
  --font-mono:     'Share Tech Mono', monospace;
  --transition:    0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- RESET & BASE ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; font-size:16px; }

body {
  font-family: var(--font-body);
  background: var(--purple-deep);
  color: var(--text-primary);
  overflow-x: hidden;
  cursor: none;
}

a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
input, textarea, select, button { font-family: var(--font-body); }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: var(--purple-dark); }
::-webkit-scrollbar-thumb { background: var(--purple-glow); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-green); }

/* ---- PARTICLE CANVAS ---- */
#particles {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
}

/* ---- CUSTOM CURSOR ---- */
.cursor-outer {
  position:fixed;
  width:32px; height:32px;
  border:2px solid var(--neon-green);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transition: transform 0.15s ease, opacity 0.3s;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor-inner {
  position:fixed;
  width:8px; height:8px;
  background: var(--neon-green);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 10px var(--neon-green);
}
body:hover .cursor-outer { opacity:1; }

/* ---- CONTAINER ---- */
.container { max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }

/* ---- SECTION COMMON ---- */
.section { padding:100px 0; position:relative; }
.section-label {
  font-family: var(--font-mono);
  font-size:0.8rem;
  color: var(--neon-green);
  letter-spacing:4px;
  margin-bottom:12px;
  opacity:0.8;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight:700;
  line-height:1.2;
  margin-bottom:16px;
  letter-spacing:1px;
}
.section-sub {
  font-size:1.1rem;
  color: var(--text-secondary);
  max-width:600px;
  margin:0 auto 60px;
  line-height:1.7;
}
.text-center { text-align:center; }

/* ---- NEON TEXT ---- */
.neon-text {
  color: var(--neon-green);
  text-shadow:
    0 0 7px var(--neon-green),
    0 0 20px var(--neon-green),
    0 0 45px rgba(0,255,136,0.5);
}

/* ---- BUTTONS ---- */
.btn-neon {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 32px;
  background: transparent;
  color: var(--neon-green);
  border:2px solid var(--neon-green);
  border-radius:4px;
  font-family: var(--font-display);
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: var(--transition);
  box-shadow:
    0 0 15px rgba(0,255,136,0.2),
    inset 0 0 15px rgba(0,255,136,0.05);
}
.btn-neon::before {
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.2), transparent);
  transition: left 0.5s ease;
}
.btn-neon:hover::before { left:100%; }
.btn-neon:hover {
  background: var(--neon-green);
  color: var(--purple-deep);
  box-shadow:
    0 0 30px rgba(0,255,136,0.6),
    0 0 60px rgba(0,255,136,0.3);
  transform: translateY(-2px);
}
.btn-ghost {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 32px;
  background: rgba(123,47,190,0.15);
  color: var(--text-secondary);
  border:2px solid rgba(123,47,190,0.4);
  border-radius:4px;
  font-family: var(--font-display);
  font-size:0.8rem;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition: var(--transition);
}
.btn-ghost:hover {
  border-color: var(--purple-bright);
  color: var(--purple-bright);
  background: rgba(123,47,190,0.25);
  transform: translateY(-2px);
}
.btn-sm { padding:10px 20px; font-size:0.7rem; }
.btn-full { width:100%; justify-content:center; }
.wa-btn {
  border-color: #25D366;
  color: #25D366;
  box-shadow: 0 0 15px rgba(37,211,102,0.2);
}
.wa-btn:hover {
  background:#25D366;
  color:var(--purple-deep);
  box-shadow:0 0 30px rgba(37,211,102,0.5);
}

/* ---- NAVBAR ---- */
.navbar {
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:1000;
  padding:18px 0;
  transition: var(--transition);
  background: transparent;
}
.navbar.scrolled {
  background: rgba(10, 0, 16, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding:12px 0;
  border-bottom: 1px solid rgba(123,47,190,0.3);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.nav-container {
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:32px;
}
.nav-logo {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.nav-logo img { height:42px; width:auto; filter: drop-shadow(0 0 8px rgba(0,255,136,0.4)); }
.logo-text {
  font-family: var(--font-display);
  font-size:1.4rem;
  font-weight:900;
  color: var(--neon-green);
  text-shadow: 0 0 15px rgba(0,255,136,0.6);
  letter-spacing:3px;
}
.nav-links {
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  justify-content:center;
  flex-wrap: wrap;
}
.nav-link {
  font-family: var(--font-body);
  font-size:0.85rem;
  font-weight:600;
  color: var(--text-secondary);
  padding:6px 12px;
  border-radius:4px;
  letter-spacing:1px;
  text-transform:uppercase;
  transition: var(--transition);
  position:relative;
}
.nav-link::after {
  content:'';
  position:absolute;
  bottom:0; left:50%;
  width:0; height:2px;
  background: var(--neon-green);
  transition:var(--transition);
  transform:translateX(-50%);
  box-shadow: 0 0 8px var(--neon-green);
}
.nav-link:hover, .nav-link.active {
  color: var(--neon-green);
}
.nav-link:hover::after, .nav-link.active::after { width:80%; }
.nav-cta { margin-left:auto; flex-shrink:0; }
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:4px;
  margin-left:auto;
}
.hamburger span {
  display:block;
  width:24px; height:2px;
  background: var(--neon-green);
  border-radius:2px;
  transition:var(--transition);
  box-shadow: 0 0 6px var(--neon-green);
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ---- HERO ---- */
.hero {
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  padding:100px 24px 60px;
}
.hero-bg-grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(123,47,190,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,47,190,0.07) 1px, transparent 1px);
  background-size:60px 60px;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
  0% { background-position:0 0; }
  100% { background-position:60px 60px; }
}
.hero-glow {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
}
.glow-1 {
  width:500px; height:500px;
  background: radial-gradient(circle, rgba(123,47,190,0.35) 0%, transparent 70%);
  top:-100px; left:-100px;
  animation: floatGlow 8s ease-in-out infinite;
}
.glow-2 {
  width:400px; height:400px;
  background: radial-gradient(circle, rgba(0,255,136,0.2) 0%, transparent 70%);
  bottom:-50px; right:-50px;
  animation: floatGlow 10s ease-in-out infinite reverse;
}
.glow-3 {
  width:300px; height:300px;
  background: radial-gradient(circle, rgba(0,245,255,0.15) 0%, transparent 70%);
  top:50%; right:30%;
  animation: floatGlow 12s ease-in-out infinite 2s;
}
@keyframes floatGlow {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(20px,-20px) scale(1.05); }
  66% { transform: translate(-15px,15px) scale(0.95); }
}
.scanlines {
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events:none;
  z-index:1;
}
.hero-content {
  position:relative;
  z-index:3;
  max-width:680px;
}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: rgba(0,255,136,0.08);
  border:1px solid rgba(0,255,136,0.25);
  border-radius:50px;
  padding:8px 20px;
  font-family: var(--font-mono);
  font-size:0.75rem;
  color: var(--neon-green);
  letter-spacing:1px;
  margin-bottom:28px;
  animation: fadeSlideDown 1s ease both;
}
.badge-dot {
  width:8px; height:8px;
  background: var(--neon-green);
  border-radius:50%;
  box-shadow: 0 0 10px var(--neon-green);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(0,255,136,0.7); }
  50% { box-shadow:0 0 0 8px rgba(0,255,136,0); }
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight:900;
  line-height:1.05;
  letter-spacing:2px;
  margin-bottom:24px;
}
.hero-title .line-1, .hero-title .line-3 {
  display:block;
  animation: fadeSlideUp 1s ease both;
}
.hero-title .line-3 { animation-delay:0.2s; }
.hero-title .line-2 {
  display:block;
  animation: fadeSlideUp 1s ease 0.1s both;
}
.hero-sub {
  font-size:1.1rem;
  color: var(--text-secondary);
  line-height:1.8;
  margin-bottom:36px;
  max-width:560px;
  animation: fadeSlideUp 1s ease 0.4s both;
}
.hero-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:60px;
  animation: fadeSlideUp 1s ease 0.6s both;
}
.hero-stats {
  display:flex;
  align-items:center;
  gap:0;
  background: rgba(30,0,60,0.5);
  border:1px solid rgba(123,47,190,0.3);
  border-radius:8px;
  padding:20px 30px;
  backdrop-filter:blur(10px);
  animation: fadeSlideUp 1s ease 0.8s both;
  flex-wrap:wrap;
}
.h-stat {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 30px;
}
.h-stat:first-child { padding-left:0; }
.h-stat:last-child { padding-right:0; }
.h-stat span:first-child {
  font-family: var(--font-display);
  font-size:2rem;
  font-weight:900;
  color: var(--neon-green);
  text-shadow: 0 0 20px rgba(0,255,136,0.5);
}
.h-stat span:nth-child(2) {
  font-family: var(--font-display);
  font-size:1.5rem;
  color: var(--neon-green);
}
.h-stat p {
  font-size:0.75rem;
  color: var(--text-muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-top:4px;
}
.h-stat-divider {
  width:1px;
  height:40px;
  background: rgba(123,47,190,0.4);
  flex-shrink:0;
}
.hero-visual {
  position:absolute;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  width:380px; height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.hero-circle-ring {
  position:absolute;
  border-radius:50%;
  border:1px solid;
  animation: spin 20s linear infinite;
}
.ring-1 {
  width:100%; height:100%;
  border-color: rgba(123,47,190,0.4);
  box-shadow: 0 0 30px rgba(123,47,190,0.15), inset 0 0 30px rgba(123,47,190,0.05);
}
.ring-2 {
  width:78%; height:78%;
  border-color: rgba(0,255,136,0.3);
  animation-duration:15s;
  animation-direction:reverse;
  box-shadow: 0 0 20px rgba(0,255,136,0.1);
}
.ring-3 {
  width:55%; height:55%;
  border-color: rgba(0,245,255,0.3);
  animation-duration:10s;
  box-shadow: 0 0 15px rgba(0,245,255,0.1);
}
@keyframes spin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
.hero-center-orb {
  width:160px; height:160px;
  background: radial-gradient(circle, rgba(123,47,190,0.8) 0%, rgba(10,0,16,0.9) 70%);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--neon-green);
  box-shadow:
    0 0 40px rgba(0,255,136,0.4),
    0 0 80px rgba(123,47,190,0.3),
    inset 0 0 40px rgba(0,255,136,0.1);
  z-index:2;
  animation: orbPulse 4s ease-in-out infinite;
}
.hero-center-orb img { width:100px; height:100px; object-fit:contain; border-radius:50%; }
.orb-text {
  font-family: var(--font-display);
  font-size:4rem;
  font-weight:900;
  color: var(--neon-green);
  text-shadow: 0 0 30px var(--neon-green);
}
@keyframes orbPulse {
  0%,100% { box-shadow:0 0 40px rgba(0,255,136,0.4),0 0 80px rgba(123,47,190,0.3); }
  50% { box-shadow:0 0 60px rgba(0,255,136,0.6),0 0 120px rgba(123,47,190,0.5); }
}

/* ---- ABOUT ---- */
.about { background: linear-gradient(180deg, var(--purple-deep) 0%, var(--purple-dark) 100%); }
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.about-desc {
  font-size:1.05rem;
  color: var(--text-secondary);
  line-height:1.9;
  margin-bottom:20px;
}
.about-desc strong { color: var(--text-primary); }
.about-desc em { color: var(--neon-green); font-style:normal; }
.about-tags {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
.tag {
  padding:6px 16px;
  background: rgba(123,47,190,0.15);
  border:1px solid rgba(123,47,190,0.35);
  border-radius:50px;
  font-size:0.8rem;
  color: var(--purple-bright);
  letter-spacing:0.5px;
  transition: var(--transition);
}
.tag:hover {
  background: rgba(0,255,136,0.1);
  border-color: var(--neon-green);
  color: var(--neon-green);
  transform:translateY(-2px);
}
.about-card-stack {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.about-card {
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:24px;
  backdrop-filter:blur(10px);
  transition: var(--transition);
  position:relative;
  overflow:hidden;
}
.about-card::before {
  content:'';
  position:absolute;
  top:0; left:0;
  right:0; height:2px;
  border-radius:12px 12px 0 0;
}
.ac-1::before, .ac-3::before { background: linear-gradient(90deg, var(--neon-green), transparent); }
.ac-2::before, .ac-4::before { background: linear-gradient(90deg, var(--purple-bright), transparent); }
.about-card:hover {
  transform:translateY(-6px);
  border-color: rgba(0,255,136,0.3);
  box-shadow: 0 10px 40px rgba(0,255,136,0.1);
}
.about-card i {
  font-size:1.5rem;
  margin-bottom:12px;
  display:block;
}
.ac-1 i, .ac-3 i { color: var(--neon-green); text-shadow:0 0 10px var(--neon-green); }
.ac-2 i, .ac-4 i { color: var(--purple-bright); text-shadow:0 0 10px var(--purple-bright); }
.about-card h4 {
  font-family: var(--font-display);
  font-size:0.9rem;
  font-weight:700;
  margin-bottom:8px;
  letter-spacing:1px;
}
.about-card p { font-size:0.85rem; color: var(--text-secondary); line-height:1.6; }

/* ---- SERVICES ---- */
.services {
  background: var(--purple-dark);
  position:relative;
  overflow:hidden;
}
.services::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--purple-glow), transparent);
}
.services-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.service-card {
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:36px 28px;
  backdrop-filter:blur(10px);
  transition: var(--transition-slow);
  position:relative;
  overflow:hidden;
  cursor:default;
}
.service-card::after {
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(0,255,136,0.04) 0%, transparent 60%);
  opacity:0;
  transition: var(--transition);
}
.service-card:hover::after { opacity:1; }
.service-card:hover {
  transform:translateY(-8px) scale(1.01);
  border-color: rgba(0,255,136,0.4);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.4),
    0 0 30px rgba(0,255,136,0.1);
}
.service-icon {
  width:60px; height:60px;
  background: linear-gradient(135deg, rgba(123,47,190,0.3) 0%, rgba(0,255,136,0.1) 100%);
  border:1px solid rgba(0,255,136,0.2);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  color: var(--neon-green);
  margin-bottom:20px;
  transition: var(--transition);
  text-shadow: 0 0 10px var(--neon-green);
}
.service-card:hover .service-icon {
  background: rgba(0,255,136,0.15);
  box-shadow: 0 0 20px rgba(0,255,136,0.3);
  transform:scale(1.1) rotate(5deg);
}
.service-card h3 {
  font-family: var(--font-display);
  font-size:0.95rem;
  font-weight:700;
  margin-bottom:14px;
  letter-spacing:0.5px;
  line-height:1.4;
}
.service-card p { font-size:0.9rem; color: var(--text-secondary); line-height:1.7; }
.service-tag {
  position:absolute;
  top:16px; right:16px;
  background: rgba(0,255,136,0.1);
  border:1px solid rgba(0,255,136,0.3);
  color: var(--neon-green);
  font-size:0.65rem;
  font-family: var(--font-mono);
  padding:3px 10px;
  border-radius:50px;
  letter-spacing:1px;
}

/* ---- STATS ---- */
.stats {
  background: var(--purple-deep);
  position:relative;
  overflow:hidden;
}
.stats-bg-glow {
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(123,47,190,0.15) 0%, transparent 70%);
  pointer-events:none;
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.stat-card {
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:36px 24px;
  text-align:center;
  backdrop-filter:blur(10px);
  transition: var(--transition);
  position:relative;
  overflow:hidden;
}
.stat-card::before {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
  transform:scaleX(0);
  transition: var(--transition);
}
.stat-card:hover::before { transform:scaleX(1); }
.stat-card:hover {
  transform:translateY(-8px);
  border-color:rgba(0,255,136,0.3);
  box-shadow:0 20px 50px rgba(0,255,136,0.08);
}
.stat-icon {
  font-size:2rem;
  color: var(--purple-bright);
  margin-bottom:16px;
  text-shadow: 0 0 15px var(--purple-bright);
}
.stat-number {
  font-family: var(--font-display);
  font-size:2.8rem;
  font-weight:900;
  color: var(--neon-green);
  text-shadow: 0 0 20px rgba(0,255,136,0.5);
  line-height:1;
  margin-bottom:8px;
}
.stat-plus { font-size:2rem; }
.stat-label {
  font-size:0.85rem;
  color: var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:16px;
}
.stat-bar {
  height:3px;
  background: rgba(123,47,190,0.2);
  border-radius:2px;
  overflow:hidden;
}
.stat-fill {
  height:100%;
  background: linear-gradient(90deg, var(--purple-glow), var(--neon-green));
  border-radius:2px;
  box-shadow:0 0 8px rgba(0,255,136,0.5);
  width:0;
  transition: width 1.5s ease 0.5s;
}

/* ---- CREATORS ---- */
.creators { background: var(--purple-dark); }
.creators-grid {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:center;
}
.creator-card {
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:28px 20px;
  text-align:center;
  width:200px;
  backdrop-filter:blur(10px);
  transition: var(--transition-slow);
  position:relative;
  overflow:hidden;
}
.creator-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background: linear-gradient(90deg, var(--purple-glow), var(--neon-green), var(--purple-glow));
  opacity:0;
  transition: var(--transition);
}
.creator-card:hover::before { opacity:1; }
.creator-card:hover {
  transform:translateY(-10px);
  border-color:rgba(0,255,136,0.35);
  box-shadow:0 20px 50px rgba(0,255,136,0.12);
}
.creator-img-wrap {
  position:relative;
  width:110px; height:110px;
  margin:0 auto 16px;
}
.creator-img-wrap img {
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  border:3px solid rgba(123,47,190,0.5);
  transition: var(--transition);
}
.creator-card:hover .creator-img-wrap img {
  border-color: var(--neon-green);
  box-shadow:0 0 20px rgba(0,255,136,0.4);
}
.creator-glow {
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background: conic-gradient(var(--neon-green), var(--purple-bright), var(--neon-cyan), var(--neon-green));
  z-index:-1;
  opacity:0;
  transition: var(--transition);
  animation: rotateConic 3s linear infinite;
}
.creator-card:hover .creator-glow { opacity:0.6; }
@keyframes rotateConic {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
.creator-info h4 {
  font-family: var(--font-display);
  font-size:0.9rem;
  font-weight:700;
  margin-bottom:6px;
  letter-spacing:0.5px;
}
.creator-niche {
  font-size:0.75rem;
  color: var(--neon-green);
  display:block;
  margin-bottom:12px;
  letter-spacing:0.5px;
}
.creator-socials { display:flex; justify-content:center; gap:10px; }
.creator-socials a {
  width:30px; height:30px;
  background: rgba(123,47,190,0.2);
  border:1px solid rgba(123,47,190,0.3);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.75rem;
  color: var(--text-secondary);
  transition: var(--transition);
}
.creator-socials a:hover {
  background: rgba(0,255,136,0.15);
  border-color: var(--neon-green);
  color: var(--neon-green);
  transform:scale(1.2);
}
.creators-cta { text-align:center; margin-top:50px; }

/* ---- GALLERY ---- */
.gallery { background: var(--purple-deep); }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:240px;
  gap:16px;
}
.gi-large { grid-column:span 2; }
.gallery-item {
  border-radius:12px;
  overflow:hidden;
  position:relative;
  border:1px solid var(--card-border);
  cursor:pointer;
  background: var(--card-bg);
}
.gallery-item img {
  width:100%; height:100%;
  object-fit:cover;
  transition: transform 0.6s ease;
}
.gallery-item.no-img {
  background: linear-gradient(135deg, rgba(123,47,190,0.2) 0%, rgba(0,255,136,0.05) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-item.no-img::after {
  content:'📸 Add Image';
  font-family: var(--font-mono);
  font-size:0.8rem;
  color: var(--text-muted);
}
.gallery-overlay {
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(10,0,16,0.9) 0%, transparent 60%);
  display:flex;
  align-items:flex-end;
  padding:20px;
  opacity:0;
  transition: var(--transition);
}
.gallery-overlay span {
  font-family: var(--font-display);
  font-size:0.8rem;
  color: var(--neon-green);
  letter-spacing:2px;
  text-transform:uppercase;
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-item:hover {
  border-color:rgba(0,255,136,0.3);
  box-shadow:0 0 30px rgba(0,255,136,0.1);
}

/* ---- BLOG ---- */
.blog { background: var(--purple-dark); }
.blog-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:32px;
  align-items:start;
}
.blog-card {
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  overflow:hidden;
  transition: var(--transition);
}
.blog-card:hover {
  transform:translateY(-6px);
  border-color:rgba(0,255,136,0.3);
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.blog-img {
  position:relative;
  height:220px;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(123,47,190,0.3) 0%, rgba(0,255,136,0.1) 100%);
}
.blog-main .blog-img { height:280px; }
.blog-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.blog-card:hover .blog-img img { transform:scale(1.05); }
.blog-img.no-img {
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--text-muted);
}
.blog-cat {
  position:absolute;
  top:12px; left:12px;
  background: var(--neon-green);
  color: var(--purple-deep);
  font-family: var(--font-mono);
  font-size:0.65rem;
  font-weight:700;
  padding:4px 12px;
  border-radius:4px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.blog-body { padding:24px; }
.blog-meta {
  font-size:0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom:12px;
  letter-spacing:0.5px;
}
.blog-meta i { color:var(--purple-bright); }
.blog-card h3 {
  font-family: var(--font-display);
  font-size:1rem;
  font-weight:700;
  margin-bottom:12px;
  line-height:1.5;
  letter-spacing:0.5px;
}
.blog-card h4 {
  font-family: var(--font-display);
  font-size:0.85rem;
  font-weight:600;
  margin-bottom:12px;
  line-height:1.5;
}
.blog-card p { font-size:0.9rem; color:var(--text-secondary); line-height:1.7; margin-bottom:20px; }
.read-more {
  font-family: var(--font-mono);
  font-size:0.75rem;
  color: var(--neon-green);
  letter-spacing:1px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition: var(--transition);
}
.read-more:hover { gap:10px; }
.blog-side { display:flex; flex-direction:column; gap:24px; }
.blog-mini .blog-img { height:120px; }

/* ---- CONTACT ---- */
.contact { background: var(--purple-deep); }
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
  align-items:start;
}
.contact-item {
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-bottom:32px;
}
.contact-icon {
  width:46px; height:46px;
  background: rgba(123,47,190,0.2);
  border:1px solid rgba(123,47,190,0.35);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color: var(--neon-green);
  flex-shrink:0;
  text-shadow: 0 0 8px var(--neon-green);
}
.contact-item h4 {
  font-family: var(--font-display);
  font-size:0.8rem;
  letter-spacing:1px;
  margin-bottom:6px;
  color:var(--text-muted);
  text-transform:uppercase;
}
.contact-item a, .contact-item p {
  font-size:0.95rem;
  color: var(--text-secondary);
  line-height:1.8;
  transition: var(--transition);
}
.contact-item a:hover { color: var(--neon-green); }
.social-links { margin-top:8px; }
.social-links h4 {
  font-family: var(--font-display);
  font-size:0.8rem;
  letter-spacing:1px;
  color:var(--text-muted);
  text-transform:uppercase;
  margin-bottom:16px;
}
.socials { display:flex; flex-wrap:wrap; gap:10px; }
.social-btn {
  width:42px; height:42px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  border:1px solid;
  transition: var(--transition);
}
.social-btn:hover { transform:translateY(-4px) scale(1.1); }
.fb { border-color:rgba(66,103,178,0.4); color:#4267B2; }
.fb:hover { background:rgba(66,103,178,0.2); box-shadow:0 0 15px rgba(66,103,178,0.4); }
.ig { border-color:rgba(225,48,108,0.4); color:#E1306C; }
.ig:hover { background:rgba(225,48,108,0.2); box-shadow:0 0 15px rgba(225,48,108,0.4); }
.yt { border-color:rgba(255,0,0,0.4); color:#FF0000; }
.yt:hover { background:rgba(255,0,0,0.2); box-shadow:0 0 15px rgba(255,0,0,0.4); }
.li { border-color:rgba(0,119,181,0.4); color:#0077B5; }
.li:hover { background:rgba(0,119,181,0.2); box-shadow:0 0 15px rgba(0,119,181,0.4); }
.tw { border-color:rgba(29,161,242,0.4); color:#1DA1F2; }
.tw:hover { background:rgba(29,161,242,0.2); box-shadow:0 0 15px rgba(29,161,242,0.4); }
.wa { border-color:rgba(37,211,102,0.4); color:#25D366; }
.wa:hover { background:rgba(37,211,102,0.2); box-shadow:0 0 15px rgba(37,211,102,0.4); }

/* ---- CONTACT FORM ---- */
.contact-form {
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:40px;
  backdrop-filter:blur(10px);
}
.form-group {
  position:relative;
  margin-bottom:20px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width:100%;
  background: rgba(123,47,190,0.08);
  border:1px solid rgba(123,47,190,0.3);
  border-radius:8px;
  padding:14px 18px;
  color: var(--text-primary);
  font-size:0.95rem;
  transition: var(--transition);
  outline:none;
  -webkit-appearance:none;
}
.form-group select option { background:var(--purple-dark); color:var(--text-primary); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--neon-green);
  background: rgba(0,255,136,0.04);
  box-shadow:0 0 15px rgba(0,255,136,0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-muted); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-success {
  display:none;
  text-align:center;
  margin-top:16px;
  padding:12px;
  background: rgba(0,255,136,0.1);
  border:1px solid rgba(0,255,136,0.3);
  border-radius:8px;
  color: var(--neon-green);
  font-family: var(--font-mono);
  font-size:0.85rem;
}

/* ---- FOOTER ---- */
.footer {
  background: var(--purple-dark);
  padding:70px 0 0;
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(123,47,190,0.2);
}
.footer-glow {
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:600px; height:200px;
  background: radial-gradient(ellipse, rgba(123,47,190,0.15) 0%, transparent 70%);
  pointer-events:none;
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:50px;
  margin-bottom:50px;
}
.footer-logo { height:50px; width:auto; margin-bottom:8px; }
.footer-logo-text {
  display:block;
  font-family: var(--font-display);
  font-size:1.5rem;
  font-weight:900;
  color: var(--neon-green);
  text-shadow:0 0 15px rgba(0,255,136,0.5);
  letter-spacing:3px;
  margin-bottom:14px;
}
.footer-brand p { font-size:0.9rem; color:var(--text-secondary); line-height:1.7; margin-bottom:20px; }
.footer-socials { display:flex; flex-wrap:wrap; gap:8px; }
.footer-socials a {
  width:36px; height:36px;
  background: rgba(123,47,190,0.15);
  border:1px solid rgba(123,47,190,0.25);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-secondary);
  font-size:0.85rem;
  transition: var(--transition);
}
.footer-socials a:hover {
  background:rgba(0,255,136,0.1);
  border-color:var(--neon-green);
  color:var(--neon-green);
  transform:translateY(-3px);
  box-shadow:0 5px 15px rgba(0,255,136,0.2);
}
.footer-links h4, .footer-contact h4 {
  font-family: var(--font-display);
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-primary);
  margin-bottom:20px;
}
.footer-links ul li { margin-bottom:10px; }
.footer-links ul li a {
  font-size:0.9rem;
  color:var(--text-secondary);
  transition:var(--transition);
  position:relative;
  padding-left:0;
}
.footer-links ul li a:hover { color:var(--neon-green); padding-left:6px; }
.footer-contact p {
  font-size:0.9rem;
  color:var(--text-secondary);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.footer-contact p i { color:var(--neon-green); width:14px; }
.footer-contact p a { color:var(--text-secondary); transition:var(--transition); }
.footer-contact p a:hover { color:var(--neon-green); }
.footer-contact .btn-neon { margin-top:16px; }
.footer-bottom {
  border-top:1px solid rgba(123,47,190,0.2);
  padding:20px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.footer-bottom p { font-size:0.82rem; color:var(--text-muted); }
.footer-tagline { font-family:var(--font-mono); font-size:0.75rem !important; }

/* ---- SCROLL TOP ---- */
.scroll-top {
  position:fixed;
  bottom:30px; right:30px;
  width:46px; height:46px;
  background: var(--purple-mid);
  border:1px solid var(--neon-green);
  border-radius:10px;
  color:var(--neon-green);
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:800;
  opacity:0;
  transform:translateY(20px);
  transition: var(--transition);
  box-shadow:0 0 15px rgba(0,255,136,0.2);
}
.scroll-top.visible {
  opacity:1;
  transform:translateY(0);
}
.scroll-top:hover {
  background: rgba(0,255,136,0.15);
  box-shadow:0 0 25px rgba(0,255,136,0.4);
  transform:translateY(-4px);
}

/* ---- REVEAL ANIMATIONS ---- */
.reveal {
  opacity:0;
  transform:translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity:1;
  transform:translateY(0);
}

@keyframes fadeSlideDown {
  from { opacity:0; transform:translateY(-20px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}

/* ============================================
   BLOG POST PAGE STYLES (blog-post.html)
   ============================================ */
.blog-post-hero {
  min-height:50vh;
  display:flex;
  align-items:flex-end;
  position:relative;
  overflow:hidden;
  padding:120px 0 60px;
  background: linear-gradient(180deg, var(--purple-dark) 0%, var(--purple-deep) 100%);
}
.blog-post-body { padding:60px 0 100px; background:var(--purple-deep); }
.blog-post-body .container { max-width:820px; }
.post-content h2 {
  font-family: var(--font-display);
  font-size:1.5rem;
  color:var(--text-primary);
  margin:36px 0 16px;
  letter-spacing:1px;
}
.post-content p {
  font-size:1rem;
  color:var(--text-secondary);
  line-height:1.9;
  margin-bottom:20px;
}
.post-content ul {
  list-style:none;
  margin:16px 0 24px 0;
}
.post-content ul li {
  padding:8px 0;
  padding-left:20px;
  position:relative;
  color:var(--text-secondary);
  font-size:1rem;
  line-height:1.7;
}
.post-content ul li::before {
  content:'▸';
  position:absolute;
  left:0;
  color:var(--neon-green);
}
.post-tag-row { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0; }
.post-tag {
  padding:5px 14px;
  background:rgba(123,47,190,0.15);
  border:1px solid rgba(123,47,190,0.3);
  border-radius:50px;
  font-size:0.8rem;
  color:var(--purple-bright);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1100px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .hero-visual { width:280px; height:280px; }
}

@media (max-width:900px) {
  .about-grid { grid-template-columns:1fr; gap:50px; }
  .contact-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .hero-content { max-width:100%; }
  .nav-links, .nav-cta {
    display:none;
  }
  .hamburger { display:flex; }
  .nav-links.open {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; left:0;
    width:100%; height:100vh;
    background:rgba(10,0,16,0.98);
    backdrop-filter:blur(20px);
    align-items:center;
    justify-content:center;
    gap:20px;
    z-index:999;
  }
  .nav-links.open .nav-link { font-size:1.1rem; }
}

@media (max-width:768px) {
  .section { padding:70px 0; }
  .services-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .gi-large { grid-column:span 1; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .hero-stats { flex-direction:column; gap:20px; }
  .h-stat-divider { width:60px; height:1px; }
  .about-card-stack { grid-template-columns:1fr; }
  .contact-form { padding:24px; }
  .hero-buttons { flex-direction:column; }
  .hero-buttons .btn-neon, .hero-buttons .btn-ghost { width:100%; justify-content:center; }
  .creators-grid { gap:16px; }
  .creator-card { width:160px; }
}

@media (max-width:480px) {
  .gallery-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr; }
  .hero-title { font-size:2.2rem; }
  body { cursor:auto; }
  .cursor-outer, .cursor-inner { display:none; }
}


.nav-container{
  justify-content: space-between;
}

.nav-links{
  margin-left: 0;
  justify-content: flex-start;
}

.logo-text-static{
  color:#fff;
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:1px;
}

.creator-info{
  display:none;
}

.creator-card{
  overflow:hidden;
  padding: 0;
  width: 180px;
}

.creator-img-wrap{
  width: 100%;
  height: 240px;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}

.creator-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: 0;
  border: none;
}