@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap');

    :root {
      --emerald: #4CAF50;
      --emerald-dark: #45a049;
      --blue: #3B82F6;
      --blue-light: #60A5FA;
      --navy: #0F172A;
      --slate: #1E293B;
      --light: #FCFCFC;
      --text-dark: #333;
      --text-light: #E2E8F0;
    }

    body { font-family: 'Inter', sans-serif; transition: background 0.4s, color 0.4s; background: var(--light); color: var(--text-dark); }
    .dark-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--slate) 50%, var(--navy) 100%); }
    .hero-parallax { position: absolute; inset: 0; pointer-events: none; }
    .hero-parallax::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(1200px 400px at 50% -20%, rgba(96,165,250,0.25), transparent 60%);
      transform: translateY(0);
      transition: transform 0.1s linear;
    }

    /* Buttons */
    .button-primary { background-color: var(--emerald); color: #fff; padding: 12px 28px; border-radius: 9999px; transition: all 0.3s ease; }
    .button-primary:hover { background-color: var(--emerald-dark); box-shadow: 0 0 15px rgba(76,175,80,0.5); transform: translateY(-1px); }
    .button-secondary { border: 2px solid var(--emerald); color: var(--emerald); padding: 12px 28px; border-radius: 9999px; transition: all 0.3s ease; }
    .button-secondary:hover { background-color: #f0fdf4; box-shadow: 0 0 10px rgba(76,175,80,0.2); transform: translateY(-1px); }

    /* Header */
    .header-sticky { position: fixed; top: 0; width: 100%; z-index: 50; transition: all 0.3s; }
    .header-light { background: white; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    .header-dark { background: #0f172a; color: #e2e8f0; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }

    /* Dropdown */
    .dropdown-menu { display: none; }
    .group:hover .dropdown-menu { display: block; }

    

    /* Dropdown usability fix: prevent hover-gap closing between button and menu */
    .group:hover .dropdown-menu,
    .group:focus-within .dropdown-menu { display: block; }

    .dropdown-menu { position: absolute; }
    .dropdown-menu::before{
      content:"";
      position:absolute;
      left:0; right:0;
      top:-12px;
      height:12px;
    }

/* Reveal Animations */
    .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* Service card hover */
    .card { background:#fff; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform .25s ease, box-shadow .25s ease; }
    .card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }

    /* Dark overrides */
    body.dark { background: var(--navy); color: var(--text-light); }
    body.dark .card { background: #111827; color: var(--text-light); }
    body.dark .button-secondary { color: var(--blue-light); border-color: var(--blue-light); }
    body.dark .button-secondary:hover { background: rgba(59,130,246,0.08); }
  

/* Fix: prevent section headings hiding under fixed header */
.section-offset {
  scroll-margin-top: 110px;
  padding-top: 110px;
}

/* Offset sections under fixed header */
.offset-under-header{
  margin-top: 6rem;           /* pushes section below fixed header */
  scroll-margin-top: 6rem;    /* ensures in-page jumps land correctly */
}


/* GLOBAL FIX: offset content for fixed header */
main {
  padding-top: 96px; /* matches header height */
}


/* Pro FAQ accordion (accessible) */
.faq-accordion details > summary {
  cursor: pointer;
  list-style: none;
  outline: none;
}
.faq-accordion details > summary::-webkit-details-marker { display: none; }
.faq-accordion details > summary::after {
  content: "＋";
  float: right;
  font-weight: 700;
}
.faq-accordion details[open] > summary::after {
  content: "−";
}
.faq-accordion details[open] {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}


/* Lock icon size for "Why facilities choose WoFo" */
.trust-strip i[data-lucide] {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
}