.button {
  display: inline-flex;
  min-height: 52px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 232, 255, 0.6);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(51, 232, 255, 0.18), rgba(170, 125, 255, 0.14));
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  box-shadow: inset 0 0 20px rgba(51, 232, 255, 0.05);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  background: linear-gradient(135deg, rgba(51, 232, 255, 0.27), rgba(170, 125, 255, 0.2));
  box-shadow: var(--glow-cyan);
}

.button-secondary,
.button-light {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.hero-kicker::before {
  content: "";
  width: 0px;
  height: 0px;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  box-shadow: 0 0 10px rgba(51, 232, 255, 0.25);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.statement {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.statement .section-title {
  font-size: clamp(2rem, 3vw, 3rem);
}

.signature-intro {
  width: min(100%, 760px);
  margin-inline: auto;
  text-align: center;
}

.signature-intro p:last-child {
  max-width: 600px;
  margin: 0 auto;
}

.signature-word {
  min-height: 110px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.signature-index {
  display: block;
  margin-bottom: 14px;
  color: var(--muted-2);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.signature-word strong {
  display: block;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  letter-spacing: -0.035em;
}

.signature-word strong span {
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(51, 232, 255, 0.3);
}

.signature-word:nth-child(3) strong span {
  color: var(--violet);
  text-shadow: 0 0 14px rgba(170, 125, 255, 0.3);
}

.signature-word:nth-child(4) strong span {
  color: var(--green);
  text-shadow: 0 0 14px rgba(69, 240, 176, 0.3);
}

.signature-word small {
  color: var(--muted);
}

.intent-tabs {
  display: grid;
  align-content: start;
  gap: 10px;
}

.intent-tab {
  width: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
  color: var(--ink);
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.intent-tab:hover,
.intent-tab.is-active {
  transform: translateX(5px);
  border-color: rgba(51, 232, 255, 0.62);
  background: linear-gradient(135deg, rgba(51, 232, 255, 0.1), rgba(170, 125, 255, 0.07));
  box-shadow: inset 0 0 30px rgba(51, 232, 255, 0.03);
}

.intent-initial {
  color: var(--violet);
  font-weight: 900;
  text-shadow: 0 0 16px rgba(170, 125, 255, 0.55);
}

.intent-tab small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.intent-panel {
  min-height: 430px;
  padding: clamp(32px, 5vw, 62px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 10%, rgba(170, 125, 255, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.035);
  box-shadow: var(--shadow);
}

.intent-panel h3 {
  margin: 0 0 14px;
  font-size: clamp(2.25rem, 4vw, 4.4rem);
  font-weight: 680;
  letter-spacing: -0.055em;
  line-height: 1;
}

.intent-points {
  display: grid;
  gap: 12px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.intent-points li {
  position: relative;
  padding-left: 22px;
  color: #c1c9d6;
}

.intent-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(51, 232, 255, 0.5);
}

.process-card {
  position: relative;
  min-height: 430px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.028);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.process-card:hover {
  transform: translateY(-8px);
  border-color: rgba(51, 232, 255, 0.48);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.26), var(--glow-cyan);
}

.process-card:nth-child(2):hover {
  border-color: rgba(170, 125, 255, 0.5);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.26), 0 0 28px rgba(170, 125, 255, 0.16);
}

.process-card:nth-child(3):hover {
  border-color: rgba(69, 240, 176, 0.5);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.26), 0 0 28px rgba(69, 240, 176, 0.15);
}

.process-letter {
  display: none;
}

.process-card h3 {
  position: relative;
  margin: 46px 0 12px;
  font-size: clamp(2.05rem, 3.2vw, 3.4rem);
  font-weight: 660;
  letter-spacing: -0.05em;
}

.process-card p {
  position: relative;
}

.taichi-copy blockquote {
  margin: 34px 0 0;
  padding: 22px 0 22px 24px;
  border-left: 2px solid var(--gold);
  color: #eef2f8;
  font-size: clamp(1.3rem, 2vw, 2rem);
  line-height: 1.38;
  box-shadow: inset 18px 0 40px rgba(255, 209, 102, 0.025);
}

.system-flow {
  display: none;
}

.atom-orbits {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 1;
  width: 72%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.atom-orbits::before,
.atom-orbits::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.atom-orbits::before {
  border: 1px solid rgba(51, 232, 255, 0.32);
  box-shadow:
    0 0 26px rgba(51, 232, 255, 0.13),
    inset 0 0 34px rgba(51, 232, 255, 0.05);
}

.atom-orbits::after {
  inset: 8%;
  border: 1px dotted rgba(255, 209, 102, 0.28);
}

.atom-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.44;
  transform-origin: center;
}

.atom-orbit::before,
.atom-orbit::after {
  content: "";
  position: absolute;
  width: clamp(4px, 0.72cqw, 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.atom-orbit::before {
  left: 13%;
  top: 15%;
}

.atom-orbit::after {
  right: 13%;
  bottom: 15%;
}

.atom-orbit-a {
  width: 86%;
  height: 38%;
  color: rgba(51, 232, 255, 0.7);
  transform: translate(-50%, -50%) rotate(30deg);
}

.atom-orbit-b {
  width: 86%;
  height: 38%;
  color: rgba(170, 125, 255, 0.68);
  transform: translate(-50%, -50%) rotate(-30deg);
}

.atom-orbit-c {
  width: 38%;
  height: 86%;
  color: rgba(69, 240, 176, 0.58);
  transform: translate(-50%, -50%) rotate(30deg);
}

.atom-orbit-d {
  width: 38%;
  height: 86%;
  color: rgba(255, 209, 102, 0.58);
  transform: translate(-50%, -50%) rotate(-30deg);
}

.system-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 27%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  text-align: center;
}

.yin-yang-shell {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(51, 232, 255, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(51, 232, 255, 0.12), transparent 58%),
    rgba(5, 8, 13, 0.88);
  box-shadow:
    0 0 34px rgba(51, 232, 255, 0.18),
    0 0 80px rgba(170, 125, 255, 0.12),
    0 0 110px rgba(255, 209, 102, 0.06),
    inset 0 0 30px rgba(255, 255, 255, 0.035);
}

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

.yin-yang-shell::before {
  inset: -7%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: conic-gradient(
    from 18deg,
    transparent 0 18%,
    rgba(51, 232, 255, 0.7) 22%,
    transparent 27% 57%,
    rgba(255, 209, 102, 0.72) 62%,
    transparent 67% 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%);
  mask: radial-gradient(circle, transparent 66%, #000 68%);
  filter: blur(0.4px) drop-shadow(0 0 8px rgba(51, 232, 255, 0.38));
}

.yin-yang-shell::after {
  inset: 8%;
  border: 1px dotted rgba(255, 255, 255, 0.12);
}

.yin-yang {
  position: relative;
  z-index: 2;
  display: block;
  width: 88%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 28px rgba(51, 232, 255, 0.24))
    drop-shadow(0 0 34px rgba(255, 209, 102, 0.10));
}

.system-center strong,
.system-center small {
  position: absolute;
  left: 50%;
  z-index: 6;
  width: 150%;
  transform: translateX(-50%);
  pointer-events: none;
}

.system-center strong {
  top: 104%;
  color: #ffffff;
  font-size: clamp(0.62rem, 1.45cqw, 0.92rem);
  letter-spacing: 0.24em;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.25),
    0 0 24px rgba(51, 232, 255, 0.2);
}

.system-center small {
  top: 119%;
  color: var(--muted-2);
  font-size: clamp(0.56rem, 1.15cqw, 0.78rem);
}

.system-node {
  --node-color: var(--cyan);
  --node-soft: rgba(51, 232, 255, 0.13);
  position: absolute;
  z-index: 5;
  display: flex;
  width: 22.5%;
  aspect-ratio: 1;
  min-height: 0;
  padding: 2.25%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--node-color) 66%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 25%,
      color-mix(in srgb, var(--node-color) 20%, transparent),
      transparent 54%
    ),
    linear-gradient(180deg, var(--node-soft), rgba(6, 9, 15, 0.97) 72%);
  color: var(--ink);
  text-align: center;
  backdrop-filter: blur(18px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--node-color) 18%, transparent),
    0 0 28px color-mix(in srgb, var(--node-color) 16%, transparent),
    inset 0 0 26px color-mix(in srgb, var(--node-color) 7%, transparent);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.system-node::before {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid color-mix(in srgb, var(--node-color) 28%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.system-node:hover,
.system-node:focus-visible,
.system-node.is-active {
  border-color: color-mix(in srgb, var(--node-color) 88%, white 12%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--node-color) 34%, transparent),
    0 0 34px color-mix(in srgb, var(--node-color) 34%, transparent),
    0 0 64px color-mix(in srgb, var(--node-color) 18%, transparent),
    inset 0 0 34px color-mix(in srgb, var(--node-color) 10%, transparent);
  outline: none;
}

.system-node .node-code {
  position: relative;
  display: block;
  margin-bottom: 0.55em;
  color: var(--node-color);
  font-size: clamp(0.92rem, 2.75cqw, 1.75rem);
  font-weight: 850;
  letter-spacing: -0.04em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--node-color) 70%, transparent);
}

.system-node strong,
.system-node small {
  position: relative;
}

.system-node strong {
  display: block;
  margin-bottom: 0.45em;
  font-size: clamp(0.63rem, 1.62cqw, 1.02rem);
  line-height: 1.2;
}

.system-node small {
  display: block;
  max-width: 92%;
  color: #c1cad8;
  font-size: clamp(0.48rem, 1.22cqw, 0.78rem);
  line-height: 1.34;
}

.node-p {
  --node-color: var(--cyan);
  --node-soft: rgba(51, 232, 255, 0.14);
  left: 50%;
  top: 3.2%;
  transform: translateX(-50%);
}

.node-i {
  --node-color: var(--violet);
  --node-soft: rgba(170, 125, 255, 0.16);
  left: 73.7%;
  top: 25.9%;
}

.node-tea {
  --node-color: var(--green);
  --node-soft: rgba(69, 240, 176, 0.14);
  left: 64.7%;
  top: 66.2%;
}

.node-r {
  --node-color: var(--gold);
  --node-soft: rgba(255, 209, 102, 0.14);
  left: 12.8%;
  top: 66.2%;
}

.node-l {
  --node-color: #ff5edb;
  --node-soft: rgba(255, 94, 219, 0.14);
  left: 3.8%;
  top: 25.9%;
}

.node-p:hover,
.node-p:focus-visible,
.node-p.is-active {
  transform: translateX(-50%) scale(1.045);
}

.node-i:hover,
.node-i:focus-visible,
.node-i.is-active,
.node-tea:hover,
.node-tea:focus-visible,
.node-tea.is-active,
.node-r:hover,
.node-r:focus-visible,
.node-r.is-active,
.node-l:hover,
.node-l:focus-visible,
.node-l.is-active {
  transform: scale(1.045);
}

.system-detail {
  --detail-color: var(--cyan);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 12;
  width: min(42%, 400px);
  padding: clamp(16px, 2.2cqw, 26px);
  border: 1px solid color-mix(in srgb, var(--detail-color) 56%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 12% 10%,
      color-mix(in srgb, var(--detail-color) 14%, transparent),
      transparent 40%
    ),
    rgba(6, 9, 15, 0.975);
  box-shadow:
    0 0 34px color-mix(in srgb, var(--detail-color) 22%, transparent),
    0 22px 54px rgba(0, 0, 0, 0.48);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%) scale(0.96);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 140ms ease;
  pointer-events: none;
}

.system-detail.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.system-detail-kicker {
  margin: 0 0 8px;
  color: var(--detail-color);
  font-size: clamp(0.54rem, 1cqw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.system-detail h3 {
  margin: 0 0 10px;
  font-size: clamp(1rem, 2.25cqw, 1.8rem);
  letter-spacing: -0.035em;
}

.system-detail > p:not(.system-detail-kicker) {
  margin: 0;
  color: #c3ccda;
  font-size: clamp(0.62rem, 1.28cqw, 0.85rem);
  line-height: 1.55;
}

.system-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.system-detail-tags span {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--detail-color) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--detail-color) 8%, transparent);
  color: #dce3ed;
  font-size: clamp(0.48rem, 0.95cqw, 0.68rem);
}

.resource-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.resource-button {
  min-width: 110px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--ink);
  font-weight: 800;
}

.resource-button:hover,
.resource-button.is-active {
  border-color: var(--cyan);
  background: var(--cyan-soft);
  box-shadow: var(--glow-cyan);
}

.resource-response {
  margin-top: 26px;
  padding: 24px;
  border-left: 2px solid var(--cyan);
  background: rgba(51, 232, 255, 0.055);
  color: #c5ceda;
}

.impact-item {
  min-height: 330px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.028);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.impact-item:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 209, 102, 0.5);
  box-shadow: var(--glow-gold);
}

.impact-item strong {
  display: block;
  color: var(--gold);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
}

.impact-item h3 {
  margin: 68px 0 12px;
  font-size: clamp(2.1rem, 3.5vw, 3.8rem);
  font-weight: 650;
  letter-spacing: -0.05em;
}

.ecosystem-card {
  position: relative;
  min-height: 360px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.ecosystem-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -80px;
  bottom: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(51, 232, 255, 0.1), transparent 68%);
}

.ecosystem-card:nth-child(2)::after {
  background: radial-gradient(circle, rgba(170, 125, 255, 0.11), transparent 68%);
}

.ecosystem-card:nth-child(3)::after {
  background: radial-gradient(circle, rgba(69, 240, 176, 0.1), transparent 68%);
}

.ecosystem-card:nth-child(4)::after {
  background: radial-gradient(circle, rgba(255, 209, 102, 0.1), transparent 68%);
}

.ecosystem-card:hover {
  transform: translateY(-7px);
  border-color: rgba(51, 232, 255, 0.46);
  box-shadow: var(--glow-cyan);
}

.ecosystem-logo {
  height: 82px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.ecosystem-logo img {
  max-width: 220px;
  max-height: 72px;
  object-fit: contain;
}

.ecosystem-label {
  color: var(--violet);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ecosystem-card h3 {
  margin: 10px 0 12px;
  font-size: clamp(1.8rem, 3vw, 3rem);
  letter-spacing: -0.045em;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 800;
}

.authority-stat {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.authority-stat b {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 1.85rem;
}

.authority-stat span {
  color: #c2cad5;
  font-size: 0.84rem;
}

.logo-slot {
  aspect-ratio: 2.5 / 1;
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 180ms ease, background 180ms ease;
}

.logo-slot:hover {
  border-color: rgba(51, 232, 255, 0.28);
  background: rgba(51, 232, 255, 0.035);
}

.logo-slot img {
  max-width: 88%;
  max-height: 68px;
  object-fit: contain;
  opacity: 0.74;
}

.testimonial-card {
  min-height: 290px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  transition: transform 180ms ease, border-color 180ms ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(170, 125, 255, 0.4);
}

.testimonial-placeholder {
  display: inline-flex;
  margin-bottom: 24px;
  padding: 7px 10px;
  border: 1px solid rgba(170, 125, 255, 0.3);
  border-radius: 999px;
  color: var(--violet);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.testimonial-card blockquote {
  margin: 0;
  color: #d9e0e9;
  font-size: 1.12rem;
  line-height: 1.65;
}

.testimonial-card footer {
  margin-top: 28px;
  color: var(--muted-2);
  font-size: 0.82rem;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-weight: 760;
}

.faq-question::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 1.5rem;
  font-weight: 400;
}

.faq-item.is-open .faq-question::after {
  content: "−";
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease;
}

.faq-answer > div {
  overflow: hidden;
}

.faq-answer p {
  margin: 0;
  padding: 0 22px 22px;
}

.faq-item.is-open {
  border-color: rgba(51, 232, 255, 0.35);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.diagnostic {
  padding: clamp(38px, 6vw, 72px);
  border: 1px solid var(--line);
  border-radius: 40px;
  background:
    radial-gradient(circle at 80% 15%, rgba(170, 125, 255, 0.12), transparent 28%),
    radial-gradient(circle at 14% 84%, rgba(51, 232, 255, 0.1), transparent 30%),
    #080c13;
  box-shadow: var(--shadow);
}

.diagnostic-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}

.diagnostic-choice {
  min-height: 132px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
  text-align: left;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.diagnostic-choice:hover,
.diagnostic-choice.is-active {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
}

.diagnostic-choice span {
  color: var(--muted);
}

.diagnostic-result {
  display: none;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.diagnostic-result.is-visible {
  display: block;
}

.contact-socials {
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.contact-socials-label {
  margin: 0 0 16px;
  color: var(--muted-2);
  font-size: 0.78rem;
}

 .socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.social-link {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  opacity: 1;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    filter 180ms ease;
}

.social-link:hover,
.social-link:focus-visible {
  opacity: 1;
  transform: translateY(-3px) scale(1.06);
}

.social-link[aria-disabled="true"] {
  opacity: 1;
}

.social-icon {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter 180ms ease;
}

.social-link[data-social="instagram"]:hover .social-icon,
.social-link[data-social="instagram"]:focus-visible .social-icon {
  filter:
    brightness(0)
    saturate(100%)
    invert(45%)
    sepia(90%)
    saturate(2730%)
    hue-rotate(310deg)
    brightness(103%)
    contrast(101%)
    drop-shadow(0 0 8px rgba(255, 79, 154, 0.7));
}

.social-link[data-social="facebook"]:hover .social-icon,
.social-link[data-social="facebook"]:focus-visible .social-icon {
  filter:
    brightness(0)
    saturate(100%)
    invert(61%)
    sepia(86%)
    saturate(2910%)
    hue-rotate(177deg)
    brightness(102%)
    contrast(101%)
    drop-shadow(0 0 8px rgba(59, 167, 255, 0.7));
}

.social-link[data-social="tiktok"]:hover .social-icon,
.social-link[data-social="tiktok"]:focus-visible .social-icon {
  filter:
    brightness(0)
    saturate(100%)
    invert(87%)
    sepia(60%)
    saturate(1298%)
    hue-rotate(123deg)
    brightness(98%)
    contrast(95%)
    drop-shadow(0 0 8px rgba(53, 241, 244, 0.7));
}

.social-link[data-social="youtube"]:hover .social-icon,
.social-link[data-social="youtube"]:focus-visible .social-icon {
  filter:
    brightness(0)
    saturate(100%)
    invert(37%)
    sepia(91%)
    saturate(1587%)
    hue-rotate(323deg)
    brightness(105%)
    contrast(101%)
    drop-shadow(0 0 8px rgba(255, 75, 85, 0.7));
}

.social-link[data-social="podcast"]:hover .social-icon,
.social-link[data-social="podcast"]:focus-visible .social-icon {
  filter:
    brightness(0)
    saturate(100%)
    invert(79%)
    sepia(59%)
    saturate(527%)
    hue-rotate(99deg)
    brightness(99%)
    contrast(91%)
    drop-shadow(0 0 8px rgba(69, 240, 176, 0.7));
}

.social-link[data-social="linkedin"]:hover .social-icon,
.social-link[data-social="linkedin"]:focus-visible .social-icon {
  filter:
    brightness(0)
    saturate(100%)
    invert(65%)
    sepia(57%)
    saturate(2300%)
    hue-rotate(172deg)
    brightness(102%)
    contrast(99%)
    drop-shadow(0 0 8px rgba(79, 184, 255, 0.7));
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 20px;
}

.footer-contact a {
  color: #c4cbd6;
  font-size: 0.84rem;
}

@keyframes center-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   DIAGRAMA · V9
   Usa la composición visual completa como núcleo del sistema.
   Las órbitas, halos, partículas y energía forman parte de la
   imagen; los cinco nodos HTML conservan la interacción.
   ========================================================= */

.system-map {
  border: 0;
  background: #020914;
  box-shadow:
    0 0 90px rgba(34, 194, 255, 0.08),
    inset 0 0 120px rgba(2, 9, 20, 0.4);
}

.system-map::before {
  display: none;
}

.system-visual {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 92%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.system-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 0 62%,
    rgba(2, 9, 20, 0.04) 73%,
    rgba(2, 9, 20, 0.34) 100%
  );
  pointer-events: none;
}

.system-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 0 28px rgba(34, 194, 255, 0.14));
}

.system-center {
  z-index: 4;
  width: 30%;
  pointer-events: none;
}

.system-center strong,
.system-center small {
  width: 160%;
}

.system-center strong {
  top: 73%;
  font-size: clamp(0.64rem, 1.6cqw, 1rem);
  letter-spacing: 0.27em;
  text-shadow:
    0 1px 16px rgba(0, 0, 0, 0.85),
    0 0 20px rgba(255, 255, 255, 0.28),
    0 0 26px rgba(34, 194, 255, 0.18);
}

.system-center small {
  top: 89%;
  color: rgba(226, 237, 249, 0.72);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

/* Los nodos quedan por encima de la composición gráfica y
   reproducen la distribución pentagonal del diseño de referencia. */
.system-node {
  z-index: 6;
  width: 21.2%;
  padding: 2%;
  background:
    radial-gradient(
      circle at 50% 23%,
      color-mix(in srgb, var(--node-color) 31%, transparent),
      transparent 48%
    ),
    radial-gradient(
      circle at 50% 108%,
      color-mix(in srgb, var(--node-color) 8%, transparent),
      transparent 58%
    ),
    rgba(4, 8, 17, 0.86);
  backdrop-filter: blur(16px) saturate(1.12);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--node-color) 24%, transparent),
    0 0 22px color-mix(in srgb, var(--node-color) 17%, transparent),
    inset 0 0 34px color-mix(in srgb, var(--node-color) 8%, transparent),
    inset 0 -20px 34px rgba(0, 0, 0, 0.3);
}

.system-node::after {
  content: "";
  position: absolute;
  inset: -3.5%;
  border: 1px solid color-mix(in srgb, var(--node-color) 44%, transparent);
  border-radius: 50%;
  opacity: 0.62;
  filter: drop-shadow(
    0 0 10px color-mix(in srgb, var(--node-color) 28%, transparent)
  );
  pointer-events: none;
}

.node-p {
  left: 50%;
  top: 2.6%;
}

.node-i {
  left: 76.2%;
  top: 28.4%;
}

.node-tea {
  left: 64.9%;
  top: 68.4%;
}

.node-r {
  left: 13.9%;
  top: 68.4%;
}

.node-l {
  left: 2.6%;
  top: 28.4%;
}

.system-detail {
  z-index: 14;
}

@media (max-width: 760px) {
  .system-visual {
    width: 94%;
  }

  .system-node {
    width: 22.2%;
  }

  .system-center {
    width: 31%;
  }
}

@media (max-width: 560px) {
  .system-visual {
    width: 96%;
  }

  .system-node {
    width: 23.2%;
  }

  .system-center {
    width: 32%;
  }

  .system-center strong {
    top: 75%;
    font-size: clamp(0.54rem, 2.7vw, 0.72rem);
  }
}

/* =========================================================
   DIAGRAMA · V10
   Distribución pentagonal exacta sobre una órbita circular.
   Los cinco nodos comparten radio, tamaño y criterio de anclaje.
   ========================================================= */

.system-map {
  position: relative;
  width: min(100%, 880px);
  aspect-ratio: 1;
  margin-inline: auto;
  container-type: inline-size;
}

/* La composición gráfica permanece perfectamente centrada. */
.system-visual {
  left: 50%;
  top: 50%;
  width: 88%;
  transform: translate(-50%, -50%);
}

.system-center {
  left: 50%;
  top: 50%;
  width: 28%;
  transform: translate(-50%, -50%);
}

/*
   Centros de los cinco nodos sobre el mismo círculo.
   Radio visual aproximado: 39.5% del diámetro del diagrama.
   Ángulos: -90°, -18°, 54°, 126° y 198°.
*/
.system-node {
  width: 18%;
  padding: 1.55%;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.node-p {
  left: 50%;
  top: 13%;
}

.node-i {
  left: 85.2%;
  top: 38.6%;
}

.node-tea {
  left: 71.75%;
  top: 79.9%;
}

.node-r {
  left: 28.25%;
  top: 79.9%;
}

.node-l {
  left: 14.8%;
  top: 38.6%;
}

.system-node:hover,
.system-node:focus-visible,
.system-node.is-active,
.node-p:hover,
.node-p:focus-visible,
.node-p.is-active,
.node-i:hover,
.node-i:focus-visible,
.node-i.is-active,
.node-tea:hover,
.node-tea:focus-visible,
.node-tea.is-active,
.node-r:hover,
.node-r:focus-visible,
.node-r.is-active,
.node-l:hover,
.node-l:focus-visible,
.node-l.is-active {
  transform: translate(-50%, -50%) scale(1.045);
}

/* Mantiene el diagrama completo también en tablet. */
@media (max-width: 820px) {
  .system-map {
    width: min(100%, 700px);
    aspect-ratio: 1;
  }

  .system-visual {
    width: 88%;
  }

  .system-node {
    width: 18.5%;
    padding: 1.45%;
  }

  .system-center {
    width: 28%;
  }
}

/* En móvil conserva la misma geometría; solo escala el contenido. */
@media (max-width: 560px) {
  .system-map {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 20px;
  }

  .system-visual {
    width: 88%;
  }

  .system-node {
    width: 19%;
    padding: 1.15%;
  }

  .system-center {
    width: 27%;
  }

  .system-node .node-code {
    font-size: clamp(0.72rem, 4.2cqw, 1rem);
  }

  .system-node strong {
    font-size: clamp(0.5rem, 2.8cqw, 0.72rem);
  }
}


/* Contacto directo bajo redes sociales */

.direct-contact__wa {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 1.55rem;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter 180ms ease;
}

.direct-contact__item:hover .direct-contact__wa,
.direct-contact__item:focus-visible .direct-contact__wa {
  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(52%)
    saturate(776%)
    hue-rotate(95deg)
    brightness(101%)
    contrast(98%);
}

.direct-contact {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.35rem;
}

.direct-contact__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: fit-content;
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: color 180ms ease, transform 180ms ease;
}

.direct-contact__item:hover,
.direct-contact__item:focus-visible {
  color: var(--cyan, #29d7ff);
  transform: translateX(3px);
}

.direct-contact__icon {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 1.55rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.direct-contact__icon--mail {
  position: relative;
  border-radius: 0.28rem;
}

.direct-contact__icon--mail::before,
.direct-contact__icon--mail::after {
  content: "";
  position: absolute;
  top: 0.34rem;
  width: 0.72rem;
  height: 1px;
  background: currentColor;
}

.direct-contact__icon--mail::before {
  left: 0.14rem;
  transform: rotate(34deg);
  transform-origin: left center;
}

.direct-contact__icon--mail::after {
  right: 0.14rem;
  transform: rotate(-34deg);
  transform-origin: right center;
}