*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Space Grotesk', sans-serif;
}

body{
  background:
    radial-gradient(circle at 50% 18%, rgba(0,255,255,0.10) 0%, transparent 45%),
    url('../img/twincode-bg.webp') center top no-repeat;
  background-size: cover;
  background-color: #05070B;
  color:#ffffff;
}

/* ================= HERO ================= */

.hero{
  height:auto;
  padding-top:100px;
  padding-bottom:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}

.logo-container{
  position:relative;
  z-index:3;
}

.logo{
  width:600px;
}

.subtitle{
  margin-top:20px;
  font-size:16px;
  letter-spacing:5px;
  text-transform:uppercase;
  color:#ffffff;
  opacity:0.9;
}

/* ================= SYSTEM ================= */

.system{
  position:relative;
  min-height:850px;
  display:flex;
  justify-content:center;
  overflow:visible;   /* ← clave */
}

.system-wrapper{
  position:relative;
  width:1000px;
  height:820px;
  margin:0 auto;   /* centra horizontal */
  z-index:2;
}
/* ================= BACKBONE ================= */

.backbone{
  position:absolute;
  width:1000px;
  height:820px;
  pointer-events:none;
  z-index:1;

  top:50%;          /* ← sube bastante */
  left:50%;         /* ← mueve levemente a la izquierda */
  transform:translate(-50%, -50%);
}

/* Líneas */

.main-line{
  fill:none;
}

.main-line.side{
  stroke:rgba(0,255,255,0.25);
  stroke-width:1;
}

.main-line.core{
  stroke:rgba(0,255,255,0.65);
  stroke-width:1.3;
  filter:drop-shadow(0 0 6px rgba(0,255,255,0.4));
}

.branch{
  fill:none;
  stroke:rgba(0,255,255,0.45);
  stroke-width:1.2;
}

.ghost-line{
  fill:none;
  stroke:rgba(0,255,255,0.15);
  stroke-width:1;
}

.ghost-node{
  fill:rgba(0,255,255,0.3);
  filter:drop-shadow(0 0 6px rgba(0,255,255,0.3));
}

/* ================= NODOS ================= */

.micro-node{
  fill:#00ffff;
  opacity:0.7;
  transition:0.2s;
}

.micro-node.flash{
  opacity:1;
  filter:drop-shadow(0 0 14px rgba(0,255,255,1));
}

/* ================= ELECTRON ================= */

.electron{
  fill:rgba(0,255,255,0.9);
  filter:blur(4px) drop-shadow(0 0 16px rgba(0,255,255,1));
}

.trail{
  fill:rgba(0,255,255,0.18);
  filter:blur(8px);
  animation:trailFade 0.6s linear forwards;
}

@keyframes trailFade{
  from{opacity:0.8;}
  to{opacity:0;}
}

/* ================= TARJETAS ================= */

.node{
  position:absolute;
  width:260px;
  padding:28px 24px;
  background:rgba(5,15,25,0.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  border:1px solid rgba(0,255,255,0.35);
  border-radius:16px;

  text-align:center;
  transition:0.35s ease;
}

.node:hover{
  border:1px solid rgba(0,255,255,0.6);
  box-shadow:
      0 0 25px rgba(0,255,255,0.25),
      0 0 60px rgba(0,255,255,0.08);
  transform:translateY(-6px);
}

.node h2{
  color:#ffffff;
  font-weight:600;
  margin-bottom:12px;
}

.node p{
  color:rgba(255,255,255,0.92);
  font-size:0.95rem;
  line-height:1.5;
}

/* ================= ALINEACIÓN TARJETAS ================= */

.node-servicios{
  top:220px;
  left:80px;
}

.node-salto{
  top:420px;
  right:80px;
}

.node-bits{
  top:670px;
  left:80px;
}

/* ================= FOOTER ================= */

footer{
  text-align:center;
  padding:60px 20px;
  color:#ffffff;
}

footer p{
  margin:8px 0;
  color:#ffffff;
}