:root {
      --primary: #3B82F6;
      --primary-soft: #EFF6FF;
      --text-dark: #0F172A;
      --muted: #64748B;
      --page-bg: #F1F5F9;
    }
	@media (max-width: 480px) {
	  .navbar-brand img {
	    max-width: 250px !important;
	  }
	}
    body {
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
      background: var(--page-bg);
      color: var(--text-dark);
      overflow-x: hidden;
    }

    /* NAVBAR */
    .navbar {
      background: rgba(255,255,255,0.9) !important;
      backdrop-filter: blur(12px);
    }

    .nav-link {
      font-weight: 500;
      padding: 10px !important;
      border-radius: 8px;
      transition: 0.3s;
    }

    .nav-link:hover {
      background: var(--primary-soft);
      color: var(--primary) !important;
    }

    /* HERO — novi gradient background */
    .hero {
	  background: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%);
	  padding: 20px 0 30px;   /* SMANJENA VISINA */
	  color: white;
	  text-align: center;
	  position: relative;
	}
	
	.hero h1 {
	  font-size: 2.4rem;       /* blago smanjeno radi balansa */
	  font-weight: 700;
	  animation: fadeUp 0.7s ease-out forwards;
	  opacity: 0;
	}
	
	.hero p {
	  font-size: 1.1rem;
	  opacity: 0.9;
	  animation: fadeUp 1s ease-out forwards;
	  opacity: 0;
	}


    @keyframes fadeUp {
      from { transform: translateY(20px); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }

    /* FEATURE KARTICE */
    .feature-card {
      border-radius: 16px;
      border: 1px solid #E2E8F0;
      background: white;
      padding: 28px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
      transition: 0.25s;
      animation: fadeIn 0.8s ease forwards;
      opacity: 0;
    }

    .feature-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 30px rgba(0,0,0,0.12);
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .icon-title-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .icon-badge {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      flex-shrink: 0;
    }

    .g1 .icon-badge { background: #DBEAFE; color: #2563EB; }
    .g2 .icon-badge { background: #D1FAE5; color: #059669; }
    .g3 .icon-badge { background: #FEF3C7; color: #D97706; }
    .g4 .icon-badge { background: #F3E8FF; color: #7C3AED; }

    .tag {
      display: inline-block;
      padding: 5px 14px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 0.75rem;
      margin-bottom: 10px;
      opacity: 0.9;
    }

    .g1 .tag { background: #DBEAFE; color: #2563EB; }
    .g2 .tag { background: #D1FAE5; color: #059669; }
    .g3 .tag { background: #FEF3C7; color: #D97706; }
    .g4 .tag { background: #F3E8FF; color: #7C3AED; }

    footer {
      margin-top: 60px;
      font-size: 14px;
      color: var(--muted);
    }
    /* Ujednačavanje visine kartica */
	.feature-card {
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	}
	
	/* Unutarnji sadržaj kartice raste po potrebi */
	.feature-card .p-4 {
	    flex: 1 1 auto;
	    display: flex;
	    flex-direction: column;
	}
	
	/* Link uvijek stoji na dnu kartice */
	.feature-card a {
	    margin-top: auto;
	}
	.page-container {
	    max-width: 1200px;
	    margin: 0 auto;
	}
	/* Vizualna distinkcija pitanja i odgovora */
    .faq-question {
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: .5rem;
      font-size: 1.05rem;
    }
    .faq-answer {
      background: #f8f9fa;
      border-left: 4px solid #0d6efd;
      border-radius: 6px;
      padding: 1rem 1.25rem;
      margin-top: .75rem;
    }
    .skip-to-main-content-link {
		position: absolute;
		left: -9999px;
		z-index: 999;
		padding: 1em;
		margin-top: 1rem;
		background-color: #3c4858;
		color: #e39717;
		opacity: 0;
		font-size: 1.5rem;
		font-weight: 600;
	}
	.skip-to-main-content-link:focus {
		left: 50%;
		transform: translateX(-50%);
		opacity: 1;
	}