/* =========================================================
   Yapp Landing — Clean CSS (map behind header + hero + phones)
   ========================================================= */

/* ---------- Base / reset ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid rgba(103,198,255,1); outline-offset: 2px; }

/* ---------- Design tokens ---------- */
:root {
  /* Colors */
  --bg: #1C1C1E;
  --bottom-bg: #000000;
  --text: #FFFFFF;
  --text-75: rgba(255,255,255,.75);
  --text-50: rgba(255,255,255,.50);
  --border: rgba(255,255,255,.10);

  /* Grid (mobile default) */
  --side: 16px;     /* side margins */
  --gutter: 16px;
  --cols: 4;

  /* Typography (mobile default) */
  --h1-size: 40px;  --h1-lh: 1.20;
  --h2-size: 28px;  --h2-lh: 1.30;
  --h3-size: 22px;  --h3-lh: 1.40;
  --h4-size: 20px;  --h4-lh: 1.40;
  --body-lg: 18px;  --body-lg-lh: 1.50;
  --body: 16px;     --body-lh: 1.60;
  --body-sm: 14px;  --body-sm-lh: 1.60;

  /* Layout */
  --container-max: 1440px;

  /* Phones (height per breakpoint) */
  --phone-h: 360px;      /* mobile */

  /* CTA → phones gap */
  --cta-gap: 48px;       /* mobile */
}

/* Tablet ≥ 768px */
@media (min-width: 768px) {
  :root {
    --side: 24px; --gutter: 24px; --cols: 8;

    --h1-size: 48px;  --h1-lh: 1.15;
    --h2-size: 34px;  --h2-lh: 1.25;
    --h3-size: 26px;  --h3-lh: 1.30;
    --h4-size: 21px;  --h4-lh: 1.40;
    --body-lg: 19px;  --body-lg-lh: 1.50;

    --phone-h: 520px;     /* tablet */
    --cta-gap: 56px;      /* tablet */
  }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
  :root {
    --side: 120px; --gutter: 24px; --cols: 12;

    --h1-size: 64px;  --h1-lh: 1.10;
    --h2-size: 40px;  --h2-lh: 1.20;
    --h3-size: 28px;  --h3-lh: 1.30;
    --h4-size: 22px;  --h4-lh: 1.40;
    --body-lg: 20px;  --body-lg-lh: 1.50;

    --phone-h: 640px;     /* desktop */
    --cta-gap: 64px;      /* desktop */
  }
}

/* ---------- Globals ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--body);
  line-height: var(--body-lh);
}

.container {
  padding-inline: var(--side);
  max-width: var(--container-max);
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(var(--cols), 1fr);
}

/* ---------- Hero background wrapper ---------- */
.hero-bg {
  position: relative;
  background: url("assets/map-bg.png") center top / cover no-repeat;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35); /* dark overlay */
  z-index: 0;
}
.site-header, .hero, .devices {
  position: relative;
  z-index: 1; /* ensure content is above overlay */
}

/* ---------- Header ---------- */
.site-header {
  padding: 24px var(--side);
  text-align: center;
}
.brand img { height: 28px; width: auto; margin-inline: auto; }

/* ---------- Hero ---------- */
.hero {
  padding-top: 16px;
  padding-bottom: 0;
}
.hero .headline {
  margin: 0;
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}
.hero .subhead {
  max-width: 720px;
  margin: 12px auto 0;
  color: var(--text-75);
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  text-align: center;
}

/* ---------- CTA ---------- */
.cta {
  margin-top: 24px;
  margin-bottom: var(--cta-gap);   /* 48 / 56 / 64 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.android-note {
  color: var(--text-50);
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  text-align: center;
}

/* ---------- Devices ---------- */
.devices {
  width: min(1280px, 100% - 2*var(--side));
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  position: relative;
  margin-bottom: -1px; /* seamless into next section */
}
.device {
  height: var(--phone-h);
  width: auto;
  border: 0; outline: 0; box-shadow: none; background: none;
  transform-origin: bottom center;
  transform: scale(.98);
  z-index: 2;
  margin: 0;
}
.device-center {
  transform: scale(1.06);
  z-index: 3;
}
.device-left  { margin-right: -8%; }
.device-right { margin-left:  -8%; }
@media (min-width: 768px){
  .device-left  { margin-right: -9%; }
  .device-right { margin-left:  -9%; }
}
@media (min-width: 1024px){
  .device-left  { margin-right: -10%; }
  .device-right { margin-left:  -10%; }
}

/* ---------- Features ---------- */
.features {
  background: var(--bottom-bg);
  border-top: 1px solid var(--border);
}
.features-inner {
  display: grid;
  gap: 24px;
  padding: 36px var(--side) 56px;
  text-align: center;
}
.feature-title {
  margin: 0 0 6px;
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  font-weight: 600;
}
.feature-desc {
  margin: 0;
  color: var(--text-50);
  font-size: var(--body);
  line-height: var(--body-lh);
}
.feature-icon {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: rgba(255,255,255,.02);
}
@media (min-width: 768px){
  .features-inner {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
    max-width: var(--container-max);
    margin-inline: auto;
  }
  .feature-icon { margin: 0 0 10px 0; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bottom-bg);
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text);
  padding: 28px var(--side) 40px;
  font-size: var(--body);
  line-height: var(--body-lh);
}
.site-footer p { margin: .25rem 0; }
.site-footer a { color: var(--text-75); }
.site-footer a:hover { color: var(--text); }