/* Beofantastika Sections (From About) — scoped styles to avoid theme conflicts */

.bfk-sections{
  --gold:#b88a44;
  --gold2:#f3d28e;
  --text:#14151a;
  --muted: rgba(20,21,26,.72);
  --cardText:#f5f5f5;
  --cardMuted: rgba(245,245,245,.75);
  --radius: 22px;
  --shadowStrong: 0 22px 60px rgba(0,0,0,.20);
  --shadowCard: 0 18px 45px rgba(0,0,0,.45);
  --max: 1180px;
}

.bfk-sections .bfk-container{max-width:var(--max); margin:0 auto; padding:0 18px;}
.bfk-sections .bfk-section{padding:72px 0; color:var(--text);}
.bfk-sections .bfk-section--alt{background: linear-gradient(180deg, rgba(184,138,68,.06), rgba(255,255,255,0));}

.bfk-sections .bfk-kicker{letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:var(--gold); margin-bottom:10px;}
.bfk-sections .bfk-h2{font-size:34px; line-height:1.15; margin:0 0 14px; color:var(--text);}
.bfk-sections .bfk-h3{font-size:20px; margin:0 0 10px; color:var(--text);}
.bfk-sections .bfk-p{color:var(--muted); line-height:1.75; margin:0 0 14px;}
.bfk-sections .bfk-link{color:var(--gold); text-decoration:none; font-weight:700}
.bfk-sections .bfk-link:hover{opacity:.85}

.bfk-sections .bfk-actions{margin-top:10px}
.bfk-sections .bfk-btn{
  display:inline-block; padding:12px 16px; border-radius:999px;
  font-weight:800; text-decoration:none; border:1px solid rgba(20,21,26,.12);
  margin-right:10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bfk-sections .bfk-btn--primary{
  background:linear-gradient(180deg, var(--gold2), var(--gold));
  color:#10131a; border-color:transparent;
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}
.bfk-sections .bfk-btn--ghost{background:transparent; color:var(--text);}
.bfk-sections .bfk-btn:hover{transform:translateY(-1px); box-shadow: 0 18px 38px rgba(0,0,0,.20);}

.bfk-sections .bfk-split{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:stretch}
@media (max-width: 920px){.bfk-sections .bfk-split{grid-template-columns:1fr;}}

.bfk-sections .bfk-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px}
@media (max-width: 1100px){.bfk-sections .bfk-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.bfk-sections .bfk-grid{grid-template-columns:1fr}}

/* Dark cards */
.bfk-sections .bfk-card{
  color:var(--cardText);
  background: linear-gradient(180deg, #000, #121212);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:22px;
  box-shadow: var(--shadowCard), inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
}
.bfk-sections .bfk-card__title{font-weight:900; margin:0 0 10px; color:var(--gold2);}
.bfk-sections .bfk-ico{font-size:22px; margin-bottom:10px}
.bfk-sections .bfk-p--card{color:var(--cardMuted);}
.bfk-sections .bfk-list{margin:0; padding-left:18px; color:var(--cardMuted); line-height:1.75}

/* Glass hover effect for grid cards */
.bfk-sections .bfk-card--hoverglass{transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;}
.bfk-sections .bfk-card--hoverglass:hover{
  transform: translateY(-2px);
  border-color: rgba(184,138,68,.35);
  box-shadow: 0 24px 65px rgba(0,0,0,.55);
  background:
    radial-gradient(800px 260px at 20% 10%, rgba(184,138,68,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.80));
  backdrop-filter: blur(10px);
}

.bfk-sections .bfk-card--glass{background: rgba(0,0,0,.72); backdrop-filter: blur(10px);}
.bfk-sections .bfk-card--accent{
  background:
    radial-gradient(1200px 300px at 10% 10%, rgba(184,138,68,.22), transparent),
    linear-gradient(180deg, #000, #121212);
}

/* Focus (dark hero card) */
.bfk-sections .bfk-focus{
  padding:34px 18px;
  border-radius:22px;
  border:1px solid rgba(20,21,26,.10);
  /* tamna pozadina kao u custom kodu (da slova budu bela i čitljiva) */
  background:
    radial-gradient(1000px 340px at 10% 0%, #000000, #c3c4c7 60%),
    rgba(255,255,255,.55);
  box-shadow: var(--shadowStrong);
}

/* Tipografija unutar Focus bloka ide svetla (ne diramo globalno) */
.bfk-sections .bfk-focus .bfk-kicker,
.bfk-sections .bfk-focus .bfk-h2,
.bfk-sections .bfk-focus .bfk-h3,
.bfk-sections .bfk-focus .bfk-p{
  color: rgba(255,255,255,.92);
}
.bfk-sections .bfk-focus .bfk-p{ color: rgba(255,255,255,.80); }
.bfk-sections .bfk-focus__badge{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background:rgba(184,138,68,.14); border:1px solid rgba(184,138,68,.25);
  color: rgba(255,255,255,.90); font-size:12px; margin-bottom:12px; font-weight:800;
}

/* CTA */
.bfk-sections .bfk-cta{
  padding:60px 0; color:var(--text);
  background:
    radial-gradient(900px 300px at 20% 20%, rgba(184,138,68,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
}
.bfk-sections .bfk-cta__inner{display:flex; gap:18px; align-items:center; justify-content:space-between;}
@media (max-width: 920px){.bfk-sections .bfk-cta__inner{flex-direction:column; align-items:flex-start;}}
.bfk-sections .bfk-cta__actions{white-space:nowrap;}

/* ===== LIGHT premium shadow za Focus i CTA ===== */

.bfk-sections .bfk-focus,
.bfk-sections .bfk-cta {

  border-radius: 26px;

  /* svetli soft shadow kao kartice */
  box-shadow:
    0 30px 70px rgba(0,0,0,.18),
    0 12px 30px rgba(0,0,0,.10);

  transition: box-shadow .25s ease, transform .25s ease;
}

/* mali lift efekat */
.bfk-sections .bfk-focus:hover,
.bfk-sections .bfk-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 40px 90px rgba(0,0,0,.22),
    0 18px 45px rgba(0,0,0,.14);
}