/* =============================================================
   Infinotes — landing page
   Global resets + system type, following the same conventions as
   the Recollect landing page: layout/visuals live inline in
   index.html; this file carries page-wide rules, hover/hit
   states, and the responsive breakpoints.
   ============================================================= */

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

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #fff;
}

::selection { background: rgba(40, 167, 69, 0.25); }

/* ---- nav pill: transparent at the top, blurred capsule once scrolled ---- */
[data-nav-pill].scrolled {
  max-width: 860px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-color: rgba(0, 0, 0, 0.07);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}

/* ---- hero: white paper with soft ink washes, like the sample note ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 150px 24px 0;
  background:
    radial-gradient(560px 380px at 12% 4%, rgba(52, 199, 89, 0.13), transparent 70%),
    radial-gradient(620px 420px at 88% 10%, rgba(255, 204, 0, 0.16), transparent 70%),
    radial-gradient(520px 420px at 4% 78%, rgba(0, 122, 255, 0.10), transparent 70%),
    radial-gradient(560px 400px at 96% 82%, rgba(255, 59, 48, 0.09), transparent 70%),
    #fff;
}

/* the screenshot sits flush with the hero's bottom edge, bleeding into the
   features section below it */
.hero-shot {
  width: min(1080px, 100%);
  margin: 56px auto -1px;
  border-radius: 24px 24px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-bottom: none;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  background: #fff;
}
.hero-shot img { display: block; width: 100%; height: auto; }

/* ---- feature cards: copy on one side, screenshot on the other ---- */
.feature-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 56px;
  text-align: left;
}
.feature-card.reverse { flex-direction: row-reverse; }
.feature-copy { flex: 0 0 34%; }
.feature-media {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.10);
}
.feature-media img { display: block; width: 100%; height: auto; }

/* hover states */
.nav-download { transition: filter .2s ease; }
.nav-download:hover { filter: brightness(1.08); }

.footer-link { transition: color .2s ease; }
.footer-link:hover { color: #28a745 !important; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .feature-card, .feature-card.reverse { flex-direction: column; gap: 30px; padding: 40px 28px; text-align: center; }
  .feature-copy { flex: none; max-width: 560px; }
  .feature-copy h2 { font-size: 28px !important; }
  .feature-copy p { font-size: 17px !important; }
  .feature-media { width: 100%; }
}

@media (max-width: 768px) {
  .hero { padding-top: 122px; }
  .hero-shot { margin-top: 40px; border-radius: 16px 16px 0 0; }
  #features { padding: 56px 16px 64px !important; }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}