/*!
==================================================
Copyright (c) 2026 DreamersWare
All rights reserved.

This file is part of a licensed digital product.
Use is permitted only in accordance with the license
terms provided with the purchase or marketplace listing.

Unauthorized copying, redistribution, resale,
republication, or sharing of this file, in whole
or in part, is strictly prohibited.

Author: Simone Andreella
Website: https://infodisplay.pro
Product: CloudScale Architecture
File: style.css
==================================================
*/

:root {
  color-scheme: dark;
  --bg: #020613;
  --bg-soft: #071327;
  --panel: rgba(8, 22, 47, 0.74);
  --panel-strong: rgba(11, 30, 64, 0.88);
  --cyan: #35e8ff;
  --cyan-soft: rgba(53, 232, 255, 0.18);
  --violet: #8c5cff;
  --blue: #2e75ff;
  --green: #72ffb7;
  --warning: #ffd166;
  --text: #eff8ff;
  --muted: #a6bed6;
  --line: rgba(118, 224, 255, 0.26);
  --shadow-cyan: 0 0 28px rgba(53, 232, 255, 0.55);
  --shadow-violet: 0 0 32px rgba(140, 92, 255, 0.48);
  --radius-xl: 34px;
  --radius-md: 18px;
  --ease-out: cubic-bezier(.18, .9, .22, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 16% 16%, rgba(53, 232, 255, 0.22), transparent 27rem),
    radial-gradient(circle at 78% 18%, rgba(140, 92, 255, 0.22), transparent 26rem),
    radial-gradient(circle at 51% 96%, rgba(46, 117, 255, 0.18), transparent 28rem),
    linear-gradient(135deg, #020613 0%, #061126 48%, #020613 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background-image:
    linear-gradient(rgba(53, 232, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 232, 255, 0.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at center, black 0 50%, transparent 79%);
  animation: gridDrift 18s linear infinite;
}

body::after {
  background:
    linear-gradient(120deg, transparent 0 32%, rgba(53, 232, 255, 0.08) 42%, transparent 52%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: lightSweep 10s ease-in-out infinite;
}

a {
  color: inherit;
  text-decoration: none;
}

#networkCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.74;
}

.ambient {
  position: fixed;
  width: 34vmax;
  aspect-ratio: 1;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  filter: blur(46px);
  opacity: 0.62;
}

.ambient-one {
  left: -12vmax;
  top: 8vh;
  background: rgba(53, 232, 255, 0.19);
  animation: blobFloat 17s ease-in-out infinite;
}

.ambient-two {
  right: -14vmax;
  top: 7vh;
  background: rgba(140, 92, 255, 0.2);
  animation: blobFloat 20s ease-in-out infinite reverse;
}

.ambient-three {
  left: 32vw;
  bottom: -20vmax;
  background: rgba(46, 117, 255, 0.17);
  animation: blobFloat 24s ease-in-out infinite;
}

.page-shell {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100% - 36px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 26px 0;
}

.hero {
  position: relative;
  min-height: calc(100vh - 52px);
  overflow: hidden;
  border: 1px solid rgba(127, 225, 255, 0.22);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(10, 24, 52, 0.88), rgba(3, 10, 23, 0.75)),
    radial-gradient(circle at 20% 28%, rgba(53, 232, 255, 0.16), transparent 31%),
    radial-gradient(circle at 78% 62%, rgba(140, 92, 255, 0.16), transparent 35%);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.46),
    inset 0 0 80px rgba(53, 232, 255, 0.05);
}

.hero::after {
  content: "";
  position: absolute;
  inset: -45%;
  background:
    conic-gradient(from 180deg, transparent, rgba(53, 232, 255, 0.16), transparent 21%, rgba(140, 92, 255, 0.13), transparent 43%, transparent);
  opacity: 0.56;
  animation: rotateAura 28s linear infinite;
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(53, 232, 255, 0.16), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(53,232,255,0.045) 93px, transparent 94px),
    repeating-linear-gradient(0deg, transparent 0 92px, rgba(53,232,255,0.035) 93px, transparent 94px);
  opacity: 0.82;
  animation: topologyPulse 8s ease-in-out infinite;
}

.scanline {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: -22%;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(53, 232, 255, 0.16), transparent);
  filter: blur(1px);
  transform: skewY(-5deg);
  pointer-events: none;
  animation: scan 7s linear infinite;
}

.topbar,
.hero-content,
.feature-strip {
  position: relative;
  z-index: 3;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 32px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(80, 200, 255, 0.55);
  border-radius: 19px;
  background: transparent;
  box-shadow: var(--shadow-cyan);
  animation: logoHover 3.6s ease-in-out infinite;
}

.brand-mark img {
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.22));
}

.brand strong {
  display: block;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: 0.02em;
}

.brand small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.79rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.system-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(114, 255, 183, 0.28);
  border-radius: 999px;
  background: rgba(4, 18, 32, 0.58);
  color: #dfffee;
  font-size: 0.9rem;
  box-shadow: 0 0 24px rgba(114, 255, 183, 0.12);
  backdrop-filter: blur(14px);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(114, 255, 183, 0.74), 0 0 18px rgba(114, 255, 183, 0.9);
  animation: statusPulse 1.7s ease-out infinite;
}

.hero-content {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
  align-items: stretch;
  gap: clamp(22px, 3.6vw, 66px);
  padding: clamp(12px, 2vw, 24px) clamp(18px, 4vw, 66px) clamp(26px, 3vw, 40px);
}

.copy-panel {
  max-width: 670px;
  padding: clamp(18px, 2.6vw, 34px);
  border: 1px solid rgba(127, 225, 255, 0.18);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(7, 19, 39, 0.86), rgba(5, 10, 25, 0.58)),
    radial-gradient(circle at 20% 0%, rgba(53, 232, 255, 0.16), transparent 33%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.28);
  backdrop-filter: blur(18px);
  animation: revealUp 0.9s var(--ease-out) both;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--cyan);
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow span {
  width: 34px;
  height: 2px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: var(--shadow-cyan);
  animation: signalLine 1.6s ease-in-out infinite;
}

h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3.2rem, 7.8vw, 7.5rem);
  line-height: 0.88;
  letter-spacing: -0.085em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow:
    0 0 22px rgba(53, 232, 255, 0.24),
    0 10px 50px rgba(46, 117, 255, 0.2);
}

h1::selection,
p::selection,
span::selection,
strong::selection,
small::selection {
  background: rgba(53, 232, 255, 0.28);
}

.lead {
  max-width: 58ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.68;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.primary-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 16px 20px;
  border: 1px solid rgba(53, 232, 255, 0.48);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(53, 232, 255, 0.96), rgba(46, 117, 255, 0.84));
  color: #02101d;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 42px rgba(53, 232, 255, 0.25);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.primary-action::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: translateX(-120%);
  animation: buttonSweep 3.2s ease-in-out infinite;
}

.primary-action:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 24px 60px rgba(53, 232, 255, 0.36);
}

.action-arrow {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(2, 16, 29, 0.14);
  font-size: 1.3rem;
  animation: arrowNudge 1.2s ease-in-out infinite;
}

.secondary-badge {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #d9ebff;
  background: rgba(255,255,255,0.06);
  font-size: 0.92rem;
  backdrop-filter: blur(12px);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}

.metrics article {
  position: relative;
  overflow: hidden;
  padding: 18px 14px;
  border: 1px solid rgba(127, 225, 255, 0.17);
  border-radius: 20px;
  background: rgba(2, 12, 28, 0.45);
}

.metrics article::after {
  content: "";
  position: absolute;
  inset: auto -20% 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: dataBar 2.8s ease-in-out infinite;
}

.metric-number {
  display: block;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 950;
  letter-spacing: -0.04em;
}

.metrics small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.architecture-stage {
  position: relative;
  min-height: clamp(500px, 58vw, 720px);
  border: 1px solid rgba(127, 225, 255, 0.16);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 50%, rgba(53, 232, 255, 0.14), transparent 28%),
    radial-gradient(circle at 54% 50%, rgba(140, 92, 255, 0.12), transparent 43%),
    linear-gradient(160deg, rgba(4, 15, 35, 0.72), rgba(5, 8, 22, 0.34));
  box-shadow:
    inset 0 0 70px rgba(53, 232, 255, 0.06),
    0 24px 78px rgba(0,0,0,0.30);
  backdrop-filter: blur(16px);
  transform-style: preserve-3d;
  animation: revealScale 1s var(--ease-out) both 0.16s;
}

.architecture-stage::before,
.architecture-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.architecture-stage::before {
  inset: 15%;
  border: 1px dashed rgba(53, 232, 255, 0.2);
  animation: rotateAura 36s linear infinite reverse;
}

.architecture-stage::after {
  inset: 25%;
  border: 1px solid rgba(140, 92, 255, 0.22);
  box-shadow: inset 0 0 46px rgba(140, 92, 255, 0.08);
  animation: stageBreath 5s ease-in-out infinite;
}

.orbital-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(53, 232, 255, 0.16);
  border-radius: 50%;
  translate: -50% -50%;
  pointer-events: none;
}

.orbital-ring::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  right: 14%;
  top: 13%;
  border-radius: 99px;
  background: var(--cyan);
  box-shadow: var(--shadow-cyan);
}

.ring-one {
  width: 83%;
  aspect-ratio: 1;
  animation: orbitSpin 20s linear infinite;
}

.ring-two {
  width: 65%;
  aspect-ratio: 1;
  border-style: dashed;
  animation: orbitSpin 27s linear infinite reverse;
}

.ring-three {
  width: 45%;
  aspect-ratio: 1;
  opacity: 0.72;
  animation: orbitSpin 16s linear infinite;
}

.topology-svg {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  overflow: visible;
  z-index: 2;
}

.topology-line {
  fill: none;
  stroke: url(#beamGradient);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 9 15;
  opacity: 0.78;
  animation: dashFlow 2.4s linear infinite;
}

.line-b,
.line-d,
.line-h {
  animation-duration: 3.1s;
}

.line-c,
.line-f,
.line-i {
  animation-duration: 2.7s;
  animation-direction: reverse;
}

.data-packet {
  fill: var(--green);
  filter: drop-shadow(0 0 10px rgba(114,255,183,0.9));
}

.packet-one {
  offset-path: path("M350 282 C255 214 181 208 112 126");
  animation: packetMove 3.4s linear infinite;
}

.packet-two {
  offset-path: path("M350 282 C458 210 533 188 594 112");
  animation: packetMove 4.1s linear infinite 0.5s;
}

.packet-three {
  offset-path: path("M104 444 C207 498 267 510 350 512");
  animation: packetMoveReverse 3.8s linear infinite 0.2s;
}

.packet-four {
  offset-path: path("M350 282 C458 348 529 372 604 456");
  animation: packetMove 3.2s linear infinite 0.9s;
}

.node {
  fill: rgba(5, 18, 41, 0.82);
  stroke: var(--cyan);
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.node path,
.node circle,
.node rect,
.node ellipse {
  vector-effect: non-scaling-stroke;
}

.node-core circle:first-child {
  fill: rgba(200, 240, 255, 0.42);
  stroke: rgba(80, 200, 255, 0.85);
  animation: corePulse 2.7s ease-in-out infinite;
}

.node-core .core-icon {
  /* manteniamo nitido il logo sopra l'alone sfocato */
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}

.node-edge {
  transform-box: fill-box;
  transform-origin: center;
  animation: nodeFloat 4s ease-in-out infinite;
}

.node-edge rect {
  fill: rgba(6, 22, 48, 0.88);
  stroke: rgba(53, 232, 255, 0.72);
}

.node-edge path,
.node-edge circle,
.node-edge ellipse {
  stroke: var(--cyan);
  fill: none;
}

.node-cdn {
  animation-delay: -0.7s;
}

.node-db {
  animation-delay: -1.2s;
}

.node-queue {
  animation-delay: -1.7s;
}

.node-ai {
  animation-delay: -2.1s;
}

.node-observe {
  animation-delay: -2.5s;
}

.central-label {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: min(210px, 42vw);
  padding: 13px 16px;
  border: 1px solid rgba(53, 232, 255, 0.28);
  border-radius: 18px;
  background: rgba(2, 12, 28, 0.72);
  box-shadow: var(--shadow-cyan);
  translate: -50% 52%;
  text-align: center;
  backdrop-filter: blur(14px);
  animation: labelPulse 3s ease-in-out infinite;
}

.central-label strong,
.floating-card strong {
  display: block;
  font-size: 0.95rem;
}

.central-label span,
.floating-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.75rem;
}

.floating-card {
  position: absolute;
  z-index: 6;
  min-width: 132px;
  max-width: clamp(150px, 32%, 230px);
  padding: 12px 13px;
  border: 1px solid rgba(127, 225, 255, 0.18);
  border-radius: 18px;
  background: rgba(4, 15, 35, 0.73);
  box-shadow: 0 14px 36px rgba(0,0,0,0.28);
  backdrop-filter: blur(14px);
  overflow-wrap: break-word;
  hyphens: auto;
  animation: cardFloat 5s ease-in-out infinite;
}

.floating-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(var(--cyan), var(--violet));
  box-shadow: var(--shadow-cyan);
}

.card-api {
  left: 5%;
  top: 18%;
}

.card-cdn {
  right: 4%;
  top: 16%;
  animation-delay: -1.1s;
}

.card-db {
  left: 4%;
  bottom: 15%;
  animation-delay: -1.9s;
}

.card-observe {
  right: 5%;
  bottom: 14%;
  animation-delay: -2.6s;
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
  padding: 0 clamp(18px, 4vw, 66px) clamp(24px, 3vw, 44px);
}

.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(127, 225, 255, 0.18);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(10, 29, 61, 0.68), rgba(5, 13, 29, 0.58));
  box-shadow: inset 0 0 36px rgba(53, 232, 255, 0.035);
  backdrop-filter: blur(16px);
  transform: translateY(0);
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  animation: revealUp 0.9s var(--ease-out) both;
}

.feature-card:nth-child(2) { animation-delay: .08s; }
.feature-card:nth-child(3) { animation-delay: .16s; }
.feature-card:nth-child(4) { animation-delay: .24s; }

.feature-card::after {
  content: "";
  position: absolute;
  inset: auto -35% 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(53,232,255,0.9), transparent);
  animation: featureBeam 3.2s ease-in-out infinite;
}

.feature-card:hover {
  transform: translateY(-7px);
  border-color: rgba(53, 232, 255, 0.38);
}

.feature-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border: 1px solid rgba(53, 232, 255, 0.28);
  border-radius: 18px;
  background: rgba(53, 232, 255, 0.09);
  box-shadow: var(--shadow-cyan);
}

.feature-icon::before,
.feature-icon::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 10px;
  border: 2px solid var(--cyan);
}

.feature-icon::after {
  inset: 20px;
  border-color: var(--green);
  animation: iconPulse 1.6s ease-in-out infinite;
}

/* Card 1 — Sviluppo AI su misura: blueprint in costruzione (bordo tratteggiato che ruota) */
.feature-icon.bespoke::before {
  border-radius: 6px;
  border-style: dashed;
  animation: dashBox 3.5s linear infinite;
}

/* Card 2 — Sovranità o performance: due archi opposti, suggerisce biforcazione/scelta */
.feature-icon.dual::before {
  border-radius: 999px;
  border-top-color: transparent;
  border-right-color: transparent;
  animation: orbitSpin 2.4s linear infinite;
}

.feature-icon.dual::after {
  border-radius: 999px;
  border-color: var(--green);
  border-bottom-color: transparent;
  border-left-color: transparent;
}

/* Card 3 — Mai in chiaro fuori dal server: scudo pentagonale (protezione attiva) */
.feature-icon.shield::before {
  clip-path: polygon(50% 0, 100% 22%, 100% 62%, 50% 100%, 0 62%, 0 22%);
  border-radius: 0;
  inset: 12px;
}

.feature-icon.shield::after {
  clip-path: polygon(50% 0, 100% 22%, 100% 62%, 50% 100%, 0 62%, 0 22%);
  border-radius: 0;
  inset: 18px;
}

/* Card 4 — Privacy progettata: esagono solido con pulse interno (robustezza strutturale) */
.feature-icon.crypto::before {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  border-radius: 0;
}

.feature-icon.crypto::after {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  border-radius: 0;
}

.feature-card h2 {
  margin: 0 0 10px;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 68px 68px, 68px 68px; }
}

@keyframes lightSweep {
  0%, 100% { transform: translateX(-20%) translateY(-12%); opacity: .38; }
  48% { transform: translateX(22%) translateY(9%); opacity: .82; }
}

@keyframes blobFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(5vw, -4vh, 0) scale(1.12); }
}

@keyframes rotateAura {
  to { transform: rotate(360deg); }
}

@keyframes topologyPulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: .95; transform: scale(1.02); }
}

@keyframes scan {
  0% { transform: translateY(-30vh) skewY(-5deg); }
  100% { transform: translateY(140vh) skewY(-5deg); }
}

@keyframes logoHover {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-2deg); }
}

@keyframes statusPulse {
  0% { box-shadow: 0 0 0 0 rgba(114,255,183,.62), 0 0 18px rgba(114,255,183,.85); }
  75%, 100% { box-shadow: 0 0 0 14px rgba(114,255,183,0), 0 0 18px rgba(114,255,183,.85); }
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes revealScale {
  from { opacity: 0; transform: scale(.96) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes signalLine {
  0%, 100% { width: 28px; opacity: .5; }
  50% { width: 52px; opacity: 1; }
}

@keyframes buttonSweep {
  0%, 45% { transform: translateX(-125%); }
  75%, 100% { transform: translateX(125%); }
}

@keyframes arrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes dataBar {
  0%, 100% { transform: translateX(-55%); opacity: .35; }
  50% { transform: translateX(55%); opacity: 1; }
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes stageBreath {
  0%, 100% { transform: scale(.98); opacity: .42; }
  50% { transform: scale(1.04); opacity: .88; }
}

@keyframes dashFlow {
  to { stroke-dashoffset: -48; }
}

@keyframes packetMove {
  from { offset-distance: 0%; opacity: 0; }
  8%, 88% { opacity: 1; }
  to { offset-distance: 100%; opacity: 0; }
}

@keyframes packetMoveReverse {
  from { offset-distance: 100%; opacity: 0; }
  8%, 88% { opacity: 1; }
  to { offset-distance: 0%; opacity: 0; }
}

@keyframes corePulse {
  0%, 100% { r: 68; opacity: .72; }
  50% { r: 80; opacity: 1; }
}

@keyframes nodeFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.035); }
}

@keyframes labelPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(53,232,255,.24); }
  50% { box-shadow: 0 0 40px rgba(53,232,255,.52); }
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

@keyframes featureBeam {
  0%, 100% { transform: translateX(-50%); opacity: .3; }
  50% { transform: translateX(50%); opacity: 1; }
}

@keyframes iconPulse {
  0%, 100% { transform: scale(.72); opacity: .45; }
  50% { transform: scale(1.12); opacity: 1; }
}

@keyframes dashBox {
  to { transform: rotate(360deg); }
}

@media (max-width: 1100px) {
  .hero-content {
    grid-template-columns: 1fr;
  }

  .copy-panel {
    max-width: none;
  }

  h1 {
    max-width: 13ch;
  }

  .architecture-stage {
    min-height: 630px;
  }

  .feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .page-shell {
    width: min(100% - 20px, 1500px);
    padding: 10px 0;
  }

  .hero {
    min-height: calc(100vh - 20px);
    border-radius: 24px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .system-status {
    font-size: 0.82rem;
  }

  .hero-content {
    padding-inline: 14px;
  }

  .copy-panel {
    border-radius: 24px;
  }

  h1 {
    font-size: clamp(2.85rem, 16vw, 5rem);
  }

  .lead {
    font-size: 1rem;
  }

  .metrics {
    grid-template-columns: 1fr;
  }

  .architecture-stage {
    display: none;
  }

  .feature-strip {
    grid-template-columns: 1fr;
    padding-inline: 14px;
  }
}

@media (max-width: 430px) {
  .brand-mark {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .brand small {
    font-size: 0.7rem;
  }

  .cta-row,
  .primary-action,
  .secondary-badge {
    width: 100%;
  }

  .primary-action,
  .secondary-badge {
    justify-content: center;
    text-align: center;
  }

}

.page-footer {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100% - 36px));
  margin: 0 auto;
  padding: 18px 0 28px;
  color: var(--muted);
  font-size: 0.83rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  align-items: start;
  gap: clamp(18px, 3vw, 44px);
  padding: 22px clamp(20px, 4vw, 36px);
  border: 1px solid rgba(127, 225, 255, 0.16);
  border-radius: 22px;
  background: rgba(5, 14, 32, 0.62);
  backdrop-filter: blur(14px);
}

.footer-brand strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.footer-brand span {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(53, 232, 255, 0.08);
  border: 1px solid rgba(53, 232, 255, 0.36);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.footer-contact-btn:hover,
.footer-contact-btn:focus-visible {
  background: rgba(53, 232, 255, 0.18);
  border-color: rgba(53, 232, 255, 0.65);
  box-shadow: 0 6px 18px rgba(53, 232, 255, 0.18);
  transform: translateY(-1px);
  outline: none;
}

.footer-contact-btn.pec {
  color: #e6fff1;
  background: rgba(114, 255, 183, 0.08);
  border-color: rgba(114, 255, 183, 0.4);
}

.footer-contact-btn.pec:hover,
.footer-contact-btn.pec:focus-visible {
  background: rgba(114, 255, 183, 0.18);
  border-color: rgba(114, 255, 183, 0.7);
  box-shadow: 0 6px 18px rgba(114, 255, 183, 0.18);
}

.footer-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-data li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.footer-data li span {
  color: var(--cyan);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.footer-data li em {
  color: var(--text);
  font-style: normal;
  font-size: 0.86rem;
  word-break: break-word;
}

.footer-legal {
  margin: 0;
  align-self: end;
  text-align: right;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  line-height: 1.7;
}

.footer-link {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 232, 255, 0.32);
  transition: color 0.2s, border-color 0.2s;
}

.footer-link:hover {
  color: #aef0ff;
  border-color: rgba(53, 232, 255, 0.7);
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-legal {
    align-self: start;
    text-align: center;
    padding-top: 6px;
    border-top: 1px solid rgba(127, 225, 255, 0.1);
  }
}

@media (max-width: 520px) {
  .footer-data {
    grid-template-columns: 1fr;
  }
}

.signal-burst {
  position: absolute;
  z-index: 1;
  width: var(--burst-size);
  height: var(--burst-size);
  border: 1px solid rgba(53, 232, 255, 0.34);
  border-radius: 999px;
  translate: -50% -50%;
  pointer-events: none;
  animation: signalBurst 1.4s ease-out forwards;
}

.signal-burst::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(140, 92, 255, 0.28);
  border-radius: inherit;
}

@keyframes signalBurst {
  0% { transform: scale(0.15); opacity: 0; filter: blur(0); }
  18% { opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; filter: blur(2px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}