<svelte:head>
  <title>Nosotros – Seidoor | Servicio Técnico de Montacargas</title>
  <meta name="description" content="Conoce a Seidoor: 8 años de experiencia en mantenimiento y reparación de montacargas y apiladores eléctricos en Costa Rica." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Exo+2:wght@300;400;500;600&display=swap" rel="stylesheet" />
</svelte:head>

<script>
  import { onMount } from 'svelte';

  let menuOpen = $state(false);
  let navSolid = $state(false);

  const values = [
    {
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`,
      title: 'Confiabilidad',
      desc: 'Cada trabajo que ejecutamos lleva el peso de 8 años de experiencia y el compromiso de devolver su equipo a plena operación.'
    },
    {
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/></svg>`,
      title: 'Precisión Técnica',
      desc: 'Diagnóstico exacto antes de intervenir. Utilizamos metodologías técnicas rigurosas para identificar y resolver fallas de raíz.'
    },
    {
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>`,
      title: 'Especialización',
      desc: 'Nos dedicamos exclusivamente al servicio de montacargas y apiladores eléctricos. No hacemos de todo — hacemos esto muy bien.'
    },
    {
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>`,
      title: 'Servicio al Cliente',
      desc: 'Comunicación clara, tiempos de respuesta rápidos y soluciones que se adaptan a las necesidades operativas de cada empresa.'
    }
  ];

  const brands = ['Toyota', 'Yale', 'Raymond', 'Komatsu', 'Crown'];

  onMount(() => {
    const handleScroll = () => { navSolid = window.scrollY > 60; };
    window.addEventListener('scroll', handleScroll, { passive: true });

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(el => {
        if (el.isIntersecting) el.target.classList.add('revealed');
      });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

    return () => {
      window.removeEventListener('scroll', handleScroll);
      observer.disconnect();
    };
  });
</script>

<!-- NAV -->
<nav class={navSolid ? 'nav-bar nav-solid' : 'nav-bar'}>
  <div class="nav-inner">
    <a href="/" class="nav-logo">
      <img src="/logo.png" alt="Seidoor" class="h-16 w-auto" />
    </a>
    <div class="nav-links">
      <a href="/" class="nav-link">Inicio</a>
      <a href="/about" class="nav-link active-link">Nosotros</a>
      <a href="/#servicios" class="nav-link">Servicios</a>
      <a href="/#galeria" class="nav-link">Galería</a>
      <a href="/#contacto" class="nav-link">Contacto</a>
      <a href="https://wa.me/50683097441?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener" class="nav-cta">WhatsApp</a>
    </div>
    <button class="hamburger" onclick={() => menuOpen = !menuOpen} aria-label="Menú">
      <span class={menuOpen ? 'bar bar-top open' : 'bar bar-top'}></span>
      <span class={menuOpen ? 'bar bar-mid open' : 'bar bar-mid'}></span>
      <span class={menuOpen ? 'bar bar-bot open' : 'bar bar-bot'}></span>
    </button>
  </div>
  {#if menuOpen}
    <div class="mobile-menu">
      <a href="/" class="mob-link" onclick={() => menuOpen = false}>Inicio</a>
      <a href="/about" class="mob-link" onclick={() => menuOpen = false}>Nosotros</a>
      <a href="/#servicios" class="mob-link" onclick={() => menuOpen = false}>Servicios</a>
      <a href="/#galeria" class="mob-link" onclick={() => menuOpen = false}>Galería</a>
      <a href="/#contacto" class="mob-link" onclick={() => menuOpen = false}>Contacto</a>
      <a href="https://wa.me/50683097441?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener" class="mob-cta">WhatsApp</a>
    </div>
  {/if}
</nav>

<!-- ABOUT HERO -->
<section class="about-hero">
  <div class="hero-grid-overlay" aria-hidden="true"></div>
  <!-- Background image -->
  <div class="hero-img-bg" aria-hidden="true"></div>
  <div class="hero-overlay" aria-hidden="true"></div>
  <div class="about-hero-content">
    <div class="hero-badge reveal">
      <span class="badge-line"></span>
      <span class="badge-text">QUIÉNES SOMOS</span>
      <span class="badge-line"></span>
    </div>
    <h1 class="about-hero-title reveal">Sobre<br/><span class="title-accent">Seidoor</span></h1>
    <p class="about-hero-sub reveal">Especialistas en servicio técnico de montacargas y apiladores eléctricos en Costa Rica</p>
  </div>
  <!-- Sawtooth bottom -->
  <div class="hero-saw-bottom" aria-hidden="true">
    <svg viewBox="0 0 1440 40" preserveAspectRatio="none"><path d="M0,40 L0,20 L40,0 L80,20 L120,0 L160,20 L200,0 L240,20 L280,0 L320,20 L360,0 L400,20 L440,0 L480,20 L520,0 L560,20 L600,0 L640,20 L680,0 L720,20 L760,0 L800,20 L840,0 L880,20 L920,0 L960,20 L1000,0 L1040,20 L1080,0 L1120,20 L1160,0 L1200,20 L1240,0 L1280,20 L1320,0 L1360,20 L1400,0 L1440,20 L1440,40 Z" fill="#2A2A2A"/></svg>
  </div>
</section>

<!-- STORY SECTION -->
<section class="section-story">
  <div class="story-grid">
    <div class="story-text reveal">
      <div class="section-label">NUESTRA HISTORIA</div>
      <h2 class="section-title-left">8 Años de<br/>Excelencia Técnica</h2>
      <div class="title-underline-left"></div>
      <p class="story-body">Seidoor nació de una necesidad clara en el sector industrial costarricense: contar con técnicos verdaderamente especializados en el mantenimiento y reparación de montacargas y equipo de elevación eléctrica.</p>
      <p class="story-body">Durante 8 años hemos construido una reputación sólida atendiendo bodegas, plantas industriales y centros de distribución a lo largo de Costa Rica. Trabajamos con las marcas líderes del mercado: Toyota, Yale, Raymond, Komatsu y más.</p>
      <p class="story-body">Nuestro enfoque es simple: diagnóstico preciso, intervención técnica eficaz y comunicación honesta con cada cliente. No hacemos de todo — hacemos el servicio técnico de montacargas mejor que nadie.</p>
      <a href="https://wa.me/50683097441?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener" class="btn-primary" style="margin-top:1.75rem; display:inline-flex;">
        <svg viewBox="0 0 24 24" fill="currentColor" class="btn-icon"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.117.549 4.107 1.51 5.84L.057 23.049a.75.75 0 00.921.921l5.21-1.453A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.716 9.716 0 01-4.946-1.352l-.355-.212-3.668 1.023 1.023-3.668-.212-.355A9.716 9.716 0 012.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/></svg>
        Contáctenos hoy
      </a>
    </div>

    <div class="story-visual reveal">
      <div class="story-img-frame">
        <img src="/gallery/5.jpg" alt="Montacargas Yale en operación" class="story-img" loading="lazy" />
        <div class="story-img-border"></div>
      </div>
      <div class="story-badge-float">
        <span class="sbf-num">8</span>
        <span class="sbf-label">Años en<br/>el Mercado</span>
      </div>
    </div>
  </div>
</section>

<!-- STATS BAND -->
<div class="stats-band reveal">
  <div class="stats-band-inner">
    <div class="sband-item">
      <span class="sband-num">✓</span>
      <span class="sband-label">Todas las Marcas</span>
    </div>
    <div class="sband-divider"></div>
    <div class="sband-item">
      <span class="sband-num">8</span>
      <span class="sband-label">Años en el Mercado</span>
    </div>
    <div class="sband-divider"></div>
    <div class="sband-item">
      <span class="sband-num">CR</span>
      <span class="sband-label">Cobertura Nacional</span>
    </div>
    <div class="sband-divider"></div>
    <div class="sband-item">
      <span class="sband-num">5</span>
      <span class="sband-label">Servicios Especializados</span>
    </div>
  </div>
</div>

<!-- VALUES SECTION -->
<section class="section-values">
  <div class="section-header-center reveal">
    <div class="section-label-c">NUESTROS VALORES</div>
    <h2 class="section-title-c">Lo que nos define</h2>
    <div class="title-underline-c"></div>
  </div>
  <div class="values-grid">
    {#each values as val, i}
      <div class="value-card reveal" style="animation-delay: {i * 100}ms">
        <div class="val-icon">{@html val.icon}</div>
        <h3 class="val-title">{val.title}</h3>
        <p class="val-desc">{val.desc}</p>
      </div>
    {/each}
  </div>
</section>

<!-- BRANDS SECTION -->
<section class="section-brands">
  <div class="section-header-center reveal">
    <div class="section-label-c">MARCAS QUE ATENDEMOS</div>
    <h2 class="section-title-c">Experiencia Multimarca</h2>
    <div class="title-underline-c"></div>
  </div>
  <div class="brands-row reveal">
    {#each brands as brand}
      <div class="brand-chip">{brand}</div>
    {/each}
  </div>
  <div class="brands-gallery reveal">
    <img src="/gallery/7.jpg" alt="Toyota" class="brand-img" loading="lazy" />
    <img src="/gallery/5.jpg" alt="Yale" class="brand-img" loading="lazy" />
    <img src="/gallery/4.jpg" alt="Raymond" class="brand-img" loading="lazy" />
    <img src="/gallery/2.jpg" alt="Komatsu" class="brand-img" loading="lazy" />
  </div>
</section>

<!-- CTA SECTION -->
<section class="section-cta">
  <div class="cta-box reveal">
    <div class="cta-gear" aria-hidden="true">
      <svg viewBox="0 0 120 120" fill="none">
        <circle cx="60" cy="60" r="25" stroke="#D4C832" stroke-width="2" opacity="0.5"/>
        <circle cx="60" cy="60" r="50" stroke="#D4C832" stroke-width="1" stroke-dasharray="8 4" opacity="0.2"/>
        <path d="M60 5v15M60 100v15M5 60h15M100 60h15" stroke="#D4C832" stroke-width="1.5" opacity="0.3"/>
      </svg>
    </div>
    <div class="section-label" style="color:#D4C832; letter-spacing:0.3em; font-size:0.7rem; font-family:'Rajdhani',sans-serif; font-weight:600; margin-bottom:0.75rem;">¿LISTO PARA COMENZAR?</div>
    <h2 class="cta-title">Su maquinaria merece<br/>atención de expertos</h2>
    <p class="cta-sub">Contáctenos hoy y reciba una evaluación técnica de su equipo. Atendemos a nivel nacional.</p>
    <div class="cta-actions">
      <a href="https://wa.me/50683097441?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener" class="btn-primary">
        <svg viewBox="0 0 24 24" fill="currentColor" class="btn-icon"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.117.549 4.107 1.51 5.84L.057 23.049a.75.75 0 00.921.921l5.21-1.453A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.716 9.716 0 01-4.946-1.352l-.355-.212-3.668 1.023 1.023-3.668-.212-.355A9.716 9.716 0 012.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/></svg>
        WhatsApp
      </a>
      <a href="tel:50683097441" class="btn-secondary">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="btn-icon"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.8 11.5a19.79 19.79 0 01-3.07-8.67A2 2 0 012.7 1h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 8.73a16 16 0 006.29 6.29l1.1-1.1a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
        +506 8309-7441
      </a>
      <a href="/" class="btn-ghost">Ver Servicios →</a>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="footer">
  <div class="footer-inner">
    <div class="footer-logo">
      <img src="/logo.png" alt="Seidoor" class="h-12 w-auto" />
    </div>
    <div class="footer-tagline">8 años manteniendo tu maquinaria en marcha.</div>
    <div class="footer-links">
      <a href="/" class="footer-link">Inicio</a>
      <a href="/about" class="footer-link">Nosotros</a>
      <a href="/#servicios" class="footer-link">Servicios</a>
      <a href="/#galeria" class="footer-link">Galería</a>
      <a href="/#contacto" class="footer-link">Contacto</a>
    </div>
    <div class="footer-bottom">
      <span class="footer-copy">© 2024 Seidoor. Todos los derechos reservados.</span>
      <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-xs opacity-40 hover:opacity-70 transition-opacity" style="color:#B8B8B0">Hecho por digitalmar.dev</a>
    </div>
  </div>
</footer>

<!-- FLOATING WHATSAPP -->
<a href="https://wa.me/50683097441?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener" class="whatsapp-float" aria-label="WhatsApp">
  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.117.549 4.107 1.51 5.84L.057 23.049a.75.75 0 00.921.921l5.21-1.453A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.716 9.716 0 01-4.946-1.352l-.355-.212-3.668 1.023 1.023-3.668-.212-.355A9.716 9.716 0 012.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/></svg>
  <span class="wa-pulse"></span>
</a>

<style>
  :global(body) {
    background: #2A2A2A;
    color: #B8B8B0;
    font-family: 'Exo 2', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  :global(.reveal) {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  :global(.revealed) {
    opacity: 1;
    transform: translateY(0);
  }

  /* NAV */
  .nav-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: background 0.4s, box-shadow 0.4s;
  }
  .nav-solid {
    background: rgba(26,26,26,0.97);
    box-shadow: 0 2px 0 #D4C832;
    backdrop-filter: blur(10px);
  }
  .nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
  .nav-links { display: none; gap: 0.25rem; align-items: center; }
  @media (min-width: 768px) { .nav-links { display: flex; } }
  .nav-link {
    color: #B8B8B0;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem;
    transition: color 0.2s;
  }
  .nav-link:hover, .active-link { color: #D4C832; }
  .nav-cta {
    background: #D4C832;
    color: #1A1A1A;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5rem 1.25rem;
    margin-left: 0.5rem;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .nav-cta:hover { background: #ede34e; box-shadow: 0 0 12px rgba(212,200,50,0.4); }
  .hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
  @media (min-width: 768px) { .hamburger { display: none; } }
  .bar { display: block; width: 24px; height: 2px; background: #B8B8B0; transition: transform 0.3s, opacity 0.3s; }
  .bar-top.open { transform: translateY(7px) rotate(45deg); background: #D4C832; }
  .bar-mid.open { opacity: 0; }
  .bar-bot.open { transform: translateY(-7px) rotate(-45deg); background: #D4C832; }
  .mobile-menu { background: #1A1A1A; border-top: 1px solid #D4C832; display: flex; flex-direction: column; padding: 1rem 1.25rem 1.5rem; gap: 0.25rem; }
  .mob-link { color: #B8B8B0; text-decoration: none; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem 0; border-bottom: 1px solid rgba(107,107,99,0.3); transition: color 0.2s; }
  .mob-link:hover { color: #D4C832; }
  .mob-cta { background: #D4C832; color: #1A1A1A; text-decoration: none; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.875rem; text-align: center; margin-top: 0.75rem; }

  /* ABOUT HERO */
  .about-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1A1A1A;
    overflow: hidden;
    padding-top: 64px;
  }
  .hero-img-bg {
    position: absolute;
    inset: 0;
    background: url('/gallery/4.jpg') center/cover no-repeat;
    opacity: 0.18;
  }
  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(26,26,26,0.5) 0%, rgba(26,26,26,0.7) 100%);
    z-index: 1;
  }
  .hero-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
      linear-gradient(rgba(212,200,50,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(212,200,50,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
  }
  .about-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 4rem 1.25rem 5rem;
    max-width: 700px;
  }
  .hero-badge { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
  .badge-line { display: block; height: 1px; width: 40px; background: #D4C832; }
  .badge-text { font-family: 'Rajdhani', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.25em; color: #D4C832; }
  .about-hero-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 10vw, 6rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #D4D4CC;
    margin: 0 0 1rem;
    line-height: 1.1;
  }
  .title-accent {
    background: linear-gradient(145deg, #6B6B63, #D4D4CC, #B8B8B0, #6B6B63);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .about-hero-sub { font-family: 'Exo 2', sans-serif; font-size: clamp(0.9rem, 2.5vw, 1.15rem); color: #6B6B63; margin: 0; letter-spacing: 0.05em; line-height: 1.6; }
  .hero-saw-bottom { position: absolute; bottom: -1px; left: 0; right: 0; z-index: 3; line-height: 0; }
  .hero-saw-bottom svg { width: 100%; height: 40px; }

  /* STORY */
  .section-story {
    background: #2A2A2A;
    padding: 5rem 1.25rem;
  }
  .story-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }
  @media (min-width: 768px) {
    .story-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  }
  .section-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: #D4C832;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
  }
  .section-title-left {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    line-height: 1.15;
    background: linear-gradient(145deg, #6B6B63, #D4D4CC, #B8B8B0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .title-underline-left {
    width: 60px;
    height: 3px;
    background: #D4C832;
    margin-bottom: 2rem;
  }
  .story-body {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.95rem;
    color: #B8B8B0;
    line-height: 1.75;
    margin: 0 0 1rem;
  }
  .story-visual {
    position: relative;
  }
  .story-img-frame {
    position: relative;
    border: 1px solid #6B6B63;
    overflow: hidden;
  }
  .story-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    filter: grayscale(20%) brightness(0.8);
    transition: filter 0.4s;
  }
  .story-img-frame:hover .story-img { filter: grayscale(0%) brightness(1); }
  .story-img-border {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(212,200,50,0.25);
    pointer-events: none;
  }
  .story-badge-float {
    position: absolute;
    bottom: -1.5rem;
    right: -1rem;
    background: #D4C832;
    color: #1A1A1A;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.5);
  }
  .sbf-num {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    color: #1A1A1A;
  }
  .sbf-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1A1A1A;
    text-align: center;
    line-height: 1.3;
  }

  /* STATS BAND */
  .stats-band {
    background: #1A1A1A;
    border-top: 1px solid rgba(107,107,99,0.4);
    border-bottom: 1px solid rgba(107,107,99,0.4);
    margin-top: 2rem;
  }
  .stats-band-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 1.25rem;
  }
  .sband-item {
    flex: 1;
    min-width: 130px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }
  .sband-num {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    color: #D4C832;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .sband-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #6B6B63;
    text-align: center;
  }
  .sband-divider {
    width: 1px;
    background: rgba(107,107,99,0.4);
    align-self: stretch;
    flex-shrink: 0;
  }

  /* VALUES */
  .section-values {
    background: #2A2A2A;
    padding: 5rem 1.25rem;
  }
  .section-header-center { text-align: center; margin-bottom: 3rem; }
  .section-label-c {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: #D4C832;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
  }
  .section-title-c {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #D4D4CC;
    margin: 0 0 1rem;
    line-height: 1.15;
    background: linear-gradient(145deg, #6B6B63, #D4D4CC, #B8B8B0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .title-underline-c {
    width: 60px;
    height: 3px;
    background: #D4C832;
    margin: 0 auto;
  }
  .values-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 640px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }
  .value-card {
    background: #1A1A1A;
    border: 1px solid #6B6B63;
    padding: 2rem 1.5rem;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.6), -1px -1px 3px rgba(212,212,204,0.05);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  }
  .value-card:hover {
    border-color: #D4C832;
    box-shadow: 0 0 16px rgba(212,200,50,0.12);
    transform: translateY(-3px);
  }
  .val-icon {
    width: 44px;
    height: 44px;
    color: #D4C832;
    margin-bottom: 1.25rem;
  }
  .val-icon svg { width: 100%; height: 100%; }
  .val-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #D4D4CC;
    margin: 0 0 0.75rem;
  }
  .val-desc {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.85rem;
    color: #6B6B63;
    line-height: 1.65;
    margin: 0;
  }

  /* BRANDS */
  .section-brands {
    background: #1A1A1A;
    padding: 5rem 1.25rem;
  }
  .brands-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto 3rem;
  }
  .brand-chip {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #D4C832;
    border: 1px solid rgba(212,200,50,0.4);
    padding: 0.5rem 1.25rem;
    background: rgba(212,200,50,0.05);
    transition: background 0.2s, border-color 0.2s;
  }
  .brand-chip:hover { background: rgba(212,200,50,0.12); border-color: #D4C832; }
  .brands-gallery {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  @media (min-width: 640px) { .brands-gallery { grid-template-columns: repeat(4, 1fr); } }
  .brand-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    filter: grayscale(40%) brightness(0.7);
    border: 1px solid rgba(107,107,99,0.4);
    transition: filter 0.4s, border-color 0.3s;
  }
  .brand-img:hover {
    filter: grayscale(0%) brightness(1);
    border-color: #D4C832;
  }

  /* CTA */
  .section-cta {
    background: #2A2A2A;
    padding: 5rem 1.25rem;
  }
  .cta-box {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    background: #1A1A1A;
    border: 1px solid rgba(212,200,50,0.4);
    padding: 3rem 2rem;
    position: relative;
    box-shadow: 0 0 40px rgba(212,200,50,0.05);
  }
  .cta-gear {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    opacity: 0.4;
    pointer-events: none;
    animation: gear-spin 30s linear infinite;
  }
  @keyframes gear-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .cta-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #D4D4CC;
    margin: 0 0 1rem;
    line-height: 1.2;
  }
  .cta-sub {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.95rem;
    color: #6B6B63;
    line-height: 1.65;
    margin: 0 0 2rem;
  }
  .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #D4C832;
    color: #1A1A1A;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.875rem 2rem;
    border: 2px solid #D4C832;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    min-height: 44px;
  }
  .btn-primary:hover {
    background: #ede34e;
    box-shadow: 0 0 20px rgba(212,200,50,0.4);
    transform: translateY(-2px);
  }
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #B8B8B0;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.875rem 2rem;
    border: 2px solid #6B6B63;
    transition: border-color 0.2s, color 0.2s, transform 0.2s;
    min-height: 44px;
  }
  .btn-secondary:hover { border-color: #B8B8B0; color: #D4D4CC; transform: translateY(-2px); }
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #D4C832;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.875rem 1.5rem;
    border: 2px solid rgba(212,200,50,0.3);
    transition: border-color 0.2s, background 0.2s;
    min-height: 44px;
  }
  .btn-ghost:hover { border-color: #D4C832; background: rgba(212,200,50,0.06); }
  .btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

  /* FOOTER */
  .footer {
    background: #1A1A1A;
    border-top: 2px solid #D4C832;
    padding: 3rem 1.25rem 2rem;
  }
  .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
  }
  .footer-tagline { font-family: 'Exo 2', sans-serif; font-size: 0.85rem; color: #6B6B63; letter-spacing: 0.05em; font-style: italic; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; }
  .footer-link { font-family: 'Rajdhani', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #6B6B63; text-decoration: none; transition: color 0.2s; }
  .footer-link:hover { color: #D4C832; }
  .footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; border-top: 1px solid rgba(107,107,99,0.3); padding-top: 1.25rem; width: 100%; }
  .footer-copy { font-size: 0.75rem; color: #6B6B63; font-family: 'Exo 2', sans-serif; }

  /* WHATSAPP FLOAT */
  .whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 90;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 16px rgba(37,211,102,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
  }
  .whatsapp-float svg { width: 28px; height: 28px; position: relative; z-index: 1; }
  .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,0.6); }
  .wa-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37,211,102,0.4);
    animation: wa-pulse 2.5s ease-out infinite;
  }
  @keyframes wa-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(2); opacity: 0; }
  }
</style>