*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #030305;
      --panel: rgba(10, 10, 14, 0.82);
      --card: rgba(14, 14, 20, 0.92);
      --neon-purple: #b026ff;
      --neon-cyan: #00f0ff;
      --neon-pink: #ff2a6d;
      --neon-green: #39ff14;
      --text-primary: #f0f0f5;
      --text-secondary: #a0a0b0;
      --text-dim: #606070;
      --border: rgba(176, 38, 255, 0.28);
      --border-hover: rgba(176, 38, 255, 0.75);
      --radius-lg: 18px;
      --radius-md: 10px;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
    }
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(rgba(176, 38, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(176, 38, 255, 0.06) 1px, transparent 1px);
      background-size: 50px 50px;
      mask-image: radial-gradient(circle at center, black 30%, transparent 85%);
      animation: gridMove 20s linear infinite;
    }
    @keyframes gridMove {
      from { transform: perspective(500px) rotateX(60deg) translateY(0); }
      to { transform: perspective(500px) rotateX(60deg) translateY(50px); }
    }
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -3;
      background:
        radial-gradient(circle at 20% 30%, rgba(176, 38, 255, 0.35), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(0, 240, 255, 0.22), transparent 45%);
      filter: blur(60px);
      animation: pulse 8s ease-in-out infinite alternate;
    }
    @keyframes pulse {
      from { opacity: 0.7; transform: scale(1); }
      to { opacity: 1; transform: scale(1.08); }
    }
    .scanlines {
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      background: repeating-linear-gradient(
        0deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px,
        transparent 1px, transparent 3px
      );
      opacity: 0.3;
    }
    @keyframes logoPulse {
      0%, 100% { box-shadow: 0 0 30px -5px var(--neon-purple); }
      50% { box-shadow: 0 0 45px -2px var(--neon-purple); }
    }
    @keyframes textGlitch {
      0%, 90%, 100% { text-shadow: 0 0 25px rgba(176,38,255,0.35); }
      92% { text-shadow: 2px 0 0 var(--neon-cyan), -2px 0 0 var(--neon-pink); }
      94% { text-shadow: -2px 0 0 var(--neon-cyan), 2px 0 0 var(--neon-pink); }
    }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
    @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    .hero {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 2rem 1rem;
    }
    .hero-card {
      max-width: 920px;
      width: 100%;
      background: var(--panel);
      backdrop-filter: blur(24px);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: 0 0 40px -10px rgba(176,38,255,.35), inset 0 1px 0 rgba(255,255,255,0.06);
      padding: 3rem 2rem;
      text-align: center;
      position: relative;
      animation: rise .7s ease-out both;
    }
    .hero-card::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: var(--radius-lg);
      padding: 1px;
      background: linear-gradient(135deg, var(--neon-purple), transparent 40%, transparent 60%, var(--neon-cyan));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0.6;
      pointer-events: none;
    }
    .logo-hero {
      width: 80px; height: 80px;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.25rem;
      box-shadow: 0 0 35px -5px var(--neon-purple);
      animation: logoPulse 3s ease-in-out infinite;
    }
    .logo-hero i { font-size: 38px; color: #fff; }
    .hero-card h1 {
      font-family: 'Orbitron', sans-serif;
      font-size: 38px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: .5rem;
      background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textGlitch 4s infinite;
    }
    .hero-card .subtitle {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: .4rem;
    }
    .hero-card .tagline {
      font-size: 14px;
      color: var(--text-secondary);
      max-width: 480px;
      margin: 0 auto 1.5rem;
      line-height: 1.6;
    }
    .hero-badges {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 2rem;
    }
    .badge {
      font-family: 'Orbitron', sans-serif;
      font-size: 10px;
      padding: 5px 12px;
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: .06em;
      border: 1px solid;
      text-transform: uppercase;
    }
    .badge.purple { color: var(--neon-purple); border-color: rgba(176,38,255,.45); background: rgba(176,38,255,.10); }
    .badge.cyan   { color: var(--neon-cyan); border-color: rgba(0,240,255,.45); background: rgba(0,240,255,.10); }
    .badge.pink   { color: var(--neon-pink); border-color: rgba(255,42,109,.45); background: rgba(255,42,109,.10); }
    .badge.green  { color: var(--neon-green); border-color: rgba(57,255,20,.45); background: rgba(57,255,20,.10); }

    .cta-buttons {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      border-radius: 999px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 17px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease;
      border: 1px solid;
    }
    .cta-btn:hover { transform: translateY(-2px); }
    .cta-btn.whatsapp {
      background: rgba(37, 211, 102, 0.12);
      border-color: rgba(37, 211, 102, 0.4);
      color: #25d366;
      box-shadow: 0 0 20px -5px rgba(37, 211, 102, 0.3);
    }
    .cta-btn.whatsapp:hover { box-shadow: 0 0 35px -5px rgba(37, 211, 102, 0.5); }
    .cta-btn.call {
      background: rgba(176, 38, 255, 0.12);
      border-color: rgba(176, 38, 255, 0.4);
      color: var(--neon-purple);
      box-shadow: 0 0 20px -5px rgba(176, 38, 255, 0.3);
    }
    .cta-btn.call:hover { box-shadow: 0 0 35px -5px rgba(176, 38, 255, 0.5); }
    .cta-btn.email {
      background: rgba(0, 240, 255, 0.08);
      border-color: rgba(0, 240, 255, 0.35);
      color: var(--neon-cyan);
    }
    .cta-btn.email:hover { box-shadow: 0 0 25px -5px rgba(0,240,255,0.35); }
    .cta-btn i { font-size: 22px; }

    .section {
      max-width: 920px;
      margin: 0 auto;
      padding: 0 1rem 3rem;
    }
    .section + .section { margin-top: 1rem; }
    .section-label {
      font-family: 'Orbitron', sans-serif;
      font-size: 11px;
      font-weight: 600;
      color: var(--neon-purple);
      text-transform: uppercase;
      letter-spacing: .18em;
      margin-bottom: 1.25rem;
      display: inline-block;
      text-shadow: 0 0 10px rgba(176,38,255,0.4);
    }
    .section-label::after {
      content: '_';
      margin-left: 4px;
      color: var(--neon-cyan);
      animation: blink 1s step-end infinite;
    }
    .section-icon {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 20px;
      vertical-align: middle;
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
    }
    .svc-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 1.1rem 1.2rem;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .svc-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 35%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
      transform: translateX(-120%) skewX(-20deg);
      pointer-events: none;
    }
    .svc-card:hover::after { animation: shine .7s ease-in-out; }
    @keyframes shine {
      from { transform: translateX(-120%) skewX(-20deg); }
      to { transform: translateX(220%) skewX(-20deg); }
    }
    .svc-card:hover {
      transform: translateY(-3px);
      border-color: var(--border-hover);
      box-shadow: 0 0 30px -8px rgba(176,38,255,.3);
    }
    .svc-card .svc-icon { font-size: 26px; margin-bottom: .6rem; }
    .svc-card .svc-title {
      font-family: 'Rajdhani', sans-serif;
      font-size: 17px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .03em;
      margin-bottom: 4px;
    }
    .svc-card .svc-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .svc-card .svc-price {
      font-family: 'Orbitron', sans-serif;
      font-size: 13px;
      font-weight: 600;
      margin-top: auto;
      padding-top: .7rem;
      background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .site-footer {
      text-align: center;
      padding: 2rem;
      border-top: 1px solid rgba(176,38,255,.15);
    }
    .site-footer p { font-size: 13px; color: var(--text-dim); margin-bottom: .5rem; }
    .site-footer a {
      font-family: 'Orbitron', sans-serif;
      font-size: 11px;
      color: var(--text-secondary);
      text-decoration: none;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .site-footer a:hover { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0,240,255,.35); }
    @media (max-width: 600px) {
      .hero-card { padding: 2rem 1.25rem; }
      .hero-card h1 { font-size: 28px; }
      .cta-btn { padding: 12px 22px; font-size: 15px; }
      .services-grid { grid-template-columns: 1fr; }
    }
  

    .section-info { padding-bottom: 2rem; }
    .info-note { text-align:center; font-size:13px; color: var(--text-secondary); line-height:1.6; }