/* Wintino — Pulp Fiction universe, black bg + gold/yellow CTA */

:root {
  --accent: #ffcc00;
  --accent-2: #f1b211;
  --bg: #0a0a0a;
  --bone: #f5f0e1;
  --blood: #c1121f;
  --surface: rgba(245,240,225,0.04);
  --surface-2: rgba(245,240,225,0.08);
  --muted: rgba(245,240,225,0.65);
}

html { scroll-behavior: smooth; }
body { background: #0a0a0a; }

/* Pulpy noise / grain over hero */
.noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.85  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px;
  pointer-events: none;
}

/* ----- Prose readability (Tailwind CDN typography substitute) ----- */
.prose,
.prose-invert {
  line-height: 1.75;
  color: var(--bone);
}
.prose h1, .prose-invert h1 { font-family: 'Bebas Neue','Anton',Impact,sans-serif; font-size: 2.5rem; font-weight: 800; margin: 1rem 0 1.25rem; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; }
.prose h2, .prose-invert h2 { font-family: 'Bebas Neue','Anton',Impact,sans-serif; font-size: 1.75rem; font-weight: 700; margin: 2.25rem 0 0.85rem; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); }
.prose h3, .prose-invert h3 { font-family: 'Bebas Neue','Anton',Impact,sans-serif; font-size: 1.3rem; font-weight: 600; margin: 1.6rem 0 0.5rem; letter-spacing: 0.02em; text-transform: uppercase; }
.prose p, .prose-invert p { margin: 0.85rem 0; }
.prose ul, .prose-invert ul { list-style: disc; padding-left: 1.4rem; margin: 0.85rem 0; }
.prose ol, .prose-invert ol { list-style: decimal; padding-left: 1.4rem; margin: 0.85rem 0; }
.prose li, .prose-invert li { margin: 0.3rem 0; }
.prose a, .prose-invert a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong, .prose-invert strong { font-weight: 700; color: var(--bone); }
.prose table, .prose-invert table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
.prose th, .prose td, .prose-invert th, .prose-invert td { padding: 0.65rem 0.85rem; border-bottom: 1px solid rgba(245,240,225,0.1); text-align: left; }
.prose th, .prose-invert th { background: var(--surface); font-weight: 700; color: var(--accent); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.06em; }
.prose hr { border-color: rgba(255,204,0,0.2); margin: 2rem 0; }
.prose details { background: var(--surface); border: 1px solid rgba(255,204,0,0.2); border-radius: 0.75rem; padding: 0.8rem 1.1rem; margin: 0.5rem 0; }
.prose details summary { cursor: pointer; font-weight: 600; color: var(--accent); list-style: none; }
.prose details summary::-webkit-details-marker { display: none; }
.prose details summary::before { content: "▸ "; }
.prose details[open] summary::before { content: "▾ "; }
.prose details > p { margin-top: 0.5rem; color: rgba(245,240,225,0.85); }

/* ----- Slot card ----- */
.slot-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
  border: 1px solid rgba(255,204,0,0.15);
  transition: border-color 0.3s ease;
}
.slot-card:hover { border-color: rgba(255,204,0,0.6); }
.slot-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.slot-card:hover img { transform: scale(1.07); }
.slot-card .badge {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  background: var(--accent); color: #0a0a0a;
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem; border-radius: 999px;
}
.slot-card__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 0.75rem 0.65rem;
  background: linear-gradient(to top, rgba(10,10,10,0.95) 35%, transparent);
  z-index: 1;
}
.slot-card__meta h3 { font-family: 'Bebas Neue','Anton',sans-serif; font-size: 0.95rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; color: var(--bone); }
.slot-card__meta p { font-size: 0.7rem; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.15rem; }

/* ----- Why cards ----- */
.why-card {
  background: linear-gradient(160deg, rgba(255,204,0,0.05), rgba(193,18,31,0.05));
  border: 1px solid rgba(255,204,0,0.2);
  border-radius: 1.25rem;
  padding: 1.5rem;
}
.why-card__emoji {
  font-size: 2rem;
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,204,0,0.1);
  border: 1px solid rgba(255,204,0,0.3);
  border-radius: 50%;
  margin-bottom: 0.85rem;
}

/* ----- Bento ----- */
.bento-card {
  position: relative;
  background: rgba(245,240,225,0.03);
  border: 1px solid rgba(245,240,225,0.1);
  border-radius: 1.25rem;
  padding: 1.5rem;
}
.bento-tag {
  position: absolute; top: 1rem; right: 1rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  background: rgba(255,204,0,0.15);
  color: var(--accent);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.1em;
}

/* ----- Payment tabs ----- */
.pay-tab {
  background: transparent;
  color: rgba(245,240,225,0.6);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pay-tab:hover { color: var(--accent); }
.pay-tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(255,204,0,0.06);
}

/* ----- FAQ ----- */
.faq-item {
  background: rgba(245,240,225,0.03);
  border: 1px solid rgba(255,204,0,0.2);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
}
.faq-item summary {
  cursor: pointer;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: uppercase;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+ "; font-weight: 700; }
.faq-item[open] summary::before { content: "− "; }
.faq-item p { margin-top: 0.6rem; color: rgba(245,240,225,0.8); font-size: 0.92rem; line-height: 1.6; }

/* ----- Reviews carousel ----- */
.reviews-carousel { overflow: hidden; }
.reviews-track { display: flex; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.review-card {
  flex: 0 0 100%;
  background: rgba(245,240,225,0.04);
  border: 1px solid rgba(255,204,0,0.2);
  border-radius: 1.25rem;
  padding: 1.5rem;
  margin-right: 0;
}
.rev-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(245,240,225,0.25);
  border: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.rev-dot-active { background: var(--accent); }

/* ----- RG quiz ----- */
.rg-quiz {
  background: rgba(245,240,225,0.04);
  border: 2px solid rgba(255,204,0,0.3);
  border-radius: 1.5rem;
  padding: 1.75rem;
}
.rg-quiz fieldset { border: 0; padding: 0; }
.rg-quiz label { user-select: none; }
.rg-quiz input[type="radio"] { accent-color: var(--accent); }

/* ----- Big winner ----- */
.big-winner { position: relative; }
.big-winner__overlay {
  position: absolute; left: 1.25rem; bottom: 1.25rem; right: 1.25rem;
  background: rgba(10,10,10,0.85); backdrop-filter: blur(8px);
  padding: 1rem 1.25rem; border-radius: 1rem;
  font-size: 0.95rem;
  border: 1px solid rgba(255,204,0,0.3);
  font-family: 'Special Elite', monospace;
}

/* =========================================================
 * ANIMATIONS — tilt + shimmer (the two chosen)
 * ========================================================= */

/* TILT — subtle 3D card lift on hover */
.tilt {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  transform-style: preserve-3d;
}
.tilt:hover {
  transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-5px);
  box-shadow: 0 25px 50px -12px rgba(255, 204, 0, 0.3);
}

/* SHIMMER — sweeping light pass on accent text/buttons */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(110deg, var(--accent) 0%, #fff 50%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* shimmer on the hero panel border */
.hero-panel::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,204,0,0.4) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: shimmer 6s linear infinite;
  z-index: -1;
  pointer-events: none;
}
.hero-panel { position: relative; isolation: isolate; }

/* CTA card used in inner pages */
.cta-card {
  margin-top: 3rem;
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(255,204,0,0.18), rgba(193,18,31,0.25));
  border: 2px solid rgba(255,204,0,0.4);
}
.cta-card h2 { color: var(--accent); margin-top: 0; }
.cta-card a.cta-btn {
  display: inline-block;
  background: var(--accent);
  color: #0a0a0a;
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.2s;
}
.cta-card a.cta-btn:hover { background: var(--accent-2); }

/* Trouble-table on inner pages */
.prose .trouble-table th { background: rgba(193,18,31,0.15); color: #ff6b6b; }