*, *::before, *::after { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        font-family: 'DM Sans', sans-serif;
        background: #ffffff;
        color: #1a2e35;
        overflow-x: hidden;
      }

      /* ── Noise/mesh overlay for depth ── */
      .mesh-bg {
        background: 
          radial-gradient(ellipse 80% 60% at 20% 0%, rgba(92,191,196,0.18) 0%, transparent 60%),
          radial-gradient(ellipse 60% 80% at 80% 100%, rgba(42,142,150,0.12) 0%, transparent 60%),
          #f0fafc;
      }
      .mesh-dark {
        background:
          radial-gradient(ellipse 70% 50% at 10% 20%, rgba(92,191,196,0.25) 0%, transparent 55%),
          radial-gradient(ellipse 50% 70% at 90% 80%, rgba(31,111,119,0.3) 0%, transparent 55%),
          #0c2630;
      }

      /* ── Grid dot pattern ── */
      .dot-grid {
        background-image: radial-gradient(circle, rgba(92,191,196,0.25) 1px, transparent 1px);
        background-size: 28px 28px;
      }

      /* ── Glassmorphism card ── */
      .glass {
        background: rgba(255,255,255,0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(92,191,196,0.25);
      }
      .glass-dark {
        background: rgba(12,38,48,0.7);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(92,191,196,0.2);
      }

      /* ── Neon accent line ── */
      .neon-line {
        height: 2px;
        background: linear-gradient(90deg, transparent, #5cbfc4, transparent);
      }

      /* ── CTA Button ── */
      .btn-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0.65rem 1.6rem;
        background: linear-gradient(135deg, #3aa8b0, #1f6f77);
        color: #fff;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 600;
        font-size: 0.9rem;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 20px rgba(92,191,196,0.35);
        text-decoration: none;
      }
      .btn-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(92,191,196,0.55);
        color: #fff;
        text-decoration: none;
      }
      .btn-cta-outline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0.65rem 1.6rem;
        background: transparent;
        color: #3aa8b0;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 600;
        font-size: 0.9rem;
        border-radius: 999px;
        border: 2px solid #3aa8b0;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
      }
      .btn-cta-outline:hover {
        background: #3aa8b0;
        color: #fff;
        text-decoration: none;
        transform: translateY(-2px);
      }

      /* ── Section label pill ── */
      .section-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 14px;
        background: rgba(92,191,196,0.12);
        border: 1px solid rgba(92,191,196,0.35);
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 600;
        color: #2a8e96;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-family: 'Plus Jakarta Sans', sans-serif;
      }

      .section-pill .titulo{
        font-size: 1.5rem;
      }
      .section-pill .dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: #5cbfc4;
        animation: glowPulse 2s ease-in-out infinite;
      }

      /* ── Page section spacing ── */
      .section-pad { padding: 80px 0; }
      @media (max-width: 768px) { .section-pad { padding: 52px 0; } }

      /* ── Navbar scroll effect ── */
      #mainNav {
        transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
      }
      #mainNav.scrolled {
        background: rgba(12,38,48,0.95) !important;
        box-shadow: 0 4px 30px rgba(0,0,0,0.35);
        backdrop-filter: blur(12px);
      }

      /* ── Mobile menu ── */
      #mobileMenu {
        display: none;
        flex-direction: column;
      }
      #mobileMenu.open { display: flex; }

      /* ── Dropdown ── */
      .nav-dropdown { position: relative; }
      .nav-dropdown-menu {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 220px;
        background: rgba(12,38,48,0.97);
        border: 1px solid rgba(92,191,196,0.2);
        border-radius: 12px;
        overflow: hidden;
        z-index: 200;
        box-shadow: 0 16px 40px rgba(0,0,0,0.3);
      }
      .nav-dropdown:hover .nav-dropdown-menu,
      .nav-dropdown.open .nav-dropdown-menu { display: block; }
      .nav-dropdown-menu a {
        display: block;
        padding: 10px 16px;
        color: #d0eff4;
        font-size: 0.875rem;
        font-weight: 500;
        transition: background 0.2s;
        text-decoration: none;
      }
      .nav-dropdown-menu a:hover {
        background: rgba(92,191,196,0.15);
        color: #5cbfc4;
      }

      /* ── Carousel overrides ── */
      .hero-carousel { position: relative; overflow: hidden; }
      .hero-slide {
        width: 100%;
        min-height: 520px;
        background-size: cover;
        background-position: center;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      @media (max-width: 768px) { .hero-slide { min-height: 340px; } }
      .hero-slide::before {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(160deg, rgba(12,38,48,0.72) 0%, rgba(42,142,150,0.45) 100%);
      }

      /* ── Card hover lift ── */
      .card-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 16px;
        overflow: hidden;
      }
      .card-lift:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 50px rgba(92,191,196,0.2);
      }

      /* ── Checklist items ── */
      .check-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 6px 0;
        font-size: 0.95rem;
        color: #2a3a40;
      }
      .check-icon {
        flex-shrink: 0;
        width: 20px; height: 20px;
        background: linear-gradient(135deg, #5cbfc4, #2a8e96);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin-top: 2px;
      }
      .check-icon svg { width: 11px; height: 11px; color: #fff; }

      /* ── Feature card ── */
      .feature-card {
        background: #fff;
        border: 1px solid rgba(92,191,196,0.2);
        border-radius: 16px;
        padding: 28px;
        transition: all 0.3s ease;
      }
      .feature-card:hover {
        border-color: #5cbfc4;
        box-shadow: 0 12px 40px rgba(92,191,196,0.15);
        transform: translateY(-4px);
      }
      .feature-icon {
        width: 52px; height: 52px;
        background: linear-gradient(135deg, rgba(92,191,196,0.15), rgba(42,142,150,0.15));
        border-radius: 14px;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 16px;
        font-size: 1.4rem;
        color: #2a8e96;
      }

      /* ── Headings ── */
      h1, h2, h3, h4, h5, h6 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 700;
        line-height: 1.2;
        color: #0c2630;
      }

      /* ── Divider with icon ── */
      .divider-accent {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 12px 0 24px;
      }
      .divider-accent::before, .divider-accent::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(92,191,196,0.4));
      }
      .divider-accent::after {
        background: linear-gradient(90deg, rgba(92,191,196,0.4), transparent);
      }

      /* ── Footer ── */
      footer {
        background: #0c2630;
        color: #a4e0eb;
        padding: 32px 0 24px;
      }
      footer a { color: #5cbfc4; transition: color 0.2s; text-decoration: none; }
      footer a:hover { color: #a4e0eb; }

      /* Accessibility: visible focus ring */
      :focus-visible { outline: 2px solid #5cbfc4; outline-offset: 3px; }

      /* Smooth page load */
      body { animation: fadeIn 0.4s ease; }