@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
    body {
      font-family: 'Inter', sans-serif;
      background-color: #edf4f7;
      color: #1A1A1A;
      overflow-x: hidden;
    }
    h1, h2, h3 {
      font-weight: 300;
      letter-spacing: -0.02em;
    }
    .section-title {
      font-size: 3rem;
      line-height: 1.1;
      margin-bottom: 2rem;
    }
    @media (max-width: 768px) {
      .section-title { font-size: 2.5rem; }
    }
    /* Header com menu */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 1.5rem 2rem;
      z-index: 100;
      color: #1A1A1A;
      /* background-color: rgba(249,249,249,0.8); */
      backdrop-filter: blur(2px);
      border-bottom: 1px solid rgba(226,226,226,0.8);
      transition: background-color 0.3s;
    }
    .logo {
      font-size: 1.5rem;
      font-weight: 300;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-bottom: 1px solid transparent;
      padding-bottom: 0.25rem;
      transition: border-color 0.3s;
    }
    .logo:hover {
      border-bottom-color: #8BB9D1;
    }
    .nav-menu {
      display: flex;
      gap: 2.5rem;
      font-size: 0.9rem;
      font-weight: 300;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .nav-menu a {
      color: #1A1A1A;
      text-decoration: none;
      padding-bottom: 0.25rem;
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s, color 0.3s;
    }
    .nav-menu a:hover {
      border-bottom-color: #8BB9D1;
      color: #8BB9D1;
    }
    /* Scroll reveals */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Cards */
    .product-card, .system-card {
      position: relative;
      background: rgba(255,255,255,0.6);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(226,226,226,0.5);
      transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s;
      border-radius: 2rem;
      overflow: hidden;
    }
    .product-card:hover, .system-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 40px -15px rgba(139,185,209,0.3);
      border-color: transparent;
    }
    .product-card::before, .system-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid transparent;
      border-radius: inherit;
      pointer-events: none;
      transition: border-color 0.3s;
    }
    .product-card:hover::before, .system-card:hover::before {
      border-color: #8BB9D1;
      animation: borderGlow 2s linear infinite;
    }
    @keyframes borderGlow {
      0%, 100% { border-color: #8BB9D1; }
      50% { border-color: #E0F2FE; }
    }
    .card-icon {
      transition: transform 0.4s ease, filter 0.3s;
    }
    .product-card:hover .card-icon, .system-card:hover .card-icon {
      transform: rotateY(10deg) scale(1.1);
      filter: drop-shadow(0 10px 10px rgba(0,0,0,0.1));
    }
    /* Gráfico canvas */
    #chart-canvas {
      width: 100%;
      height: auto;
      background: transparent;
      border-radius: 2rem;
    }
    /* Fundo Three.js */
    #network-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      pointer-events: none;
    }
    .content {
      position: relative;
      z-index: 10;
      background-color: transparent;
    }
    /* Botão pulsante */
    .pulse-btn {
      animation: pulseSoft 3s infinite;
      transition: all 0.3s;
    }
    @keyframes pulseSoft {
      0% { transform: scale(1); box-shadow: 0 4px 14px rgba(0,0,0,0.03); }
      50% { transform: scale(1.02); box-shadow: 0 6px 20px rgba(139,185,209,0.2); }
      100% { transform: scale(1); box-shadow: 0 4px 14px rgba(0,0,0,0.03); }
    }
    /* Gradiente animado */
    .animated-gradient {
      background: linear-gradient(120deg, #F9F9F9, #E0F2FE, #F9F9F9);
      background-size: 200% 200%;
      animation: gradientShift 10s ease infinite;
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    /* Imagens dos sistemas */
    .system-image {
      background: linear-gradient(145deg, #E0F2FE, #F9F9F9);
      border-radius: 1.5rem;
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8BB9D1;
      font-size: 3rem;
      font-weight: 100;
    }
    /* Ajuste para o conteúdo não ficar escondido atrás do header fixo */
    section {
      scroll-margin-top: 80px;
    }