/* ---------- Hero ---------- */
.hero {
  background: var(--white);
  overflow: hidden;
}

.hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-copy { max-width: 560px; }

.hero-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw + 1rem, 3.15rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  margin: 0 0 1.4rem;
}
.hero-heading .line-1 { display: block; }
.hero-heading .line-2 {
  display: block;
  margin-top: 0.15em;
  background-image: linear-gradient(100deg, var(--green-600) 0%, var(--green-600) 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--navy-900);
  animation: reveal-line 1.1s 0.5s cubic-bezier(.3,.7,.3,1) forwards;
}

@keyframes reveal-line {
  0%   { background-size: 0% 100%; }
  60%  { background-size: 100% 100%; color: var(--white); -webkit-text-fill-color: var(--green-600); }
  100% { background-size: 100% 100%; color: var(--navy-900); -webkit-text-fill-color: var(--navy-900); }
}

.hero-sub {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--navy-500);
  margin: 0 0 2.1rem;
  max-width: 46ch;
}

.hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.btn-lg { padding: 0.85rem 1.6rem; font-size: 0.98rem; }
.btn-text {
  font-weight: 600;
  color: var(--navy-700);
  padding: 0.85rem 0.2rem;
  border-bottom: 1.5px solid transparent;
}
.btn-text:hover { border-color: var(--green-600); color: var(--green-600); }

/* ---------- Diagram ---------- */
.hero-visual { position: relative; }

.diagram-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
  background-color: var(--mist);
  background-image: radial-gradient(var(--navy-500) 0.7px, transparent 0.7px);
  background-size: 18px 18px;
  background-position: -9px -9px;
  padding: 1.25rem 1rem 0.5rem;
}

#growthDiagram { width: 100%; height: auto; display: block; overflow: visible; }

.edge {
  fill: none;
  stroke: var(--navy-500);
  stroke-width: 1.6;
  stroke-opacity: 0.55;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: draw-edge 1.1s ease forwards;
  transition: stroke 0.25s ease, stroke-opacity 0.25s ease, stroke-width 0.25s ease;
}
@keyframes draw-edge {
  to { stroke-dashoffset: 0; }
}
.edge.is-active { stroke: var(--green-600); stroke-opacity: 1; stroke-width: 2.2; }
.edge.is-dim { stroke-opacity: 0.15; }

.flow-dot {
  fill: var(--green-500);
  opacity: 0.85;
}

.node-rect {
  fill: var(--white);
  stroke: var(--navy-500);
  stroke-width: 1.4;
  transition: fill 0.25s ease, stroke 0.25s ease, opacity 0.25s ease;
}
.node-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--navy-700);
  letter-spacing: 0.02em;
  transition: fill 0.25s ease;
}
.node { cursor: pointer; outline: none; }
.node.is-dim { opacity: 0.4; }

.node-core .node-rect { fill: var(--navy-700); stroke: var(--navy-700); }
.node-core .node-label { fill: var(--white); }
.node-core.is-active .node-rect,
.node-core:hover .node-rect,
.node-core:focus-visible .node-rect { fill: var(--green-600); stroke: var(--green-600); }

.node-channel .node-rect,
.node-asset .node-rect { fill: var(--white); }
.node-channel.is-active .node-rect,
.node-channel:hover .node-rect,
.node-channel:focus-visible .node-rect,
.node-asset.is-active .node-rect,
.node-asset:hover .node-rect,
.node-asset:focus-visible .node-rect {
  stroke: var(--green-600);
}
.node-channel.is-active .node-label,
.node-channel:hover .node-label,
.node-asset.is-active .node-label,
.node-asset:hover .node-label { fill: var(--green-600); }

#business, .node[data-id="business"] .node-rect { }
.node[data-id="business"] .node-rect,
.node[data-id="optimize"] .node-rect {
  animation: pulse-core 3.4s ease-in-out infinite;
}
@keyframes pulse-core {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.5; }
}

.diagram-caption {
  min-height: 2.6em;
  margin: 0.6rem 0.35rem 0.9rem;
  font-size: 0.92rem;
  color: var(--navy-700);
  line-height: 1.45;
  transition: opacity 0.2s ease;
}

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3rem; }
  .hero-copy { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-heading .line-2,
  .edge,
  .node-rect,
  .flow-dot,
  .node[data-id="business"] .node-rect,
  .node[data-id="optimize"] .node-rect {
    animation: none !important;
  }
  .edge { stroke-dashoffset: 0; }
  .hero-heading .line-2 { background-size: 100% 100%; }
}