/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:      #EDE8DC;
  --cream-dark: #E0D9CA;
  --cream-light:#F5F1EA;
  --white:      #FAFAF7;
  --ink:        #1A1714;
  --ink-soft:   #4A443C;
  --ink-muted:  #8A8078;
  --blue:       #1A6CD4;
  --blue-light: #3A84E8;
  --blue-pale:  rgba(26,108,212,.10);
  --orange:     #E8820A;
  --orange-pale:rgba(232,130,10,.12);
  --red:        #C93030;
  --border:     rgba(26,23,20,.10);
  --border-mid: rgba(26,23,20,.16);
  --radius:     14px;
  --radius-sm:  8px;
  --shadow-sm:  0 2px 8px rgba(26,23,20,.08);
  --shadow-md:  0 6px 24px rgba(26,23,20,.12);
  --shadow-lg:  0 16px 48px rgba(26,23,20,.16);
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-light); }
img { display: block; max-width: 100%; }

/* ─── Nav ───────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
  height: 64px;
  background: rgba(237,232,220,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: flex; align-items: center; gap: 10px;
}
.nav-logo img {
  width: 32px; height: 32px;
  border-radius: 7px;
  box-shadow: var(--shadow-sm);
}
.nav-logo span {
  font-size: 17px; font-weight: 700; letter-spacing: -.3px;
  color: var(--ink);
}
.nav-logo span em {
  font-style: normal;
  color: var(--orange);
}

nav ul { list-style: none; display: flex; gap: 32px; }
nav ul a {
  color: var(--ink-soft); font-size: 14px; font-weight: 500;
  transition: color .2s;
}
nav ul a:hover, nav ul a.active { color: var(--ink); }

/* ─── Hero ──────────────────────────────────────────────────── */
#hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 120px 40px 80px;
  background-color: var(--cream);
  background-image: url('../img/background.png');
  background-size: cover;
  background-position: center;
}

.hero-inner { max-width: 800px; margin: 0 auto; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero-logo {
  width: min(560px, 90%);
  height: auto;
  margin: 0 auto 36px;
  filter: drop-shadow(0 8px 24px rgba(26,23,20,.15));
}

.hero-tagline {
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 18px;
}
.hero-tagline .accent { color: var(--blue); }

.hero-sub {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

.btn-store {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink);
  color: var(--cream-light);
  font-size: 15px; font-weight: 600;
  padding: 14px 28px; border-radius: 12px;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: var(--shadow-md);
}
.btn-store:hover {
  background: var(--blue); color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-store svg { width: 20px; height: 20px; fill: currentColor; }

/* ─── Section shared ────────────────────────────────────────── */
.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 10px;
}
.section-title {
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 800; letter-spacing: -.5px;
  color: var(--ink); margin-bottom: 14px;
}
.section-sub {
  color: var(--ink-soft); font-size: 17px;
  max-width: 480px; line-height: 1.7; margin-bottom: 52px;
}

/* ─── App Mockup ────────────────────────────────────────────── */
#screenshots {
  padding: 100px 40px;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.screenshot {
  display: block;
  width: 100%;
  height: auto;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-mid);
}


/* One lead shot, then three rows of two beneath it.

   No aspect-ratio here: the shots are not all exactly the same height, and a
   single hardcoded ratio would letterbox the odd one. The width and height
   attributes on each image reserve the right space on their own, which is what
   stops the captions jumping as the images arrive. */
.shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
  margin-top: 56px;
}

.shot {
  margin: 0;
}

/* The first shot leads the section, so it runs the full width and the rest
   sit two across beneath it. */
.shot:first-child {
  grid-column: 1 / -1;
}

.shot:first-child img {
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-mid);
}

.shot figcaption {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  margin-top: 16px;
}

.shot figcaption strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}


/* ─── Features ──────────────────────────────────────────────── */
#features {
  padding: 100px 40px;
  background: var(--cream);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  box-shadow: var(--shadow-sm);
}
.feature-card:hover {
  border-color: var(--border-mid);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  width: 46px; height: 46px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; margin-bottom: 18px;
}
.feat-blue   { background: var(--blue-pale); }
.feat-orange { background: var(--orange-pale); }
.feat-warm   { background: rgba(201,48,48,.08); }
.feat-teal   { background: rgba(0,160,140,.10); }
.feat-amber  { background: rgba(200,150,0,.10); }
.feat-green  { background: rgba(40,170,80,.10); }

.feature-card h3 {
  font-size: 16px; font-weight: 700;
  color: var(--ink); margin-bottom: 8px;
}
.feature-card p {
  font-size: 14px; color: var(--ink-soft); line-height: 1.65;
}

/* ─── Premium ───────────────────────────────────────────────── */
#premium {
  padding: 100px 40px;
  background: var(--cream-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* A premium card is marked once, in the corner, rather than by recolouring
   the whole card, so the free and paid lists read as one page. */
.premium-card { position: relative; }
.premium-card::after {
  content: 'Premium';
  position: absolute; top: 16px; right: 16px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-pale);
  border-radius: 999px;
  padding: 3px 9px;
}
.premium-card h3 { padding-right: 78px; }

/* ─── Details ───────────────────────────────────────────────── */
#details {
  padding: 100px 40px;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}

.details-text h2 {
  font-size: 32px; font-weight: 800;
  letter-spacing: -.5px; color: var(--ink);
  margin-bottom: 16px;
}
.details-text p {
  color: var(--ink-soft); font-size: 16px;
  line-height: 1.75; margin-bottom: 16px;
}
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pill {
  background: var(--cream);
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  padding: 5px 14px; font-size: 13px; color: var(--ink-soft);
}

.details-visual {
  background: var(--cream-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-sm);
}

.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink);
}

.toggle {
  width: 38px; height: 22px;
  background: var(--blue); border-radius: 999px;
  position: relative; flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute; top: 3px; right: 3px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
}
.toggle.off { background: var(--cream-dark); }
.toggle.off::after { right: auto; left: 3px; }

/* ─── CTA ───────────────────────────────────────────────────── */
#cta {
  padding: 100px 40px;
  text-align: center;
  background-color: var(--cream);
  background-image: url('../img/background.png');
  background-size: cover;
  background-position: center;
}

.cta-icon {
  width: 96px; height: 96px;
  border-radius: 22px;
  margin: 0 auto 28px;
  box-shadow: var(--shadow-lg);
}

#cta h2 {
  font-size: 38px; font-weight: 800;
  letter-spacing: -.5px; color: var(--ink);
  margin-bottom: 14px;
}
#cta p { color: var(--ink-soft); font-size: 18px; margin-bottom: 32px; }

/* ─── Footer ────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 36px 48px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cream-dark);
  font-size: 13px; color: var(--ink-muted);
}
footer a { color: var(--ink-muted); }
footer a:hover { color: var(--ink); }
.footer-links { display: flex; gap: 24px; }

/* ─── Inner pages ───────────────────────────────────────────── */
.page-hero {
  padding: 130px 40px 70px;
  text-align: center;
  background-color: var(--cream);
  background-image: url('../img/background.png');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  font-size: 48px; font-weight: 800;
  letter-spacing: -.8px; color: var(--ink);
  margin-bottom: 10px;
}
.page-hero p { color: var(--ink-soft); font-size: 17px; }

.content-block {
  max-width: 720px; margin: 0 auto;
  padding: 60px 40px 100px;
  background: var(--white);
}
.content-block h2 {
  font-size: 20px; font-weight: 700;
  color: var(--ink); margin: 40px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.content-block p, .content-block li {
  color: var(--ink-soft); font-size: 15px;
  line-height: 1.8; margin-bottom: 10px;
}
.content-block ul { padding-left: 20px; }
.content-block li { margin-bottom: 6px; }
.content-block a { color: var(--blue); }

/* ─── Contact form ──────────────────────────────────────────── */
.contact-wrap {
  background: var(--white);
  padding-bottom: 100px;
}
.contact-form {
  max-width: 560px; margin: 0 auto;
  padding: 60px 40px 0;
  display: flex; flex-direction: column; gap: 20px;
}

.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label {
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft); letter-spacing: .2px;
}

.form-group input,
.form-group textarea {
  background: var(--cream-light);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  color: var(--ink); font-size: 15px; font-family: inherit;
  outline: none; resize: none;
  -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,108,212,.12);
  background: var(--white);
}
.form-group textarea { height: 150px; line-height: 1.6; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-muted); }

.btn-submit {
  background: var(--ink);
  color: var(--cream-light); font-size: 15px; font-weight: 600;
  padding: 13px 28px; border-radius: 12px;
  border: none; cursor: pointer;
  align-self: flex-start;
  box-shadow: var(--shadow-sm);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-submit:hover {
  background: var(--blue); color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ─── Container ─────────────────────────────────────────────── */
.container { max-width: 1080px; margin: 0 auto; }

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 0 20px; }
  nav ul { gap: 20px; }
  #hero, #cta, .page-hero { padding-left: 20px; padding-right: 20px; }
  #screenshots, #features, #premium, #details { padding: 70px 20px; }
  .details-grid { grid-template-columns: 1fr; gap: 40px; }
  .screenshot { border-radius: 10px; }
  .shots { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .shot img { border-radius: 8px; }
  footer { flex-direction: column; gap: 14px; text-align: center; padding: 28px 20px; }
  .contact-form, .content-block { padding-left: 20px; padding-right: 20px; }
}