/* ================================================================
   ReloAppy — Features Page
   Design system extracted directly from www.reloappy.com

   Fonts:    Inter (UI) + Fraunces (display)
   Nav:      bg-white/90 backdrop-blur-md border-slate-200/60 shadow-sm sticky
   Hero:     bg-gradient-to-br from-slate-50 to-white py-20 lg:py-28 border-b border-slate-200
   Core:     py-20 lg:py-28 bg-slate-50
   Details:  bg-white py-20 lg:py-28
   CTA:      bg-gradient-to-br from-slate-950 via-[#0f1f3d] to-slate-950
   Footer:   bg-slate-950 py-12
================================================================ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; background: none; border: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --blue:     #2563eb;
  --blue-d:   #1d4ed8;
  --blue-dd:  #1e40af;
  --green:    #41b773;
  --green-d:  #369962;
  --green-dd: #2d7d4f;

  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  --font-ui:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: var(--font-ui);
  background: #fff;
  color: var(--slate-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

/* ── Layout helpers ─────────────────────────────────────────── */
.max-w-6xl  { max-width: 72rem; }  /* 1152px */
.max-w-3xl  { max-width: 48rem; }  /* 768px  */
.mx-auto    { margin-inline: auto; }
.px-6       { padding-inline: 1.5rem; }
.text-center { text-align: center; }

/* ── NAV ────────────────────────────────────────────────────── */
/* Exact: bg-white/90 backdrop-blur-md border-b border-slate-200/60 sticky top-0 z-50 shadow-sm */
.site-nav {
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226,232,240,.60);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
}
.nav-inner {
  max-width: 80rem;          /* max-w-7xl = 1280px */
  margin-inline: auto;
  padding: 1rem 1.5rem;      /* py-4 px-6 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; transition: opacity .15s; }
.nav-logo:hover { opacity: .8; }
.nav-logo-img { height: 3rem; width: auto; }   /* h-12 */

/* hidden md:flex items-center gap-6 */
.nav-links { display: none; align-items: center; gap: 1.25rem; }
@media (min-width: 768px) { .nav-links { display: flex; } }

.nav-link {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--slate-700);
  transition: color .15s;
  white-space: nowrap;
}
.nav-link:hover, .nav-active { color: var(--blue); }

/* border-2 border-[#2563eb] text-[#2563eb] px-5 py-2 rounded-xl font-semibold */
.btn-login {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border: 2px solid var(--blue);
  color: var(--blue);
  padding: .5rem 1.25rem;
  border-radius: .75rem;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
  white-space: nowrap;
}
.btn-login:hover { background: var(--blue); color: #fff; }

/* bg-gradient-to-r from-[#41b773] to-[#369962] px-6 py-2.5 rounded-xl font-semibold */
.btn-trial {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to right, var(--green), var(--green-d));
  color: #fff;
  padding: .625rem 1.5rem;
  border-radius: .75rem;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
  box-shadow: 0 4px 14px rgba(65,183,115,.25);
  white-space: nowrap;
}
.btn-trial:hover {
  background: linear-gradient(to right, var(--green-d), var(--green-dd));
  box-shadow: 0 4px 18px rgba(65,183,115,.35);
}

/* Mobile burger */
.nav-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: .5rem;
  color: var(--slate-700);
  transition: background .15s;
}
.nav-burger:hover { background: var(--slate-100); }
@media (min-width: 768px) { .nav-burger { display: none; } }

.mobile-nav {
  background: #fff;
  border-top: 1px solid var(--slate-100);
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.mobile-nav.open { display: flex; }
.mobile-nav-links { display: flex; flex-direction: column; padding: .5rem 0; }
.mobile-link {
  padding: .875rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--slate-700);
  border-bottom: 1px solid var(--slate-50);
  transition: color .15s, background .15s;
}
.mobile-link:hover { background: var(--slate-50); color: var(--blue); }
.mobile-active { color: var(--blue); }
.mobile-actions {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: 1rem 1.5rem 1.5rem;
}
.btn-login-full, .btn-trial-full { justify-content: center; }

/* ── HERO ───────────────────────────────────────────────────── */
/* Exact: bg-gradient-to-br from-slate-50 to-white py-20 lg:py-28 border-b border-slate-200 */
.hero-section {
  background: linear-gradient(135deg, var(--slate-50) 0%, #fff 100%);
  padding-block: 5rem;              /* py-20 */
  border-bottom: 1px solid var(--slate-200);
}
@media (min-width: 1024px) { .hero-section { padding-block: 7rem; } } /* lg:py-28 */

/* Eyebrow badge — inline-block bg-green-50 text-[#41b773] text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full mb-4 */
.eyebrow-badge {
  display: inline-block;
  background: #f0fdf4;
  color: var(--green);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
}
.eyebrow-green { background: #f0fdf4; color: var(--green); }

/* text-4xl lg:text-6xl font-bold text-slate-900 mb-6 */
.hero-h1 {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}

/* text-xl text-slate-600 leading-relaxed */
.hero-sub {
  font-size: 1.25rem;
  color: var(--slate-600);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.hero-sub strong { color: var(--slate-900); font-weight: 700; }

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* Green CTA: from-[#41b773] to-[#369962] text-white px-8 py-4 rounded-2xl font-bold */
.btn-cta-green {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(to right, var(--green), var(--green-d));
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(65,183,115,.30);
  transition: all .15s;
}
.btn-cta-green:hover {
  background: linear-gradient(to right, var(--green-d), var(--green-dd));
  box-shadow: 0 8px 24px rgba(65,183,115,.45);
  transform: translateY(-1px);
}

/* Outline button: bg-slate-900 hover:bg-slate-700 text-white */
.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--slate-900);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1rem;
  font-weight: 700;
  transition: all .15s;
}
.btn-outline-dark:hover { background: var(--slate-700); }

.trust-line {
  font-size: .8125rem;
  color: var(--slate-400);
  margin-top: .5rem;
}

/* ── CORE FEATURES ──────────────────────────────────────────── */
/* Exact: py-20 lg:py-28 bg-slate-50 */
.features-section {
  background: var(--slate-50);
  padding-block: 5rem;
}
@media (min-width: 1024px) { .features-section { padding-block: 7rem; } }

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

/* text-3xl lg:text-5xl font-bold text-slate-900 mb-4 */
.section-h2 {
  font-size: clamp(1.875rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}

/* text-slate-500 text-lg max-w-md mx-auto leading-relaxed */
.section-sub {
  font-size: 1.125rem;
  color: var(--slate-500);
  line-height: 1.7;
  max-width: 28rem;
  margin-inline: auto;
}

/* grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

/* bg-white rounded-2xl border border-slate-200 p-6 hover:border-[#2563eb]/30 hover:shadow-lg transition-all group */
.feature-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid var(--slate-200);
  padding: 1.5rem;
  transition: border-color .2s, box-shadow .2s;
}
.feature-card:hover {
  border-color: rgba(37,99,235,.30);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* w-11 h-11 rounded-xl flex items-center justify-center mb-4 */
.feature-icon-wrap {
  width: 2.75rem; height: 2.75rem;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

/* text-base font-bold text-slate-900 mb-1.5 tracking-tight group-hover:text-[#2563eb] */
.feature-card-h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: .375rem;
  letter-spacing: -.01em;
  transition: color .15s;
}
.feature-card:hover .feature-card-h3 { color: var(--blue); }

/* text-slate-500 text-sm leading-relaxed */
.feature-card-p {
  font-size: .875rem;
  color: var(--slate-500);
  line-height: 1.65;
}

/* ── DETAILS ────────────────────────────────────────────────── */
/* Exact: bg-white py-20 lg:py-28 */
.details-section {
  background: #fff;
  padding-block: 5rem;
}
@media (min-width: 1024px) { .details-section { padding-block: 7rem; } }

.section-h2-lg {
  font-size: clamp(2rem, 3.5vw, 3.125rem);
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}

/* grid md:grid-cols-2 lg:grid-cols-3 gap-8 */
.details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px)  { .details-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .details-grid { grid-template-columns: repeat(3, 1fr); } }

/* bg-gradient-to-br from-slate-50 to-white p-8 rounded-2xl border border-slate-200 hover:border-slate-300 hover:shadow-xl */
.detail-card {
  background: linear-gradient(135deg, var(--slate-50) 0%, #fff 100%);
  border-radius: 1rem;
  border: 1px solid var(--slate-200);
  padding: 2rem;
  transition: border-color .2s, box-shadow .2s;
}
.detail-card:hover {
  border-color: var(--slate-300);
  box-shadow: 0 20px 48px rgba(0,0,0,.10);
}

/* w-14 h-14 bg-gradient-to-br rounded-xl flex items-center justify-center mb-6 shadow-lg */
.detail-icon-wrap {
  width: 3.5rem; height: 3.5rem;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.detail-icon-blue   { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 8px 20px rgba(37,99,235,.30); }
.detail-icon-green  { background: linear-gradient(135deg, #41b773, #369962); box-shadow: 0 8px 20px rgba(65,183,115,.30); }
.detail-icon-purple { background: linear-gradient(135deg, #7c3aed, #6d28d9); box-shadow: 0 8px 20px rgba(124,58,237,.30); }

/* text-xl font-bold text-slate-900 mb-3 */
.detail-h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: .75rem;
  letter-spacing: -.01em;
}

/* text-slate-600 leading-relaxed */
.detail-p {
  font-size: .9375rem;
  color: var(--slate-600);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.detail-bullets {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.detail-bullets li {
  font-size: .875rem;
  color: var(--slate-600);
  padding-left: 1.375rem;
  position: relative;
  line-height: 1.5;
}
.detail-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: .45em;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--green);
}

/* ── CTA ────────────────────────────────────────────────────── */
/* Exact: bg-gradient-to-br from-slate-950 via-[#0f1f3d] to-slate-950 py-24 relative overflow-hidden */
.cta-section {
  background: linear-gradient(135deg, var(--slate-950) 0%, #0f1f3d 50%, var(--slate-950) 100%);
  padding-block: 6rem 8rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Blue radial glow: w-[800px] h-[400px] rounded-full bg-[#2563eb]/10 blur-[120px] */
.cta-glow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cta-glow::before {
  content: '';
  width: 50rem; height: 25rem;
  border-radius: 9999px;
  background: rgba(37,99,235,.10);
  filter: blur(120px);
}

/* inline-block border border-[#2563eb]/40 bg-[#2563eb]/10 text-[#93c5fd] text-xs font-bold uppercase tracking-[0.18em] px-4 py-1.5 rounded-full mb-7 */
.cta-badge {
  display: inline-block;
  border: 1px solid rgba(37,99,235,.40);
  background: rgba(37,99,235,.10);
  color: #93c5fd;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .375rem 1rem;
  border-radius: 9999px;
  margin-bottom: 1.75rem;
  position: relative;
}

/* font-extrabold text-white mb-5 leading-[1.08] */
.cta-h2 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 1.25rem;
  position: relative;
}

/* text-lg text-blue-100 mb-8 leading-relaxed max-w-md mx-auto */
.cta-sub {
  font-size: 1.125rem;
  color: #bfdbfe;
  line-height: 1.65;
  max-width: 28rem;
  margin-inline: auto;
  margin-bottom: 2rem;
  position: relative;
}

/* group inline-flex items-center gap-2 bg-[#41b773] hover:bg-[#369962] text-white px-8 py-4 rounded-2xl font-bold text-base transition-all shadow-2xl shadow-green-500/30 */
.btn-cta-green-lg {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--green);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 20px 48px rgba(65,183,115,.35);
  transition: all .15s;
  position: relative;
}
.btn-cta-green-lg:hover {
  background: var(--green-d);
  transform: translateY(-1px);
  box-shadow: 0 24px 56px rgba(65,183,115,.45);
}

/* ── FOOTER ─────────────────────────────────────────────────── */
/* Exact: bg-slate-950 py-12 */
.site-footer {
  background: var(--slate-950);
  padding-block: 3rem;
}
.footer-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 768px) { .footer-inner { justify-content: space-between; } }

.footer-brand { display: flex; align-items: center; gap: .75rem; }
.footer-logo  { height: 2rem; width: auto; }
.footer-name  { font-size: 1rem; font-weight: 700; color: #fff; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.footer-links a {
  font-size: .875rem;
  color: var(--slate-400);
  transition: color .15s;
}
.footer-links a:hover { color: #fff; }

.footer-copy {
  width: 100%;
  font-size: .8125rem;
  color: var(--slate-500);
}
@media (min-width: 768px) { .footer-copy { width: auto; } }

/* ── Scroll-reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}