@extends('layouts.app')

@section('title', 'Lavaustral | Lavandería en la Región de Aysén')
@section('description', 'Lavandería a domicilio en Coyhaique y Puerto Aysén. Más de 20 años de experiencia: reserva tu retiro y te devolvemos la ropa lista. Delivery gratis.')

@section('content')

    <!-- Hero Section -->
    <section id="hero" class="lav-hero" aria-label="Portada Lavaustral">

      <video class="lav-hero-video" id="lavHeroVideo" muted loop playsinline preload="none" aria-hidden="true" data-src="{{ asset('theme/guest/assets/img/lavaustral/bg.mp4') }}"></video>
      <div class="lav-hero-video-overlay" aria-hidden="true"></div>

      <div class="container">
        <div class="lav-hero-grid">

          <div class="lav-hero-content" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">

            <p class="lav-hero-eyebrow">— Lavandería en la Región de Aysén</p>

            <h1 class="lav-hero-headline">
                Tu ropa vuelve limpia,<br>
                <span class="lav-hero-headline-accent">y tú no te mueves de casa.</span>
            </h1>

            <p class="lav-hero-lead">
              Iniciamos nuestra trayectoria en 2004 respondiendo a los exigentes estándares de la industria acuícola regional. Tras años cultivando la confianza de grandes empresas y proveedores, hoy ponemos esa misma experiencia y rigurosidad al servicio de tu familia.Queremos hacer tu vida más simple: tú agendas el retiro, nosotros nos encargamos del lavado y te devolvemos tu ropa impecable, lista para disfrutar.
            </p>

            <p class="lav-hero-tagline">— <span class="lav-hero-tagline-highlight">Tu tiempo nos importa</span> · Delivery 100% gratis en todos tus pedidos</p>

            <div class="lav-hero-cta">
              <a href="{{ route('booking') }}" class="lav-hero-btn lav-hero-btn-primary">
                <i class="bi bi-arrow-up-short" aria-hidden="true"></i>
                <span>Pide tu Lavado Aquí</span>
              </a>
              <a href="{{ route('services.public') }}" class="lav-hero-btn lav-hero-btn-secondary">
                <span>Ver Servicios</span>
              </a>
            </div>

            <div class="lav-hero-trust" aria-label="Datos de confianza">
              <div class="lav-hero-trust-item">
                <i class="bi bi-award-fill lav-hero-trust-icon" aria-hidden="true"></i>
                <div class="lav-hero-trust-copy">
                  <span class="lav-hero-trust-value">+20</span>
                  <span class="lav-hero-trust-label">años de experiencia</span>
                </div>
              </div>

              <div class="lav-hero-trust-item">
                <i class="bi bi-truck lav-hero-trust-icon" aria-hidden="true"></i>
                <div class="lav-hero-trust-copy">
                  <span class="lav-hero-trust-value">A domicilio</span>
                  <span class="lav-hero-trust-label">Coyhaique y Puerto Aysén</span>
                </div>
              </div>

              <div class="lav-hero-trust-item">
                <i class="bi bi-shop lav-hero-trust-icon" aria-hidden="true"></i>
                <div class="lav-hero-trust-copy">
                  <span class="lav-hero-trust-value">2 formas</span>
                  <span class="lav-hero-trust-label">domicilio o en nuestro local</span>
                </div>
              </div>

              <div class="lav-hero-trust-item">
                <i class="bi bi-gift-fill lav-hero-trust-icon" aria-hidden="true"></i>
                <div class="lav-hero-trust-copy">
                  <span class="lav-hero-trust-value">Gratis</span>
                  <span class="lav-hero-trust-label">retiro y entrega a domicilio</span>
                </div>
              </div>
            </div>

          </div>

          <aside class="lav-hero-card" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200" aria-label="Cómo reservar tu retiro">
            <span class="lav-hero-card-badge">Nuevo · a domicilio</span>

            <h2 class="lav-hero-card-title">Reservar es simple</h2>
            <p class="lav-hero-card-desc">Coordinamos el retiro en tu puerta y te avisamos cuando esté lista.</p>

            <ol class="lav-hero-card-steps">
              <li class="lav-hero-card-step">
                <span class="lav-hero-card-step-num">1</span>
                <div class="lav-hero-card-step-copy">
                  <strong>Reserva online</strong>
                  <span>Elige el servicio, día y dirección.</span>
                </div>
              </li>

              <li class="lav-hero-card-step">
                <span class="lav-hero-card-step-num">2</span>
                <div class="lav-hero-card-step-copy">
                  <strong>Retiramos tu ropa</strong>
                  <span>Pasamos a buscarla en el horario acordado.</span>
                </div>
              </li>

              <li class="lav-hero-card-step">
                <span class="lav-hero-card-step-num">3</span>
                <div class="lav-hero-card-step-copy">
                  <strong>La devolvemos lista</strong>
                  <span>Limpia, doblada o planchada y embolsada en tu hogar.</span>
                </div>
              </li>
            </ol>

          </aside>

        </div>
      </div>

      <a href="https://wa.me/56984284828" target="_blank" rel="noopener noreferrer" class="lav-hero-whatsapp" aria-label="Contactar por WhatsApp"><i class="bi bi-whatsapp" aria-hidden="true"></i></a>

    </section><!-- /Hero Section -->

    <!-- Business Bridge Section (B2B) -->
    <section id="business-bridge" class="lav-biz-bridge" aria-label="Soluciones para empresas">
      <div class="container">
        <div class="lav-biz-bridge-card" data-aos="fade-up" data-aos-duration="800">

          <div class="lav-biz-bridge-copy">
            <p class="lav-biz-bridge-eyebrow">— Para empresas</p>
            <h2 class="lav-biz-bridge-title">¿Buscas lavandería para tu hotel o industria?</h2>
            <p class="lav-biz-bridge-desc">
              Somos socio estratégico de hotelería, industria acuícola, minería y gastronomía en la Región de Aysén. Capacidad a gran escala, logística propia y trazabilidad de tus prendas.
            </p>
            <ul class="lav-biz-bridge-list">
              <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Volumen industrial garantizado</li>
              <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Retiro y despacho en tus horarios</li>
              <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Más de 20 años trabajando con empresas de la región</li>
            </ul>
          </div>

          <div class="lav-biz-bridge-cta">
            <a href="{{ route('business.quote') }}" class="lav-biz-bridge-btn">
              <span>Solicitar cotización corporativa</span>
              <i class="bi bi-arrow-right" aria-hidden="true"></i>
            </a>
            <a href="{{ route('business') }}" class="lav-biz-bridge-link">Conocer soluciones para empresas</a>
          </div>

        </div>
      </div>
    </section><!-- /Business Bridge Section -->

    <style>
      /* ============================================================
         LAV AUSTRAL — HERO + BUSINESS BRIDGE
         ============================================================ */

      #hero.lav-hero,
      #business-bridge.lav-biz-bridge {
        --lav-agua: linear-gradient(
          115deg,
          var(--lav-brand-green) 0%,
          var(--lav-brand-sky) 100%
        );

        --lav-agua-texto: linear-gradient(
          100deg,
          #8FD8FF 0%,
          #5FE3E8 55%,
          var(--lav-success) 100%
        );

        --lav-texto-claro-suave: #A9BCD8;
      }

      /* ============================================================
         HERO
         ============================================================ */

      #hero.lav-hero {
        position: relative !important;
        overflow: hidden !important;
        background: var(--lav-navy-deep) !important;
        padding: 36px 0 !important;
        min-height: calc(100vh - 84px) !important;

        display: flex !important;
        align-items: center !important;
      }

      /* ============================================================
         VIDEO DE FONDO
         ============================================================ */

      .lav-hero-video {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;

        z-index: 0;
        pointer-events: none;

        opacity: 1;
      }

      @media (prefers-reduced-motion: reduce) {
        .lav-hero-video {
          display: none !important;
        }
      }

      @media (max-width: 768px) {
        .lav-hero-video {
          display: none !important;
        }
      }

      /* ============================================================
         OVERLAY DEL VIDEO
         ============================================================ */

      #hero.lav-hero .lav-hero-video-overlay {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;

        background: linear-gradient(
          90deg,
          rgba(6, 12, 30, .78) 0%,
          rgba(6, 12, 30, .58) 42%,
          rgba(6, 12, 30, .28) 72%,
          rgba(6, 12, 30, .18) 100%
        ) !important;
      }

      /* ============================================================
         CONTENEDOR & GRID
         ============================================================ */

      #hero.lav-hero .container {
        position: relative;
        z-index: 1;

        max-width: 1400px !important;
        width: 100%;
      }

      .lav-hero-grid {
        display: grid;

        grid-template-columns: minmax(0, 1fr) 480px;

        gap: 72px;

        align-items: center;
      }

      .lav-hero-eyebrow {
        display: inline-block;

        font-size: 15px;
        font-weight: 600;

        letter-spacing: .04em;

        text-transform: uppercase;

        color: var(--lav-brand-sky) !important;

        margin-bottom: 22px;
      }

      .lav-hero-headline {
        font-size: clamp(42px, 4.5vw, 64px) !important;

        font-weight: 800 !important;

        line-height: 1.05 !important;

        letter-spacing: -1.8px !important;

        color: #FFFFFF !important;

        margin: 0 0 28px 0 !important;

        max-width: 760px;

        text-shadow:
          0 3px 20px rgba(0, 0, 0, 0.45);
      }

      .lav-hero-headline-accent {
        display: inline;

        background: var(--lav-agua-texto) !important;

        -webkit-background-clip: text !important;
        background-clip: text !important;

        -webkit-text-fill-color: transparent !important;

        color: transparent !important;
      }

      .lav-hero-lead {
        font-size: 19px !important;

        line-height: 1.65 !important;

        font-weight: 500 !important;

        color: #F2F6FC !important;

        max-width: 560px;

        margin-bottom: 24px !important;

        text-shadow:
          0 1px 3px rgba(0, 0, 0, .9),
          0 2px 18px rgba(0, 0, 0, .8);
      }

      .lav-hero-tagline {
        font-size: 18px !important;

        font-weight: 700 !important;

        color: #FFFFFF !important;

        margin-bottom: 40px !important;

        text-shadow:
          0 1px 12px rgba(0, 0, 0, .6);
      }

      .lav-hero-tagline-highlight {
        color: var(--lav-success, #8FD848) !important;
      }

      .lav-hero-cta {
        display: flex;

        align-items: center;

        gap: 18px;

        margin-bottom: 40px;

        flex-wrap: wrap;
      }

      .lav-hero-btn {
        display: inline-flex !important;

        align-items: center;

        justify-content: center;

        gap: 8px;

        padding: 18px 34px !important;

        border-radius: 999px !important;

        font-size: 17px !important;

        font-weight: 600 !important;

        white-space: nowrap;

        transition:
          background-color .2s ease,
          color .2s ease,
          border-color .2s ease,
          box-shadow .2s ease,
          transform .2s ease;
      }

      .lav-hero-btn-primary {
        background: var(--lav-agua) !important;

        color: #06243B !important;

        border: 1px solid transparent !important;

        box-shadow:
          0 10px 26px -12px rgba(47, 159, 224, .85);
      }

      .lav-hero-btn-primary:hover {
        box-shadow:
          0 16px 34px -12px rgba(47, 159, 224, .95);

        color: #06243B !important;

        transform: translateY(-1px);
      }

      .lav-hero-btn-secondary {
        background-color: rgba(6, 12, 30, .35) !important;

        color: #FFFFFF !important;

        border: 1px solid rgba(255, 255, 255, .45) !important;

        backdrop-filter: blur(4px);
      }

      .lav-hero-btn-secondary:hover {
        background-color: rgba(6, 12, 30, .5) !important;

        border-color: rgba(255, 255, 255, .6) !important;

        color: #FFFFFF !important;

        transform: translateY(-1px);
      }

      /* ============================================================
         INDICADORES / CONFIANZA
         ============================================================ */

      .lav-hero-trust {
        display: grid !important;

        grid-template-columns: repeat(4, 1fr) !important;

        gap: 0 !important;

        background: rgba(6, 12, 30, .42) !important;

        border: 1px solid rgba(255, 255, 255, .14) !important;

        border-radius: 18px !important;

        padding: 22px 8px !important;

        backdrop-filter: blur(8px);

        box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .5);

        list-style: none !important;
      }

      .lav-hero-trust-item {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;

        gap: 10px !important;

        padding: 10px 16px !important;

        margin: 0 !important;

        position: relative;

        transition: transform .2s ease;
      }

      .lav-hero-trust-item:hover {
        transform: translateY(-2px);
      }

      /* Separador vertical en Desktop */
      .lav-hero-trust-item + .lav-hero-trust-item::before {
        content: "";

        position: absolute;

        left: 0;
        top: 18%;
        bottom: 18%;

        width: 1px;

        background: linear-gradient(
          to bottom,
          transparent,
          rgba(255, 255, 255, .22),
          transparent
        );
      }

      .lav-hero-trust-icon {
        flex-shrink: 0 !important;

        font-size: 18px;

        color: #06243B !important;

        background: var(--lav-agua) !important;

        width: 42px !important;
        height: 42px !important;

        border-radius: 50% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        line-height: 1 !important;

        box-shadow:
          0 6px 14px -6px rgba(47, 159, 224, .7);
      }

      .lav-hero-trust-copy {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 3px;

        margin: 0 !important;
      }

      .lav-hero-trust-value {
        font-size: 16px;

        font-weight: 800 !important;

        color: #FFFFFF !important;

        line-height: 1.25;

        white-space: nowrap;

        text-shadow:
          0 1px 8px rgba(0, 0, 0, .5);
      }

      .lav-hero-trust-label {
        font-size: 12px;

        font-weight: 600 !important;

        color: #FFFFFF !important;

        opacity: .78;

        line-height: 1.35;

        text-shadow:
          0 1px 8px rgba(0, 0, 0, .5);
      }

      /* ============================================================
         CARD LATERAL
         ============================================================ */

      .lav-hero-card {
        background: #FFFFFF !important;

        border-radius: 20px;

        padding: 40px;

        box-shadow:
          0 20px 48px rgba(0, 0, 0, 0.28);
      }

      .lav-hero-card-badge {
        display: inline-block;

        font-size: 12px;

        font-weight: 700;

        letter-spacing: .03em;

        text-transform: uppercase;

        color: var(--lav-primary) !important;

        background: var(--lav-bg-light) !important;

        padding: 7px 14px;

        border-radius: 999px;

        margin-bottom: 20px;
      }

      .lav-hero-card-title {
        font-size: 24px;

        font-weight: 700;

        color: var(--lav-dark) !important;

        margin-bottom: 8px;
      }

      .lav-hero-card-desc {
        font-size: 15px;

        color: var(--lav-text-secondary) !important;

        line-height: 1.55;

        margin-bottom: 32px;
      }

      .lav-hero-card-steps {
        list-style: none;

        margin: 0;

        padding: 0;

        display: flex;

        flex-direction: column;

        gap: 26px;
      }

      .lav-hero-card-step {
        display: flex;

        gap: 16px;

        align-items: flex-start;
      }

      .lav-hero-card-step-num {
        flex-shrink: 0;

        width: 32px;
        height: 32px;

        border-radius: 50%;

        background: var(--lav-agua) !important;

        color: #06243B !important;

        font-size: 14px;

        font-weight: 700;

        display: flex;

        align-items: center;

        justify-content: center;
      }

      .lav-hero-card-step-copy {
        display: flex;

        flex-direction: column;

        gap: 3px;
      }

      .lav-hero-card-step-copy strong {
        font-size: 15px;

        color: var(--lav-dark) !important;
      }

      .lav-hero-card-step-copy span {
        font-size: 14px;

        color: var(--lav-text-secondary) !important;

        line-height: 1.45;
      }

      /* ============================================================
         WHATSAPP FLOTANTE
         ============================================================ */

      .lav-hero-whatsapp {
        position: fixed !important;

        bottom: 24px !important;
        right: 24px !important;

        width: 52px;
        height: 52px;

        border-radius: 50%;

        background: #25D366 !important;

        color: #FFFFFF !important;

        display: flex !important;

        align-items: center;
        justify-content: center;

        font-size: 24px;

        box-shadow:
          0 8px 20px rgba(37, 211, 102, 0.35);

        z-index: 999 !important;

        transition:
          transform .2s ease,
          box-shadow .2s ease;
      }

      .lav-hero-whatsapp:hover {
        transform: scale(1.06);

        color: #FFFFFF !important;

        box-shadow:
          0 10px 25px rgba(37, 211, 102, 0.45);
      }

      /* ============================================================
         RESPONSIVE — 1200px
         ============================================================ */

      @media (max-width: 1200px) {

        .lav-hero-grid {
          grid-template-columns: minmax(0, 1fr) 420px;

          gap: 48px;
        }

        .lav-hero-headline {
          font-size: 52px !important;

          line-height: 1.08 !important;
        }

      }

      /* ============================================================
         RESPONSIVE — 992px
         ============================================================ */

      @media (max-width: 992px) {

        #hero.lav-hero {
          min-height: auto !important;

          padding: 72px 0 !important;
        }

        .lav-hero-grid {
          grid-template-columns: 1fr;

          gap: 48px;
        }

        .lav-hero-headline {
          font-size: 42px !important;

          line-height: 1.08 !important;

          letter-spacing: -1px !important;
        }

        .lav-hero-lead {
          max-width: none;
        }

        .lav-hero-card {
          max-width: 600px;

          width: 100%;

          margin: 0 auto;
        }

      }

      /* ============================================================
         RESPONSIVE — 768px (CORRECCIÓN DE LÍNEAS MOBILE)
         ============================================================ */

      @media (max-width: 768px) {

        #hero.lav-hero {
          padding: 60px 0 !important;
        }

        .lav-hero-grid {
          gap: 40px;
        }

        .lav-hero-eyebrow {
          font-size: 13px;

          margin-bottom: 16px;
        }

        .lav-hero-headline {
          font-size: 38px !important;

          line-height: 1.08 !important;

          letter-spacing: -.8px !important;

          margin-bottom: 22px !important;
        }

        .lav-hero-lead {
          font-size: 17px !important;

          line-height: 1.55 !important;
        }

        .lav-hero-tagline {
          font-size: 16px !important;

          margin-bottom: 30px !important;
        }

        .lav-hero-cta {
          gap: 12px;

          margin-bottom: 32px;
        }

        .lav-hero-btn {
          padding: 16px 26px !important;

          font-size: 16px !important;
        }

        /* Tarjeta de confianza pasa a grilla 2x2 */
        .lav-hero-trust {
          grid-template-columns: 1fr 1fr !important;

          gap: 0 !important;

          padding: 12px 8px !important;
        }

        .lav-hero-trust-item {
          padding: 16px 12px !important;
          border: none !important;
        }

        /* Desactiva la línea pseudoelemento de desktop para evitar trazos sueltos */
        .lav-hero-trust-item + .lav-hero-trust-item::before {
          display: none !important;
        }

        /* Divisores límpios de grilla 2x2 */
        .lav-hero-trust-item:nth-child(odd) {
          border-right: 1px solid rgba(255, 255, 255, .14) !important;
        }

        .lav-hero-trust-item:nth-child(-n+2) {
          border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
        }

        .lav-hero-trust-icon {
          width: 36px;
          height: 36px;

          font-size: 15px;
        }

        .lav-hero-trust-value {
          font-size: 14px;

          white-space: normal;
        }

        .lav-hero-trust-label {
          font-size: 10.5px;

          line-height: 1.3;
        }

        .lav-hero-card {
          padding: 30px;

          border-radius: 18px;
        }

      }

    /* ============================================================
       BUSINESS BRIDGE — MOBILE OPTIMIZATION
       ============================================================ */
    
    @media (max-width: 576px) {
    
      .lav-biz-bridge {
        padding: 40px 0;
      }
    
      .lav-biz-bridge-card {
        padding: 28px 18px !important; /* Ajusta rellenos internos para ganar espacio */
        border-radius: 18px;
      }
    
      .lav-biz-bridge-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
      }
    
      .lav-biz-bridge-desc {
        font-size: 14.5px !important;
      }
    
      .lav-biz-bridge-cta {
        width: 100%;
        white-space: normal !important; /* Permite que el texto baje de línea si el teléfono es muy angosto */
      }
    
      .lav-biz-bridge-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 18px !important;
        font-size: 15px !important;
        white-space: normal !important; /* Permite salto de línea en el texto del botón */
        text-align: center;
      }
    
      .lav-biz-bridge-btn span {
        line-height: 1.2;
      }
    
      .lav-biz-bridge-link {
        width: 100%;
        text-align: center;
        white-space: normal !important;
      }
    
    }

      /* ============================================================
         BUSINESS BRIDGE
         ============================================================ */

      .lav-biz-bridge {
        padding: 72px 0;

        background: #FFFFFF;
      }

      #business-bridge.lav-biz-bridge .container {
        max-width: 1400px;
      }

      .lav-biz-bridge-card {
        display: grid;

        grid-template-columns: 1fr auto;

        gap: 48px;

        align-items: center;

        background: var(--lav-navy-deep);

        background-image:
          radial-gradient(
            26vw 26vw at -6vw -10vw,
            rgba(47, 159, 224, .4),
            transparent 60%
          ),
          radial-gradient(
            20vw 20vw at 104vw 110vw,
            rgba(141, 198, 63, .25),
            transparent 60%
          );

        border-radius: 24px;

        padding: 56px 64px;
      }

      .lav-biz-bridge-eyebrow {
        font-size: 14px;

        font-weight: 600;

        letter-spacing: .04em;

        text-transform: uppercase;

        color: var(--lav-brand-sky);

        margin-bottom: 16px;
      }

      .lav-biz-bridge-title {
        font-size: 32px;

        font-weight: 800;

        line-height: 1.2;

        color: #FFFFFF;

        margin-bottom: 16px;
      }

      .lav-biz-bridge-desc {
        font-size: 16px;

        line-height: 1.6;

        color: var(
          --lav-texto-claro-suave,
          #B3C4DF
        );

        max-width: 560px;

        margin-bottom: 24px;
      }

      .lav-biz-bridge-list {
        list-style: none;

        margin: 0;

        padding: 0;

        display: flex;

        flex-direction: column;

        gap: 10px;
      }

      .lav-biz-bridge-list li {
        display: flex;

        align-items: center;

        gap: 10px;

        font-size: 15px;

        color: #C6D5EC;
      }

      .lav-biz-bridge-list li i {
        color: var(--lav-success);

        font-size: 16px;
      }

      .lav-biz-bridge-cta {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

        white-space: nowrap;
      }

      .lav-biz-bridge-btn {
        display: inline-flex;

        align-items: center;

        gap: 10px;

        background: var(--lav-agua);

        color: #06243B !important;

        font-size: 16px;

        font-weight: 700;

        padding: 16px 28px;

        border-radius: 999px;

        transition:
          box-shadow .2s ease,
          transform .2s ease;
      }

      .lav-biz-bridge-btn:hover {
        box-shadow:
          0 10px 24px -10px rgba(47, 159, 224, .7);

        transform: translateX(2px);
      }

      .lav-biz-bridge-link {
        font-size: 14px;

        font-weight: 600;

        color:
          var(--lav-texto-claro-suave, #B3C4DF) !important;

        text-decoration: underline;

        text-underline-offset: 4px;
      }

      .lav-biz-bridge-link:hover {
        color: #FFFFFF !important;
      }

      /* ============================================================
         BUSINESS BRIDGE — TABLET / MOBILE
         ============================================================ */

      @media (max-width: 992px) {

        .lav-biz-bridge {
          padding: 56px 0;
        }

        .lav-biz-bridge-card {
          grid-template-columns: 1fr;

          gap: 32px;

          padding: 40px 32px;
        }

        .lav-biz-bridge-cta {
          align-items: flex-start;
        }

        .lav-biz-bridge-title {
          font-size: 26px;
        }

      }

      @media (max-width: 576px) {

        .lav-biz-bridge {
          padding: 48px 0;
        }

        .lav-biz-bridge-card {
          padding: 32px 24px;

          border-radius: 18px;
        }

        .lav-biz-bridge-title {
          font-size: 24px;
        }

        .lav-biz-bridge-desc {
          font-size: 15px;
        }

        .lav-biz-bridge-btn {
          width: 100%;

          justify-content: center;
        }

      }

    </style>

    <script>
      (function () {
        var video = document.getElementById('lavHeroVideo');
        if (!video) return;

        var isDesktop = window.matchMedia('(min-width: 769px)').matches;
        var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

        if (isDesktop && !reducedMotion) {
          var source = document.createElement('source');
          source.src = video.dataset.src;
          source.type = 'video/mp4';
          video.appendChild(source);
          video.load();
          video.autoplay = true;
          video.play().catch(function () {});
        }
      })();
    </script>

@endsection