/* ==========================================================================
   Safety Assist — Responsive layer
   ========================================================================== */

/* ---------- Hero banner slider ---------- */
.hero-slider{ position: relative; }
.hero-slides{
  position: relative;
  min-height: 320px;
}
.hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.hero-slide.is-active{
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hero-dots{ display: flex; gap: 8px; margin-top: var(--space-4); }
.hero-dot{
  width: 28px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.28);
  border: none; cursor: pointer; padding: 0;
  transition: background .2s var(--ease), width .2s var(--ease);
}
.hero-dot.is-active{ background: var(--color-accent); width: 40px; }
.hero-dot:hover{ background: rgba(255,255,255,0.5); }

@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition: opacity .01ms; transform: none; }
}

/* Floating decorative shapes in the hero (paused under reduced-motion via global rule) */
.hero-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.35;
}
.hero-blob-1{
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--color-accent), transparent 70%);
  top: -80px; right: 8%;
  animation: float-a 14s ease-in-out infinite;
}
.hero-blob-2{
  width: 220px; height: 220px;
  background: radial-gradient(circle, var(--color-primary-light), transparent 70%);
  bottom: -60px; left: 4%;
  animation: float-b 18s ease-in-out infinite;
}
@keyframes float-a{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(-24px, 22px); }
}
@keyframes float-b{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(20px, -18px); }
}

/* Wave separators between sections */
.wave-sep{
  display: block;
  width: 100%;
  height: 64px;
  margin-top: -63px;
  position: relative;
  z-index: 2;
}
.wave-sep.flip{ transform: scaleY(-1); }
@media (max-width: 640px){
  .wave-sep{ height: 36px; margin-top: -35px; }
}

/* Hero (homepage) */
.hero{
  position: relative;
  padding: var(--space-6) 0 var(--space-7);
  overflow: hidden;
  background: var(--color-primary-dark);
  color: #fff;
}
.hero::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 80% 60% at 30% 20%, black 40%, transparent 85%);
}
.hero::after{
  content: "";
  position: absolute; right: -10%; top: -10%;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(226,163,57,0.22), transparent 65%);
  pointer-events: none;
}
.hero .container{ position: relative; }
.hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: center;
}
.hero-copy p{ color: rgba(255,255,255,0.72); }
.hero-copy .eyebrow{ color: var(--color-accent); }
.hero-copy h1{ color: #fff; }
.hero-actions{ margin-top: var(--space-4); }
.hero-meta{
  margin-top: var(--space-5);
  display: flex; gap: var(--space-5); flex-wrap: wrap;
}
.hero-meta div .num{ font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: #fff; }
.hero-meta div .lbl{ font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: 4px; max-width: 160px; }

.hero-visual{ position: relative; }
.hero-visual .mock-window{ max-width: 460px; margin-left: auto; }
.hero-visual .mock-phone{
  position: absolute; left: -30px; bottom: -50px; z-index: 2;
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ margin-top: var(--space-4); }
  .hero-visual .mock-window{ margin: 0 auto; }
  .hero-visual .mock-phone{ position: static; margin: 20px auto 0; }
}
@media (max-width: 640px){
  .hero{ padding: var(--space-5) 0 var(--space-6); }
  .hero-meta{ gap: var(--space-3); }
}

/* Container / grid tightening on small screens */
@media (max-width: 480px){
  .container, .container-narrow{ padding: 0 18px; }
  .btn{ width: 100%; }
  .btn-row:not(.inline) .btn{ width: 100%; }
  .btn-row.center{ flex-direction: column; align-items: stretch; }
}

/* Navigation: switch to mobile at tablet breakpoint */
@media (max-width: 980px){
  .nav-desktop, .nav-cta-group .btn{ display: none; }
  .nav-toggle{ display: flex; }
  .nav-cta-group{ gap: 0; }
}

/* Who we serve / benefits grids collapse gracefully already via .grid rules */

/* Persona / benefit sections */
.persona-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 900px){ .persona-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .persona-grid{ grid-template-columns: 1fr; } }

.benefit-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 900px){ .benefit-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .benefit-grid{ grid-template-columns: 1fr; } }

/* Pricing */
.pricing-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); align-items: stretch; }
@media (max-width: 900px){ .pricing-grid{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* Table responsiveness */
@media (max-width: 640px){
  .compare-table{ display: block; overflow-x: auto; white-space: nowrap; }
}

/* Footer app badges wrap nicely already via flex-wrap */

/* Utility: hide/show */
.hide-mobile{ display: initial; }
.show-mobile{ display: none; }
@media (max-width: 640px){
  .hide-mobile{ display: none; }
  .show-mobile{ display: initial; }
}