* { margin: 0; padding: 0; box-sizing: border-box; }
  html { background: #080808; }
  body { background: #080808; color: #f0f0f0; }

  .grid-bg {
    background-image:
      linear-gradient(#1e1e1e 1px, transparent 1px),
      linear-gradient(90deg, #1e1e1e 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 60% 40%, black 20%, transparent 70%);
  }

  .text-gradient {
    background: linear-gradient(135deg, #378ADD 0%, #1D9E75 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .card-hover {
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.2s ease;
  }
  .card-hover:hover {
    border-color: #378ADD !important;
    background: #111 !important;
    transform: translateY(-2px);
  }

  .service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2px; height: 0;
    background: linear-gradient(to bottom, #378ADD, #1D9E75);
    transition: height 0.4s ease;
  }
  .service-card:hover::before { height: 100%; }

  .nav-link {
    position: relative;
    transition: color 0.2s;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 1px;
    background: #378ADD;
    transition: width 0.3s ease;
  }
  .nav-link:hover::after { width: 100%; }

  .btn-primary {
    background: #378ADD;
    color: #fff;
    transition: opacity 0.2s, transform 0.2s;
  }
  .btn-primary:hover { opacity: 0.85; transform: translateY(-1px); }

  .btn-ghost {
    border: 0.5px solid #333;
    transition: border-color 0.2s, transform 0.2s;
  }
  .btn-ghost:hover { border-color: #378ADD; transform: translateY(-1px); }

  .tag-badge {
    background: rgba(55, 138, 221, 0.1);
    border: 0.5px solid rgba(55, 138, 221, 0.3);
    color: #378ADD;
  }

  .contact-item {
    transition: background 0.2s, border-color 0.2s;
  }
  .contact-item:hover {
    background: #111;
    border-color: #378ADD;
  }

  .scroll-indicator {
    animation: bounce 2s ease-in-out infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(6px); opacity: 0.4; }
  }

  .faq-item { transition: background 0.2s; }
  .faq-item:hover { background: #111; }
  .faq-answer { display: none; }
  .faq-item.open .faq-answer { display: block; }
  .faq-item.open .faq-chevron { transform: rotate(180deg); }
  .faq-chevron { transition: transform 0.3s; }

  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: #080808; }
  ::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

  @media (max-width: 640px) {
    .hero-title { font-size: 2.5rem !important; }
  }