:root{
  --ds-bg: #0f2f2f;
  --ds-bg-2: #143a3a;
  --ds-brand: #2f6f69;
  --ds-brand-2: #3f8b7a;
  --ds-text: #0b1a1a;
  --ds-muted: #5d6b6b;
  --ds-card: #ffffff;
  --ds-border: rgba(13, 41, 41, .12);
  --ds-shadow: 0 12px 28px rgba(0,0,0,.08);
  --ds-radius: 18px;
}

html{ scroll-behavior:smooth; }
body{ color: var(--ds-text); }
a{ text-decoration: none; }

.ds-navbar{
  backdrop-filter: blur(10px);
  background: rgba(12, 33, 33, .78) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ds-navbar .nav-link{ color: rgba(255,255,255,.8); }
.ds-navbar .nav-link:hover, .ds-navbar .nav-link.active{ color: #fff; }
.ds-brand-badge{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
}

.ds-hero{
  position: relative;
  padding-top: 6rem;
  padding-bottom: 3.5rem;
  color: #fff;
  background: radial-gradient(1200px 700px at 18% 20%, rgba(79,165,146,.30), transparent 60%),
              radial-gradient(900px 600px at 80% 10%, rgba(255,255,255,.10), transparent 60%),
              linear-gradient(180deg, rgba(8,24,24,.92) 0%, rgba(10,30,30,.90) 45%, rgba(10,30,30,.92) 100%);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.ds-hero .ds-hero-card{
  border-radius: var(--ds-radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.ds-hero h1{ letter-spacing: -0.02em; }
.ds-hero p{ color: rgba(255,255,255,.85); }

.ds-section{ padding: 4.5rem 0; }
.ds-section-alt{
  background: linear-gradient(180deg, rgba(47,111,105,.08) 0%, rgba(47,111,105,.02) 100%);
}
.ds-section-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ds-kicker{
  font-size: .95rem;
  color: var(--ds-muted);
}

.ds-card{
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow);
}
.ds-card-soft{
  border-radius: var(--ds-radius);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.ds-icon{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(47,111,105,.12);
  color: var(--ds-brand);
  border: 1px solid rgba(47,111,105,.18);
}

.ds-icon-lg{
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.ds-pill{
  border: 1px solid rgba(47,111,105,.18);
  background: rgba(47,111,105,.10);
  color: #184b46;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.ds-list-clean{
  margin: 0;
  padding-left: 1.1rem;
}
.ds-list-clean li{ margin-bottom: .35rem; }

.ds-cta{
  background: linear-gradient(90deg, rgba(47,111,105,.92), rgba(22,62,62,.92));
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ds-cta .btn{ border-radius: 999px; }

.ds-footer{
  background: #081818;
  color: rgba(255,255,255,.82);
}
.ds-footer a{ color: rgba(255,255,255,.82); }
.ds-footer a:hover{ color: #fff; }
.ds-footer .small{ color: rgba(255,255,255,.62); }

.ds-article-hero{
  background: linear-gradient(180deg, rgba(8,24,24,.95) 0%, rgba(12,33,33,.90) 100%);
  color: #fff;
  padding-top: 6.2rem;
  padding-bottom: 2.8rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.ds-article-content p{ color: #223; line-height: 1.75; }
.ds-article-content h2, .ds-article-content h3{ letter-spacing: -0.015em; }

.reveal{ opacity: 0; transform: translateY(10px); }
.reveal.show{ opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

.ds-btn-primary{
  background: var(--ds-brand);
  border-color: var(--ds-brand);
}
.ds-btn-primary:hover{ background: #2a615b; border-color: #2a615b; }

.ds-btn-outline{
  border-color: rgba(255,255,255,.25);
  color: #fff;
}
.ds-btn-outline:hover{
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.08);
  color: #fff;
}

.ds-mini-bar{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds-mini-bar .btn{
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

/* HERO pill badgevi – bolji kontrast na tamnoj pozadini */
.ds-hero .ds-pill{
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.96);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.ds-hero .ds-pill i{
  color: rgba(255,255,255,.92);
}