@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --black:#0a0a0a; --white:#fff;
  --gray-50:#f5f5f5; --gray-100:#e5e5e5; --gray-400:#888; --gray-500:#666; --gray-700:#2a2a2a; --gray-800:#1a1a1a;
  --red:#ef4444; --orange:#f97316; --yellow:#eab308; --green:#22c55e; --blue:#3b82f6; --purple:#8b5cf6;
  --conic:conic-gradient(var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--purple),var(--red));
  --linear:linear-gradient(135deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--purple));
  --font:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
  --shadow:0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:0 20px 50px rgba(0,0,0,0.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
body{font-family:var(--font);color:var(--black);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;position:relative;width:100%}
body.menu-open{overflow:hidden;height:100vh}
section{scroll-margin-top:72px;max-width:100vw}

/* Testimonials horizontal scroll (mobile-friendly, peek preview) */
.testimonials-scroller{
  display:flex;gap:20px;
  padding:4px 24px 24px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  max-width:100%;
  scroll-padding-inline:24px;
}
.testimonials-scroller::-webkit-scrollbar{display:none}
.testimonials-scroller .testimonial-card{
  flex:0 0 82%;max-width:340px;
  scroll-snap-align:start;
}
@media (min-width:641px){
  .testimonials-scroller{
    max-width:1000px;margin:0 auto;
    padding:4px 24px 24px;
    gap:28px;
    overflow-x:visible;
    scroll-snap-type:none;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
  }
  .testimonials-scroller .testimonial-card{flex:none;max-width:none;min-width:0;width:100%}
}

.container{max-width:1160px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Accessibility: skip link */
.skip-link{position:absolute;top:-40px;left:8px;padding:8px 14px;background:var(--black);color:#fff;z-index:1000;border-radius:6px;font-size:13px;font-weight:600;transition:top 0.2s}
.skip-link:focus{top:8px}

/* Focus visible */
*:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

/* Mobile: burger nav state (controlled via JS) */
.nav-mobile-toggle{display:none}

/* ========================================
   RESPONSIVE — Mobile first breakpoints
   - ≤ 640px : phones
   - 641-900px : tablet / small laptop
   - > 900px : desktop
   ======================================== */

@media (max-width: 900px) {
  .container{padding:0 20px}

  /* Hide desktop nav links, show burger */
  .nav-desktop{display:none !important}
  .nav-mobile-toggle{display:inline-flex !important; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--gray-100); border-radius:8px; background:transparent; cursor:pointer}

  /* Mobile drawer overlay */
  .nav-mobile-drawer{position:fixed; top:60px; left:0; right:0; height:calc(100dvh - 60px); background:#fff; padding:28px 24px; display:flex; flex-direction:column; gap:18px; z-index:99; transform:translateY(-110%); transition:transform 0.3s ease-out; border-top:1px solid var(--gray-100); overflow-y:auto; -webkit-overflow-scrolling:touch}
  .nav-mobile-drawer.open{transform:translateY(0)}
  .nav-mobile-drawer a{font-size:18px; font-weight:500; color:var(--black); padding:10px 0; border-bottom:1px solid var(--gray-100)}
  .nav-mobile-drawer a.btn-cta{margin-top:12px; background:var(--black); color:#fff; padding:14px 20px; border-radius:8px; text-align:center; border-bottom:none}
}

@media (max-width: 640px) {
  /* Typography scales */
  h1{font-size:clamp(28px, 8vw, 42px) !important; line-height:1.08 !important}
  h2{font-size:clamp(24px, 6.5vw, 34px) !important}
  h3{font-size:clamp(18px, 5vw, 24px) !important}

  /* Sections: reduce vertical padding */
  section{padding-top:64px !important; padding-bottom:64px !important}

  /* Hero video: keep 16:9 but ensure it fits */
  section video{max-height:56vh}

  /* Grids collapse to single column */
  .grid-responsive{grid-template-columns:1fr !important}

  /* Touch targets min 44px — buttons and links */
  a.btn, button, [role=button]{min-height:44px; display:inline-flex; align-items:center; justify-content:center}
}

@media (min-width: 901px) {
  .nav-mobile-toggle{display:none !important}
  .nav-mobile-drawer{display:none !important}
}

/* Prevent iOS input zoom */
input, select, textarea{font-size:16px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Image optimizations for lazy loading */
img[loading="lazy"]{background:var(--gray-50)}