/* KPD Info (kpdinfo.com.hr) - styles */
:root{
  /* Dark blue (not overly dark) */
  --bg0:#0B1430;
  --bg1:#10204A;
  --glass: rgba(255,255,255,.075);
  --glass2: rgba(255,255,255,.10);
  --bdr: rgba(255,255,255,.14);
  --txt: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.72);
  --shadow: 0 18px 50px rgba(0,0,0,.40);
  --navH: 72px;
  --ok:#22c55e;
}

html{ scroll-behavior:smooth; }
body{
  margin:0;
  padding-top: var(--navH);
  color: var(--txt);
  background-color: var(--bg0);
  background:
    radial-gradient(1100px 750px at 15% 10%, rgba(91,124,250,.22), transparent 55%),
    radial-gradient(1000px 750px at 90% 18%, rgba(34,211,238,.14), transparent 55%),
    radial-gradient(900px 650px at 55% 88%, rgba(34,197,94,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

section{ scroll-margin-top: calc(var(--navH) + 18px); }
a{ text-decoration:none; }
.text-mutedish{ color: var(--muted); }

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: 16px; top: 16px; width:auto; height:auto;
  padding:.6rem .9rem;
  background: rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  color:#fff;
  z-index: 2000;
}

.nav-glass{
  height: var(--navH);
  background: rgba(5,10,26,.68);
  border-bottom: 1px solid var(--bdr);
  backdrop-filter: blur(14px);
}
.navbar .nav-link{ color: rgba(255,255,255,.80); }
.navbar .nav-link:hover, .navbar .nav-link:focus{ color: rgba(255,255,255,.98); }

.brand-mark{
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--bdr);
}
.brand-mark .brand-text{
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: -.05em;
  color: rgba(255,255,255,.94);
}
.made-hr{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  font-size:.82rem;
  white-space:nowrap;
}

.hero{
  min-height: calc(100vh - var(--navH));
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  padding: 22px 0;
}
.hero:before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(91,124,250,.22), transparent 46%),
    radial-gradient(circle at 72% 40%, rgba(34,211,238,.14), transparent 46%),
    radial-gradient(circle at 50% 75%, rgba(34,197,94,.10), transparent 46%);
  filter: blur(10px);
  z-index:0;
  pointer-events:none;
}
.hero .container{ position:relative; z-index:1; }

.hero-kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:999px;
  padding:.45rem .85rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  font-size:.9rem;
}

.section-pad{ padding: 88px 0; }
.section-head{ text-align:center; margin-bottom: 26px; }
.section-head h2{ font-weight: 850; letter-spacing: -.02em; }
.section-head p{ color: var(--muted); max-width: 920px; margin: 10px auto 0; }

.glass{
  background: var(--glass);
  border: 1px solid var(--bdr);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.glass-soft{
  background: var(--glass2);
  border: 1px solid var(--bdr);
  border-radius: 18px;
  backdrop-filter: blur(14px);
}
.card-hover{
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card-hover:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.10);
}

.icon-pill{
  width:46px;height:46px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:16px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--bdr);
}
.divider{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }
.kpi{
  border:1px solid var(--bdr);
  border-radius:18px;
  background: rgba(255,255,255,.05);
}

.btn-primary{
  background: linear-gradient(135deg, rgba(91,124,250,1), rgba(34,211,238,.9));
  border: none;
  box-shadow: 0 16px 44px rgba(91,124,250,.22);
}
.btn-primary:hover{ filter: brightness(1.03); }
.btn-outline-light{ border-color: rgba(255,255,255,.25); }
.badge-soft{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--txt);
}

.form-control, .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.form-control::placeholder{ color: rgba(255,255,255,.50); }
.form-control:focus, .form-select:focus{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
  box-shadow:none;
  color: rgba(255,255,255,.96);
}

/*
  Improve select dropdown readability.
  Many browsers render the native dropdown list with a white background.
  If option text remains white, it becomes invisible.
  (Note: some UAs ignore option styling; this still improves compatibility.)
*/
.form-select option{
  background: #ffffff;
  color: #111111;
}

.accordion-item{
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 10px;
}
.accordion-button{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.94);
  border: none;
  box-shadow: none;
}
.accordion-button.collapsed{
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
}
.accordion-button:focus{ box-shadow:none; }
.accordion-body{ background: rgba(0,0,0,.10); color: var(--muted); }

.footer-wrap{
  background: rgba(0,0,0,.18);
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer-link{ color: rgba(255,255,255,.72); }
.footer-link:hover{ color: rgba(255,255,255,.96); }
.social{
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
}
.social:hover{ color:#fff; border-color: rgba(255,255,255,.26); }
.hr-soft{ border-color: rgba(255,255,255,.10); }

.back-to-top{
  position:fixed; right:18px; bottom:18px;
  display:none; z-index:999;
}

/* AOS safe: visible by default; if AOS initializes it adds .aos-init then animates to .aos-animate */
[data-aos] { opacity: 1; transform: none; }
.aos-init { opacity: 0; transform: translateY(14px); }
.aos-animate { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s ease; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .card-hover{ transition:none; }
  .card-hover:hover{ transform:none; }
  .aos-init, .aos-animate { transition:none; transform:none; opacity:1; }
}


/* --- KPD demo query helpers (query type pills + example chips) --- */
.query-type-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.query-type-btn{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.query-type-btn:hover{ border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); }
.query-type-btn.active,
.query-type-btn[aria-pressed="true"]{
  background: rgba(91,124,250,.32);
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 14px 36px rgba(91,124,250,.18);
}

.example-chip{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
}
.example-chip:hover{ border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.07); }

.examples-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.history-list{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.history-item{
  width:100%;
  text-align:left;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  padding:.55rem .75rem;
}
.history-item:hover{ border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }

/* --- Small inline “kbd” chip for examples --- */
.kbd-chip{
  display:inline-flex;
  align-items:center;
  padding:.12rem .45rem;
  border-radius: .55rem;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  font-size: .85em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.panel-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.panel-nav a{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  padding:.35rem .75rem;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
}
.panel-nav a:hover{ border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.panel-nav a.active{ background: rgba(91,124,250,.28); border-color: rgba(34,211,238,.55); }