/* ═══════════════════════════════════════════════════
   DIGA GAMERS — NFT‑style Dark Gaming Theme
   Typography: Russo One (display) + Chakra Petch (body)
   ═══════════════════════════════════════════════════ */

:root {
  /* Palette — based on user swatch */
  --bg-deep:      #1E0A1E;      /* very dark plum */
  --bg-surface:   #2A0E2A;      /* dark plum surface */
  --bg-card:      rgba(42, 14, 42, 0.75);
  --accent:       #EF3340;      /* red — primary accent */
  --accent-glow:  #FF5A65;      /* lighter red for glows */
  --violet:       #9B30FF;      /* bright violet */
  --violet-glow:  #B366FF;      /* lighter violet */
  --mauve:        #A6569A;      /* medium mauve */
  --mauve-light:  #C47AB8;      /* lighter mauve for text on dark */
  --text-primary: #F0E6EF;      /* warm white — great contrast on plum */
  --text-muted:   #B89AB4;      /* muted mauve — readable on dark plum */
  --whatsapp:     #25D366;
  --font-display: 'Russo One', sans-serif;
  --font-body:    'Chakra Petch', sans-serif;
  --container:    1200px;
  --radius:       16px;
  --radius-sm:    10px;
  --z-bg:         1;
  --z-content:    10;
  --z-nav:        50;
  --z-overlay:    60;
  --z-modal:      70;
}

/* Reset */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; }
}

/* ── Particles canvas ── */
#particlesCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Utility ── */
.section__container { max-width:var(--container); margin:0 auto; padding:0 2rem; }
.section__header { text-align:center; margin-bottom:3.5rem; }
.section__tag {
  display:inline-block; font-family:var(--font-body); font-size:0.8rem; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(239,51,64,0.3); border-radius:999px; padding:0.3rem 1rem; margin-bottom:1rem;
}
.section__title { font-family:var(--font-display); font-size:clamp(2rem,5vw,3rem); line-height:1.2; margin-bottom:1rem; }
.section__desc { color:var(--text-muted); font-size:1.05rem; max-width:600px; margin:0 auto; line-height:1.7; }
.text--gradient {
  background:linear-gradient(135deg, var(--accent), var(--violet));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ══════════════════ BUTTONS ══════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-body);
  font-weight:600; font-size:0.95rem; border:none; border-radius:var(--radius-sm);
  padding:0.75rem 1.6rem; cursor:pointer;
  transition: transform 0.2s, box-shadow 0.25s, background 0.25s; white-space:nowrap;
}
.btn--whatsapp {
  background:var(--whatsapp); color:#fff; font-size:1.05rem; padding:0.85rem 2rem;
  box-shadow:0 4px 20px rgba(37,211,102,0.3);
}
.btn--whatsapp:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(37,211,102,0.5); }

/* ══════════════════ NAVBAR ══════════════════ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  background:rgba(30,10,30,0.8); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(166,86,154,0.12);
}
.navbar__inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--container); margin:0 auto; padding:0.8rem 2rem;
}
.navbar__logo img { height:64px; width:auto; }
.navbar__links { display:flex; gap:2.2rem; }
.navbar__link {
  font-family:var(--font-body); font-weight:500; font-size:0.9rem;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--text-muted);
  position:relative; transition:color 0.2s; cursor:pointer;
}
.navbar__link::after {
  content:''; position:absolute; left:0; bottom:-4px; width:100%; height:2px;
  border-radius:2px; background:var(--accent); transform:scaleX(0);
  transform-origin:right; transition:transform 0.3s ease;
}
.navbar__link:hover, .navbar__link.active { color:#fff; }
.navbar__link:hover::after, .navbar__link.active::after { transform:scaleX(1); transform-origin:left; }
.navbar__cta {
  display:inline-flex; align-items:center; gap:0.4rem;
  background:linear-gradient(135deg, var(--accent), var(--violet));
  color:#fff; font-family:var(--font-body);
  font-weight:700; font-size:0.85rem; border:none; border-radius:var(--radius-sm);
  padding:0.55rem 1.2rem; cursor:pointer; transition:transform 0.2s, box-shadow 0.25s;
  box-shadow:0 4px 16px rgba(239,51,64,0.25);
}
.navbar__cta:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(239,51,64,0.45); }
.navbar__hamburger {
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px;
}
.navbar__hamburger span { display:block; width:24px; height:2px; background:var(--text-primary); border-radius:2px; transition:transform 0.3s, opacity 0.3s; }
.navbar__hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.navbar__hamburger.open span:nth-child(2) { opacity:0; }
.navbar__hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ══════════════════ HERO ══════════════════ */
.hero {
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:120px 2rem 40px; z-index:var(--z-content);
}
.hero__content { text-align:center; max-width:800px; margin-bottom:3rem; }
.hero__title { font-family:var(--font-display); font-size:clamp(2.5rem,7vw,4.5rem); line-height:1.1; margin-bottom:1.2rem; text-transform:uppercase; }
.hero__title--gradient {
  background:linear-gradient(135deg, var(--accent), var(--mauve-light), var(--violet));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero__subtitle { font-size:1.1rem; color:var(--text-muted); max-width:520px; margin:0 auto; line-height:1.7; }

/* Floor reflection */
.hero__floor {
  position:absolute; bottom:0; left:0; right:0; height:200px;
  background:linear-gradient(0deg, rgba(155,48,255,0.04) 0%, transparent 100%);
  pointer-events:none;
}

/* ══════════════════ CAROUSEL ══════════════════ */
.carousel {
  position:relative; width:100%; max-width:1000px; height:420px;
  perspective:1200px; margin:0 auto;
}
.carousel__track {
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform 0.6s cubic-bezier(.4,0,.2,1);
}
.carousel__card {
  position:absolute; width:260px; height:360px;
  left:50%; top:50%; transform:translate(-50%,-50%);
  transition:all 0.6s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.carousel__card-inner {
  width:100%; height:100%; border-radius:var(--radius);
  background:var(--bg-card); backdrop-filter:blur(12px);
  border:1px solid rgba(166,86,154,0.15);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  transition:box-shadow 0.4s, border-color 0.4s;
}
.carousel__card.active .carousel__card-inner {
  border-color:rgba(239,51,64,0.45);
  box-shadow:0 30px 80px rgba(155,48,255,0.2), 0 0 40px rgba(239,51,64,0.1);
}
.carousel__card-img { width:100%; height:240px; object-fit:cover; }
.carousel__card-info { padding:0.8rem 1rem 0; flex:1; }
.carousel__card-name { display:block; font-family:var(--font-display); font-size:0.95rem; margin-bottom:0.3rem; }
.carousel__card-price { font-size:0.85rem; color:var(--accent-glow); font-weight:600; }
.carousel__card-btn {
  margin:0.6rem 1rem 1rem; padding:0.45rem 0; border:none; border-radius:var(--radius-sm);
  background:linear-gradient(135deg, var(--accent), var(--violet));
  color:#fff; font-family:var(--font-body); font-weight:700; font-size:0.8rem;
  cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; text-transform:uppercase;
}
.carousel__card-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(239,51,64,0.3); }

/* Arrows */
.carousel__arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:20;
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(166,86,154,0.25);
  background:rgba(30,10,30,0.8); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 0.2s, border-color 0.2s;
}
.carousel__arrow:hover { background:rgba(239,51,64,0.15); border-color:var(--accent); }
.carousel__arrow--left { left:0; }
.carousel__arrow--right { right:0; }

/* ══════════════════ PRODUCTS GRID ══════════════════ */
.products { position:relative; padding:6rem 0; z-index:var(--z-content); }
.product-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1.5rem;
}
.product-tile {
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  aspect-ratio:3/4; background:var(--bg-card);
  border:1px solid rgba(166,86,154,0.1);
  transition:transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s;
}
.product-tile img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.product-tile:hover { transform:translateY(-8px); box-shadow:0 16px 50px rgba(155,48,255,0.2); }
.product-tile:hover img { transform:scale(1.08); }
.product-tile__overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:flex-end; padding:1rem;
  background:linear-gradient(0deg, rgba(30,10,30,0.9) 0%, transparent 60%);
}
.product-tile__overlay h3 { font-family:var(--font-display); font-size:0.9rem; margin-bottom:0.2rem; }
.product-tile__price { font-size:0.8rem; color:var(--accent-glow); font-weight:600; margin-bottom:0.5rem; }
.product-tile__btn {
  padding:0.4rem 0.8rem; border:none; border-radius:6px;
  background:linear-gradient(135deg, var(--accent), var(--violet));
  color:#fff; font-family:var(--font-body);
  font-weight:700; font-size:0.75rem; cursor:pointer; text-transform:uppercase;
  align-self:flex-start; transition:transform 0.2s;
}
.product-tile__btn:hover { transform:translateY(-1px); }

/* ══════════════════ FEATURES ══════════════════ */
.features { padding:5rem 0; z-index:var(--z-content); position:relative; }
.features__grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:2rem;
}
.feature-card {
  text-align:center; padding:2rem 1.5rem; border-radius:var(--radius);
  border:1px solid rgba(166,86,154,0.1); background:var(--bg-card);
  backdrop-filter:blur(8px); transition:transform 0.3s, border-color 0.3s;
}
.feature-card:hover { transform:translateY(-5px); border-color:rgba(239,51,64,0.3); }
.feature-card__icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:14px; margin-bottom:1.2rem;
}
.feature-card__icon--purple { background:linear-gradient(135deg,rgba(155,48,255,0.25),rgba(155,48,255,0.05)); color:var(--violet-glow); }
.feature-card__icon--cyan   { background:linear-gradient(135deg,rgba(239,51,64,0.2),rgba(239,51,64,0.05)); color:var(--accent-glow); }
.feature-card__icon--green  { background:linear-gradient(135deg,rgba(166,86,154,0.2),rgba(166,86,154,0.05)); color:var(--mauve-light); }
.feature-card h3 { font-family:var(--font-display); font-size:1.1rem; margin-bottom:0.6rem; }
.feature-card p { font-size:0.9rem; color:var(--text-muted); line-height:1.6; }

/* ══════════════════ CONTACT ══════════════════ */
.contact { padding:6rem 0; position:relative; z-index:var(--z-content); }
.contact__inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.contact__text .section__title { text-align:left; }
.contact__text .section__desc { margin:0 0 2rem; text-align:left; }
.contact__visual { display:flex; align-items:center; justify-content:center; }
.contact__ring {
  width:280px; height:280px; border-radius:50%; border:2px solid rgba(239,51,64,0.2);
  display:flex; align-items:center; justify-content:center; position:relative;
  animation:ring-pulse 4s ease-in-out infinite;
}
.contact__ring::before {
  content:''; position:absolute; inset:-16px; border-radius:50%;
  border:1px solid rgba(155,48,255,0.2); animation:ring-rotate 20s linear infinite;
}
.contact__ring::after {
  content:''; position:absolute; inset:-32px; border-radius:50%;
  border:1px dashed rgba(166,86,154,0.15); animation:ring-rotate 30s linear infinite reverse;
}
.contact__ring-inner {
  width:180px; height:180px; border-radius:50%;
  background:linear-gradient(135deg,rgba(239,51,64,0.1),rgba(155,48,255,0.08));
  backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(239,51,64,0.2);
}
.contact__ring-text {
  font-family:var(--font-display); font-size:1.2rem; text-align:center;
  line-height:1.3; color:var(--accent-glow); text-transform:uppercase;
}
@keyframes ring-pulse { 0%,100%{box-shadow:0 0 30px rgba(239,51,64,0.05);} 50%{box-shadow:0 0 60px rgba(239,51,64,0.15);} }
@keyframes ring-rotate { to{transform:rotate(360deg);} }

/* ══════════════════ FOOTER ══════════════════ */
.footer { padding:3rem 0 2rem; border-top:1px solid rgba(166,86,154,0.12); position:relative; z-index:var(--z-content); }
.footer__inner { display:flex; align-items:center; gap:3rem; }
.footer__logo-wrap { flex-shrink:0; }
.footer__logo { height:80px; width:auto; }
.footer__content { flex:1; }
.footer__tagline { color:var(--text-muted); font-size:0.88rem; margin-bottom:0.8rem; }
.footer__nav { display:flex; gap:2rem; margin-bottom:0.6rem; }
.footer__nav a { font-size:0.85rem; color:var(--text-muted); transition:color 0.2s; cursor:pointer; }
.footer__nav a:hover { color:var(--accent); }
.footer__copy { font-size:0.75rem; color:rgba(184,154,180,0.5); }

/* ══════════════════ FAB CHAT ══════════════════ */
.fab-chat {
  position:fixed; bottom:2rem; right:2rem; z-index:var(--z-overlay);
  width:60px; height:60px; border-radius:50%; border:none; background:var(--whatsapp);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 24px rgba(37,211,102,0.4);
  transition:transform 0.25s, box-shadow 0.25s; animation:fab-bounce 2s ease-in-out infinite;
}
.fab-chat:hover { transform:scale(1.1); box-shadow:0 8px 32px rgba(37,211,102,0.6); }
@keyframes fab-bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

/* ══════════════════ CHAT MODAL ══════════════════ */
.chat-modal {
  position:fixed; bottom:100px; right:2rem; z-index:var(--z-modal);
  width:360px; max-height:480px; border-radius:var(--radius);
  background:var(--bg-surface); border:1px solid rgba(166,86,154,0.15);
  box-shadow:0 16px 60px rgba(0,0,0,0.6); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; pointer-events:none; transform:translateY(20px) scale(0.95);
  transition:opacity 0.3s, transform 0.3s;
}
.chat-modal.open { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }
.chat-modal__content { display:flex; flex-direction:column; height:100%; }
.chat-modal__close {
  position:absolute; top:12px; right:12px; background:none; border:none;
  color:var(--text-muted); cursor:pointer; transition:color 0.2s;
}
.chat-modal__close:hover { color:#fff; }
.chat-modal__header {
  display:flex; align-items:center; gap:0.8rem; padding:1rem 1.2rem;
  background:rgba(239,51,64,0.06); border-bottom:1px solid rgba(166,86,154,0.12);
}
.chat-modal__avatar { width:44px; height:44px; border-radius:50%; object-fit:contain; background:var(--bg-deep); }
.chat-modal__status { display:block; font-size:0.75rem; color:var(--whatsapp); }
.chat-modal__body { flex:1; padding:1.2rem; overflow-y:auto; }
.chat-modal__bubble {
  background:rgba(155,48,255,0.08); border:1px solid rgba(155,48,255,0.15);
  border-radius:12px 12px 12px 4px; padding:0.8rem 1rem; font-size:0.88rem;
  line-height:1.5; color:var(--text-primary); max-width:85%;
}
.chat-modal__bubble--user {
  background:rgba(239,51,64,0.12); border-color:rgba(239,51,64,0.2);
  border-radius:12px 12px 4px 12px; margin-left:auto; margin-top:0.8rem;
}
.chat-modal__footer { display:flex; gap:0.5rem; padding:0.8rem 1rem; border-top:1px solid rgba(166,86,154,0.12); }
.chat-modal__input {
  flex:1; background:rgba(30,10,30,0.6); border:1px solid rgba(166,86,154,0.2);
  border-radius:var(--radius-sm); padding:0.6rem 1rem; color:var(--text-primary);
  font-family:var(--font-body); font-size:0.88rem; outline:none; transition:border-color 0.2s;
}
.chat-modal__input:focus { border-color:var(--accent); }
.chat-modal__input::placeholder { color:var(--text-muted); }
.chat-modal__send {
  background:var(--whatsapp); border:none; color:#fff; border-radius:var(--radius-sm);
  width:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s;
}
.chat-modal__send:hover { background:#1eba58; }

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width:768px) {
  .navbar__links, .navbar__cta { display:none; }
  .navbar__hamburger { display:flex; }
  .navbar__links.mobile-open {
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:rgba(30,10,30,0.95); backdrop-filter:blur(16px); padding:1.5rem 2rem;
    gap:1.2rem; border-bottom:1px solid rgba(166,86,154,0.12);
  }
  .hero__title { font-size:clamp(2rem,8vw,3rem); }
  .carousel { height:360px; }
  .carousel__card { width:200px; height:280px; }
  .carousel__card-img { height:180px; }
  .contact__inner { grid-template-columns:1fr; gap:2rem; text-align:center; }
  .contact__text .section__title, .contact__text .section__desc { text-align:center; margin-left:auto; margin-right:auto; }
  .contact__visual { order:-1; }
  .contact__ring { width:200px; height:200px; }
  .contact__ring-inner { width:130px; height:130px; }
  .chat-modal { right:1rem; left:1rem; width:auto; }
  .product-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  .footer__inner { flex-direction:column; text-align:center; }
  .footer__logo { height:60px; }
}