:root{
  --brand-primary:#520841;
  --brand-accent:#FD1037;
  --footer:#2a0135;
  --ink:#1a1a1a;
  --skyline-h:120px; /* tweak for skyline size */
}

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

/* ===== Base layout & typography ===== */
html, body { height: 100%; }
html { font-size: clamp(14px, 1.2vw + 0.5rem, 18px); } /* fluid base type */

body{
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.5;
}

/* ===== Home / Hero ===== */
.hero{
  text-align:center;
  padding: 90px 20px clamp(40px, 8vh, 80px);
  position:relative;
}

.header-logo{
  height: clamp(70px, 10vw, 110px);
  margin: 0 auto 40px;
  display:block;
}

.hero h1{
  font-size: clamp(1.8rem, 3vw + 0.5rem, 2.5rem);
  font-weight:600;
  margin:0 0 0.5rem;
  line-height:1.2;
}
.hero h2{
  font-size: clamp(1.4rem, 2.2vw + 0.3rem, 2rem);
  font-weight:400;
  margin:0 0 2rem;
}
.hero h2 span{ color:var(--brand-accent); font-weight:700; }

.store-buttons{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-bottom: clamp(48px, 8vh, 90px);
}
.store-buttons img{ height: clamp(40px, 6vw, 58px); max-width:220px; }

/* ===== Footer (sticky) + Skyline attached at top ===== */
footer{
  background:var(--footer);
  color:#fff;
  text-align:center;
  padding: calc(40px + var(--skyline-h)) 20px 36px; /* room for skyline */
  position: relative;
  margin-top:auto;
}

/* Skyline fully visible (no cropping) */
footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  transform: translateY(calc(-1 * var(--skyline-h)));
  height: var(--skyline-h);
  pointer-events:none;
  z-index:0;
  background-image: url("city-background.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain; /* show entire image */
}

.footer-top,
.footer-links,
.whatsapp-btn,
footer p { position: relative; z-index: 1; }

.footer-top{ margin-bottom:20px; }
.footer-logo{
  height:38px;
  opacity:0.9;
  filter:brightness(0) invert(1);
  margin-bottom:16px;
}

.footer-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:28px;
  margin-bottom:18px;
}
.footer-links a{
  color:#fff;
  text-decoration:none;
  font-size: clamp(12px, 1vw + 0.3rem, 14px);
  opacity:.88;
}
.footer-links a:hover{ opacity:1 }

.whatsapp-btn{
  position:absolute;
  right:32px; top:24px;
  background:#25D366; color:#fff; border:0;
  padding:10px 16px; border-radius:24px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; text-decoration:none;
}
.whatsapp-btn::before{
  content:""; width:16px; height:16px;
  background:url("https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg") no-repeat center/16px 16px;
}
.whatsapp-btn:hover{ background:#1ebe5d }

footer p{
  margin:26px 0 0;
  font-size: clamp(12px, 1vw + 0.3rem, 14px);
  opacity:.75;
}

/* ===== Subpages (about, privacy, terms, refunds, contact) ===== */
.subpage-hero{
  text-align:center;
  padding:100px 20px 60px;
  background:#faf8fb;
}
.subpage-hero h1{
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  color: var(--brand-primary);
  margin-bottom: 10px;
}
.subpage-hero .subtitle{
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.3rem);
  color:#555; max-width:600px; margin:0 auto;
}

.content{
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
.content section{ margin-bottom:60px; }
.content h2{
  font-size: clamp(1.4rem, 2vw + 0.3rem, 2rem);
  color: var(--brand-primary);
  margin-bottom:16px;
}
.content p{ font-size:1rem; color:#333; margin-bottom:16px; line-height:1.6; }
.content ul{ padding-left:20px; }
.content li{ margin-bottom:10px; }

/* CTA button */
.primary-btn{
  display:inline-block;
  background: var(--brand-accent);
  color:#fff;
  padding:12px 24px;
  border-radius:25px;
  text-decoration:none;
  font-weight:600;
  margin-top:20px;
}
.primary-btn:hover{ background:#e30e30; }

/* ===== Policy page variants ===== */
.privacy h2, .terms h2, .policy h2{
  font-size: clamp(1.2rem, 1.8vw + 0.3rem, 1.8rem);
  color: var(--brand-primary);
  margin-top:40px;
}
.privacy ul, .terms ul, .policy ul{
  margin:10px 0 20px 25px; line-height:1.6;
}
.privacy p, .privacy li, .terms p, .terms li, .policy p, .policy li{ color:#333; }
.privacy address, .policy address, .terms address{
  font-style:normal; background:#faf8fb; padding:16px; border-radius:8px; line-height:1.6;
}

/* ===== Contact page ===== */
.contact h2{
  font-size: clamp(1.3rem, 2vw + 0.4rem, 2rem);
  color: var(--brand-primary);
  margin-bottom:16px;
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px 20px;
}
.form-span{ grid-column:1 / -1; }

.form-field label{
  display:block; font-weight:600; margin-bottom:8px;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%; padding:12px 14px;
  border:1px solid #e6e3ea; border-radius:12px;
  font:inherit; background:#fff; outline:none;
  transition: box-shadow .2s, border-color .2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:#d5c9de;
  box-shadow:0 0 0 4px rgba(82, 8, 65, 0.08);
}
.error{ color:#b00020; font-size:.9rem; margin-top:6px; min-height:1.1em; }

/* Toast */
.toast{
  margin-top:16px; background:#0a7c2f; color:#fff;
  border-radius:10px; padding:12px 14px; display:inline-block;
  opacity:0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.toast a{ color:#fff; text-decoration:underline; }
.toast.show{ opacity:1; transform: translateY(0); }

/* ===== Responsive tweaks ===== */
@media (max-width:800px){
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .whatsapp-btn{ position:static; margin:10px auto 0; display:inline-flex; }
}