/* ============================================================
   BARDAK — Landing site design system
   Colors & style pulled from the Bardak Pro app UI
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --bardak-orange:      #FF7A45;   /* top of app gradient            */
  --bardak-red:         #E83A1F;   /* mid app gradient / brand red   */
  --bardak-red-deep:    #C7280F;   /* bottom of gradient / shadows   */
  --bardak-red-ink:     #8E1B08;   /* darkest red for outlines/text  */

  /* ---- Accent buttons (from app menu) ---- */
  --green:        #5FB52C;
  --green-dark:   #4A8F20;
  --purple:       #9D7FE6;
  --purple-dark:  #7B5FD0;
  --blue:         #2E78E0;
  --blue-dark:    #205BB0;
  --gold:         #FBB814;   /* "PRO" + coins */
  --gold-dark:    #E09A00;

  /* ---- Neutrals ---- */
  --ink:          #2B0E08;   /* near-black brown (settings buttons) */
  --cream:        #FFF6EE;
  --white:        #FFFFFF;
  --muted:        rgba(255, 255, 255, 0.78);
  --muted-ink:    #6B4A40;

  /* ---- Surfaces ---- */
  --bg-gradient: linear-gradient(165deg, var(--bardak-orange) 0%, var(--bardak-red) 48%, var(--bardak-red-deep) 100%);
  --card-bg:     rgba(255, 255, 255, 0.10);
  --card-border: rgba(255, 255, 255, 0.22);

  /* ---- Type ---- */
  --font-display: "Baloo 2", "Fredoka", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, -apple-system, sans-serif;

  /* ---- Shape ---- */
  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Shadow (chunky game style) ---- */
  --shadow-btn:  0 6px 0 rgba(0,0,0,0.22), 0 10px 22px rgba(0,0,0,0.18);
  --shadow-card: 0 18px 40px rgba(120, 20, 0, 0.22);
  --outline-w:   3px;

  --maxw: 1140px;
}

/* ============================================================ Reset */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.08; font-weight: 800; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.section { padding: 88px 0; position: relative; }
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  font-size: .8rem; color: var(--bardak-red);
}
.section-title { font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--ink); }
.section-lead { font-size: 1.12rem; color: var(--muted-ink); max-width: 640px; }
.center { text-align: center; margin-inline: auto; }

/* ============================================================ Buttons */
.btn {
  --c: var(--green); --cd: var(--green-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: #fff; padding: 15px 30px; border: none; cursor: pointer;
  background: var(--c); border-radius: var(--radius);
  box-shadow: inset 0 -5px 0 var(--cd), var(--shadow-btn);
  -webkit-text-stroke: .4px rgba(0,0,0,.15);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--cd), 0 3px 0 rgba(0,0,0,.22); }
.btn--green  { --c: var(--green);  --cd: var(--green-dark); }
.btn--purple { --c: var(--purple); --cd: var(--purple-dark); }
.btn--blue   { --c: var(--blue);   --cd: var(--blue-dark); }
.btn--gold   { --c: var(--gold);   --cd: var(--gold-dark); color: var(--ink); -webkit-text-stroke: 0; }
.btn--ghost  {
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
  color: #fff;
}
.btn--ghost:active { transform: translateY(1px); }
.btn--lg { font-size: 1.18rem; padding: 18px 38px; }

/* ============================================================ Header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: url("/assets/img/texture.svg") repeat, var(--bg-gradient);
  background-size: 180px 180px, cover;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.nav { display: flex; align-items: center; gap: 18px; height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand__logo { height: 60px; width: auto; filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); }
.footer-brand .brand__logo { height: 54px; }
.nav__links { display: flex; gap: 6px; align-items: center; }
.nav__links a {
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  padding: 8px 14px; border-radius: var(--radius-pill); opacity: .92;
}
.nav__links a:hover { background: rgba(255,255,255,.16); opacity: 1; }
.nav__links a.active {
  opacity: 1; color: var(--bardak-red); background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.nav__links a.active:hover { background: #fff; }

/* Language switcher */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(0,0,0,.18); color: #fff; border: 2px solid rgba(255,255,255,.3);
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  padding: 7px 14px; border-radius: var(--radius-pill);
}
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px;
  background: #fff; border-radius: var(--radius); padding: 6px;
  box-shadow: var(--shadow-card); display: none; z-index: 80;
}
.lang__menu.open { display: block; }
.lang__menu a {
  display: flex; gap: 10px; align-items: center; padding: 10px 12px;
  border-radius: 12px; color: var(--ink); font-weight: 700;
}
.lang__menu a:hover { background: var(--cream); }
.lang__menu a[aria-current="true"] { color: var(--bardak-red); }

.nav__toggle {
  display: none; background: rgba(0,0,0,.18); border: 2px solid rgba(255,255,255,.3);
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer; color:#fff;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content:""; display:block; width: 20px; height: 2.5px; background:#fff; border-radius: 2px;
  margin-inline:auto; position: relative;
}
.nav__toggle span::before { position:absolute; top:-6px; }
.nav__toggle span::after  { position:absolute; top:6px; }

/* ============================================================ Hero */
.hero {
  background: url("/assets/img/texture.svg") repeat, var(--bg-gradient);
  background-size: 180px 180px, cover;
  color: #fff; position: relative; overflow: hidden;
  padding: 64px 0 150px;
}
.hero::after { /* jagged mountain band like the app menu screen */
  content:""; position:absolute; left:0; right:0; bottom:0; height: 230px;
  background: rgba(0,0,0,.14);
  clip-path: polygon(0 55%, 9% 34%, 18% 56%, 28% 30%, 38% 58%, 48% 26%,
                     58% 54%, 68% 32%, 78% 58%, 88% 36%, 100% 56%, 100% 100%, 0 100%);
  pointer-events:none;
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  position: relative; z-index: 2;
}
.hero__badge {
  display:inline-flex; align-items:center; gap:8px; background: rgba(0,0,0,.2);
  border:2px solid rgba(255,255,255,.28); border-radius: var(--radius-pill);
  padding: 7px 16px; font-family: var(--font-display); font-weight:700; font-size:.86rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem); margin: 18px 0 14px;
  text-shadow: 0 3px 0 var(--bardak-red-ink), 0 6px 14px rgba(0,0,0,.25);
}
.hero h1 .pop { color: var(--gold); -webkit-text-stroke: 1.5px var(--bardak-red-ink); }
.hero__lead { font-size: 1.2rem; color: var(--muted); max-width: 520px; }
.hero__cta { display:flex; flex-wrap:wrap; gap: 14px; margin: 28px 0 18px; }
.hero__stats { display:flex; gap: 26px; flex-wrap:wrap; margin-top: 26px; }
.hero__stat b { font-family: var(--font-display); font-size: 1.7rem; display:block; }
.hero__stat span { font-size:.86rem; color: var(--muted); }

/* store badges */
.store-badges { display:flex; gap: 14px; flex-wrap:wrap; }
.store-badge {
  display:inline-flex; align-items:center; gap:12px;
  background:#000; color:#fff; min-width: 188px; height: 60px; padding: 0 20px;
  border-radius: 14px; border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.store-badge:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.34); background:#111; }
.store-badge:active { transform: translateY(0); }
.store-badge svg { width: 30px; height: 30px; flex: none; }
.store-badge span { display:flex; flex-direction:column; line-height:1.15; }
.store-badge small {
  font-size:.66rem; letter-spacing:.04em; text-transform:uppercase;
  opacity:.85; font-weight:600;
}
.store-badge b { font-family: var(--font-display); font-size: 1.18rem; font-weight:700; letter-spacing:.01em; }

/* phone mockup */
.phone {
  width: 290px; margin-inline:auto; aspect-ratio: 402/874; position: relative;
  border-radius: 44px; background: #1a0a06; padding: 12px;
  box-shadow: 0 30px 70px rgba(80,10,0,.45), inset 0 0 0 2px rgba(255,255,255,.08);
  transform: rotate(3deg);
}
.phone__screen {
  position:absolute; inset:12px; border-radius: 34px; overflow:hidden;
  background: var(--bg-gradient);
}
.phone__notch {
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width: 96px; height: 26px; background:#000; border-radius: 14px; z-index:5;
}
.float { animation: float 5s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:rotate(3deg) translateY(0)} 50%{transform:rotate(3deg) translateY(-14px)} }

/* ============================================================ Stat strip */
.statstrip { background: var(--ink); color:#fff; padding: 34px 0; }
.statstrip__grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align:center; }
.statstrip b { font-family: var(--font-display); font-size: clamp(1.6rem,3.4vw,2.4rem); color: var(--gold); display:block; }
.statstrip span { color: var(--muted); font-size:.92rem; }

/* ============================================================ Features */
.features { background: var(--cream); }
.feature-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; }
.feature {
  background:#fff; border-radius: var(--radius-lg); padding: 30px 26px;
  box-shadow: 0 12px 30px rgba(120,20,0,.08); border: 2px solid #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(120,20,0,.16); }
.feature__icon {
  width: 58px; height: 58px; border-radius: 16px; display:grid; place-items:center;
  color:#fff; margin-bottom: 16px; box-shadow: var(--shadow-btn);
}
.feature h3 { font-size: 1.3rem; margin-bottom: 8px; color: var(--ink); }
.feature p { color: var(--muted-ink); font-size: .98rem; }

/* ============================================================ Modes */
.modes {
  background: url("/assets/img/texture.svg") repeat, var(--bg-gradient);
  background-size: 180px 180px, cover; color:#fff;
}
.modes .section-title, .modes .eyebrow { color:#fff; }
.mode-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.mode {
  background: var(--card-bg); border:2px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 32px; backdrop-filter: blur(6px);
}
.mode__pill {
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.1em; padding: 5px 14px; border-radius: var(--radius-pill);
  color:#fff; margin-bottom: 14px;
}
.mode h3 { font-size: 1.6rem; margin-bottom: 10px; }
.mode p { color: var(--muted); }

/* ============================================================ Steps */
.steps-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 46px; }
.step { text-align:center; position:relative; }
.step__num {
  width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--bg-gradient); color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.8rem;
  box-shadow: var(--shadow-btn); border: 3px solid #fff;
}
.step h3 { font-size:1.2rem; margin-bottom:6px; color: var(--ink); }
.step p { color: var(--muted-ink); }

/* ============================================================ Languages */
.langs { background: var(--cream); }
.lang-chips { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top: 34px; }
.lang-chip {
  display:flex; align-items:center; gap:10px; background:#fff; padding: 12px 22px;
  border-radius: var(--radius-pill); font-family:var(--font-display); font-weight:700;
  box-shadow: 0 8px 20px rgba(120,20,0,.1); color: var(--ink);
}
.lang-chip span:first-child { font-size: 1.4rem; }

/* ============================================================ Blog */
.blog { background:#fff; }
.post-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px; }
.post-card {
  display:flex; flex-direction:column; background: var(--cream); border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: 0 12px 30px rgba(120,20,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(120,20,0,.16); }
.post-card__cover { aspect-ratio: 16/9; background: var(--bg-gradient); display:grid; place-items:center; color:#fff; }
.post-card__cover svg { width: 64px; height: 64px; opacity:.9; }
.post-card__body { padding: 22px 22px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.post-card__tag { font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--bardak-red); font-family:var(--font-display); }
.post-card h3 { font-size:1.18rem; color: var(--ink); }
.post-card p { color: var(--muted-ink); font-size:.95rem; flex:1; }
.post-card__more { font-family:var(--font-display); font-weight:700; color: var(--bardak-red); }

/* Article page */
.article { background:#fff; }
.article__hero {
  background: url("/assets/img/texture.svg") repeat, var(--bg-gradient);
  background-size: 180px 180px, cover; color:#fff; padding: 70px 0 56px; text-align:center;
}
.article__hero h1 { font-size: clamp(2rem,4.4vw,3rem); max-width: 760px; margin: 14px auto 0; }
.article__meta { color: var(--muted); font-weight:700; font-family:var(--font-display); }
.prose { max-width: 740px; margin: 0 auto; padding: 56px 22px 80px; }
.prose h2 { font-size:1.7rem; margin: 34px 0 12px; color: var(--ink); }
.prose h3 { font-size:1.3rem; margin: 24px 0 8px; color: var(--ink); }
.prose p, .prose li { font-size: 1.08rem; color: #3a2520; margin-bottom: 14px; }
.prose ul { padding-left: 22px; list-style: disc; }
.prose a { color: var(--bardak-red); font-weight:700; text-decoration: underline; }
.prose blockquote {
  border-left: 5px solid var(--gold); background: var(--cream); padding: 16px 22px;
  border-radius: 0 14px 14px 0; margin: 22px 0; font-style: italic; color: var(--muted-ink);
}

/* ============================================================ FAQ */
.faq { background: var(--cream); }
.faq-list { max-width: 760px; margin: 40px auto 0; display:flex; flex-direction:column; gap: 12px; }
.faq-item { background:#fff; border-radius: var(--radius); box-shadow: 0 8px 20px rgba(120,20,0,.07); overflow:hidden; }
.faq-q {
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--ink);
  padding: 20px 24px; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq-q::after { content:"+"; font-size:1.6rem; color: var(--bardak-red); transition: transform .2s; }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition: max-height .26s ease; }
.faq-a p { padding: 0 24px 22px; color: var(--muted-ink); }

/* ============================================================ CTA */
.cta { background: var(--ink); color:#fff; text-align:center; }
.cta h2 { font-size: clamp(2rem,4.6vw,3rem); }
.cta p { color: var(--muted); max-width:560px; margin: 14px auto 26px; }
.cta .store-badges { justify-content:center; }

/* ============================================================ Footer */
.site-footer { background:#1c0905; color: var(--muted); padding: 60px 0 30px; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand .brand__name { font-size: 1.3rem; }
.footer-col h4 { color:#fff; font-size:1rem; margin-bottom: 14px; font-family:var(--font-display); }
.footer-col a { display:block; padding: 5px 0; color: var(--muted); }
.footer-col a:hover { color:#fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.86rem;
}

/* ============================================================ Reveal animation */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* ============================================================ Responsive */
@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; text-align:center; }
  .hero__cta, .hero__stats, .store-badges { justify-content:center; }
  .hero__lead { margin-inline:auto; }
  .hero__media { order:-1; }
  .feature-grid, .post-grid, .steps-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .nav__links { display:none; }
  .nav__toggle { display:grid; place-items:center; }
  .nav.open .nav__links {
    display:flex; position:absolute; top:76px; left:0; right:0; flex-direction:column;
    background: var(--bardak-red); padding: 16px; gap:4px; box-shadow: var(--shadow-card);
  }
  .feature-grid, .post-grid, .steps-grid, .mode-grid, .statstrip__grid, .footer-grid {
    grid-template-columns: 1fr;
  }
  .statstrip__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .section { padding: 64px 0; }
}