/* ============================================================
   LANDING PAGE STYLES
   ============================================================ */

/* ── Hero ── */
.hero {
  min-height:100vh;padding:160px 24px 100px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;z-index:2;overflow:hidden;
}
.hero-content { max-width:820px;margin:0 auto;position:relative;z-index:2; }

.hero-badge {
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 18px;border-radius:var(--r-full);
  background:rgba(255,26,42,.08);border:1px solid rgba(255,26,42,.3);
  font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  color:var(--text2);letter-spacing:.1em;
  margin-bottom:36px;
  animation:float 4s ease-in-out infinite;
  cursor:default;
}
.badge-dot { width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse-dot 2s infinite; }
.badge-mono { font-family:var(--font-mono);letter-spacing:.15em; }
.badge-sep { color:var(--text3); }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes pulse-dot { 0% { box-shadow:0 0 0 0 rgba(0,255,102,.7); } 70% { box-shadow:0 0 0 8px rgba(0,255,102,0); } 100% { box-shadow:0 0 0 0 rgba(0,255,102,0); } }

/* ── Hero Logo ── */
.hero-logo-wrap {
  position:relative;width:160px;height:160px;margin:0 auto 36px;
  display:flex;align-items:center;justify-content:center;
}
.hero-logo {
  width:120px;height:120px;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 0 40px rgba(255,26,42,.4));
  transition:transform .4s cubic-bezier(.16,1,.3,1),filter .4s;
  cursor:pointer;
}
.hero-logo img { width:100%;height:auto;object-fit:contain; }
.hero-logo-wrap:hover .hero-logo { transform:rotateY(15deg) rotateX(-8deg) scale(1.1);filter:drop-shadow(0 0 60px rgba(255,26,42,.7)); }

.hero-ring {
  position:absolute;top:50%;left:50%;border-radius:50%;
  border:1px dashed rgba(255,26,42,.2);
  transform:translate(-50%,-50%);pointer-events:none;
}
.r1 { width:160px;height:160px;animation:spin-cw 22s linear infinite; }
.r2 { width:210px;height:210px;border-style:solid;border-color:rgba(255,26,42,.08);animation:spin-ccw 32s linear infinite; }
.r3 { width:260px;height:260px;border-color:rgba(255,26,42,.04);animation:spin-cw 45s linear infinite; }
@keyframes spin-cw { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes spin-ccw { to { transform:translate(-50%,-50%) rotate(-360deg); } }

/* ── Hero Title ── */
.hero-title {
  font-family:var(--font-display);
  font-size:clamp(2.5rem,7vw,6rem);
  font-weight:800;line-height:.95;letter-spacing:-.04em;
  margin-bottom:24px;text-transform:uppercase;
}
.title-white { background:linear-gradient(180deg,#fff 30%,#a8a8c0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.title-red {
  background:var(--red-grad-h);background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:text-shine 4s linear infinite;
  filter:drop-shadow(0 0 20px rgba(255,26,42,.4));
}
@keyframes text-shine { to { background-position:200% center; } }

/* ── Typewriter ── */
.hero-typewriter {
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:28px;
  font-family:var(--font-mono);font-size:clamp(.95rem,2vw,1.2rem);color:var(--text2);
}
.tw-prompt { color:var(--red);font-weight:700; }
.tw-text { color:#fff;font-weight:500; }
.tw-cursor { color:var(--red);animation:blink .75s step-end infinite; }
@keyframes blink { from,to { opacity:0; } 50% { opacity:1; } }

/* ── Hero Desc ── */
.hero-desc {
  max-width:580px;margin:0 auto 40px;
  font-size:clamp(1rem,1.8vw,1.1rem);color:var(--text2);line-height:1.8;
}
.hero-desc strong { color:#fff; }

/* ── CTA ── */
.hero-cta { display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:48px; }

.cta-primary {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;border-radius:var(--r-full);
  background:var(--red-grad);color:#fff;
  font-weight:700;font-size:1rem;letter-spacing:.02em;
  transition:all .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 rgba(255,26,42,0);
  position:relative;overflow:hidden;
}
.cta-primary::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);
  transition:opacity .3s;
}
.cta-primary:hover { transform:translateY(-3px) scale(1.03);box-shadow:0 0 35px rgba(255,26,42,.6);letter-spacing:.04em; }
.cta-primary.large { padding:16px 40px;font-size:1.05rem; }

.cta-secondary {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;border-radius:var(--r-full);
  border:1px solid var(--border);color:var(--text2);
  font-weight:600;font-size:1rem;
  transition:all .25s;
}
.cta-secondary:hover { border-color:var(--border-red);color:#fff;background:var(--red-dim);transform:translateY(-2px); }

.cta-discord {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;border-radius:var(--r-full);
  background:rgba(88,101,242,.2);border:1px solid rgba(88,101,242,.4);
  color:#fff;font-weight:700;font-size:1.05rem;
  transition:all .25s;
}
.cta-discord:hover { background:rgba(88,101,242,.3);transform:translateY(-2px);box-shadow:0 0 25px rgba(88,101,242,.4); }
.cta-discord.large { padding:16px 40px; }

/* ── Stats ── */
.hero-stats {
  display:flex;align-items:center;justify-content:center;gap:32px;
  padding:24px;background:rgba(255,255,255,.03);
  border:1px solid var(--border);border-radius:var(--r-lg);
  backdrop-filter:blur(12px);
}
.stat-item { text-align:center; }
.stat-num { display:block;font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--red); }
.stat-label { font-size:.78rem;color:var(--text3);letter-spacing:.05em;text-transform:uppercase; }
.stat-sep { width:1px;height:40px;background:var(--border); }

/* ── Scroll Hint ── */
.hero-scroll-hint {
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--text3);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  animation:bounce-hint 2s ease-in-out infinite;
}
@keyframes bounce-hint { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(8px); } }

/* ── Features Grid ── */
.features-section { background:linear-gradient(180deg,var(--bg) 0%,rgba(14,0,4,.5) 50%,var(--bg) 100%); }

.features-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.feature-card {
  padding:32px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--border);
}
.feature-icon {
  width:52px;height:52px;border-radius:var(--r-md);
  background:rgba(255,26,42,.08);border:1px solid rgba(255,26,42,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:var(--icon-color,var(--red));
  margin-bottom:20px;transition:transform .3s,box-shadow .3s;
}
.feature-card:hover .feature-icon { transform:scale(1.1);box-shadow:0 0 20px rgba(255,26,42,.3); }
.feature-card h3 { font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:10px; }
.feature-card > p { color:var(--text2);font-size:.9rem;margin-bottom:18px;line-height:1.7; }
.feature-list { list-style:none;display:flex;flex-direction:column;gap:8px; }
.feature-list li { display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--text2); }
.feature-list li i { color:var(--green);font-size:.7rem; }

/* ── Effects Showcase ── */
.effects-section { background:var(--bg2); }
.effects-showcase { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }

.effect-demo { text-align:center; }
.effect-demo > p { margin-top:12px;font-size:.85rem;color:var(--text2); }

.effect-preview {
  aspect-ratio:4/3;border-radius:var(--r-lg);
  background:rgba(12,12,20,.9);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;cursor:pointer;
  transition:border-color .3s,box-shadow .3s;
}
.effect-preview:hover { border-color:var(--border-red);box-shadow:0 0 30px rgba(255,26,42,.15); }
.effect-name {
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font-size:.75rem;font-weight:600;color:var(--text2);
  background:rgba(0,0,0,.5);padding:4px 12px;border-radius:var(--r-full);
  white-space:nowrap;display:flex;align-items:center;gap:6px;
}

/* Particles preview */
.p-dot {
  position:absolute;left:var(--x);top:var(--y);
  width:6px;height:6px;border-radius:50%;background:var(--red);
  box-shadow:0 0 8px var(--red);
  animation:float-dot var(--s) ease-in-out infinite alternate;
}
@keyframes float-dot { 0% { transform:translateY(0) scale(1); } 100% { transform:translateY(-15px) scale(1.5); } }

/* Snow preview */
.snowflake {
  position:absolute;top:-10px;left:var(--x);
  color:var(--cyan);font-size:1rem;opacity:.7;
  animation:fall var(--d) linear infinite;
}
@keyframes fall { 0% { transform:translateY(-20px) rotate(0); } 100% { transform:translateY(120px) rotate(360deg); } }

/* Glitch */
.glitch-text {
  font-family:var(--font-display);font-size:1.8rem;font-weight:800;
  color:#fff;position:relative;
  animation:glitch-anim 2s infinite;
}
@keyframes glitch-anim {
  0%,90%,100% { text-shadow:none; }
  92% { text-shadow:2px 0 var(--red),-2px 0 var(--cyan); transform:skewX(0deg); }
  94% { text-shadow:-2px 0 var(--red),2px 0 var(--cyan); transform:skewX(5deg); }
  96% { text-shadow:2px 0 var(--red),-2px 0 var(--cyan); transform:skewX(-3deg); }
}

/* Rainbow */
.rainbow-text {
  font-family:var(--font-display);font-size:1.6rem;font-weight:800;
  background:linear-gradient(90deg,#ff1a2a,#ff6b35,#ffd700,#00ff66,#00f0ff,#a855f7,#ff1a2a);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:rainbow-shift 3s linear infinite;
}
@keyframes rainbow-shift { to { background-position:200% center; } }

/* Glow */
.glow-text {
  font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--red);
  animation:glow-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes glow-pulse { from { text-shadow:0 0 10px var(--red),0 0 20px var(--red); } to { text-shadow:0 0 20px var(--red),0 0 50px var(--red),0 0 80px rgba(255,26,42,.4); } }

/* Audio bars */
.audio-bars { display:flex;align-items:flex-end;gap:5px;height:60px; }
.bar {
  width:10px;background:var(--red);border-radius:3px;
  height:var(--h);animation:bar-bounce 1s ease-in-out infinite alternate;
  animation-delay:var(--d);
}
@keyframes bar-bounce { 0% { height:20%; } 100% { height:100%; } }

/* ── Steps ── */
.steps-grid {
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:24px;
}
.step-card {
  padding:36px 28px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--border);text-align:center;
  transition:all .3s;
}
.step-card:hover { border-color:var(--border-red);transform:translateY(-4px);box-shadow:var(--red-glow); }
.step-num {
  font-family:var(--font-mono);font-size:2.5rem;font-weight:700;
  color:var(--red);opacity:.6;margin-bottom:16px;line-height:1;
}
.step-card h3 { font-size:1.1rem;font-weight:700;margin-bottom:10px; }
.step-card p { color:var(--text2);font-size:.88rem;line-height:1.7; }
.step-card code { font-family:var(--font-mono);font-size:.78rem;background:rgba(255,26,42,.1);padding:2px 8px;border-radius:4px;color:var(--red); }
.step-connector { width:2px;height:60px;background:linear-gradient(180deg,transparent,var(--red),transparent); }

/* ── Community ── */
.community-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.community-card {
  display:flex;align-items:center;gap:16px;padding:24px;
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--card);transition:all .25s;
}
.community-card:hover { border-color:var(--border-red);transform:translateY(-3px);box-shadow:var(--red-glow); }
.community-card > i { font-size:1.8rem; }
.community-card h3 { font-size:.95rem;font-weight:700; }
.community-card p { font-size:.8rem;color:var(--text2); }
.community-card .arrow { margin-left:auto;color:var(--text3);font-size:.85rem;transition:transform .2s; }
.community-card:hover .arrow { transform:translateX(4px);color:var(--red); }
.discord-card > i { color:#5865f2; }
.github-card > i { color:#f0f6fc; }
.yt-card > i { color:#ff0000; }
.tiktok-card > i { color:#fff; }
.cs-card > i { color:var(--red); }

/* ── CTA Section ── */
.cta-section { background:linear-gradient(180deg,var(--bg) 0%,rgba(20,2,5,.6) 50%,var(--bg) 100%); }
.cta-box {
  text-align:center;padding:80px 40px;border-radius:var(--r-lg);
  background:rgba(12,2,5,.6);border:1px solid rgba(255,26,42,.2);
  position:relative;overflow:hidden;
}
.cta-bg-glow {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:500px;height:300px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,26,42,.12) 0%,transparent 70%);
  filter:blur(40px);pointer-events:none;
}
.cta-box h2 { font-family:var(--font-display);font-size:clamp(2rem,4vw,3.5rem);font-weight:800;margin-bottom:16px; }
.cta-box p { color:var(--text2);font-size:1.1rem;margin-bottom:36px; }
.cta-box p strong { color:#fff; }
.cta-buttons { display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap; }

/* ── Footer ── */
.footer { border-top:1px solid var(--border);padding:60px 0 30px; }
.footer-inner { display:flex;gap:60px;margin-bottom:48px; }
.footer-brand { max-width:280px; }
.footer-brand .brand { margin-bottom:12px; }
.footer-brand p { color:var(--text3);font-size:.85rem;line-height:1.7; }
.footer-links { display:flex;gap:50px;flex:1;justify-content:flex-end; }
.footer-col { display:flex;flex-direction:column;gap:10px; }
.footer-col h4 { font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:4px; }
.footer-col a { font-size:.88rem;color:var(--text2);transition:color .2s; }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid var(--border); }
.footer-bottom p { font-size:.82rem;color:var(--text3); }
.footer-bottom .red { color:var(--red); }
.footer-socials { display:flex;gap:16px; }
.footer-socials a { width:34px;height:34px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.85rem;transition:all .2s; }
.footer-socials a:hover { color:#fff;border-color:var(--border-red);background:var(--red-dim); }

/* ── Responsive ── */
@media (max-width:1024px) {
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .effects-showcase { grid-template-columns:repeat(2,1fr); }
  .community-cards { grid-template-columns:repeat(2,1fr); }
  .steps-grid { grid-template-columns:1fr;gap:16px; }
  .step-connector { width:40px;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent); }
  .footer-inner { flex-direction:column;gap:36px; }
  .footer-links { justify-content:flex-start; }
}
@media (max-width:640px) {
  .features-grid { grid-template-columns:1fr; }
  .effects-showcase { grid-template-columns:1fr; }
  .community-cards { grid-template-columns:1fr; }
  .hero-stats { flex-direction:column;gap:16px; }
  .stat-sep { width:40px;height:1px;background:var(--border); }
  .footer-links { flex-direction:column;gap:24px; }
  .footer-bottom { flex-direction:column;gap:16px;text-align:center; }
}