/* ==========================================================================
   CONDREA — Hero pattern styles (child theme "Kelsey Condrea")
   Adaptat din designul static condrea.ro, cu variabilele mapate peste
   paleta si tipografia definite in theme.json (asa se pastreaza sincronizarea
   daca cineva schimba paleta din Site Editor > Styles).
   ========================================================================== */

.condrea-hero {
  /* variabile locale, mapate peste preseturile din theme.json */
  --bg-deep: var(--wp--preset--color--background);
  --bg-deep-2: var(--wp--preset--color--secondary);
  --soil: var(--wp--preset--color--tertiary);
  --ink: var(--wp--preset--color--foreground);
  --ink-dim: var(--wp--preset--color--body-text);
  --ink-faint: var(--wp--preset--color--ironside-grey);
  --green-glow: var(--wp--preset--color--text-link);
  --green-mid: var(--wp--preset--color--border-color-next);
  --green-deep: var(--wp--preset--color--primary);
  --sorin: var(--wp--preset--color--rose);
  --daniel: var(--wp--preset--color--bean-red);
  --seed: var(--wp--preset--color--color-light);
  --spore: var(--wp--preset--color--dune);
  --mycelium: rgba(125, 255, 179, 0.4);
  --line: rgba(125, 255, 179, 0.14);

  --font-display: var(--wp--preset--font-family--sora);
  --font-body: var(--wp--preset--font-family--plus-jakarta-sans);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 14px;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, #0c2216 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deep-2) 55%, var(--soil) 100%);
  color: var(--ink);
  font-family: var(--font-body);
  padding-bottom: clamp(2rem, 6vw, 4rem);
}

.condrea-hero * { box-sizing: border-box; }
.condrea-hero svg { display: block; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .condrea-hero *, .condrea-hero *::before, .condrea-hero *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

#condrea-spore-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

.condrea-hero .hero,
.condrea-hero .branches {
  position: relative;
  z-index: 1;
}

.hero { position: relative; text-align: center; padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) 0; }

.hero-eyebrow {
  margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 0.72rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-faint);
}

.hero-title {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 5rem); letter-spacing: 0.02em; line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, var(--ink) 45%, var(--green-glow) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-title__dot { color: var(--green-glow); -webkit-text-fill-color: var(--green-glow); }

.hero-tagline {
  margin: 0.9rem auto 0; max-width: 30rem; font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--ink-dim); font-weight: 300; letter-spacing: 0.01em; line-height: 1.5;
}

/* ---- hero CTA -------------------------------------------------------- */

.hero-cta {
  margin-top: 1.7rem; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem; border-radius: 999px; text-decoration: none;
  background: linear-gradient(135deg, var(--seed), var(--green-glow));
  color: #06150d; font-family: var(--font-display); font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-cta:hover, .hero-cta:focus-visible {
  transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(125, 255, 179, 0.65);
}
.hero-cta svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.hero-cta:hover svg, .hero-cta:focus-visible svg { transform: translateY(2px); }

/* ---- ecosystem status -------------------------------------------------
   Concrete, legible state instead of pure atmosphere: what's active, what's
   forming, what's still dormant. Updates live as searches / seeds happen. */

.eco-status {
  margin: 1.9rem auto 0; max-width: 30rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.7rem;
  font-size: 0.78rem; color: var(--ink-dim);
}
.eco-status__group { display: inline-flex; align-items: center; gap: 0.5rem; }
.eco-status__group strong { color: var(--ink); font-weight: 600; }
.eco-status__label { color: var(--ink-faint); letter-spacing: 0.04em; }

.eco-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.eco-dot--active { background: var(--green-glow); box-shadow: 0 0 6px var(--green-glow); animation: ecoDotPulse 3s ease-in-out infinite; }
.eco-dot--growing { background: var(--sorin); box-shadow: 0 0 6px var(--sorin); opacity: 0.85; }
.eco-dot--dormant { background: transparent; border: 1px solid var(--ink-faint); }
@keyframes ecoDotPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ---- tree stage ---------------------------------------------------- */

.tree-stage {
  position: relative; max-width: 900px; margin: clamp(2rem, 5vw, 3rem) auto 0;
  aspect-ratio: 900 / 1000; min-height: 380px;
}

@supports not (aspect-ratio: 1 / 1) {
  .tree-stage { height: 0; padding-bottom: 111.11%; }
}

.tree-stage .grow, .tree-stage .dna-node { opacity: 0; }

.tree-stage.in-view .grow { animation: growIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.tree-stage.in-view .grow--seed      { animation-delay: 0.05s; }
.tree-stage.in-view .grow--mycelium  { animation-delay: 0.15s; }
.tree-stage.in-view .grow--roots     { animation-delay: 0.35s; }
.tree-stage.in-view .grow--trunk     { animation-delay: 0.75s; }
.tree-stage.in-view .grow--branches  { animation-delay: 1.15s; }
.tree-stage.in-view .grow--buds      { animation-delay: 1.75s; }
/* seed-label and dna-node are positioned with their own CSS transform
   (translate(-50%, ...)); they get dedicated keyframes that keep that base
   offset throughout the animation instead of clobbering it (V2.3 fix). */
.tree-stage.in-view .grow--seedlabel { animation-name: seedLabelGrowIn; animation-delay: 1.55s; }
.tree-stage.in-view .dna-node        { animation: dnaGrowIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 1.95s; }

@keyframes growIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes seedLabelGrowIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes dnaGrowIn { from { opacity: 0; transform: translate(-50%, calc(-100% + 6px)); } to { opacity: 1; transform: translate(-50%, -100%); } }

body.is-grown .grow, body.is-grown .dna-node { opacity: 1 !important; transform: none !important; }
body.is-grown .seed-label      { transform: translate(-50%, -50%) !important; }
body.is-grown .dna-node--left  { transform: translate(-50%, -100%) !important; }
body.is-grown .dna-node--right { transform: translate(-50%, -100%) !important; }

.tree-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.seed-glow { animation: seedPulse 5.5s ease-in-out infinite; transform-origin: 450px 852px; }
@keyframes seedPulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.08); } }

.seed-crista { animation: cristaShimmer 4s ease-in-out infinite; }
.seed-crista:nth-child(2) { animation-delay: 0.6s; }
.seed-crista:nth-child(3) { animation-delay: 1.1s; }
@keyframes cristaShimmer { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.95; } }

.bud-dot { animation: budGlow 3.2s ease-in-out infinite; }
.bud-dot:nth-of-type(2) { animation-delay: 1.4s; }
@keyframes budGlow { 0%, 100% { opacity: 0.35; r: 3.4; } 50% { opacity: 0.85; r: 4.6; } }

.bud-dot--unknown { animation: budGlowFaint 4.2s ease-in-out infinite; }
@keyframes budGlowFaint { 0%, 100% { opacity: 0.15; r: 2.2; } 50% { opacity: 0.4; r: 3; } }

.mycelium-thread { stroke-dasharray: 5 9; animation: myceliumFlow 4.5s linear infinite; opacity: 0.55; }
.mycelium-thread:nth-child(2) { animation-delay: 0.6s; }
.mycelium-thread:nth-child(3) { animation-delay: 1.3s; }
.mycelium-thread:nth-child(4) { animation-delay: 1.9s; }
.mycelium-thread:nth-child(5) { animation-delay: 2.4s; }
.mycelium-thread:nth-child(6) { animation-delay: 3.1s; }
@keyframes myceliumFlow { to { stroke-dashoffset: -140; } }

.mycelium-node { animation: nodePulse 3.6s ease-in-out infinite; }
@keyframes nodePulse { 0%, 100% { opacity: 0.3; r: 2; } 50% { opacity: 0.9; r: 3.2; } }

.circuit-node {
  fill: var(--seed);
  filter: drop-shadow(0 0 4px rgba(186, 255, 217, 0.85));
  animation: nodePulse 3.4s ease-in-out infinite;
}
.circuit-node:nth-of-type(4n)   { animation-delay: 0.3s; }
.circuit-node:nth-of-type(4n+1) { animation-delay: 0.9s; }
.circuit-node:nth-of-type(4n+2) { animation-delay: 1.5s; }
.circuit-node:nth-of-type(4n+3) { animation-delay: 2.1s; }

.circuit-pulse {
  stroke: var(--seed); stroke-linecap: round; stroke-dasharray: 16 640;
  filter: drop-shadow(0 0 5px rgba(186, 255, 217, 0.95));
  animation: circuitFlow 3.2s linear infinite; opacity: 0.9;
}
@keyframes circuitFlow { from { stroke-dashoffset: 640; } to { stroke-dashoffset: -640; } }

@media (prefers-reduced-motion: reduce) {
  .circuit-pulse { animation: none; opacity: 0.55; }
}

/* seed hover tooltip */

.seed-hit { cursor: help; }
.seed-tooltip {
  position: absolute; left: 50%; top: 78%; transform: translate(-50%, 0) scale(0.94);
  width: min(260px, 70vw); padding: 0.85rem 1rem;
  background: rgba(8, 26, 17, 0.94); border: 1px solid var(--line); border-radius: 10px;
  font-size: 0.8rem; line-height: 1.55; color: var(--ink-dim); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 5;
}
.seed-tooltip strong { display: block; color: var(--seed); font-family: var(--font-display); letter-spacing: 0.08em; font-size: 0.72rem; margin-bottom: 0.3rem; text-transform: uppercase; }
.tree-stage:has(.seed-hit:hover) .seed-tooltip,
.tree-stage:has(.seed-hit:focus-visible) .seed-tooltip { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---- dormant pins — future branches, made into real controls -------- */

.dormant-pin {
  position: absolute; width: 16px; height: 16px; margin-left: -8px; margin-top: -8px;
  background: transparent; border: 1.5px dashed #8fe9bd; border-radius: 50%;
  padding: 0; cursor: pointer; z-index: 4;
}
.dormant-pin:hover, .dormant-pin:focus-visible, .dormant-pin.is-open { background: rgba(143, 233, 189, 0.18); }
.dormant-pin__tip {
  position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%) translateY(4px);
  width: 190px; padding: 0.65rem 0.75rem; background: rgba(8, 26, 17, 0.96);
  border: 1px solid var(--line); border-radius: 8px; font-size: 0.72rem; line-height: 1.5;
  color: var(--ink-dim); text-align: left; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dormant-pin:hover .dormant-pin__tip,
.dormant-pin:focus-visible .dormant-pin__tip,
.dormant-pin.is-open .dormant-pin__tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* V4 — the name (if it has one) is always visible; only the longer
   "reserved / waiting to grow" detail is the hover/tap flourish */
.dormant-pin__label {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  white-space: nowrap; pointer-events: none;
}
.dormant-pin--unknown { border-color: var(--ink-faint); opacity: 0.85; }
.dormant-pin--unknown .dormant-pin__label { font-size: 0.62rem; letter-spacing: 0.18em; opacity: 0.7; }
.dormant-pin--unknown:hover, .dormant-pin--unknown:focus-visible, .dormant-pin--unknown.is-open { background: rgba(157, 179, 164, 0.14); }

.dormant-pin--sorin { border-color: rgba(142, 203, 255, 0.55); }
.dormant-pin--sorin .dormant-pin__label { color: var(--sorin); opacity: 0.85; }
.dormant-pin--sorin:hover, .dormant-pin--sorin:focus-visible, .dormant-pin--sorin.is-open { background: rgba(142, 203, 255, 0.16); }

.dormant-pin--daniel { border-color: rgba(255, 193, 121, 0.55); }
.dormant-pin--daniel .dormant-pin__label { color: var(--daniel); opacity: 0.85; }
.dormant-pin--daniel:hover, .dormant-pin--daniel:focus-visible, .dormant-pin--daniel.is-open { background: rgba(255, 193, 121, 0.16); }

/* DNA fruit nodes */

.dna-node {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  text-decoration: none; width: 17%; min-width: 92px; max-width: 168px;
  transition: transform 0.5s ease;
}
.dna-node--left  { left: 23.3%; top: 15%; transform: translate(-50%, -100%); }
.dna-node--right { left: 76.7%; top: 15%; transform: translate(-50%, -100%); }
.dna-node:hover, .dna-node:focus-visible { transform: translate(-50%, calc(-100% - 6px)); }

.dna-svg { width: 100%; height: auto; overflow: visible; }

.dna-pulse-a, .dna-pulse-b {
  fill: none; stroke-linecap: round; stroke-dasharray: 18 340;
  filter: drop-shadow(0 0 5px currentColor); animation: dnaPulseFlow 2.4s linear infinite; opacity: 0.95;
}
.dna-pulse-b { animation-delay: 1.2s; }
@keyframes dnaPulseFlow { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }

.dna-node--left .dna-pulse-a, .dna-node--left .dna-pulse-b { stroke: var(--sorin); color: var(--sorin); }
.dna-node--right .dna-pulse-a, .dna-node--right .dna-pulse-b { stroke: var(--daniel); color: var(--daniel); }

.dna-rungs line { animation: rungScan 3s ease-in-out infinite; opacity: 0.3; }
.dna-rungs line:nth-child(1) { animation-delay: 0s; }
.dna-rungs line:nth-child(2) { animation-delay: 0.2s; }
.dna-rungs line:nth-child(3) { animation-delay: 0.4s; }
.dna-rungs line:nth-child(4) { animation-delay: 0.6s; }
.dna-rungs line:nth-child(5) { animation-delay: 0.8s; }
.dna-rungs line:nth-child(6) { animation-delay: 1.0s; }
.dna-rungs line:nth-child(7) { animation-delay: 1.2s; }
@keyframes rungScan { 0%, 100% { opacity: 0.3; } 12% { opacity: 1; } 28% { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  .dna-pulse-a, .dna-pulse-b { animation: none; opacity: 0.5; }
  .dna-rungs line { animation: none; opacity: 0.7; }
}

.dna-node--left .dna-strands { filter: drop-shadow(0 0 6px rgba(142, 203, 255, 0.55)); }
.dna-node--right .dna-strands { filter: drop-shadow(0 0 6px rgba(255, 193, 121, 0.55)); }
.dna-node:hover .dna-strands, .dna-node:focus-visible .dna-strands { filter: drop-shadow(0 0 14px currentColor); }
.dna-node--left:hover .dna-strands, .dna-node--left:focus-visible .dna-strands { filter: drop-shadow(0 0 16px rgba(142, 203, 255, 0.9)); }
.dna-node--right:hover .dna-strands, .dna-node--right:focus-visible .dna-strands { filter: drop-shadow(0 0 16px rgba(255, 193, 121, 0.9)); }

/* V3 — identity + territory are ALWAYS visible (essential information is
   never hover-only); only the literal domain string is a hover flourish,
   and only on devices that actually support hover. */
.dna-label {
  margin-top: 0.55rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
}
.dna-label__name {
  font-family: var(--font-display); font-size: clamp(0.78rem, 1.5vw, 0.94rem);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.dna-node--left .dna-label__name { color: var(--sorin); }
.dna-node--right .dna-label__name { color: var(--daniel); }
.dna-label__territory {
  font-size: clamp(0.65rem, 1.1vw, 0.72rem); font-weight: 300; font-style: italic;
  color: var(--ink-faint); line-height: 1.3; max-width: 14ch;
}
.dna-label__domain { font-size: 0.68rem; font-weight: 300; color: var(--ink-faint); }

@media (hover: hover) and (pointer: fine) {
  .dna-label__domain {
    display: block; opacity: 0; max-height: 0; overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.25s ease;
  }
  .dna-node:hover .dna-label__domain, .dna-node:focus-visible .dna-label__domain {
    opacity: 1; max-height: 1.4em;
  }
}

.seed-label {
  position: absolute; left: 50.5%; top: 85.4%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: min(60%, 230px); pointer-events: none;
}
.seed-label__eyebrow {
  font-family: var(--font-display); font-size: clamp(0.5rem, 1.3vw, 0.62rem); font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-dim);
}
.seed-label__of {
  font-family: var(--font-display); font-size: clamp(0.4rem, 1vw, 0.5rem); font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-faint); margin: 0.15em 0;
}
.seed-label__name {
  font-family: var(--font-display); font-size: clamp(0.9rem, 3vw, 1.2rem); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--seed); line-height: 1.15;
  text-shadow: 0 0 14px rgba(186, 255, 217, 0.5);
}
.seed-label__sub {
  margin-top: 0.35em; font-size: clamp(0.5rem, 1.3vw, 0.62rem); color: var(--ink-faint);
  font-weight: 300; font-style: italic; letter-spacing: 0.02em;
}

.search-particle {
  position: fixed; width: 8px; height: 8px; border-radius: 50%;
  background: var(--seed); box-shadow: 0 0 12px 4px rgba(186, 255, 217, 0.8);
  pointer-events: none; z-index: 90; opacity: 0;
}

/* ==========================================================================
   BRANCHES — explicit clarity layer for Sorin / Daniel, independent of the
   tree. A first-time visitor shouldn't have to decode an illustration to
   know what these two represent.
   ========================================================================== */

.branches { max-width: 900px; margin: clamp(3.5rem, 8vw, 5.5rem) auto 0; padding: 0 var(--gutter); }

.branches__intro { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.2rem); }
.branches__eyebrow { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); }
.branches__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 600; }

.branches__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 720px) { .branches__grid { grid-template-columns: 1fr; } }

.branch-card {
  display: block; position: relative; padding: 1.7rem 1.6rem; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(10, 26, 17, 0.35);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.branch-card:hover, .branch-card:focus-visible { transform: translateY(-4px); }

.branch-card--sorin { border-color: rgba(142, 203, 255, 0.22); }
.branch-card--sorin:hover, .branch-card--sorin:focus-visible { border-color: var(--sorin); box-shadow: 0 20px 40px -22px rgba(142, 203, 255, 0.4); }

.branch-card--daniel { border-color: rgba(255, 193, 121, 0.22); }
.branch-card--daniel:hover, .branch-card--daniel:focus-visible { border-color: var(--daniel); box-shadow: 0 20px 40px -22px rgba(255, 193, 121, 0.4); }

.branch-card__eyebrow { display: block; font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.5rem; }
.branch-card--sorin .branch-card__eyebrow { color: var(--sorin); }
.branch-card--daniel .branch-card__eyebrow { color: var(--daniel); }

.branch-card__name { margin: 0 0 0.7rem; font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 600; }

.branch-card__line { margin: 0 0 1.1rem; font-size: 0.92rem; line-height: 1.6; color: var(--ink-dim); font-weight: 300; }

.branch-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.2rem; padding: 0; }
.branch-card__tags li { font-size: 0.68rem; letter-spacing: 0.03em; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); }

.branch-card__domain { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; color: var(--ink); }
.branch-card__domain::after { content: "→"; transition: transform 0.2s ease; }
.branch-card:hover .branch-card__domain::after, .branch-card:focus-visible .branch-card__domain::after { transform: translateX(3px); }

/* ==========================================================================
   SOLO HERO (sorin.condrea.ro) — varianta cu un singur branch, fara copacul
   cu bifurcatie (nu are sens vizual cu un singur traseu). Pastreaza acelasi
   limbaj: spore field, glow, DNA helix, cardurile "active / growing".
   ========================================================================== */

.hero--solo { padding-bottom: 0; }

.hero-actions {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.9rem; margin: 1.6rem 0 2.2rem;
}

.hero-cta--ghost {
  background: transparent; border: 1px solid var(--line); color: var(--ink-dim);
}
.hero-cta--ghost:hover, .hero-cta--ghost:focus-visible {
  border-color: var(--sorin); color: var(--ink); background: rgba(142, 203, 255, 0.08);
}

.hero-eyebrow a { color: var(--sorin); text-decoration: underline; text-underline-offset: 3px; }
.hero-eyebrow a:hover, .hero-eyebrow a:focus-visible { color: var(--green-glow); }

.solo-dna-stage {
  position: relative; max-width: 240px; margin: 0 auto clamp(1.5rem, 5vw, 2.5rem);
  opacity: 0; transform: translateY(10px);
  animation: growIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.3s;
}
.solo-dna-stage .dna-svg { width: 100%; height: auto; }
.solo-dna-stage .dna-strands { filter: drop-shadow(0 0 10px rgba(142, 203, 255, 0.5)); }

@media (prefers-reduced-motion: reduce) {
  .solo-dna-stage { opacity: 1; transform: none; animation: none; }
}

.branches--solo { max-width: 1080px; }

.branches__grid--solo {
  grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 780px) {
  .branches__grid--solo { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .branches__grid--solo { grid-template-columns: 1fr; }
}

.service-card {
  position: relative; padding: 1.5rem 1.4rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.015);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.service-card:hover { transform: translateY(-3px); border-color: var(--sorin); }

.service-card__status {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem;
  font-family: var(--font-display); font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.service-card__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
}
.service-card--active .service-card__dot { background: var(--green-glow); box-shadow: 0 0 8px var(--green-glow); }
.service-card--active .service-card__status { color: var(--green-glow); }
.service-card--growing .service-card__dot { background: var(--sorin); animation: ecoDotPulse 2.4s ease-in-out infinite; }
.service-card--growing .service-card__status { color: var(--sorin); }

.service-card__name { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.service-card__line { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--ink-dim); font-weight: 300; }