@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0B0B0B;
  --bg2: #111111;
  --bg3: #181818;
  --card: #141414;
  --card-b: rgba(255,255,255,0.07);
  --text: #F0E8DF;
  --text-m: rgba(240,232,221,0.55);
  --text-d: rgba(240,232,221,0.28);
  --brand-a: #FF3D77;
  --brand-b: #FF9A00;
  --grad: linear-gradient(135deg, #FF3D77 0%, #FF9A00 100%);
  --fire: #FF6B00;
  --cheddar: #FFC247;
  --glow: rgba(255,107,0,0.22);
  --font-d: 'Bebas Neue', sans-serif;
  --font-b: 'Plus Jakarta Sans', sans-serif;
  --r: 14px;
  --max: 1280px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
::selection { background: var(--brand-a); color: #fff; }

img { max-width: 100%; display: block; }

/* ── Gradient text ── */
.g-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Section label ── */
.s-label {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-a);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.s-label::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--brand-a);
  display: block;
}

/* ── Reveal animations ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(.25,.46,.45,.94),
              transform 0.8s cubic-bezier(.25,.46,.45,.94);
}
[data-reveal].on { opacity: 1; transform: translateY(0); }

[data-reveal-l] {
  opacity: 0; transform: translateX(-32px);
  transition: opacity 0.8s cubic-bezier(.25,.46,.45,.94),
              transform 0.8s cubic-bezier(.25,.46,.45,.94);
}
[data-reveal-l].on { opacity: 1; transform: translateX(0); }

[data-reveal-r] {
  opacity: 0; transform: translateX(32px);
  transition: opacity 0.8s cubic-bezier(.25,.46,.45,.94),
              transform 0.8s cubic-bezier(.25,.46,.45,.94);
}
[data-reveal-r].on { opacity: 1; transform: translateX(0); }

/* ── Buttons ── */
.btn-p {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad); color: #fff;
  font-family: var(--font-b); font-weight: 700;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  border: none; border-radius: 100px; padding: 15px 32px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: opacity .25s, transform .2s, box-shadow .3s;
}
.btn-p:hover { opacity:.9; transform:translateY(-2px); box-shadow:0 10px 32px rgba(255,61,119,.3); }
.btn-p:active { transform:translateY(0); }

.btn-o {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--text);
  font-family: var(--font-b); font-weight: 600;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1.5px solid rgba(240,232,221,.22); border-radius: 100px;
  padding: 14px 30px; cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s, color .25s, transform .2s;
}
.btn-o:hover { border-color:rgba(255,107,0,.5); color:var(--cheddar); transform:translateY(-2px); }

/* ── Marquee ── */
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mq-wrap { overflow: hidden; white-space: nowrap; }
.mq-inner { display: inline-flex; animation: mq 35s linear infinite; }
.mq-wrap:hover .mq-inner { animation-play-state: paused; }

/* ── Cards hover ── */
.p-card {
  transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s;
  cursor: pointer;
}
.p-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 28px rgba(255,107,0,.12);
}

/* ── Nav link ── */
.nl {
  position: relative;
  color: var(--text-m); text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; transition: color .25s;
  font-family: var(--font-b);
}
.nl::after {
  content:''; position:absolute; left:0; bottom:-3px;
  width:0; height:1px; background:var(--grad);
  transition: width .3s ease;
}
.nl:hover { color: var(--text); }
.nl:hover::after { width: 100%; }

/* ── FAQ accordion ── */
.faq-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.45s cubic-bezier(.25,.46,.45,.94),
              opacity 0.35s ease;
  opacity: 0;
}
.faq-body.open { max-height: 300px; opacity: 1; }

/* ── Keyframes ── */
@keyframes float {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}
}
@keyframes fadeUp {
  from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)}
}
@keyframes spin {
  from{transform:rotate(0deg)} to{transform:rotate(360deg)}
}
@keyframes pulseGlow {
  0%,100%{box-shadow:0 0 18px rgba(255,107,0,.2)}
  50%{box-shadow:0 0 32px rgba(255,107,0,.42)}
}

/* ── Review cards scroll ── */
.reviews-track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 4px;
}
.reviews-track::-webkit-scrollbar { display: none; }
.review-card { scroll-snap-align: start; flex-shrink: 0; }

/* ── Menu tabs ── */
.menu-tab {
  background: transparent; border: 1.5px solid var(--card-b);
  color: var(--text-m); font-family: var(--font-b);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 10px 20px;
  border-radius: 100px; cursor: pointer;
  transition: all .25s;
}
.menu-tab:hover { border-color: rgba(255,107,0,.4); color: var(--text); }
.menu-tab.active {
  background: var(--grad); border-color: transparent; color: #fff;
}

/* ── Mobile ── */
@media(max-width:768px) {
  .hide-mob { display: none !important; }
  .show-mob { display: flex !important; }
}
@media(min-width:769px) {
  .show-mob { display: none !important; }
}