/* ===================================================================
   M2MGRID - style.css
   Theme: Dark / NVIDIA-inspired (elegante + futurista)
   Includes: background energy, subtle particles, reveal animations
   =================================================================== */

/* -------------------------
   Variables
   ------------------------- */
:root{
  --bg-1: #040612;        /* darkest */
  --bg-2: #071028;
  --primary: #00b3ff;     /* cyan/blue */
  --primary-2: #0077cc;
  --accent: #00ffd1;      /* neon teal */
  --muted: #a6b4cd;
  --text: #eaf4ff;
  --surface: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.06);
  --radius: 14px;
  --shadow: 0 8px 30px rgba(0,179,255,0.08);
  --transition: 280ms cubic-bezier(.2,.9,.3,1);
}

/* -------------------------
   Reset / Base
   ------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 15% 10%, rgba(0,179,255,0.04), transparent 8%),
              radial-gradient(900px 500px at 85% 85%, rgba(0,119,204,0.03), transparent 8%),
              linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* -------------------------
   Subtle Particle-ish Background (CSS only)
   ------------------------- */
body::before, body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
}
body::before{
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(0,179,255,0.06), transparent 10%),
    radial-gradient(2px 2px at 30% 60%, rgba(0,255,209,0.05), transparent 10%),
    radial-gradient(2px 2px at 80% 30%, rgba(0,119,204,0.04), transparent 10%);
  opacity:0.9;
  animation: particlesShift 18s linear infinite;
  transform:translateZ(0);
}
body::after{
  background:
    linear-gradient(90deg, rgba(0,179,255,0.02), transparent 30%),
    linear-gradient(180deg, transparent, rgba(0,0,0,0.12));
  mix-blend-mode: screen;
  animation: slowPulse 10s ease-in-out infinite alternate;
}

/* Animations for background */
@keyframes particlesShift{
  0%{ transform: translate3d(0,0,0) }
  50%{ transform: translate3d(20px,-12px,0) }
  100%{ transform: translate3d(0,0,0) }
}
@keyframes slowPulse{
  from{ opacity:0.22; transform:scale(1) }
  to{ opacity:0.6; transform:scale(1.02) }
}

/* -------------------------
   Helpers
   ------------------------- */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.row{display:flex;flex-wrap:wrap;gap:1.5rem}
.center{display:flex;align-items:center;justify-content:center}
.small{font-size:0.9rem;color:var(--muted)}

/* -------------------------
   Loading Screen (keeps same API as your HTML)
   ------------------------- */
.loading-screen{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(180deg, rgba(4,6,18,0.96), rgba(2,3,8,0.96));
  z-index:9999;
  transition: opacity 1.5s ease, visibility 14.5s;
}
.loading-screen.hidden{ opacity:0; visibility:hidden; pointer-events:none }
.loading-content{ text-align:center; color:var(--text) }
.loading-logo{ width:92px;height:92px;margin:0 auto 1.25rem; position:relative; filter:drop-shadow(0 6px 30px rgba(0,179,255,0.12)); }
.logo-grid{ width:100%;height:100%; background:
  linear-gradient(90deg, var(--primary) 1px, transparent 1px),
  linear-gradient(var(--primary) 1px, transparent 1px);
  background-size:16px 16px; opacity:0.8; transform:rotate(45deg); animation:gridPulse 2.2s linear infinite; border-radius:8px;
}
.logo-core{ position:absolute;width:20px;height:20px; border-radius:50%; top:50%;left:50%; transform:translate(-50%,-50%); background:linear-gradient(180deg,var(--accent),var(--primary)); box-shadow:0 0 0 4px rgba(0,255,209,0.06);}
.loading-text{ font-family:'Orbitron', monospace; font-weight:700; font-size:1.5rem; margin-bottom:1rem; background: linear-gradient(90deg,var(--primary),var(--accent)); -webkit-background-clip:text; color:transparent; letter-spacing:1px }
.loading-bar{ width:220px;height:6px;background:rgba(255,255,255,0.04); border-radius:6px; overflow:hidden; margin:0 auto; }
.loading-progress{ height:100%; background: linear-gradient(90deg,var(--primary),var(--primary-2),var(--accent)); animation: loadingProgress 1.5s ease-in-out infinite; transform-origin:left; }
@keyframes gridPulse{ 0%{opacity:0.6} 50%{opacity:1} 100%{opacity:0.6} }
@keyframes loadingProgress{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* -------------------------
   Header / Nav
   ------------------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background: rgba(2,4,10,0.55);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  transition:background var(--transition), box-shadow var(--transition);
}
header.scrolled{ background: rgba(2,4,10,0.86); box-shadow: var(--shadow) }
.nav-container{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; max-width:1200px; margin:0 auto;}
.logo{ display:flex; align-items:center; gap:0.85rem; text-decoration:none; color:var(--text) }
.logo-graphic{ width:46px;height:46px; position:relative }
.logo-text{ font-family:'Orbitron', sans-serif; font-weight:700; letter-spacing:1px; color:var(--primary); font-size:1.1rem; -webkit-text-stroke: 0.2px rgba(0,0,0,0.15) }
.nav-menu{ display:flex; align-items:center; gap:1.25rem }
.nav-links{ display:flex; list-style:none; gap:1.1rem; align-items:center }
.nav-links a{ color:var(--text); text-decoration:none; font-weight:600; font-size:0.95rem; padding:6px 4px; transition: color var(--transition); }
.nav-links a:hover{ color:var(--accent); text-shadow:0 0 18px rgba(0,255,209,0.06) }
.nav-actions{ display:flex; gap:0.75rem; align-items:center }
.nav-cta{ display:inline-flex; align-items:center; gap:0.6rem; padding:0.6rem 1rem; border-radius:999px; background:linear-gradient(90deg,var(--primary),var(--accent)); color:#001; font-weight:700; box-shadow:0 8px 36px rgba(0,179,255,0.12); border:none; text-decoration:none; cursor:pointer; transition:transform var(--transition) }
.nav-cta:hover{ transform:translateY(-3px) }

/* Mobile hamburger */
.mobile-menu-btn{ display:none; border:none; background:none; cursor:pointer; padding:0.5rem }
.mobile-menu-btn span{ display:block; width:22px;height:2px;background:var(--muted); margin:4px 0; transition:all 220ms }

/* -------------------------
   Hero
   ------------------------- */
.hero{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:100px 1.5rem 80px;
  position:relative; overflow:visible;
  z-index:1;
}
.hero-container{ display:grid; grid-template-columns: 1fr 460px; gap:2.5rem; align-items:center; width:100%; max-width:1200px; margin:0 auto; }
@media (max-width:980px){ .hero-container{ grid-template-columns:1fr; } .hero{ padding-top:90px } }

.hero-content{ z-index:2 }
.hero-badge{ display:inline-flex; align-items:center; gap:0.5rem; padding:8px 12px; background: linear-gradient(90deg, rgba(0,119,204,0.08), rgba(0,179,255,0.06)); color:var(--primary); border-radius:999px; border:1px solid rgba(0,119,204,0.08); font-weight:700; font-size:0.9rem; margin-bottom:1.2rem }
.hero h1{ font-family:'Orbitron', sans-serif; font-size:clamp(2rem,5vw,3.2rem); line-height:1.02; margin-bottom:1rem; color:var(--text) }
.gradient-text{ background:linear-gradient(90deg,var(--primary),var(--accent)); -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-weight:800 }
.hero-description{ color:var(--muted); font-size:1.05rem; margin-bottom:1.6rem; max-width:64ch }

.hero-stats{ display:flex; gap:1.25rem; margin-bottom:1.6rem; flex-wrap:wrap }
.stat{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid var(--border); padding:10px 14px; border-radius:10px; min-width:120px; text-align:center }
.stat-number{ font-family:'Orbitron', monospace; font-size:1.4rem; color:var(--accent); font-weight:800 }
.stat-label{ font-size:0.85rem; color:var(--muted) }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:0.6rem; padding:0.8rem 1.25rem; border-radius:12px; font-weight:700; cursor:pointer; border:1px solid transparent; transition: all var(--transition) }
.btn-primary{ background:linear-gradient(90deg,var(--primary),var(--accent)); color:#001; box-shadow:0 10px 40px rgba(0,179,255,0.12) }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 50px rgba(0,179,255,0.18) }
.btn-secondary{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text) }
.btn-secondary:hover{ background:rgba(255,255,255,0.02); border-color:var(--primary) }

/* Hero visual (orb + nodes) */
.hero-visual{ position:relative; width:100%; height:420px; display:flex; align-items:center; justify-content:center; }
.tech-showcase{ width:420px; height:420px; position:relative; display:block; }
.floating-orb{ position:absolute; inset:0; display:block; pointer-events:none; }
.orb-core{
  position:absolute; width:110px; height:110px; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background: radial-gradient(circle at 30% 30%, rgba(0,255,209,0.95), rgba(0,179,255,0.6) 40%, transparent 70%);
  box-shadow: 0 0 60px rgba(0,179,255,0.14), inset 0 6px 20px rgba(255,255,255,0.02);
  animation: floatOrb 6s ease-in-out infinite;
}
@keyframes floatOrb{ 0%{ transform:translate(-50%,-50%) translateY(0) } 50%{ transform:translate(-50%,-50%) translateY(-18px) } 100%{ transform:translate(-50%,-50%) translateY(0) } }

.orb-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid rgba(0,179,255,0.12);
  animation: ringExpand 4.5s ease-out infinite;
}
.orb-ring:nth-child(2){ width:160px;height:160px; animation-delay:0.8s }
.orb-ring:nth-child(3){ width:220px;height:220px; animation-delay:1.6s }
.orb-ring:nth-child(4){ width:300px;height:300px; animation-delay:2.4s }
@keyframes ringExpand{ 0%{ transform:translate(-50%,-50%) scale(0.6); opacity:0.9 } 100%{ transform:translate(-50%,-50%) scale(1.35); opacity:0 } }

/* Data nodes + simple orbit motion */
.data-nodes{ position:absolute; inset:0; pointer-events:none }
.node{ position:absolute; width:12px;height:12px;border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(0,255,209,0.18); transform-origin:center; animation: nodeOrbit 5s linear infinite; }
.node[style*="--delay: 0s"]{ top:12%; left:48%; animation-delay:0s }
.node[style*="--delay: 0.5s"]{ top:22%; left:78%; animation-delay:0.5s }
.node[style*="--delay: 1s"]{ top:72%; left:62%; animation-delay:1s }
.node[style*="--delay: 1.5s"]{ top:58%; left:24%; animation-delay:1.5s }
@keyframes nodeOrbit{ 0%{ transform:translate(0,0) } 50%{ transform:translate(-6px,-12px) } 100%{ transform:translate(0,0) } }

/* -------------------------
   Sections: Services / Solutions / CTA / Contact
   With Reveal animations (use class .reveal on the element)
   ------------------------- */
section{ padding:5.5rem 1.5rem; position:relative; overflow:visible }
.section-header{ text-align:center; margin-bottom:2rem }
.section-title{ font-family:'Orbitron', sans-serif; color:var(--primary); font-size:1.8rem; letter-spacing:0.6px; margin-bottom:.35rem }
.section-subtitle{ color:var(--muted); max-width:72ch; margin:0 auto; }

/* Cards grid */
.services-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap:1.25rem }
.service-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--border);
  padding:1.6rem; border-radius:12px; transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 6px 30px rgba(0,0,0,0.45);
}
.service-card:hover{ transform:translateY(-10px); box-shadow:0 18px 65px rgba(0,179,255,0.08); border-color:rgba(0,255,209,0.06) }
.service-icon{ font-size:1.8rem; color:var(--primary) }

/* Solutions layout */
.solutions-grid{ display:flex; flex-direction:column; gap:1.25rem }
.solution-item{ display:flex; gap:1.25rem; align-items:center; background:var(--glass); border-radius:12px; padding:1.5rem; border:1px solid var(--border); transition:all var(--transition) }
.solution-item.reverse{ flex-direction:row-reverse }
.solution-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }

/* CTA */
.cta{ background: linear-gradient(180deg, rgba(0,179,255,0.04), transparent 30%); border-radius:12px; padding:2.25rem; margin:1.5rem 0; text-align:center; border:1px solid var(--border) }
.cta .btn{ padding:0.9rem 1.4rem; }

/* Contact grid */
.contact-grid{ display:grid; grid-template-columns:1fr 420px; gap:2rem }
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr } }

/* Form styles (keeps look consistent) */
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; padding:0.9rem 1rem; border-radius:10px; background:rgba(255,255,255,0.02); border:1px solid var(--border); color:var(--text); margin-bottom:0.8rem; transition: box-shadow var(--transition), border-color var(--transition);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{ outline:none; border-color:var(--primary); box-shadow:0 6px 24px rgba(0,179,255,0.08) }

/* Footer */
.footer{ padding:2.5rem 1.5rem; background:linear-gradient(180deg,#02040a, #040612); border-top:1px solid var(--border); color:var(--muted) }
.footer .logo-text{ color:var(--primary); font-family:'Orbitron',sans-serif; font-weight:700 }

/* -------------------------
   Reveal animation helper
   Apply class "reveal" to any section/block in HTML you want to animate.
   Use the small JS snippet provided after this CSS (below).
   ------------------------- */
.reveal{ opacity:0; transform:translateY(28px) scale(0.995); transition: opacity 700ms cubic-bezier(.2,.9,.3,1), transform 700ms cubic-bezier(.2,.9,.3,1) }
.reveal.visible{ opacity:1; transform:translateY(0) scale(1) }

/* Subtle hover depth for cards/buttons */
.card-3d{ transform-style:preserve-3d; perspective:800px }
.card-3d:hover{ transform: translateY(-8px) translateZ(8px) }

/* -------------------------
   Accessibility / small screens
   ------------------------- */
@media (max-width:980px){
  .nav-links{ display:none }
  .mobile-menu-btn{ display:block }
  .hero-container{ grid-template-columns:1fr; gap:1.25rem }
  .hero-visual{ height:320px }
  .services-grid{ grid-template-columns: 1fr }
}

/* -------------------------
   Utility: small fade-in for images/icons
   ------------------------- */
.fade-in{ opacity:0; transform:translateY(8px); transition:opacity 500ms, transform 500ms }
.fade-in.visible{ opacity:1; transform:none }

/* -------------------------
   End of CSS
   ------------------------- */