@import url('https://fonts.cdnfonts.com/css/neue-machina');

:root {
  --primary: #0A1A3A;
  --secondary: #00F5FF;
  --accent: #D4AF37;
  --dark: #050F1F;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #FAFAFA;
  color: var(--primary);
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: 'Neue Machina', sans-serif; }

.tech-font { font-family: 'Courier New', monospace; }

.primary-bg { background-color: var(--primary); }
.primary-text { color: var(--primary); }
.secondary-bg { background-color: var(--secondary); }
.secondary-text { color: var(--secondary); }
.accent-bg { background-color: var(--accent); }
.accent-text { color: var(--accent); }

.hero-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, #001E3C 50%, #003366 100%);
}

/* Animations */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes sparkle { 0%,100%{opacity:0} 50%{opacity:1} }
@keyframes glitchSkew {
  0%{transform:skew(0)}10%{transform:skew(2deg)}20%{transform:skew(-2deg)}
  30%{transform:skew(3deg)}40%{transform:skew(-1deg)}50%,100%{transform:skew(0)}
}
@keyframes digitalRain { 0%{background-position:0 0} 100%{background-position:0 100vh} }

/* Digital static */
.digital-static { position: relative; overflow: hidden; }
.digital-static::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(0,245,255,.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,245,255,.1) 1px, transparent 1px);
  background-size:4px 4px; pointer-events:none; z-index:1; opacity:.3;
}
.digital-static::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(transparent 90%, rgba(0,245,255,.1) 100%);
  background-size:100% 4px; animation:digitalRain 20s linear infinite;
  pointer-events:none; z-index:2; opacity:.5;
}

/* Service cards */
.service-card {
  transition: all .4s cubic-bezier(.175,.885,.32,1.275);
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,.2), transparent);
  transition:.5s;
}
.service-card:hover::before { left:100%; }
.service-card:hover {
  transform: translateY(-10px) rotateX(5deg);
  box-shadow: 0 25px 50px -12px rgba(0,245,255,.3);
}

/* Flip card */
.flip-card { perspective: 1000px; }
.flip-card-inner {
  transition: transform .6s cubic-bezier(.175,.885,.32,1.275);
  transform-style: preserve-3d;
  position: relative;
  height: 100%;
  will-change: transform;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }

/* Faces */
.flip-card-front, .flip-card-back {
  position: absolute; width: 100%; height: 100%; top: 0; left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0); /* promote to its own layer */
  will-change: transform;
}
.flip-card-back { transform: rotateY(180deg) translateZ(0); }

/* --- FLICKER FIX: disable lift effect inside flip cards, keep shadow --- */
.flip-card .service-card:hover {
  transform: none !important;
  box-shadow: 0 25px 50px -12px rgba(0,245,255,.30);
}

/* Glow */
.glow-effect { transition: all .3s ease; position: relative; overflow: hidden; }
.glow-effect::before {
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background: radial-gradient(circle, rgba(0,245,255,.4) 0%, transparent 60%);
  transform: scale(0); opacity:0;
  transition: transform .5s cubic-bezier(.175,.885,.32,1.275), opacity .5s ease;
}
.glow-effect:hover::before { transform: scale(1); opacity:1; }
.glow-effect:hover { box-shadow: 0 0 20px rgba(0,245,255,.7); }

/* Nav underline */
.nav-link { position: relative; }
.nav-link::after {
  content:''; position:absolute; width:0; height:2px; bottom:-2px; left:0;
  background-color: var(--secondary); transition: width .3s ease;
}
.nav-link:hover::after { width:100%; }

/* Fade-in */
.fade-in { animation: fadeIn .8s ease-in forwards; opacity: 0; }
@keyframes fadeIn {
  from { opacity:0; transform: translateY(30px) scale(.95); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Pulse */
.pulse { animation: pulse 2s infinite; position: relative; }
@keyframes pulse {
  0%{ box-shadow:0 0 0 0 rgba(0,245,255,.4); transform: scale(1); }
  70%{ box-shadow:0 0 0 15px rgba(0,245,255,0); transform: scale(1.05); }
  100%{ box-shadow:0 0 0 0 rgba(0,245,255,0); transform: scale(1); }
}

/* Glitch text */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; background: var(--primary); clip: rect(0,0,0,0);
}
.glitch::before { left: 2px; text-shadow: -2px 0 var(--secondary); animation: glitch-anim-1 3s infinite linear alternate-reverse; }
.glitch::after  { left:-2px; text-shadow: -2px 0 var(--accent);    animation: glitch-anim-2 3s infinite linear alternate-reverse; }
@keyframes glitch-anim-1 {
  0%{clip:rect(32px,9999px,38px,0)}20%{clip:rect(54px,9999px,66px,0)}40%{clip:rect(12px,9999px,98px,0)}
  60%{clip:rect(48px,9999px,52px,0)}80%{clip:rect(88px,9999px,92px,0)}100%{clip:rect(3px,9999px,96px,0)}
}
@keyframes glitch-anim-2 {
  0%{clip:rect(65px,9999px,119px,0)}20%{clip:rect(25px,9999px,36px,0)}40%{clip:rect(78px,9999px,84px,0)}
  60%{clip:rect(42px,9999px,62px,0)}80%{clip:rect(12px,9999px,34px,0)}100%{clip:rect(85px,9999px,73px,0)}
}

/* Particles */
.particles { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.particle { position:absolute; background-color: var(--secondary); border-radius:50%; opacity:0; animation: floatParticle 15s infinite linear; }
@keyframes floatParticle {
  0%{ transform: translateY(100vh) scale(0); opacity:0; }
  10%{ opacity:.5; }
  90%{ opacity:.3; }
  100%{ transform: translateY(-100px) scale(1); opacity:0; }
}

/* Portfolio */
.portfolio-item { position: relative; overflow: hidden; }
.portfolio-item img { transition: transform .5s ease; }
.portfolio-item:hover img { transform: scale(1.1); }

/* Stats */
.stat-item { position: relative; overflow: hidden; transition: all .3s ease; }
.stat-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,.2); }

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero-content { padding-top: 100px; }
  .service-card { margin-bottom: 30px; }
  .stats-grid { grid-template-columns: 1fr; }
  .flip-card { height: 300px; }
}