/* =================== Design tokens =================== */
:root{
  --bg: #0F0F10;
  --card: #232324;
  --ink: #EAEAEA;
  --muted: #BEBEBE;
  --baio: #F6C338;
  --baio-ink: #0F0F10;

  --radius: 18px;
  --shadow: 0 10px 24px rgba(0,0,0,.35);

  --space-2xs: .25rem;
  --space-xs : .5rem;
  --space-sm : .75rem;
  --space-md : 1rem;
  --space-lg : 1.5rem;
  --space-xl : 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;
}

/* =================== Base =================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Headings */
.display{
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height:1.1; margin:0 0 var(--space-lg)
}
h2{font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin:0 0 var(--space-md)}
h3{font-family: "Playfair Display", Georgia, serif; font-size: 1.25rem; margin:.25rem 0 .25rem}
.lead{color:#f2f2f2; font-size:1.1rem; line-height:1.6; margin:0 0 var(--space-xl)}

/* Layout helpers */
.container{width:min(1100px, 92%); margin-inline:auto}
.section{padding: var(--space-3xl) 0}

/* =================== Hero =================== */
.hero{padding: clamp(2rem, 6vw, 5rem) 0}
.hero__wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items:center;
}
.hero__copy{padding-block: var(--space-md)}
.hero__visual{display:flex; justify-content:center}

/* HERO IMAGE ~ half size */
.phone-mock{
  width: clamp(220px, 28vw, 360px); /* smaller on desktop */
  height: auto;
  border-radius: 30px;
  box-shadow: 0 0 0 8px #1b1b1c, 0 0 40px rgba(246,195,56,.25);
}
@media (max-width: 960px){
  .hero__wrap{ grid-template-columns: 1fr; }
  .hero__visual{ order: -1 }
  .phone-mock{ width: clamp(220px, 44vw, 320px); }
}

/* =================== Buttons =================== */
.btn{
  appearance:none; -webkit-appearance:none;
  line-height:1; box-sizing:border-box; border:0; cursor:pointer;
  border-radius: 10px; font-weight:600; font-size: .98rem;
  transition: transform .05s ease, background .2s ease, box-shadow .2s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--baio);
  color: var(--baio-ink);
  box-shadow: 0 6px 16px rgba(246,195,56,.25);
}
.btn-primary:hover{ background: #ffd152 }
.btn-ghost{ opacity:.9 }
.btn-dark{
  background: #2a2a2b; color: var(--ink);
  border: 1px solid #39393a;
}
.btn-dark:hover{ background:#333 }

.store-buttons{ display:flex; gap: var(--space-md); flex-wrap:wrap }
.btn-store{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap: var(--space-sm);
  height: 48px;                 /* unified height */
  padding: 0 var(--space-2xl);  /* no vertical padding */
  white-space:nowrap;
}
.store-icon{
  width:20px; height:20px; flex:0 0 20px; display:block; align-self:center;
  fill: currentColor;
}

/* =================== Cards / Highlights =================== */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-lg);
}
.card{
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: var(--shadow);
  text-align:center;

  /* Center content + Lottie */
  display:flex; flex-direction:column; align-items:center; gap: var(--space-sm);
}
.lottie{ width:80px; height:80px; }

/* Yellow tint for Lottie (SVG renderer) */
.lottie-yellow,
.lottie-yellow::part(player),
.lottie-yellow svg{
  filter: brightness(0) saturate(100%) invert(78%)
          sepia(95%) saturate(2000%) hue-rotate(1deg)
          brightness(102%) contrast(97%);
}

/* =================== Gallery =================== */
.gallery{
  display:grid; gap: var(--space-lg);
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.gallery img{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* =================== FAQ =================== */
.faq details{
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow);
}
.faq summary{ cursor:pointer; font-weight:700 }
.faq p{ color: var(--muted); margin:.5rem 0 0 }
.help-links{ margin-top: var(--space-md); color: var(--ink) }
.help-links a{ color: var(--baio) }

/* =================== CTA =================== */
.cta{
  background: radial-gradient(1200px 1200px at 50% 0, rgba(246,195,56,.08), transparent 60%);
  padding-bottom: clamp(2rem, 6vw, 5rem);
}
.cta__wrap{ text-align:center }
.cta__wrap h2{ margin-bottom: var(--space-lg) }

/* =================== Footer =================== */
.footer{
  border-top:1px solid #2a2a2b;
  padding: var(--space-lg) 0;
  color: var(--muted);
  text-align:center;
}

/* =================== Responsive =================== */
@media (max-width: 960px){
  .cards{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 540px){
  .btn-store{ width:100%; justify-content:center }
  .gallery{ grid-template-columns: 1fr; }
}