:root {
    --accent: #00e5ff;
    --accent2: #ff6b35;
    --dark: #080c14;
    --dark2: #0d1420;
    --card: #111827;
    --border: rgba(0,229,255,0.15);
  }
  * { box-sizing: border-box; }
  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--dark);
    color: #e2e8f0;
    overflow-x: hidden;
  }
  h1,h2,h3,h4,.font-display { font-family: 'Syne', sans-serif; }

  /* ── Animated grid bg ── */
  .grid-bg {
    background-image:
      linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
  }

  /* ── Glow ── */
  .glow { text-shadow: 0 0 40px rgba(0,229,255,0.5); }
  .glow-box { box-shadow: 0 0 30px rgba(0,229,255,0.12), inset 0 1px 0 rgba(0,229,255,0.1); }
  .glow-box:hover { box-shadow: 0 0 50px rgba(0,229,255,0.22), inset 0 1px 0 rgba(0,229,255,0.2); }

  /* ── Accent line ── */
  .accent-line::after {
    content:''; display:block; width:3rem; height:3px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius:2px; margin-top:.75rem;
  }

  /* ── Circuit pattern overlay ── */
  .circuit-overlay {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M10 50h30M40 50v-20M40 30h20M60 30v40M60 70h-20M20 50v30M20 80h20' stroke='rgba(0,229,255,0.06)' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='40' cy='50' r='3' fill='rgba(0,229,255,0.1)'/%3E%3Ccircle cx='60' cy='30' r='3' fill='rgba(0,229,255,0.1)'/%3E%3Ccircle cx='60' cy='70' r='3' fill='rgba(0,229,255,0.1)'/%3E%3C/svg%3E");
    background-size: 100px 100px;
  }

  /* ── Navbar ── */
  nav { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

  /* ── Hero text animation ── */
  @keyframes fadeUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .fade-up { animation: fadeUp .8s ease forwards; opacity:0; }
  .delay-1 { animation-delay:.2s; }
  .delay-2 { animation-delay:.4s; }
  .delay-3 { animation-delay:.6s; }
  .delay-4 { animation-delay:.8s; }

  /* ── Pulse dot ── */
  @keyframes pulse-ring {
    0%   { transform:scale(.8); opacity:1; }
    100% { transform:scale(2);  opacity:0; }
  }
  .pulse-dot::before {
    content:''; position:absolute; inset:0; border-radius:50%;
    background: var(--accent); animation: pulse-ring 1.8s ease-out infinite;
  }

  /* ── Slider ── */
  .slider-track { transition: transform .5s cubic-bezier(.4,0,.2,1); }
  .slide-btn { transition: all .25s; }
  .slide-btn:hover { background: var(--accent); color: #000; }

  /* ── Service card hover ── */
  .service-card {
    transition: transform .3s, box-shadow .3s;
    border: 1px solid var(--border);
    background: var(--card);
  }
  .service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0,229,255,0.12);
    border-color: rgba(0,229,255,0.4);
  }
  .service-icon {
    background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(255,107,53,0.1));
    border: 1px solid rgba(0,229,255,0.2);
  }

  /* ── Stat counter ── */
  .stat-card {
    background: linear-gradient(135deg, rgba(0,229,255,0.06), rgba(255,107,53,0.04));
    border: 1px solid rgba(0,229,255,0.12);
  }

  /* ── APK Button ── */
  .apk-btn {
    background: linear-gradient(135deg, #00e5ff, #0099cc);
    transition: all .3s;
    box-shadow: 0 4px 20px rgba(0,229,255,0.3);
  }
  .apk-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,229,255,0.5);
  }

  /* ── Contact form ── */
  input, textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(0,229,255,0.15);
    color: #e2e8f0;
    transition: border-color .2s;
  }
  input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(0,229,255,0.04);
  }
  input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.3); }

  /* ── Mobile menu ── */
  .mobile-menu { transition: all .3s; }

  /* ── Scrollbar ── */
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: var(--dark); }
  ::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.3); border-radius: 3px; }

  /* ── Section fade-in on scroll ── */
  .reveal { opacity:0; transform:translateY(40px); transition: all .7s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }