/* @import url() FONT IMPORTS MUST ALWAYS BE AT THE VERY TOP OF THIS FILE */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   BioDrive — Marketing homepage stylesheet
   A separate file from Css/styles.css (the signed-in product's
   GP/Warehouse/Store/Patient portals) because the two shells are built
   differently — this one has no sidebar/topbar chrome. Both now share
   the same green/Inter token values on purpose, so the public site and
   the signed-in product read as one brand.
   ============================================================ */

:root {
  --g-50:  #E8F5E9;
  --g-100: #C8E6C9;
  --g-200: #A5D6A7;
  --g-300: #81C784;
  --g-500: #4CAF50;
  --g-600: #43A047;
  --g-700: #388E3C;
  --g-900: #1B5E20;

  --ink: #333333;
  --muted: #6b7280;
  --line: var(--g-50);
  --danger: #a23b3b;

  --white:    #ffffff; /* fixed white — text/pills sitting on a solid accent background; NEVER redefined per theme */
  --surface:  #ffffff; /* page/card background — this is what changes in dark mode */
  --nav-overlay: rgba(255,255,255,0.85);
  --muted-2:     #4b5563; /* nav link color */
  --footer-muted:#9ca3af;
  --on-accent-soft: #E8F5E9; /* fixed — text sitting on the permanently-solid cta-banner background */
  --tint-wash: rgba(232, 245, 233, 0.4);

  /* Horizontal breathing room between content and the screen edge, used by
     .wrap (and therefore by the nav, hero, every section and the footer).
     Widened on phones below — a 20px gutter that looks generous inside a
     1200px desktop column reads as cramped on a 390px handset. */
  --gutter: 20px;

  --radius: 1.25rem;
  --radius-sm: 0.875rem;
  --shadow-soft: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-card: 0 4px 24px -8px rgba(76, 175, 80, 0.18), 0 2px 8px rgba(16, 24, 40, 0.04);
  --shadow-lift: 0 12px 40px -12px rgba(76, 175, 80, 0.28);
}

/* ----------------------------------------------------------
   Dark theme — see the matching block in Css/styles.css for why
   --white/--on-accent-soft and the --g-500..900 accent steps are
   deliberately absent here (they're pinned, not theme-dependent), and why
   an explicit `data-theme` attribute always wins over the OS preference
   (higher selector specificity than the plain :root/media-query blocks).
   ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --g-50:  #17251A;
    --g-100: #1D2E20;
    --g-200: #26402A;
    --g-300: #2E4D33;

    --ink: #E7ECE8;
    --muted: #9BA7A0;
    --danger: #E2685F;
    --line: #2C3530;

    --surface: #1E2420;
    --nav-overlay: rgba(20, 24, 26, 0.85);
    --muted-2: #9BA7A0;
    --footer-muted: #9BA7A0;
    --tint-wash: rgba(76, 175, 80, 0.08);
  }
}
:root[data-theme="dark"] {
  --g-50:  #17251A;
  --g-100: #1D2E20;
  --g-200: #26402A;
  --g-300: #2E4D33;

  --ink: #E7ECE8;
  --muted: #9BA7A0;
  --danger: #E2685F;
  --line: #2C3530;

  --surface: #1E2420;
  --nav-overlay: rgba(20, 24, 26, 0.85);
  --muted-2: #9BA7A0;
  --footer-muted: #9BA7A0;
  --tint-wash: rgba(76, 175, 80, 0.08);
}
:root[data-theme="light"] {
  --g-50:  #E8F5E9;
  --g-100: #C8E6C9;
  --g-200: #A5D6A7;
  --g-300: #81C784;

  --ink: #333333;
  --muted: #6b7280;
  --danger: #a23b3b;
  --line: var(--g-50);

  --surface: #ffffff;
  --nav-overlay: rgba(255,255,255,0.85);
  --muted-2: #4b5563;
  --footer-muted: #9ca3af;
  --tint-wash: rgba(232, 245, 233, 0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }

/* The single horizontal gutter for the whole page. Anything that needs
   vertical padding of its own must use padding-block, never the `padding`
   shorthand, or it will silently clear this and sit flush against the
   screen edge (which is exactly what the hero used to do on phones). */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  font-size: 14px;
  padding: 10px 20px;
}
.btn svg { width: 18px; height: 18px; }
.btn--sm { padding: 7px 14px; font-size: 13px; }
.btn--lg { padding: 14px 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--g-500); color: var(--white); box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--g-600); }
.btn--outline { background: var(--surface); color: var(--g-700); border-color: var(--g-200); }
.btn--outline:hover { background: var(--g-50); border-color: var(--g-300); }
/* "on-dark" buttons sit on the permanently-solid-green .cta-banner, so
   they stay pinned to --white rather than following --surface — in dark
   mode they must keep reading as a light pill on a green background, not
   go dark themselves. */
.btn--on-dark { background: var(--white); color: var(--g-700); }
.btn--on-dark:hover { background: var(--on-accent-soft); }
.btn--outline-on-dark { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn--outline-on-dark:hover { background: rgba(255,255,255,0.12); }

/* ---------------------------------------------------------- Nav */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-overlay);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-nav__row {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.site-nav__brand img { width: 32px; height: auto; aspect-ratio: 513/238; }
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-2);
}
.site-nav__links a:hover { color: var(--g-600); }
.site-nav__ctas { display: flex; align-items: center; gap: 10px; }
.site-nav__toggle {
  display: none;
  padding: 8px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
}
.site-nav__mobile {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 16px 20px 20px;
}
.site-nav__mobile.is-open { display: block; }
.site-nav__mobile a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-2);
}
.site-nav__mobile .btn { margin-top: 8px; }

@media (max-width: 860px) {
  .site-nav__links, .site-nav__ctas { display: none; }
  .site-nav__toggle { display: inline-flex; }
}

/* ---------------------------------------------------------- Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at top right, var(--g-50), transparent 60%);
}
/* padding-block, NOT the `padding: 64px 0 80px` shorthand this used to be:
   the element is `class="wrap hero__grid"`, and the shorthand's `0` was
   overwriting the horizontal gutter .wrap sets. On desktop the 46rem
   max-width hid it; on a phone the headline sat flush against both edges. */
.hero__grid {
  padding-block: 64px 80px;
  max-width: 46rem;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--g-50);
  color: var(--g-700);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--ink);
}
.hero__lead {
  margin-top: 22px;
  font-size: 18px;
  color: var(--muted);
  max-width: 34rem;
  line-height: 1.7;
}
.hero__ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__stats { margin-top: 40px; display: flex; gap: 32px; }
.hero__stats b { display: block; font-size: 26px; font-weight: 800; color: var(--g-600); }
.hero__stats span { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------- Section shell */
.section { padding: 88px 0; }
.section--tint { background: var(--tint-wash); }
.section__head { max-width: 640px; }
.section__head.is-center { margin: 0 auto; text-align: center; }
.section__eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-600);
  margin-bottom: 10px;
}
.section__title { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.section__subtitle { margin-top: 14px; font-size: 17px; color: var(--muted); line-height: 1.7; }

/* Generic bordered card used throughout the marketing sections */
.g-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px;
}
.g-icon-badge {
  width: 46px; height: 46px;
  border-radius: 0.9rem;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

/* Problem section */
.stat-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat-card { text-align: center; }
.stat-card .g-icon-badge { margin: 0 auto 14px; background: #fdecea; color: #c0392b; }
.stat-card__value { font-size: 30px; font-weight: 800; color: var(--ink); }
.stat-card__label { margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

.issue-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.issue-card .g-icon-badge { background: transparent; width: auto; height: auto; margin-bottom: 10px; color: var(--g-600); }
.issue-card h3 { font-size: 15px; font-weight: 700; }
.issue-card p { margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

@media (max-width: 900px) { .stat-grid { grid-template-columns: 1fr; } .issue-grid { grid-template-columns: repeat(2, 1fr); } }
/* Two columns of body copy stop fitting well below ~560px — at 320px they
   overflowed the page entirely. Single column from here down. */
@media (max-width: 560px) { .issue-grid { grid-template-columns: 1fr; } }

/* Solution section */
.feature-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card .g-icon-badge { background: var(--g-50); color: var(--g-600); }
.feature-card h3 { font-size: 15px; font-weight: 700; }
.feature-card p { margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* Last-mile (local shop network) section */
.lastmile-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lastmile-card { position: relative; }
.lastmile-card__num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--g-600);
  color: var(--white);
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.lastmile-card h3 { font-size: 15.5px; font-weight: 700; }
.lastmile-card p { margin-top: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

@media (max-width: 900px) { .lastmile-grid { grid-template-columns: 1fr; } }

/* CTA + footer */
.cta-banner {
  border-radius: var(--radius);
  background: var(--g-500);
  color: var(--white);
  padding: 56px 32px;
  text-align: center;
  box-shadow: var(--shadow-lift);
}
.cta-banner h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; }
.cta-banner p { margin: 14px auto 0; max-width: 34rem; color: var(--on-accent-soft); }
.cta-banner__ctas { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0;
}
.site-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer__brand { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.site-footer__brand img { width: 26px; height: auto; aspect-ratio: 513/238; }
.site-footer p { font-size: 13px; color: var(--footer-muted); }

/* ---------------------------------------------------------- Reveal-on-scroll
   A lightweight stand-in for the original's Framer Motion whileInView fade
   ups — one IntersectionObserver toggles this class, CSS does the rest. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
  :root { --gutter: 24px; }
  .site-nav__row { height: 58px; }
  /* padding-block for the same reason as the base rule above — the gutter
     belongs to .wrap and nothing here should reach across and clear it. */
  .hero__grid { padding-block: 40px 56px; gap: 32px; }
  .hero__stats { gap: 22px; flex-wrap: wrap; }
  .section { padding: 60px 0; }
  .cta-banner { padding: 40px var(--gutter); }
}