:root {
      --blue: #0a4fa3;
      --blue2: #0c62cc;
      --blue-glow: rgba(10,79,163,0.35);
      --dark: #0e1117;
      --dark2: #0b1530;
      --card: rgba(255,255,255,0.06);
      --card2: rgba(255,255,255,0.02);
      --stroke: rgba(255,255,255,0.10);
      --stroke2: rgba(255,255,255,0.12);
      --text: #f8fafc;
      --muted: #a1a1aa;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

    html { scroll-behavior: smooth; }

    body {
      background: radial-gradient(circle at top, var(--dark2), var(--dark));
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* Background tech sutil */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        linear-gradient(transparent 95%, rgba(255,255,255,0.04) 96%),
        linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.04) 96%);
      background-size: 44px 44px;
      opacity: 0.12;
      pointer-events: none;
      z-index: 0;
      animation: gridMove 22s linear infinite;
    }

    @keyframes gridMove {
      from { transform: translateY(0); }
      to { transform: translateY(44px); }
    }

    a { color: inherit; text-decoration: none; }

    /* Header */
    header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 10%;
      background: rgba(14,17,23,0.70);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      transition: background 0.25s ease, box-shadow 0.25s ease;
    }

    header.scrolled {
      background: rgba(14,17,23,0.90);
      box-shadow: 0 10px 40px rgba(0,0,0,0.45);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand img {
      height: 48px;
      padding: 8px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,0.02);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .brand img:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 30px rgba(0,195,255,0.30);
    }

    nav {
      display: flex;
      align-items: center;
      gap: 26px;
    }

    nav a {
      font-weight: 500;
      color: var(--muted);
      position: relative;
      transition: color 0.2s ease;
    }

    nav a:hover { color: var(--text); }

    nav a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 0;
      height: 2px;
      background: linear-gradient(120deg, var(--blue), var(--blue2));
      transition: width 0.25s ease;
    }

    nav a:hover::after { width: 100%; }

    nav a.active { color: var(--text); }
    nav a.active::after { width: 100%; }

    .menu-btn {
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--text);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
    }

    .menu-btn:active { transform: scale(0.98); }

    /* Hero */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 0 10%;
      position: relative;
      z-index: 1;
      background:
        linear-gradient(120deg, rgba(10,79,163,0.58), rgba(14,17,23,0.92)),
        url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1470&auto=format&fit=crop') center/cover;
    }

    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.06), transparent 40%);
      pointer-events: none;
    }

    .hero-content {
      max-width: 680px;
      position: relative;
      z-index: 2;
      padding-top: 90px;
    }

    .hero h1 {
      font-size: clamp(2.3rem, 4vw, 3.5rem);
      line-height: 1.15;
      margin-bottom: 16px;
    }

    .hero p {
      color: #d4d4d8;
      margin-bottom: 28px;
      max-width: 56ch;
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 18px 0 30px;
    }

    .badge {
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      color: #e2e8f0;
      font-size: 0.85rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 18px;
      border-radius: 14px;
      background: linear-gradient(120deg, var(--blue), var(--blue2));
      font-weight: 700;
      border: 1px solid rgba(255,255,255,0.10);
      transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
      cursor: pointer;
      user-select: none;
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 0 35px var(--blue-glow);
    }

    .btn.secondary {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      color: var(--text);
      font-weight: 600;
      box-shadow: none;
    }

    .btn.secondary:hover {
      box-shadow: 0 0 0 rgba(0,0,0,0);
      transform: translateY(-2px);
    }

    .btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

    /* Sections */
    section {
      position: relative;
      z-index: 1;
      padding: 110px 10%;
    }

    .section-title {
      text-align: center;
      margin-bottom: 56px;
    }

    .section-title h2 {
      font-size: clamp(1.9rem, 3vw, 2.4rem);
      margin-bottom: 10px;
    }

    .section-title p { color: var(--muted); }

    /* Cards */
    .services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 28px;
    }

    .card {
      position: relative;
      background: linear-gradient(180deg, var(--card), var(--card2));
      border: 1px solid rgba(255,255,255,0.10);
      backdrop-filter: blur(12px);
      border-radius: 22px;
      padding: 30px;
      overflow: hidden;
      transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
      cursor: pointer;
    }

    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(0,195,255,0.22), transparent 45%);
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    .card::after {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 22px;
      background: linear-gradient(120deg, transparent, rgba(0,195,255,0.35), transparent);
      opacity: 0;
      transition: opacity 0.28s ease;
      pointer-events: none;
    }

    .card:hover {
      transform: translateY(-10px);
      box-shadow: 0 25px 60px rgba(0,0,0,0.45);
      border-color: rgba(0,195,255,0.28);
    }

    .card:hover::before,
    .card:hover::after { opacity: 1; }

    .card h3 { margin-bottom: 10px; }
    .card p { color: #cbd5e1; font-size: 0.95rem; }

    .card .meta {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px;
    }

    .chip {
      font-size: 0.8rem;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      color: #e2e8f0;
    }

    /* Diferenciais */
    .diff {
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.09);
      backdrop-filter: blur(14px);
      border-radius: 26px;
      padding: 54px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 24px;
    }

    .diff .item {
      padding: 18px;
      border-radius: 18px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
    }

    /* Reveal (limpo, sem exagero) */
    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: 0.65s cubic-bezier(.22,1,.36,1);
    }

    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* Modal (detalhes do serviço) */
    .modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.55);
      z-index: 50;
      padding: 18px;
    }

    .modal.open { display: flex; }

    .modal-card {
      width: 100%;
      max-width: 820px;
      background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(15,23,42,0.75));
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(16px);
      border-radius: 26px;
      padding: 26px;
      position: relative;
      box-shadow: 0 30px 90px rgba(0,0,0,0.65);
    }

    .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      cursor: pointer;
    }

    .modal-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 18px;
      margin-top: 10px;
    }

    .modal-box {
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: #e2e8f0;
    }

    .modal-box ul { margin-left: 18px; color: #cbd5e1; }

    /* Contato */
    .contact-wrapper { display: flex; justify-content: center; }

    .glass-form {
      width: 100%;
      max-width: 760px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.10);
      backdrop-filter: blur(14px);
      border-radius: 28px;
      padding: 44px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    .field { position: relative; }
    .field.full { grid-column: 1 / -1; }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      background: rgba(14,17,23,0.72);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 14px;
      padding: 16px 16px;
      color: var(--text);
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      font-size: 0.95rem;
    }

    .field textarea { min-height: 130px; resize: vertical; }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: rgba(0,195,255,0.40);
      box-shadow: 0 0 0 3px rgba(0,195,255,0.12);
    }

    .hint {
      color: var(--muted);
      font-size: 0.85rem;
      margin-top: 6px;
    }

    .form-actions {
      grid-column: 1 / -1;
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      background: rgba(15,23,42,0.92);
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(14px);
      color: #e2e8f0;
      padding: 12px 14px;
      border-radius: 16px;
      display: none;
      z-index: 60;
      max-width: 92vw;
    }

    .toast.show { display: block; }

    /* Botão WhatsApp flutuante */
    .wa-fab {
      position: fixed;
      right: 16px;
      bottom: 16px;
      width: 56px;
      height: 56px;
      border-radius: 18px;
      background: linear-gradient(120deg, #00c853, #00a84a);
      display: grid;
      place-items: center;
      box-shadow: 0 18px 50px rgba(0,0,0,0.55);
      z-index: 55;
      border: 1px solid rgba(255,255,255,0.18);
      transition: transform 0.2s ease;
    }

    .wa-fab:hover { transform: translateY(-3px); }

    /* Footer */
    footer {
      padding: 44px 10%;
      text-align: center;
      color: var(--muted);
      border-top: 1px solid rgba(255,255,255,0.06);
      position: relative;
      z-index: 1;
    }

    /* Mobile */
    @media (max-width: 900px) {
      header { padding: 14px 6%; }
      .hero { padding: 0 6%; }
      section { padding: 90px 6%; }
      .diff { padding: 34px; }
      .glass-form { grid-template-columns: 1fr; padding: 28px; }
      .modal-grid { grid-template-columns: 1fr; }

      .menu-btn { display: inline-flex; }
      nav {
        position: fixed;
        top: 72px;
        right: 6%;
        left: 6%;
        display: none;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
        border-radius: 18px;
        background: rgba(14,17,23,0.92);
        border: 1px solid rgba(255,255,255,0.08);
        backdrop-filter: blur(14px);
      }
      nav.open { display: flex; }
      nav a { padding: 10px 10px; border-radius: 14px; background: rgba(255,255,255,0.03); }
      nav a::after { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
      body::before { animation: none !important; }
    }