/* ==== GLOBAL / NO HORIZONTAL SCROLL ==== */
*{box-sizing:border-box;max-width:100%}
html,body{width:100%;height:auto}
body{overflow-x:hidden}

/* ===== Brand & Neon ===== */
.text-brand-grad{background:linear-gradient(90deg,#FF5EA8,#7C3AED,#22D3EE);-webkit-background-clip:text;background-clip:text;color:transparent}
.font-glam{font-family: 'Audiowide', cursive}
.neon-name{text-shadow:0 0 12px rgba(168,85,247,.65),0 0 24px rgba(14,165,233,.35)}

/* ===== Preloader ===== */
.preloader{
  position:fixed;inset:0;background:#020617;display:grid;place-items:center;z-index:80
}
.preloader .ring{
  width:74px;height:74px;border-radius:50%;
  border:4px solid rgba(124,58,237,.25);border-top-color:#FF5EA8;
  animation:spin 1s linear infinite;box-shadow:0 0 28px rgba(236,72,153,.35) inset
}
.preloader .logo-spark{position:absolute;top:54%;font-weight:800;letter-spacing:.02em;color:#fff;opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}

/* Transition glow overlay */
.transition-glow{
  position:fixed;inset:0;pointer-events:none;background:radial-gradient(1200px 400px at 50% 100%,rgba(236,72,153,.2),transparent 60%);z-index:60;animation:glow 1.2s ease
}
@keyframes glow{from{opacity:0}to{opacity:1}}

/* ===== NAV ===== */
.nav-shell{
  margin:.75rem 0;border-radius:1.25rem;padding:.75rem 1rem;
  background:linear-gradient(180deg,rgba(2,6,23,.9),rgba(2,6,23,.6));
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);
  box-shadow:0 12px 34px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:space-between
}
.nav-link{position:relative;padding:4px 6px}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,#FF5EA8,#7C3AED,#22D3EE);
  transform:scaleX(0);transform-origin:left;transition:.22s
}
.nav-link:hover{color:#fff}
.nav-link:hover::after{transform:scaleX(1)}
.mobile-sheet{
  border-radius:1rem;padding:1rem;background:linear-gradient(180deg,rgba(2,6,23,.9),rgba(2,6,23,.6));
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px)
}

/* ===== Logo Icon ===== */
.logo-shine{position:relative;height:34px;width:34px;border-radius:50%;overflow:hidden}
.logo-disc{
  display:grid;place-items:center;height:100%;width:100%;
  background:conic-gradient(from 0deg,#FF5EA8,#7C3AED,#22D3EE,#F59E0B,#FF5EA8);color:#fff;font-weight:900;border-radius:50%;
  animation:spin 5s linear infinite;box-shadow:0 8px 20px rgba(124,58,237,.55)
}
.logo-shine:hover .logo-disc{animation-duration:2.8s;filter:saturate(1.2) brightness(1.1)}

/* ===== Social Sidebar ===== */
.sidebar-glass{
  display:flex;flex-direction:column;gap:.6rem;padding:.45rem;background:linear-gradient(180deg,rgba(2,6,23,.85),rgba(2,6,23,.6));
  border:1px solid rgba(255,255,255,.16);border-radius:1.25rem;backdrop-filter:blur(14px);box-shadow:0 16px 38px rgba(0,0,0,.5)
}
.side-btn{position:relative;height:48px;width:48px;border-radius:14px;display:grid;place-items:center;overflow:hidden;cursor:pointer;transition:transform .2s, box-shadow .2s}
.side-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(124,58,237,.35)}
.brand-circle{position:absolute;inset:0;border-radius:14px}
.brand-circle.linkedin{background:#0A66C2}
.brand-circle.instagram{background:conic-gradient(#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.brand-icon{position:relative;height:20px;width:20px;color:#fff;z-index:2}
.tooltip{position:absolute;left:58px;top:50%;transform:translateY(-50%) translateX(6px);background:#0b1220;color:#fff;font-size:.75rem;padding:.35rem .6rem;border-radius:.55rem;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap;box-shadow:0 8px 16px rgba(0,0,0,.38)}
.side-btn:hover .tooltip{opacity:1;transform:translateY(-50%) translateX(0)}

/* ===== Right dot nav ===== */
.dot-nav{height:12px;width:12px;border-radius:999px;background:linear-gradient(90deg,#FF5EA8,#7C3AED);opacity:.65;box-shadow:0 0 10px rgba(236,72,153,.7);transition:.2s;display:block}
.dot-nav:hover{opacity:1;transform:scale(1.2)}

/* ===== Buttons ===== */
.btn-primary{
  background:linear-gradient(135deg,#FF5EA8,#7C3AED);color:#fff;font-weight:800;border-radius:9999px;padding:.7rem 1.1rem;
  box-shadow:0 10px 28px rgba(124,58,237,.38);transition:transform .25s, box-shadow .25s
}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 36px rgba(124,58,237,.5)}
.btn-primary:active{transform:translateY(0) scale(.98)}

.btn-ghost{
  background:rgba(255,255,255,.08);color:#e2e8f0;border:1px solid rgba(255,255,255,.18);
  border-radius:9999px;padding:.65rem 1rem;font-weight:800;box-shadow:0 8px 18px rgba(0,0,0,.18);transition:.2s
}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}

.btn-neon{
  --shadow: 0 0 10px #f0a, 0 0 20px #90f, 0 0 30px #4fd;
  background: radial-gradient(circle at 30% 30%, #ff77c8, #7c3aed 60%);
  color:#fff;border:none;border-radius:9999px;padding:.6rem 1rem;font-weight:800;letter-spacing:.02em;
  box-shadow: var(--shadow);transition: transform .2s, filter .2s, box-shadow .2s
}
.btn-neon:hover{transform:translateY(-2px) scale(1.03);filter:saturate(1.2);box-shadow:0 0 12px #f0a, 0 0 26px #90f, 0 0 36px #4fd}
.btn-neon:active{transform:translateY(0) scale(.98)}

/* ===== Image Frame ===== */
.img-frame{
  border-radius:1.5rem;padding:.45rem;background:linear-gradient(145deg,rgba(255,94,168,.35),rgba(124,58,237,.35));
  border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 40px rgba(0,0,0,.45)
}
.hero-img{width:100%;height:min(60vw,360px);border-radius:1.2rem;transform:perspective(900px) rotateX(0) rotateY(0) scale(1);transition:transform .45s ease, filter .45s ease}
.hero-img:hover{transform:perspective(900px) rotateX(3deg) rotateY(-3deg) scale(1.03);filter:saturate(1.05) contrast(1.05)}

/* ===== Section Title ===== */
.section-title{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:800;letter-spacing:-.01em}

/* ===== Cards ===== */
.card{
  background:#0b1220;border:1px solid rgba(255,255,255,.12);border-radius:1.5rem;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.38);transition:transform .25s, box-shadow .25s
}
.card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 26px 56px rgba(124,58,237,.45)}
.card-img{width:100%;height:220px;object-fit:cover;filter:saturate(1.05) contrast(1.02);transition:.25s}
.card:hover .card-img{transform:scale(1.04)}
.card-body{padding:1rem 1.1rem 1.2rem}
.card-title{font-size:1.05rem;font-weight:800}
.card-text{color:#cbd5e1}

/* ===== Collection boxes ===== */
.collection{
  background:linear-gradient(135deg,rgba(255,94,168,.12),rgba(124,58,237,.12),rgba(34,211,238,.12));
  border:1px solid rgba(255,255,255,.12);border-radius:1.5rem;padding:1.1rem 1.2rem;box-shadow:0 14px 34px rgba(0,0,0,.3)
}

/* ===== Player ===== */
.player-card{
  background:linear-gradient(135deg,rgba(255,94,168,.15),rgba(124,58,237,.15));
  border:1px solid rgba(255,255,255,.12);border-radius:1.5rem;padding:1.1rem;box-shadow:0 16px 40px rgba(0,0,0,.38)
}
.progress-bg{position:absolute;inset:0;pointer-events:none;border-radius:999px;background:linear-gradient(90deg,rgba(255,94,168,.15),rgba(124,58,237,.15))}
.mini-eq{display:flex;gap:3px;align-items:flex-end;width:22px;height:14px;opacity:.85}
.mini-eq span{width:4px;background:linear-gradient(180deg,#FF5EA8,#7C3AED);border-radius:2px;height:8px;transform-origin:bottom;animation:equalize 1s infinite ease-in-out}
.mini-eq span:nth-child(2){animation-delay:.15s}
.mini-eq span:nth-child(3){animation-delay:.3s}
@keyframes equalize{0%,100%{height:6px}50%{height:14px}}

/* Queue */
.queue-card{
  display:flex;align-items:center;gap:12px;background:#0b1220;border:1px solid rgba(255,255,255,.12);
  border-radius:1.2rem;padding:.85rem .95rem;box-shadow:0 10px 24px rgba(0,0,0,.34);cursor:pointer;transition:transform .2s, box-shadow .2s
}
.queue-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(124,58,237,.45)}
.queue-img{width:64px;height:64px;object-fit:cover;border-radius:.8rem}

/* Inputs & contact */
.input{
  background:#0b1220;border:1px solid rgba(255,255,255,.12);border-radius:.9rem;padding:.85rem 1rem;color:#e2e8f0;outline:none;transition:border .2s, box-shadow .2s
}
.input:focus{border-color:#FF5EA8;box-shadow:0 8px 20px rgba(236,72,153,.25)}
.contact-card{
  background:linear-gradient(135deg,rgba(255,94,168,.12),rgba(124,58,237,.12),rgba(34,211,238,.12),rgba(245,158,11,.12));
  border:1px solid rgba(255,255,255,.12);border-radius:1.5rem;padding:1.1rem;box-shadow:0 16px 40px rgba(0,0,0,.38)
}

/* Glam morphing cards */
.glam-card{
  display:flex;flex-direction:column;justify-content:center;gap:.15rem;min-height:110px;border-radius:1.2rem;padding:1rem;color:#fff;font-weight:800;
  text-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .25s, box-shadow .25s, border-radius .35s
}
.glam-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 44px rgba(124,58,237,.55);border-radius:2.2rem}
.glam-card .tiny{font-weight:600;opacity:.9;font-size:.8rem}
.grad-1{background:linear-gradient(135deg,#FF5EA8,#7C3AED)}
.grad-2{background:linear-gradient(135deg,#22D3EE,#7C3AED)}
.grad-3{background:linear-gradient(135deg,#F59E0B,#FF5EA8)}
.grad-4{background:linear-gradient(135deg,#7C3AED,#0b1220)}

/* Videos */
.video-card{border-radius:1.2rem;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0b1220;box-shadow:0 14px 34px rgba(0,0,0,.34)}
.ratio{position:relative;width:100%;padding-top:56.25%}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Pricing */
.price-card{
  background:#0b1220;border:1px solid rgba(255,255,255,.12);border-radius:1.2rem;padding:1rem;box-shadow:0 14px 34px rgba(0,0,0,.34);
  transition:transform .25s, box-shadow .25s
}
.price-card.featured{outline:3px solid rgba(124,58,237,.55)}
.price-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(124,58,237,.45)}

/* FAQ */
.faq{background:#0b1220;border:1px solid rgba(255,255,255,.12);border-radius:1rem;padding:.8rem 1rem}
.faq summary{cursor:pointer;font-weight:700}
.faq[open]{outline:2px solid rgba(124,58,237,.5)}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* Typed bounce effect */
.typed span{display:inline-block;opacity:0;transform:translateY(10px);animation:letter .6s forwards}
@keyframes letter{to{opacity:1;transform:translateY(0)}}

/* Toast */
.toast{position:fixed;left:50%;bottom:30px;translate:-50% 0;background:#111827;color:#fff;padding:.8rem 1rem;border-radius:.75rem;z-index:70;box-shadow:0 12px 28px rgba(0,0,0,.6)}

/* Mobile spacing so sidebar doesn't cause overflow */
@media (min-width:640px){ body{padding-left:70px} }