/* ================== GLOBAL ================== */
.section_tree {
  margin: 0;
  min-height: 100vh;
  width: 100%;
  position: relative; /* חשוב לצל! */
  
  background: radial-gradient(circle at top,
    #020617 0%, #020617 35%, #020617 55%, #000 100%);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e5e7eb;
  padding-top: 40px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Section title styling to match modular title */
.section_tree .section-title {
  font-size: clamp(3rem, 5vw, 4rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 12px auto 18px; /* tighter space below the title */
  color: #ffffff;
  text-align: left;
  align-self: center;
  width: 100%;
  max-width: 1200px;
  padding-left: 48px;
  padding-right: 32px;
  margin-left: 0; /* align title slightly to the right */
  margin-top: 25px; /* tighten the gap from section start to title */
  
}


    .dimmed { color: #6b7280 !important; }

    /* ================== GALAXY CARD (PRIMARY) ================== */
    .glow-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      overflow: visible;
      z-index: 0;
    }

    .glow-wrapper::before {
      content: "";
      position: absolute;
      top: -55px;
      left: -55px;
      right: -55px;
      bottom: -55px;
      border-radius: 32px;
      background: conic-gradient(
        #6ee7ff,
        #3b82f6,
        #a855f7,
        #ec4899,
        #6ee7ff
      );
      filter: blur(75px);
      opacity: 0.55;
      z-index: -1;
      pointer-events: none;
      animation: glowFloat 7s ease-in-out infinite;
    }

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

    .result-card-primary {
      width: 420px;
      max-width: 440px;
      padding: 26px 28px 26px;
      border-radius: 24px;

      background: radial-gradient(circle at top left,
        rgba(110, 231, 255, 0.18) 0%,
        rgba(15, 23, 42, 0.85) 42%,
        rgba(15, 23, 42, 1) 100%);

      border: 1px solid rgba(148,163,184,0.32);
      box-shadow:
        0 32px 120px rgba(15,23,42,0.95),
        0 0 0 1px rgba(15,23,42,1);

      position: relative;
      overflow: hidden;
    }

    .result-inner {
      position: relative;
      z-index: 2;
    }

    .badge {
      font-size: 11px;
      letter-spacing: .18em;
      color: #9ca3af;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

    .result-main {
      display: flex;
      justify-content: space-between;
      gap: 24px;
    }

    .label {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #9ca3af;
    }

    .big-number {
      font-size: 30px;
      font-weight: 600;
      margin-top: 4px;
      white-space: nowrap;
    }

    .subline {
      margin-top: 4px;
      font-size: 13px;
      color: #92959a;
    }

    .right-block {
      text-align: right;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .6s ease, transform .6s ease;
    }

    .result-card-primary.ready .right-block {
      opacity: 1;
      transform: translateY(0);
    }

    /* === GALAXY VISUAL === */
.galaxy-wrapper {
  margin-top: 10px;
  height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 80px; /* room for legend on the side */
}

    .galaxy-core {
      width: 130px;
      height: 130px;
      border-radius: 999px;
      background:
        radial-gradient(circle,
          rgba(175,237,250,0.8) 0%,
          rgba(78,197,255,0.6) 22%,
          rgba(59,130,246,0.45) 45%,
          rgba(168,85,247,0.25) 65%,
          rgba(15,23,42,0.9) 100%);
      box-shadow:
        0 0 40px rgba(110,231,255,0.35),
        0 0 80px rgba(59,130,246,0.3);
      position: relative;
      overflow: hidden;
    }

    .galaxy-ring {
      position: absolute;
      inset: 10px;
      border-radius: 999px;
      border: 1.5px solid rgba(186,244,255,0.45);
      box-shadow: 0 0 20px rgba(110,231,255,0.35);
    }

    .galaxy-spark {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #baf4ff;
      box-shadow:
        0 0 10px rgba(186,244,255,0.8),
        0 0 18px rgba(110,231,255,0.7);
      top: 18px;
      left: 50%;
      transform-origin: 0 45px;
      animation: orbit 6s linear infinite;
    }

    .galaxy-spark:nth-child(3) {
      top: auto;
      bottom: 24px;
      left: 48%;
      transform-origin: 0 -46px;
      animation-duration: 9s;
      opacity: 0.7;
    }

    .galaxy-spark:nth-child(4) {
      top: 40px;
      left: 30%;
      transform-origin: -10px 32px;
      animation-duration: 4.5s;
      opacity: 0.85;
    }

    @keyframes orbit {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .galaxy-pulse {
      position: absolute;
      inset: 38px;
      border-radius: 999px;
      border: 1px solid rgba(175,237,250,0.6);
      box-shadow: 0 0 30px rgba(110,231,255,0.5);
      opacity: 0;
      animation: pulse 2.3s ease-out infinite;
    }

    @keyframes pulse {
      0%   { transform: scale(0.9); opacity: 0.5; }
      60%  { transform: scale(1.15); opacity: 0; }
      100% { transform: scale(1.2); opacity: 0; }
    }

    .noise-dot {
      position: absolute;
      width: 3px;
      height: 3px;
      border-radius: 999px;
      background: rgba(148,163,184,0.7);
      opacity: 0.3;
      animation: twinkle 3.5s ease-in-out infinite;
    }

    .noise-dot.n1 { top: 10px; left: 30%; }
    .noise-dot.n2 { top: 22px; right: 18%; }
    .noise-dot.n3 { bottom: 18px; left: 18%; }
    .noise-dot.n4 { bottom: 8px; right: 32%; }
    .noise-dot.n5 { top: 50%; left: 8%; }
    .noise-dot.n6 { top: 58%; right: 6%; }

    .noise-dot:nth-child(6n+1) { animation-duration: 2.2s; }
    .noise-dot:nth-child(6n+2) { animation-duration: 3.1s; }
    .noise-dot:nth-child(6n+3) { animation-duration: 4s; }

    @keyframes twinkle {
      0%   { opacity: 0.15; transform: scale(1); }
      50%  { opacity: 0.5; transform: scale(1.5); }
      100% { opacity: 0.15; transform: scale(1); }
    }

    /* === LEGEND – גרסה עדינה כמו פעם === */
.legend {
  position: absolute;
  right: -8px;
  top: 56%;
  transform: translateY(-50%);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

    .legend-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .legend-row span {
      font-size: 12px;
      font-weight: 300;
      color: #9ca3af;
       ;
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: rgba(110, 231, 255, 0.85);
      box-shadow:
        0 0 8px rgba(110, 231, 255, 0.55),
        0 0 16px rgba(110, 231, 255, 0.35);
    }

    .legend-dot.noisy {
      background: rgba(236, 72, 153, 0.9);
      box-shadow:
        0 0 8px rgba(236, 72, 153, 0.6),
        0 0 16px rgba(236, 72, 153, 0.3);
    }

    /* ================== BOTTOM CARDS (SECONDARY) ================== */
    .page-wrapper {
      padding: 0 24px 10px;
      max-width: 1200px;
    }

    .cards-row {
      display: flex;
      gap: 32px;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .result-card-secondary {
      flex: 1;
      min-width: 360px;
      max-width: 440px;
      min-height: 280px;

      padding: 26px 28px 32px;
      border-radius: 24px;

      background: radial-gradient(circle at top left,
        rgba(110, 231, 255, 0.18) 0%,
        rgba(15, 23, 42, 0.85) 42%,
        rgba(15, 23, 42, 1) 100%);

      border: 1px solid rgba(148,163,184,0.32);
      box-shadow:
        0 32px 120px rgba(15,23,42,0.95),
        0 0 0 1px rgba(15,23,42,1);

      position: relative;
      overflow: hidden;
    }

    .result-card-secondary .result-main {
      gap: 32px;
      margin-top: 14px;
      margin-bottom: 0;
    }

    .result-card-secondary .big-number {
      font-size: 32px;
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .sub {
      margin-top: 4px;
      font-size: 13px;
      color: #9ca3af;
    }

    .with-aye-block {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.6s ease, transform 0.6s ease;
      text-align: right;
    }

    .result-card-secondary.with-aye-active .with-aye-block {
      opacity: 1;
      transform: translateY(0);
    }

    .graph-row { margin-top: 7px; display: flex; justify-content: center; }
    .graph {
      width: 100%;
      max-width: 320px;
      height: 140px;
      display: block;
      margin: 20px auto 0;
      transform: translate(0, 20px); /* center the graph within the card */
    }
    .curve { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
    #pinkLine { stroke: #ff4dff; }
    #blueLine { stroke: #6ee7ff; }

#cardGraph.result-card-secondary {
    min-height: 240px; /* ↓ במקום 280px */
}

    .chart-wrapper {
      margin-top: 24px;
      position: relative;
      height: 170px;
    }

    .axis-y, .axis-x {
      position: absolute;
      background: rgba(148,163,184,0.28);
    }

    .axis-y { left: 20px; top: 6px; bottom: 0; width: 1px; }
    .axis-x { left: 20px; right: 20px; bottom: 0; height: 1px; }

    .columns {
      position: absolute;
      left: 40px; right: 40px; bottom: 0;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
    }

    .col {
      width: 40px;
      border-radius: 6px 6px 0 0;
      height: 0;
      transition: height 1.4s ease-in-out;
    }

    .before-col { background: #ec4899; }
    .after-col  { background: #6ee7ff; }

@media (max-width: 680px) {
  .result-main {
    flex-direction: column;
    gap: 20px;
  }
  /* Keep LTV and Graph "with Aye" numbers on the right on phones */
  #cardLTV .with-aye-block,
  #cardGraph .with-aye-block {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  .result-card-secondary .big-number {
    font-size: 26px;
  }
}
/* ================== שלושת הכרטיסים בשורה ================== */
.cards-row-all {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: 1500px;
  margin: 22px auto 120px; /* less space below the title, still ample bottom gap */
}

/* גורם לכרטיס הגדול לא להימתח ולשמור על הגודל המקורי */
.result-card-primary {
  flex-shrink: 0;
}

/* גורם לכרטיסים הקטנים להיות בגודל המקורי שלהם בלי להתעוות */
.result-card-secondary {
  flex-shrink: 0;
}

.result-card-secondary {
  margin-top: 0px; /* אפשר לשחק עם המספר */
}

/* ---------- Responsive stacking for Impact cards ---------- */
@media (max-width: 1024px) {
  .cards-row-all {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin: 16px auto 80px;
  }

  .result-card-primary,
  .result-card-secondary {
    width: 100%;
    max-width: 520px;
    min-width: auto;
    transform: scale(1);
  }

  .glow-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .graph {
    max-width: 100%;
    transform: translate(0, 20px);
  }

  .legend {
    right: 12px;
  }
}

@media (max-width: 640px) {
  .cards-row-all {
    gap: 20px;
  }

  .result-card-primary,
  .result-card-secondary {
    max-width: 100%;
    border-radius: 18px;
  }

  .graph-row {
    margin-top: 0;
  }

  .graph {
    width: 100%;
    max-width: 100%;
    transform: translate(0, 10px);
  }

  .legend {
    right: 6px;
    top: 60%;
  }
}

/* Responsive stacking for Impact cards */
@media (max-width: 768px) {
  .cards-row-all {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin: 12px auto 60px;
  }
  .result-card-primary,
  .result-card-secondary {
    width: 100%;
    max-width: 520px;
    min-width: auto;
    transform: scale(1);
  }
  .glow-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .graph {
    max-width: 100%;
    transform: translate(0, 10px);
  }
}

@media (max-width: 480px) {
  .cards-row-all {
    gap: 16px;
    margin: 8px auto 40px;
  }
  .result-card-primary,
  .result-card-secondary {
    max-width: 100%;
    border-radius: 18px;
  }
  .graph-row {
    margin-top: 0;
  }
  .graph {
    width: 100%;
    max-width: 100%;
    transform: translate(0, 6px);
  }
}

/* Extra tighten on small phones */
@media (max-width: 600px) {
  .section_tree {
    padding-left: 14px;
    padding-right: 14px;
  }
  .section_tree .section-title {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 12px;
  }
  .cards-row-all {
    width: 100%;
    padding: 0 4px;
    gap: 16px;
    margin: 10px auto 32px;
  }
  .result-card-primary,
  .result-card-secondary {
    width: 100%;
    max-width: 100%;
    padding: 20px 18px 22px;
  }
  .result-main {
    gap: 16px;
  }
  .graph {
    max-width: 100%;
  }
}