:root {
       /* Light theme tokens to keep the original clean look & feel */
      --bg: #f7f8fb; /* soft near-white */
                                                                  --panel: #ffffff; /* cards */
                                                                  --text: #111827; /* slate-900 */
                                                                  --muted: #111827; /* slate-500 */
                                                                  --line: #e5e7eb; /* slate-200 */
                                                                  --shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
                                                                  --radius: 14px;
                                                                  --primary: #0ea5e9; /* sky-600 */
                                                                  --primary-600: #0284c7; /* sky-700 */
                                                                  --accent: #5b3cc4; /* Indigo */
                                                                  --accent-hover: #4c32a7; /* malo tamnija za hover */
                                                                  --ring: 0 0 0 3px rgba(14, 165, 233, 0.2);
                                                                  --heading: #5b3cc4;

                                                                  /* lavender background tones from All Solutions page */
                                                                  --lavender-100: #faf8ff;
                                                                  --lavender-200: #f2f2fb;
                                                                }
                                                                * {
                                                                  box-sizing: border-box;
                                                                }
                                                                html,
                                                                body {
                                                                  height: 100%;
                                                                }
                                                                body {
                                                                  margin: 0;
                                                                  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
                                                                    "Helvetica Neue", Arial, sans-serif;
                                                                  color: var(--text);
                                                                  background: radial-gradient(
                                                                      circle at 80% 120%,
                                                                      rgba(91, 60, 196, 0.18) 0%,
                                                                      transparent 60%
                                                                    ),
                                                                    radial-gradient(
                                                                      circle at 50% 20%,
                                                                      #f5f2ff 0%,
                                                                      #ece8ff 40%,
                                                                      #e4e0ff 100%
                                                                    );

                                                                  background-attachment: fixed, fixed;
                                                                  line-height: 1.6;
                                                                  -webkit-font-smoothing: antialiased;
                                                                  -moz-osx-font-smoothing: grayscale;
                                                                }
                                                                a {
                                                                  color: var(--primary);
                                                                  text-decoration: none;
                                                                }
                                                                a:hover {
                                                                  color: var(--primary-600);
                                                                }
                                                          .teal-dot {
                                                            color: #00a7a7; /* your teal */
                                                            font-weight: 900;
                                                            margin-left: 4px;
                                                          }
                                                                /* Header — light, simple, familiar */
                                    .nav {
                                      position: fixed;
                                      top: 0;
                                      left: 0;
                                      right: 0;
                                      z-index: 1000;
                                      background: rgba(255, 255, 255, 0.5);
                                      backdrop-filter: saturate(70%) blur(10px);
                                      border-bottom: 1px solid var(--line);
                                    }
                                                                .nav-inner {
                                                                  display: flex;
                                                                  align-items: center;
                                                                  gap: 24px;
                                                                  padding: 14px clamp(16px, 6vw, 64px);
                                                                  max-width: 1200px;
                                                                  margin-inline: auto;
                                                                }
                                                                .brand {
                                                                  display: flex;
                                                                  align-items: center;
                                                                  gap: 12px;
                                                                  font-weight: 700;
                                                                  letter-spacing: 0.2px;
                                                                }
                                                                .brand-dot {
                                                                  width: 12px;
                                                                  height: 12px;
                                                                  border-radius: 50%;
                                                                  background: linear-gradient(135deg, var(--primary), var(--accent));
                                                                  box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.12);
                                                                }
                                                                .nav-links {
                                                                  margin-left: auto;
                                                                  display: flex;
                                                                  gap: 18px;
                                                                  flex-wrap: wrap;
                                                                }
                                                                .nav-links a {
                                                                  padding: 8px 12px;
                                                                  border-radius: 10px;
                                                                  color: var(--text);
                                                                }
                                                                .nav-links a:hover {
                                                                  background: #f3f4f6;
                                                                }
                                                                .cta {
                                                                  background: linear-gradient(135deg, var(--primary), var(--accent));
                                                                  color: #fff !important;
                                                                  font-weight: 600;
                                                                }

                                                                /* Hero Intro */
                                                                .hero-buttons {
                                                                  margin-top: 24px;
                                                                  display: flex;
                                                                  justify-content: center;
                                                                  gap: 14px;
                                                                }

                                                                .btn-hero {
                                                                  padding: 12px 28px;
                                                                  border-radius: 12px;
                                                                  font-size: 16px;
                                                                  font-weight: 600;
                                                                  text-decoration: none;
                                                                  color: #fff;
                                                                  background: #5b3cc4; /* SAME color as the title */
                                                                  border: 2px solid transparent;
                                                                  transition: all 0.25s ease;
                                                                  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);
                                                                }

                                                                .btn-hero:hover {
                                                                  background: #ffffff;
                                                                  color: #5b3cc4; /* text becomes purple */
                                                                  border-color: #5b3cc4; /* purple outline on hover */
                                                                  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
                                                                  transform: translateY(-2px);
                                                                }
                                                                .hero {
                                                                  max-width: 1200px;
                                                                  margin: 24px auto 0;
                                                                  /*padding: clamp(24px, 6vw, 64px) clamp(16px, 6vw, 64px);*/
                                                                }
                                                                .hero-card {
                                                                  background: var(--panel);
                                                                  border: 1px solid var(--line);
                                                                  border-radius: var(--radius);
                                                                  box-shadow: var(--shadow);
                                                                  padding: 28px;
                                                                }
                                                                .eyebrow {
                                                                  display: inline-flex;
                                                                  align-items: center;
                                                                  gap: 8px;
                                                                  font-size: 13px;
                                                                  color: var(--muted);
                                                                  letter-spacing: 0.3px;
                                                                  text-transform: uppercase;
                                                                }
                                                                .eyebrow .pill {
                                                                  background: #e0f2fe;
                                                                  color: var(--primary-600);
                                                                  border: 1px solid #bae6fd;
                                                                  padding: 2px 8px;
                                                                  border-radius: 999px;
                                                                }
                                                                h1 {
                                                                  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
                                                                  font-size: 4rem!important;
                                                                  line-height: 1.15;
                                                                  margin: 8px 0 12px;
                                                                  text-align: center;
                                                                  color: #5b3cc4 !important;
                                                                 font-weight: 900 !important;
                                                                }
                                                                h2 {
                                                                  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
                                                                  font-size: 3rem!important;                                                      
                                                                  line-height: 1.15;
                                                                  font-weight: 900 !important;

                                                                  margin: 8px 0 4px;
                                                                  text-align: center;
                                                                  color: #5b3cc4
                                                                }
                                                                .intro-grid {
                                                                  display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
max-width: 1400px;
margin: 40px auto;
padding: 0px clamp(16px, 6vw, 64px);
}

.intro-left {
max-width: 520px;
}

.intro-right {
display: flex;
justify-content: center;
}

                                                                .lead {
                                                                  color: #374151;
                                                                  font-size: clamp(16px, 2.2vw, 18px);
                                                                }
                                                                .spacer-hero {
                                                                  height: 120px; /* adjust to whatever empty space you want */
                                                                }
                                                                /* Slider placed BELOW intro text */
                                                                .slider-wrap {
                                                                  max-width: 1200px;
                                                                  margin: 16px auto 0;
                                                                  padding: 0 clamp(16px, 6vw, 64px);
                                                                }
                                                                .slider {
                                                                  position: relative;
                                                                  overflow: hidden;
                                                                  border-radius: var(--radius);
                                                                  border: 1px solid var(--line);
                                                                  background: var(--panel);
                                                                  box-shadow: var(--shadow);
                                                                }
                                                                .slides {
                                                                  display: flex;
                                                                  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
                                                                  will-change: transform;
                                                                }
                                                                .slide {
                                                                  min-width: 100%;
                                                                  padding: 26px 26px 34px;
                                                                  display: grid;
                                                                  gap: 12px;
                                                                }
                                                                .slide h2 {
                                                                  margin: 0;
                                                                  font-size: 35px;
                                                                  letter-spacing: 1px;
                                                                  text-transform: uppercase;
                                                                  color: var(--muted);
                                                                  text-align: center;
                                                                }
                                                                .slide h3 {
                                                                  margin: 2px 0 8px;
                                                                  font-size: 22px;
                                                                  text-align: center;
                                                                }

                                                                .arrow {
                                                                  position: absolute;
                                                                  top: 50%;
                                                                  translate: 0 -50%;
                                                                  background: #ffffff;
                                                                  border: 1px solid var(--line);
                                                                  width: 40px;
                                                                  height: 40px;
                                                                  display: grid;
                                                                  place-items: center;
                                                                  border-radius: 12px;
                                                                  cursor: pointer;
                                                                  box-shadow: var(--shadow);
                                                                }
                                                                .arrow:hover {
                                                                  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
                                                                }
                                                                .arrow[disabled] {
                                                                  opacity: 0.45;
                                                                  pointer-events: none;
                                                                }
                                                                .arrow.left {
                                                                  left: 10px;
                                                                }
                                                                .arrow.right {
                                                                  right: 10px;
                                                                }
                                                                .dots {
                                                                  display: flex;
                                                                  gap: 6px;
                                                                  justify-content: center;
                                                                  padding: 10px 14px 16px;
                                                                }
                                                                .dot {
                                                                  width: 7px;
                                                                  height: 7px;
                                                                  border-radius: 50%;
                                                                  background: #e5e7eb;
                                                                  border: 1px solid #d1d5db;
                                                                }
                                                                footer p{
                                                                  margin:0;
                                                                }
                                                                .dot.active {
                                                                  background: linear-gradient(135deg, var(--primary), var(--accent));
                                                                  border-color: transparent;
                                                                }

                                                                /* SLIDE 1 — 5 things in a circle; Study Planning shows 3 chips on hover */
                                                                .circle {
                                                                  position: relative;
                                                                  aspect-ratio: 1/1;
                                                                  max-width: 420px;
                                                                  width: 100%;
                                                                  margin: 8px auto 4px;
                                                                  border-radius: 50%;
                                                                }

                                                                /* Rotating border using ::before pseudo-element */
                                                                .circle::before {
                                                                  content: '';
                                                                  position: absolute;
                                                                  inset: 0;
                                                                  border-radius: 50%;
                                                                  border: 6px dotted #5b3cc4;
                                                                  animation: rotateCircle 40s linear infinite;
                                                                }

                                                                @keyframes rotateCircle {
                                                                  from {
                                                                    transform: rotate(0deg);
                                                                  }
                                                                  to {
                                                                    transform: rotate(360deg);
                                                                  }
                                                                }

                                                                /* Remove animation from nodes - they stay static now */
                                                                .node {
                                                                  position: absolute;
                                                                  translate: -50% -50%;
                                                                  padding: 10px 14px;
                                                                  border-radius: 20px;
                                                                  background-color: #00a7a7;
                                                                  border: 2px solid transparent;
                                                                  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);
                                                                  font-weight: 400;
                                                                  font-size: 1rem;
                                                                  letter-spacing: 1px;
                                                                  color: #fff;
                                                                  display: inline-flex;
                                                                  align-items: center;
                                                                  gap: 6px;
                                                                  white-space: nowrap;
                                                                  transition: all 0.5s ease;
                                                                }

                                                                /* Remove counterRotate animation */
                                                                @keyframes counterRotate {
                                                                  from {
                                                                    transform: rotate(0deg);
                                                                  }
                                                                  to {
                                                                    transform: rotate(-360deg);
                                                                  }
                                                                }

                                                                /* Remove animation from subchips */
                                                                .subchips .chip {
                                                                  position: absolute;
                                                                  padding: 8px 12px;
                                                                  border-radius: 20px;
                                                                  background: #5b3cc4;
                                                                  border: 2px solid transparent;
                                                                  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);
                                                                  font-weight: 600;
                                                                  color: #fff;
                                                                  font-size: 1rem;
                                                                  white-space: nowrap;
                                                                  opacity: 0;
                                                                  pointer-events: none;
                                                                  transform: scale(0.96);
                                                                  transition: all 0.5s ease;
                                                                }

                                                                .node strong {
                                                                  color: #fff;
                                                                }

                                                                /* more specific + background-color, so it beats everything else */
                                                                button.node:hover, .node:hover {
                                                                  background-color: rgba(245, 240, 255, 0.85) /* soft lilac */ !important;
                                                                  backdrop-filter: blur(12px);
                                                                  border-color: #5b3cc4;
                                                                  color: #5b3cc4;
                                                                  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
                                                                  transform: scale(1.04);
                                                                }

                                                                .node:hover strong {
                                                                  color: #5b3cc4;

                                                                }
                                                                /* positions around the circle */
                                                                .n1 {
                                                                  left: 50%;
                                                                  top: 1%;
                                                                }
                                                                .n2 {
                                                                  left: 100%;
                                                                  top: 40%;
                                                                }
                                                                .n3 {
                                                                  left: 85%;
                                                                  top: 80%;
                                                                }
                                                                .n4 {
                                                                  left: 15%;
                                                                  top: 80%;
                                                                }
                                                                .n5 {
                                                                  left: 5%;
                                                                  top: 40%;
                                                                }

                                                                .subchips {
                                                                  position: absolute;
                                                                  inset: 0;
                                                                  pointer-events: none;
                                                                }

                                                                .subchips .chip {
                                                                  position: absolute;
                                                                  padding: 8px 12px;
                                                                  border-radius: 20px;
                                                                  background: #5b3cc4;
                                                                  border: 2px solid transparent;
                                                                  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);
                                                                  font-weight: 600;
                                                                  color: #fff;
                                                                  font-size: 1rem;
                                                                  white-space: nowrap;
                                                                  opacity: 0;
                                                                  pointer-events: none;
                                                                  transform: scale(0.96);
                                                                  transition: all 0.5s ease;
                                                                }

                                                                .circle.show-sub .subchips .chip {
                                                                  opacity: 1;
                                                                  pointer-events: auto;
                                                                  transform: scale(1);
                                                                }

                                                                .subchips .chip:hover {
                                                                  background: rgba(245, 240, 255, 0.85);
                                                                  color: #5b3cc4;
                                                                  border-color: #5b3cc4;
                                                                  transform: scale(1.08);
                                                                }
                                                                .tip {
                                                                  font-size: 13px;
                                                                }

                                                                /* SLIDE 2 — Two flipping cards */
                                                                .cards {
                                                                  display: grid;
                                                                  grid-template-columns: repeat(12, 1fr);
                                                                  gap: 16px;
                                                                  margin-top: 10px;
                                                                }
                                                                .card {
                                                                  grid-column: span 6;
                                                                  background: var(--panel);
                                                                  border: 1px solid var(--line);
                                                                  border-radius: var(--radius);
                                                                  padding: 10px;
                                                                  box-shadow: var(--shadow);
                                                                }

                                                                .flip:hover .card3d {
                                                                  transform: rotateY(180deg);
                                                                }
                                                                .flip-section {
                                                                  max-width: 1200px;
                                                                  margin: 40px auto 0;
                                                                  padding: 0 clamp(16px, 6vw, 64px);
                                                                }

                                                                .flip-section h4 {
                                                                  margin: 0;
                                                                  font-size: 14px;
                                                                  letter-spacing: 0.35px;
                                                                  text-transform: uppercase;
                                                                  color: var(--muted);
                                                                }

                                                                .flip-section h3 {
                                                                  margin: 4px 0 8px;
                                                                  font-size: 22px;
                                                                  text-align: center;
                                                                }
                                                                /* 5-card stakeholder grid, contained like everything else */
                                                                .flipgrid.stakeholder-grid {
                                                                  display: grid;
                                                                  grid-template-columns: repeat(5, minmax(150px, 1fr));
                                                                  gap: 16px;
                                                                  margin-top: 28px;
                                                                }
                                                    .section-heading {
                                                      margin: 0 0 12px;      /* remove extra top margin, keep small bottom */
                                                    }

                                                    /* A “tighter” hero for sections that follow a heading */
                                                    .hero-tight {
                                                      padding-top: 16px;     /* was clamp(24px, 6vw, 64px); */
                                                      padding-bottom: 32px;  /* keep some breathing room */
                                                    }
                                                                /* responsive layout */
                                                                @media (max-width: 1100px) {
                                                                  .flipgrid.stakeholder-grid {
                                                                    grid-template-columns: repeat(3, minmax(180px, 1fr));
                                                                  }
                                                                }
                                                                @media (max-width: 800px) {
                                                                  .flipgrid.stakeholder-grid {
                                                                    grid-template-columns: repeat(2, minmax(200px, 1fr));
                                                                  }
                                                                }
                                                                @media (max-width: 520px) {
                                                                  .flipgrid.stakeholder-grid {
                                                                    grid-template-columns: 1fr;
                                                                  }
                                                                }

                                                                /* make these cards shorter than the big two */
                                                                .flipgrid.stakeholder-grid .card3d {
                                                                  min-height: 220px;
                                                                }

                                                                /* front face: stacked + centered, with small logo-dot */
                                                                .face.stakeholder-front {
                                                                  display: flex;
                                                                  flex-direction: column;
                                                                  align-items: center;
                                                                  justify-content: center;
                                                                  gap: 12px;
                                                                  text-align: center;
                                                                }

                                                                /* tiny logo-dot similar to header brand-dot */
                                                                .badge-dot {
                                                                  width: 14px;
                                                                  height: 14px;
                                                                  border-radius: 50%;
                                                                  background: linear-gradient(135deg, var(--primary), var(--accent));
                                                                  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
                                                                }
                                                                /* GRID: same width as other sections, two columns on desktop, one on small screens */
                                                                .flipgrid {
                                                                  display: grid;
                                                                  grid-template-columns: repeat(auto-fit, minmax(500px, 0.5fr, 0.5fr));
                                                                  gap: 16px;
                                                                  margin-top: 18px;
                                                                  max-width: 100%;
                                                                  font-size: 16px;
                                                                }

                                                                /* Two-card grid: exactly 2 columns of equal width */
.flipgrid.two-card-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

                                                                .flip {
                                                                  position: relative;
                                                                  perspective: 1000px;
                                                                }

                                                                .card3d {
                                                                  width: 100%;
                                                                  min-height: 300px;
                                                                  transform-style: preserve-3d;
                                                                  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
                                                                }

                                                                .flip:hover .card3d {
                                                                  transform: rotateY(180deg);
                                                                }
                                                                .flip .front {
                                                                  display: flex;
                                                                  align-items: center;
                                                                  gap: 12px;
                                                                }

                                                                .flip .front .icon {
                                                                  display: flex;
                                                                  align-items: center;
                                                                  justify-content: center;
                                                                }
                                                                .face {
                                                                  position: absolute;
                                                                  inset: 0;
                                                                  background: #ffffff;
                                                                  border: 1px solid var(--line);
                                                                  border-radius: var(--radius);
                                                                  box-shadow: var(--shadow);
                                                                  padding: 18px 20px;
                                                                  backface-visibility: hidden;
                                                                  display: flex;
                                                                  flex-direction: column;
                                                                  gap: 8px;
                                                                  display: flex;
                                                                  justify-content: center;
                                                                  align-items: center;
                                                                  text-align: justify;
                                                                }
                                                                      .face.back {
                                                background: rgba(255, 255, 255, 0.82); /* same softness, a bit darker */
                                                backdrop-filter: blur(12px);
                                                border: 1px solid rgba(0, 0, 0, 0.06); /* subtle darker outline */
                                                box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
                                                transform: rotateY(180deg);
                                          }
                                                                .face h5 {
                                                                  margin: 0;
                                                                  font-size: 16px;
                                                                  letter-spacing: 0.35px;
                                                                  text-transform: uppercase;
                                                                  color: var(--muted);
                                                                }

                                                                .face h4 {
                                                                  margin: 2px 0 6px;
                                                                  font-size: 20px;
                                                                  text-align: center;
                                                                }

                                                                .face ul {
                                                                  margin: 6px 0 0 18px;
                                                                }

                                                                /* SLIDE 3 — standard text slide */
                                                                .slide p.muted {
                                                                  color: #4b5563;
                                                                }

                                                                /* Content Sections */
                                                                .section {
                                                                  max-width: 1200px;
                                                                  margin: 40px auto;
                                                                  padding: 0 clamp(16px, 6vw, 64px);
                                                                }
                                                                .section h1 {
                                                                  font-size: clamp(22px, 3vw, 30px);
                                                                  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
                                                                  margin: 0 0 8px;
                                                                  text-align: center;
                                                                }
                                                                .section p.muted {
                                                                  color: var(--muted);
                                                                  margin-top: 4px;
                                                                }
                                                                .cards {
                                                                  display: grid;
                                                                  grid-template-columns: repeat(12, 1fr);
                                                                  gap: 16px;
                                                                  margin-top: 18px;
                                                                }
                                                                .card {
                                                                  grid-column: span 6;
                                                                  background: var(--panel);
                                                                  border: 1px solid var(--line);
                                                                  border-radius: var(--radius);
                                                                  padding: 20px;
                                                                  box-shadow: var(--shadow);
                                                                }
                                                                .card h3 {
                                                                  margin: 0 0 6px;
                                                                }
                                                                .list {
                                                                  margin: 10px 0 0 16px;
                                                                }
                                              .flipgrid:not(.stakeholder-grid) .face.front {
                                                background: linear-gradient(
                                                  135deg,
                                                  rgba(255, 255, 255, 0.96),
                                                  #f5f0ff
                                                );                       /* soft lilac instead of pure white */
                                                border-color: #e5ddff;   /* softer border */
                                                box-shadow: 0 10px 24px rgba(91, 60, 196, 0.15); /* gentle glow */
                                              }

                                              .stakeholder-front {
                                                background: linear-gradient(
                                                  135deg,
                                                  rgba(255, 255, 255, 0.96),
                                                  #f5f0ff
                                                );
                                                border: 1px solid #e5ddff; /* soft lilac border */
                                                box-shadow: 0 10px 24px rgba(91, 60, 196, 0.15); /* same soft glow */
                                              }
                                                                /* Footer */
                                                                footer {
                          margin-top: 56px;
                          border-top: 1px solid var(--line);
                          background: var(--accent); /* your indigo */
                          color: #fff;
                  justify-content: center;
                          border-top-left-radius: 28px;
                          border-top-right-radius: 28px;

                          overflow: hidden; /* ensures children don’t “spill” over the rounded corners */
                        }

            .footer-inner {
              max-width: 1200px;
              margin-inline: auto;
              padding: 24px clamp(16px, 6vw, 64px);
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
            }



                                                                /* Responsive */
                                                                @media (max-width: 980px) {
                                                                  .cards .card {
                                                                    grid-column: span 12;
                                                                  }

                                                                }
                                                                @media (max-width: 700px) {
                                                                  .flipgrid {
                                                                    grid-template-columns: 1fr;
                                                                  }
                                                                  
                                                                  /* Two-card grid responsive */
                                                                  .flipgrid.two-card-grid {
                                                                    grid-template-columns: 1fr;
                                                                  }
                                                                  
                                                                  .circle {
                                                                    max-width: 440px;
                                                                  }
                                                                }
                                                                @media (max-width: 620px) {
                                                                  .nav-inner {
                                                                    gap: 14px;
                                                                  }
                                                                  .nav-links {
                                                                    display: none;
                                                                  }
                                                                  .n2 {
                                                                    left: 88%;
                                                                  }
                                                                  .n5 {
                                                                    left: 12%;
                                                                  }
                                                                }
  
/* =======================================================
   PRIMARY PROBLEM CARDS (left column)
   ======================================================= */
.primary-problem.card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow);
  padding: 8px 8px !important;
  transition: all 0.25s ease;
}

.primary-problem.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(91, 60, 196, 0.18);
}

.primary-problem.card.active {
  border-color: var(--purple) !important;
  box-shadow: 0 10px 26px rgba(91, 60, 196, 0.25);
}

/* =======================================================
   CHILD PROBLEM CARDS
   ======================================================= */
.problem.card {
  background: #fff;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 2px !important;
  transition: 0.25s ease;
  box-shadow: var(--shadow);
}

.problem.card:hover {
  transform: translateY(-2px);
  background: #faf9ff;
}

.problem.card.active {
  border-color: var(--purple) !important;
  background: #f4f0ff !important;
}

/* =======================================================
   RIGHT PANEL (Details)
   ======================================================= */
.problem-details .card {
  border-radius: 16px !important;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 14px 30px rgba(91, 60, 196, 0.18);
  padding: 24px !important;
}

/* =======================================================
   BUTTONS -> match hero buttons
   ======================================================= */
.btn-info,
.btn-primary,
button[type="button"] {
  background: var(--purple) !important;
  border: 2px solid var(--purple) !important;
  color: white !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  transition: 0.25s ease;
}

.btn-info:hover,
.btn-primary:hover {
  background: white !important;
  color: var(--purple) !important;
  border-color: var(--purple) !important;
}

/* Secondary / ghost button */
.btn-secondary {
  background: white !important;
  border: 2px solid var(--purple) !important;
  color: var(--purple) !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
}

.btn-secondary:hover {
  background: #faf5ff !important;
}

/* =======================================================
   REMOVE BOOTSTRAP GREY BACKGROUNDS
   ======================================================= */
.card {
  grid-column: span 6;
  background: var(--panel) !important;
  border-radius: 18px !important; /* isti radius kao flip kartice */
  border: none !important; /* uklanja default sivu granicu */
  overflow: hidden; /* da sadržaj lijepo prati radius */
  box-shadow: var(--shadow-md); /* optional – ako želiš isto sjenčanje */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  padding: 15px;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* =======================================================
   SPACING + CLEANER LAYOUT
   ======================================================= */
.container,
.container-fluid {
  max-width: 1200px !important;
}

.problems-list .child-problem .row{
  margin: 10px 0;
}

.circle.show-sub .node.has-sub {
  background-color: rgba(245, 240, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  border-color: #5b3cc4;
  color: #5b3cc4;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
  transform: scale(1.04);
}

.circle.show-sub .node.has-sub strong {
  color: #5b3cc4;
}
.description-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.description-content.collapsed {
  max-height: 30px;
}

.description-content.show {
  max-height: none;
}