:root{
  /* Paleta basada en la imagen adjunta */
  --bg: #12082a;           /* fondo oscuro */
  --grad-start: #44d7ff;   /* azul-cian */
  --grad-mid:   #8a5bff;   /* violeta */
  --grad-end:   #ff6fb7;   /* rosa */
  --text: #f6f7ff;
  --muted: rgba(255,255,255,0.06);
}

/* Reset ligero */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(138,91,255,0.08), transparent),
              radial-gradient(800px 300px at 90% 90%, rgba(68,215,255,0.04), transparent),
              var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Centro y espaciado */
.center{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

/* Contenedor de la ilustración y la marca */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  transform-style:preserve-3d;
  will-change:transform;
}

/* SVG responsivo */
.hero-svg{
  width:clamp(220px,42vw,420px);
  height:auto;
  display:block;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,0.55));
  transition:transform 400ms cubic-bezier(.2,.9,.2,1);
}

/* Nombre de la marca con gradiente en texto */
.brand{
  font-size: clamp(24px,4.2vw,44px);
  font-weight:800;
  letter-spacing:1px;
  background: linear-gradient(90deg,var(--grad-start),var(--grad-mid),var(--grad-end));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-transform: none;
  user-select: none;
  text-align:center;
  margin-top:8px;
}

/* Estilos específicos del icono AI */
.ai-icon .link{
  stroke: url(#grad);
  stroke-linecap: round;
  stroke-width:6;
  transition: stroke 200ms;
}

.ai-icon .node{
  stroke: none;
  transition: transform 300ms ease, opacity 300ms ease;
  transform-origin: center center;
}

/* Pulso alrededor de los nodos */
.ai-icon .pulse{
  stroke: url(#grad);
  stroke-linecap: round;
  animation: pulse-ring 2000ms ease-out infinite;
  transform-origin: center center;
  opacity: 0.9;
}

/* Variación en tiempos para pulses (para que no pulsen todos a la vez) */
.ai-icon .pulse:nth-of-type(1){ animation-delay: 0ms; }
.ai-icon .pulse:nth-of-type(2){ animation-delay: 160ms; }
.ai-icon .pulse:nth-of-type(3){ animation-delay: 320ms; }
.ai-icon .pulse:nth-of-type(4){ animation-delay: 480ms; }
.ai-icon .pulse:nth-of-type(5){ animation-delay: 640ms; }

@keyframes pulse-ring {
  0%   { transform: scale(0.6); opacity: 0.9; stroke-width:2; }
  50%  { transform: scale(1.25); opacity: 0.18; stroke-width:2; }
  100% { transform: scale(0.6); opacity: 0.0; stroke-width:2; }
}

/* Efecto de leve respiración en el core */
.ai-icon .core{
  animation: core-breathe 4500ms ease-in-out infinite;
}

@keyframes core-breathe{
  0% { transform: scale(1); opacity:0.99; }
  50% { transform: scale(1.04); opacity:1; }
  100% { transform: scale(1); opacity:0.99; }
}

/* Efecto de flotación sutil en todo el conjunto */
.hero {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

/* Adaptabilidad */
@media (max-width:420px){
  .brand{ font-size: 22px; }
  .hero-svg{ width: 80vw; }
}