/* style.css — Glazba za ispraćaj | Design System */

/* ===== DESIGN TOKENS ===== */
:root {
  /* Type Scale */
  --text-xs: clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm: clamp(.875rem,.8rem + .35vw,1rem);
  --text-base: clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg: clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl: clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl: clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl: clamp(2.5rem,1rem + 4vw,4.5rem);

  /* Spacing */
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;
  --sp-6:1.5rem;--sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--sp-16:4rem;
  --sp-20:5rem;--sp-24:6rem;--sp-32:8rem;

  /* Radius */
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.25rem;--radius-full:9999px;

  /* Transitions */
  --transition:180ms cubic-bezier(.16,1,.3,1);

  /* Content widths */
  --w-narrow:640px;--w-default:960px;--w-wide:1200px;

  /* Fonts */
 @font-face {
  font-family: 'Fellix';
  src: url('./assets/fonts/pomp.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Recoleta';
  src: url('./assets/fonts/pomp2.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
  --font-display:'Recoleta','Georgia',serif;
  --font-body:'Fellix','Helvetica Neue',sans-serif;
}





/* ===== LIGHT MODE (default) ===== */
:root,[data-theme='light'] {
  --color-bg:#f9f0fa;
  --color-bg-alt:white;
  --color-surface:#FFFFFF;
  --color-surface-2:#F4FAF7;
  --color-divider:#C8DDD2;
  --color-border:#B5CCBF;

  --color-text:#250428;
  --color-text-muted:#5A7A6E;
  --color-text-faint:#8FA99E;
  --color-text-inverse:#FFFFFF;

  --color-primary:#9f92ab;
  --color-primary-hover:#145A4B;
  --color-primary-active:#0E493C;

  --color-accent:#A7E8D1;
  --color-accent-hover:#9ad6c1;
  --color-accent-surface:#FDF6E0;

  --color-dark:#3d3d3d;
  --color-footer:#292929;

  --shadow-sm:0 1px 3px oklch(.2 .02 160 / .06);
  --shadow-md:0 4px 12px oklch(.2 .02 160 / .08);
  --shadow-lg:0 12px 32px oklch(.2 .02 160 / .12);
}

/* ===== DARK MODE ===== */
[data-theme='dark'] {
  --color-bg:#15181a;
  --color-bg-alt:#212629;
  --color-surface:#313131;
  --color-surface-2:#373737;
  --color-divider:#464646;
  --color-border:#34594B;

  --color-text:#dcccea;
  --color-text-muted:#c7d0d6;
  --color-text-faint:#5E8477;
  --color-text-inverse:#0F1F1A;

  --color-primary:#dcccea;
  --color-primary-hover:#d6c7e3;
  --color-primary-active:#e8d9f5;

  --color-accent:#bbd8ec;
  --color-accent-hover:#b5d2e5;
  --color-accent-surface:#2A2610;

  --color-dark:#15181a;

  --shadow-sm:0 1px 3px oklch(0 0 0 / .2);
  --shadow-md:0 4px 12px oklch(0 0 0 / .3);
  --shadow-lg:0 12px 32px oklch(0 0 0 / .4);
}

/* Light tema (default) */
.img-dark { display: none; }
.img-light { display: block; }

/* Dark tema */
[data-theme='dark'] .img-light { display: none; }
[data-theme='dark'] .img-dark  { display: block; }

@media(prefers-color-scheme:dark){
  :root:not([data-theme]){
    --color-bg:#0F1F1A;--color-bg-alt:#142A23;--color-surface:#1A352C;--color-surface-2:#1F3D33;
    --color-divider:#505050;--color-border:#34594B;--color-text:#D4E8DE;--color-text-muted:#8AAFA2;
    --color-text-faint:#5E8477;--color-text-inverse:#0F1F1A;--color-primary:#3DA88E;
    --color-primary-hover:#4DBFA3;--color-primary-active:#5DD4B6;--color-accent:#E8B830;
    --color-accent-hover:#F0C840;--color-accent-surface:#2A2610;--color-dark:#0A1510;
    --shadow-sm:0 1px 3px oklch(0 0 0 / .2);--shadow-md:0 4px 12px oklch(0 0 0 / .3);--shadow-lg:0 12px 32px oklch(0 0 0 / .4);
  }
}

/* ===== LAYOUT ===== */
.container{max-width:var(--w-wide);margin-inline:auto;padding-inline:var(--sp-4)}
.container--narrow{max-width:var(--w-default)}
.container--tight{max-width:var(--w-narrow)}
.section{background:var(--color-bg);padding-block:clamp(var(--sp-12),8vw,var(--sp-24));padding-bottom25px}
.section--alt{background:var(--color-bg-alt);padding-block:clamp(var(--sp-12),8vw,var(--sp-24));padding-bottom:25px}

/* ===== HEADER / NAV ===== */
.header{position:sticky;top:0;z-index:50;transition:box-shadow .3s ease;transition: background-color .3s ease;}
.header--scrolled{background:var(--color-bg-alt);border-bottom:1px solid var(--color-divider);box-shadow:var(--shadow-sm)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding-block:var(--sp-3);max-width:var(--w-wide);margin-inline:auto;padding-inline:var(--sp-4)}
.header__logo{display:flex;align-items:center;gap:var(--sp-2);text-decoration:none;color:var(--color-primary);max-width:180px}
.header__nav{display:flex;align-items:center;gap:var(--sp-5)}
.header__nav a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;font-weight:400;padding:var(--sp-1) 0;border-bottom:2px solid transparent}
.header__nav a:hover,.header__nav a.is-active{color:var(--color-text);border-bottom-color:var(--color-primary)}
.header__cta{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-5);background:var(--color-primary);color:var(--color-text-inverse)!important;border:2px solid var(--color-primary);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:400;text-decoration:none;white-space:nowrap}
.header__cta:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
/* Modern animated hamburger → X */
.header__mobile-toggle{display:none;width:44px;height:44px;padding:0;color:var(--color-text);background:transparent;border:none;cursor:pointer;position:relative;z-index:60}
.header__mobile-toggle .ham{position:absolute;left:50%;top:50%;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s cubic-bezier(.65,.05,.36,1),top .25s ease,opacity .2s ease;transform:translate(-50%,-50%)}
.header__mobile-toggle .ham:nth-child(1){top:calc(50% - 7px)}
.header__mobile-toggle .ham:nth-child(2){top:50%}
.header__mobile-toggle .ham:nth-child(3){top:calc(50% + 7px)}
.header__mobile-toggle.is-active .ham:nth-child(1){top:50%;transform:translate(-50%,-50%) rotate(45deg)}
.header__mobile-toggle.is-active .ham:nth-child(2){opacity:0;transform:translate(-50%,-50%) scaleX(0)}
.header__mobile-toggle.is-active .ham:nth-child(3){top:50%;transform:translate(-50%,-50%) rotate(-45deg)}

.theme-toggle{padding:var(--sp-2);color:var(--color-text-muted);display:flex;align-items:center}
.theme-toggle:hover{color:var(--color-text)}
a.phone-reveal {color: var(--color-dark)!important}

/* Mobilni meni — ispod 1350px */
@media(max-width:1349px){
  .header__nav{position:fixed;inset:0;top:64px;background:var(--color-surface);flex-direction:column;align-items:stretch;padding:var(--sp-8) var(--sp-6);gap:var(--sp-1);transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);z-index:49;overflow-y:auto;box-shadow:var(--shadow-md)}
  .header__nav.is-open{transform:translateX(0)}
  .header__nav a{font-size:var(--text-base);padding:var(--sp-3) 0;border-bottom:1px solid var(--color-divider)}
  .header__nav a:last-of-type{border-bottom:none}
  .header__cta{margin-top:var(--sp-4);justify-content:center;padding:var(--sp-3) var(--sp-6)}
  .header__mobile-toggle{display:inline-flex;align-items:center;justify-content:center}
  .header__nav .theme-toggle{align-self:flex-start;margin-top:var(--sp-3)}
}

/* Body lock kad je meni otvoren */
body.menu-open{overflow:hidden}

/* ===== HERO ===== */
.hero{
  position:relative;
  padding:clamp(var(--sp-12),10vw,var(--sp-32)) 0;
  padding-bottom:var(--sp-6);
  overflow:hidden
}

.hero__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-12);
  align-items:center;
  max-width:var(--w-wide);
  margin-inline:auto;
  padding-inline:var(--sp-4)
}

.hero h1{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  font-weight:400;
  color:var(--color-text);
  margin-bottom:var(--sp-4);
  letter-spacing:-.02em
}

.hero h1 em{
  text-decoration-thickness:3px
}

.hero__subtitle{
  font-size:var(--text-lg);
  color:var(--color-text-muted);
  margin-bottom:var(--sp-8);
  max-width:48ch;
  line-height:1.6
}

.hero__actions{
  display:flex;
  gap:var(--sp-4);
  flex-wrap:wrap
}

.hero__image{
  position:relative;
  margin-left:-150px;
  margin-right:-150px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden
}

.hero__image img{
  width:100%;
  max-width:800px;
  border-radius:var(--radius-2xl);
  transform:scale(.8);
  animation:heroZoom 30s ease-out forwards;
  transform-origin:center center;
}

.hero__leaf{
  position:absolute;
  opacity:.3;
  color:var(--color-primary)
}

@keyframes heroZoom{
  from{transform:scale(.8)}
  to{transform:scale(1)}
}

@media(max-width:899px){
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__subtitle{margin-inline:auto}
  .hero__actions{justify-content:center}
  .hero__image{order:-1;margin:0}
  .hero__image img{max-width:100%}
}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);border-radius:1rem;font-size:var(--text-sm);font-weight:400;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;min-height:48px}
.btn--accent{background:var(--color-accent);color:var(--color-dark);border-color:#212121;box-shadow:5px 5px 0 0 #212121AB}
.btn--accent:hover{background:var(--color-accent-hover);box-shadow: 5px 5px 0 0 #212121AB}
.btn--primary{background:var(--color-primary);color:var(--color-text-inverse);border-color:#212121}
.btn--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn--outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary);box-shadow: 5px 5px 0 0 #212121AB}
.btn--outline:hover{background:var(--color-primary);color:var(--color-text-inverse)}
.btn--ghost{background:transparent;color:var(--color-text-muted);border-color:var(--color-border);box-shadow: 5px 5px 0 0 #212121AB}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn svg{width:18px;height:18px;box-shadow: 5px 5px 0 0 #212121AB}
.btn:hover{margin-left:1px;margin-top:1px;margin-right:-1px;margin-bottom:-1px;box-shadow:4px 4px 0 0 #212121AB}
.btn:active{margin-left:5px;margin-top:5px;margin-right:-5px;margin-bottom:-5px;box-shadow: 0 0 0}


/* ===== SECTION HEADINGS ===== */
.section__header{text-align:center;margin-bottom:clamp(var(--sp-8),4vw,var(--sp-16))}
.section__label{font-size:var(--text-xs);font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--color-primary);margin-bottom:var(--sp-2)}
.section__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;color:var(--color-text);margin-bottom:var(--sp-3)}
.section__subtitle{font-size:var(--text-base);color:var(--color-text-muted);max-width:56ch;margin-inline:auto;line-height:1.6}
.gold-line{width:48px;height:3px;background:var(--color-accent);margin:var(--sp-3) auto;border-radius:var(--radius-full)}

/* ===== CARDS (GatheredHere style) ===== */
.card{background:var(--color-surface);border:1px solid var(--color-primary);border-radius:var(--radius-2xl);padding:var(--sp-8) var(--sp-6);transition:box-shadow var(--transition),transform .2s ease}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card--flat{border-color:var(--color-divider)}
.card--mint{background:var(--color-bg-alt);border-color:var(--color-primary)}
.card__icon{width:68px;height:68px;margin-bottom:var(--sp-4);color:var(--color-primary)}
.card__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;margin-bottom:var(--sp-2);color:var(--color-text)}
.card__desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}
.card--horizontal{display:grid;grid-template-columns:180px 1fr;gap:var(--sp-6);align-items:center}
.card--horizontal .card__image{border-radius:var(--radius-lg);overflow:hidden}
.card--horizontal .card__image img{width:100%;height:180px;object-fit:cover}
.accent {box-shadow: 5px 5px 0 0 #212121AB;border: 2px solid var(--color-primary);}
.accent:hover {border: 1px solid var(--color-primary);margin-left:5px;margin-top:5px}

@media(max-width:600px){
  .card--horizontal{grid-template-columns:1fr}
  .card--horizontal .card__image img{height:200px}
}

/* ===== SERVICES GRID ===== */
.services__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:var(--sp-6)}

/* ===== PROCESS ===== */
.process__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);max-width:var(--w-default);margin-inline:auto}
.process__step{text-align:center;position:relative}
.process__step-number{width:64px;height:64px;border-radius:var(--radius-full);background:var(--color-accent);color:var(--color-dark);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;margin:0 auto var(--sp-4)}
.process__step-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;margin-bottom:var(--sp-2)}
.process__step-desc{font-size:var(--text-sm);color:var(--color-text-muted);max-width:30ch;margin-inline:auto}
.process__step:not(:last-child)::after{content:'';position:absolute;top:32px;left:calc(50% + 40px);width:calc(100% - 80px);height:2px;background:linear-gradient(90deg,var(--color-accent),var(--color-divider));opacity:.5}
@media(max-width:767px){
  .process__steps{grid-template-columns:1fr}
  .process__step:not(:last-child)::after{display:none}
}

/* ===== REPERTOIRE ===== */
.repertoire__tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-6);justify-content:center}
.repertoire__tab{padding:var(--sp-2) var(--sp-5);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:400;border:2px solid var(--color-border);background:transparent;color:var(--color-text-muted);cursor:pointer}
.repertoire__tab:hover,.repertoire__tab.is-active{background:var(--color-accent);color:var(--color-dark);border-color:var(--color-primary)}
.repertoire__panel{display:none}
.repertoire__panel.is-active{display:block}
.songs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-3)}
.song-item{padding:var(--sp-3) var(--sp-4);background:var(--color-surface);border-radius:var(--radius-md);font-size:var(--text-sm);border-left:3px solid var(--color-accent);display:flex;justify-content:space-between;align-items:center}
.song-item__title{font-weight:400;color:var(--color-text)}
.song-item__artist{color:var(--color-text-faint);font-size:var(--text-xs)}

/* ===== TESTIMONIALS ===== */
.testimonials__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:var(--sp-6);max-width:var(--w-default);margin-inline:auto}
.testimonial{background:var(--color-surface);border:2px solid var(--color-divider);border-radius:var(--radius-2xl);padding:var(--sp-8) var(--sp-6);position:relative}
.testimonial::before{content:'\201E';font-family:var(--font-display);font-size:4rem;color:var(--color-accent);opacity:.5;position:absolute;top:var(--sp-3);left:var(--sp-5);line-height:1}
.testimonial__text{font-size:var(--text-base);color:var(--color-text);line-height:1.7;font-style:italic;margin-bottom:var(--sp-4);position:relative}
.testimonial__author{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:400}

/* ===== FAQ ACCORDION ===== */
.faq__list{max-width:var(--w-narrow);margin-inline:auto;display:flex;flex-direction:column;gap:var(--sp-3)}
.faq__item{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden}
.faq__question{width:100%;text-align:left;padding:var(--sp-4) var(--sp-5);font-size:var(--text-base);font-weight:400;color:var(--color-text);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);cursor:pointer;background:none;border:none}
.faq__question:hover{background:var(--color-surface-2)}
.faq__icon{width:20px;height:20px;flex-shrink:0;transition:transform .3s ease;color:var(--color-text-muted)}
.faq__item.is-open .faq__icon{transform:rotate(45deg)}
.faq__answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq__answer-inner{padding:0 var(--sp-5) var(--sp-5);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.7}

/* ===== COUNTIES GRID ===== */
.counties__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:var(--sp-3)}
.county-link{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--color-surface);border:2px solid var(--color-divider);border-radius:var(--radius-lg);text-decoration:none;color:var(--color-text);font-size:var(--text-sm);font-weight:400;transition:all var(--transition)}
.county-link:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-surface-2)}
.county-link svg{width:16px;height:16px;color:var(--color-accent);flex-shrink:0}

/* ===== CONTACT ===== */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);max-width:var(--w-default);margin-inline:auto}
.contact__info h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;margin-bottom:var(--sp-4)}
.contact__info p{color:var(--color-text-muted);margin-bottom:var(--sp-6);line-height:1.7}
.contact__form{display:flex;flex-direction:column;gap:var(--sp-4)}
.contact__form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.form-field{width:100%;padding:var(--sp-3) var(--sp-4);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--text-sm)}
.form-field::placeholder{color:var(--color-text-faint)}
.form-field:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h / .15)}
textarea.form-field{min-height:120px;resize:vertical}
@media(max-width:767px){
  .contact__grid{grid-template-columns:1fr}
  .contact__form-row{grid-template-columns:1fr}
}

/* ===== PHONE REVEAL ===== */
.phone-reveal{box-shadow: 5px 5px 0 0 #212121AB;display:inline-flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5)!important;background:var(--color-accent);color:var(--color-dark);border-radius:var(--radius-xl);font-weight:400;font-family:var(--font-body);font-variant-numeric:lining-nums;font-size:var(--text-base);cursor:pointer;border:1px solid var(--color-primary)!important;text-decoration:none;min-height:48px}
.phone-reveal:hover{background:var(--color-accent-hover);margin-left: 1px;margin-top: 1px;margin-right:-1px;margin-bottom: -1px;box-shadow: 4px 4px 0 0 #212121AB}
.phone-reveal:active{background:var(--color-accent-hover);margin-left: 5px;margin-top: 5px;margin-right:-5px;margin-bottom: -5px;box-shadow: 0 0 0;}
.phone-reveal svg{width:20px;height:20px}

/* ===== FOOTER ===== */
.footer{background:var(--color-footer);color:var(--color-accent);padding:var(--sp-12) var(--sp-4) var(--sp-8)}
.footer__inner{max-width:var(--w-wide);margin-inline:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-8)}
.footer__brand-name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;margin-bottom:var(--sp-3)}
.footer__brand-desc{font-size:var(--text-sm);max-width:36ch;line-height:1.6;opacity:.8}
.footer__col-title{font-size:var(--text-sm);font-weight:400;margin-bottom:var(--sp-3);text-transform:uppercase;letter-spacing:.08em}
.footer__links{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.footer__links a{font-size:var(--text-sm);color:var(--color-accent);text-decoration:none;opacity:.7}
.footer__links a:hover{opacity:1}
.footer__bottom{max-width:var(--w-wide);margin-inline:auto;margin-top:var(--sp-8);padding-top:var(--sp-4);border-top:2px solid oklch(from var(--color-accent) l c h / .15);display:flex;justify-content:space-between;font-size:var(--text-xs);opacity:.7}
@media(max-width:767px){
  .footer__inner{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
}
@media(max-width:480px){
  .footer__inner{grid-template-columns:1fr}
}

/* ===== CTA BANNER ===== */
.cta-banner{background:var(--color-dark);text-align:center;padding-bottom:var(--sp-16);color:var(--color-accent)}
.cta-banner h2{padding-top:var(--sp-16);font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;margin-bottom:var(--sp-3)}
.cta-banner p{opacity:.8;margin-bottom:var(--sp-8);max-width:48ch;margin-inline:auto}
.cta-banner .btn--accent{font-size:var(--text-base);padding:var(--sp-4) var(--sp-8)}

/* ===== ABOUT PAGE ===== */
.about__grid{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--sp-12);align-items:start;max-width:var(--w-default);margin-inline:auto}
.about__image{border-radius:var(--radius-2xl);overflow:hidden;border:3px solid var(--color-primary)}
.about__image img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.about__text h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;margin-bottom:var(--sp-4)}
.about__text p{color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--sp-4)}
.about__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-8)}
.about__stat{text-align:center;padding:var(--sp-4);background:var(--color-bg-alt);border-radius:var(--radius-lg)}
.about__stat-number{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;color:var(--color-primary)}
.about__stat-label{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--sp-1)}
@media(max-width:767px){
  .about__grid{grid-template-columns:1fr}
  .about__image{max-width:300px;margin-inline:auto}
}

/* ===== COUNTY PAGE HERO ===== */
.county-hero{background:var(--color-bg-alt);padding:clamp(var(--sp-12),8vw,var(--sp-20)) var(--sp-4);text-align:center}
.county-hero h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;color:var(--color-text);margin-bottom:var(--sp-3)}
.county-hero p{font-size:var(--text-base);color:var(--color-text-muted);max-width:56ch;margin-inline:auto}

/* ===== COUNTY CONTENT ===== */
.county-content{max-width:var(--w-narrow);margin-inline:auto;padding:var(--sp-12) var(--sp-4)}
.county-content h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;margin-bottom:var(--sp-4);margin-top:var(--sp-8)}
.county-content h2:first-child{margin-top:0}
.county-content p{color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--sp-4)}
.county-content ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-6)}
.county-content ul li{padding-left:var(--sp-5);position:relative;color:var(--color-text-muted);font-size:var(--text-sm)}
.county-content ul li::before{content:'';width:8px;height:8px;background:var(--color-accent);border-radius:var(--radius-full);position:absolute;left:0;top:.55em}

/* ===== BREADCRUMB ===== */
.breadcrumb{padding:var(--sp-3) var(--sp-4);font-size:var(--text-xs);color:var(--color-text-faint)}
.breadcrumb a{color:var(--color-primary);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{margin-inline:var(--sp-2)}

/* ===== ANIMATIONS ===== */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-up.is-visible{opacity:1;transform:translateY(0)}

/* ===== PAGE HERO (inner pages) ===== */
.page-hero{background:var(--color-bg-alt);padding:clamp(var(--sp-8),6vw,var(--sp-16)) var(--sp-4);text-align:center}
.page-hero h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;color:var(--color-text);margin-bottom:var(--sp-3)}
.page-hero p{font-size:var(--text-base);color:var(--color-text-muted);max-width:56ch;margin-inline:auto}

/* ===== DECORATIVE LEAVES ===== */
.leaf{position:absolute;color:var(--color-primary);opacity:.15;pointer-events:none}
.leaf--1{top:10%;right:5%;transform:rotate(30deg)}
.leaf--2{bottom:15%;left:3%;transform:rotate(-20deg)}
.leaf--3{top:40%;right:8%;transform:rotate(60deg)}

/* ===== SECTION DIVIDERS ===== */
.section-divider{background-color: var(--color-bg-alt);text-align:center;pointer-events:none}
.section-divider svg{width:100%;display:block}

/* ===== FOOTER WAVE ===== */
.footer-wave{background-color:var(--color-dark);margin-top:calc(-1 * var(--sp-32))}
.footer-wave svg{width:100%;height:80px;display:block}

/* ===== SERVICE DETAIL ARTICLES ===== */
.service-detail{margin-bottom:var(--sp-12);padding-bottom:var(--sp-12);border-bottom:1px solid var(--color-divider)}
.service-detail:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.service-detail h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;color:var(--color-text);margin-bottom:var(--sp-4)}
.service-detail p{color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--sp-4)}
.service-detail p:last-child{margin-bottom:0}

/* ===== REPERTOIRE INTRO ===== */
.repertoire__intro{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.7;max-width:72ch;margin:0 auto var(--sp-6);text-align:center;padding:0 var(--sp-4)}

/* ===== TESTIMONIALS SLIDER ===== */
.testimonials-slider{position:relative;max-width:var(--w-default);margin:0 auto;padding:0 var(--sp-12)}
.testimonials-slider__track{display:flex;overflow:hidden;border-radius:var(--radius-2xl);background:var(--color-surface);border:1px solid var(--color-divider);box-shadow:var(--shadow-sm)}
.testimonials-slider__slide{flex:0 0 100%;padding:var(--sp-10) var(--sp-8);text-align:center;opacity:0;transition:opacity .5s ease;display:none}
.testimonials-slider__slide.is-active{opacity:1;display:block}
.testimonials-slider__quote{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;line-height:1.5;color:var(--color-text);margin-bottom:var(--sp-6);max-width:60ch;margin-inline:auto;font-style:italic}
.testimonials-slider__quote::before{content:'\201E';font-family:var(--font-display);font-size:4rem;line-height:1;color:var(--color-accent);display:block;margin-bottom:var(--sp-2)}
.testimonials-slider__author{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500;letter-spacing:.02em}
.testimonials-slider__btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--color-primary);color:var(--color-text-inverse);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:transform .2s ease,background .2s ease;z-index:2}
.testimonials-slider__btn:hover{background:var(--color-primary-hover);transform:translateY(-50%) scale(1.08)}
.testimonials-slider__btn--prev{left:0}
.testimonials-slider__btn--next{right:0}
.testimonials-slider__dots{display:flex;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-6)}
.testimonials-slider__dot{width:10px;height:10px;border-radius:50%;background:var(--color-divider);border:none;cursor:pointer;padding:0;transition:background .2s ease,transform .2s ease}
.testimonials-slider__dot.is-active{background:var(--color-primary);transform:scale(1.3)}
@media(max-width:767px){
  .testimonials-slider{padding:0 var(--sp-2)}
  .testimonials-slider__slide{padding:var(--sp-8) var(--sp-4)}
  .testimonials-slider__quote{font-size:var(--text-base)}
  .testimonials-slider__btn{width:36px;height:36px}
}

/* ===== SONG ROW (klasične s YouTube audio) ===== */
.song-list{display:flex;flex-direction:column;gap:var(--sp-2);max-width:var(--w-narrow);margin:var(--sp-6) auto 0}
.song-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);transition:border-color .2s ease,box-shadow .2s ease}
.song-row:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.song-row__play{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--color-primary);color:var(--color-text-inverse);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:background .2s ease,transform .2s ease}
.song-row__play:hover{background:var(--color-primary-hover);transform:scale(1.08)}
.song-row__play.is-playing{background:var(--color-accent);color:var(--color-dark)}
.song-row__info{flex:1;min-width:0}
.song-row__title{font-weight:500;color:var(--color-text);font-size:var(--text-sm);line-height:1.3}
.song-row__author{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}
.song-row__player{display:none;width:100%;margin-top:var(--sp-2)}
.song-row.is-open .song-row__player{display:block}
.song-row__player iframe{width:100%;height:80px;border:none;border-radius:var(--radius-md)}

/* ===== MODAL — ODABIR PJESAMA ===== */
.modal{display:none;position:fixed;inset:0;z-index:100;background:oklch(0 0 0 / .55);padding:var(--sp-4);overflow-y:auto;align-items:flex-start;justify-content:center}
.modal.is-open{display:flex}
.modal__panel{background:var(--color-bg);border-radius:var(--radius-2xl);max-width:720px;width:100%;margin:var(--sp-8) auto;padding:var(--sp-8);box-shadow:var(--shadow-xl);position:relative}
.modal__close{position:absolute;top:var(--sp-3);right:var(--sp-3);width:40px;height:40px;border-radius:50%;background:var(--color-bg-alt);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text);transition:background .2s ease}
.modal__close:hover{background:var(--color-divider)}
.modal__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;margin-bottom:var(--sp-2);text-align:center}
.modal__subtitle{color:var(--color-text-muted);text-align:center;margin-bottom:var(--sp-6);font-size:var(--text-sm)}
.song-pick-group{margin-bottom:var(--sp-6)}
.song-pick-group__title{font-family:var(--font-display);font-size:var(--text-base);font-weight:500;color:var(--color-primary);margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--color-divider)}
.song-pick-group__hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--sp-3)}
.song-pick-row{display:flex;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-2)}
.song-pick-row__num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--color-primary);color:var(--color-text-inverse);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:600}
.song-pick-row select{flex:1;padding:var(--sp-2) var(--sp-3);border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-sm)}
.song-pick-row select:focus{outline:none;border-color:var(--color-primary)}
.checkbox-row{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-4) 0;cursor:pointer}
.checkbox-row input{width:18px;height:18px;cursor:pointer;accent-color:var(--color-primary)}
.checkbox-row label{font-size:var(--text-sm);color:var(--color-text);cursor:pointer}
.note-field{display:none;margin-top:var(--sp-3)}
.note-field.is-open{display:block}
.note-field textarea{width:100%;padding:var(--sp-3);border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-sm);resize:vertical;min-height:100px}
.modal__actions{display:flex;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-6)}
@media(max-width:767px){
  .modal__panel{padding:var(--sp-5);margin:var(--sp-4) 0}
  .song-pick-row{flex-direction:row;flex-wrap:wrap}
}

/* ===== POZIV CTA \u2014 jaki naglasak na nazivanje ===== */
.call-emphasis{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-4);background:linear-gradient(135deg,oklch(from var(--color-primary) l c h / .08),oklch(from var(--color-accent) l c h / .12));border:1px solid oklch(from var(--color-primary) l c h / .2);border-radius:var(--radius-2xl);max-width:560px;margin:var(--sp-8) auto 0;text-align:center}
.call-emphasis__label{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text);font-weight:400}
.call-emphasis__sub{font-size:var(--text-sm);color:var(--color-text-muted);max-width:42ch}
.call-emphasis a.phone-reveal{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);background:var(--color-primary);color:var(--color-text-inverse)!important;border-radius:var(--radius-full);font-weight:500;text-decoration:none;font-size:var(--text-base);transition:background .2s ease,transform .2s ease}
.call-emphasis a.phone-reveal:hover{background:var(--color-primary-hover);transform:translateY(-2px)}

/* ===== PLACEHOLDER SLIKE ===== */
.placeholder-img{aspect-ratio:16/9;width:100%;border-radius:var(--radius-2xl);background:linear-gradient(135deg,var(--color-bg-alt),var(--color-bg));display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:var(--text-sm);border:2px dashed var(--color-divider)}
.placeholder-img--portrait{aspect-ratio:3/4;max-width:300px;margin-inline:auto}
.placeholder-img--banner{aspect-ratio:21/9}

/* ===== FOOTER \u2014 popraviti grid na manjim ekranima ===== */
@media(max-width:1024px){
  .footer__inner{grid-template-columns:1fr 1fr 1fr}
  .footer__inner > div:first-child{grid-column:1/-1}
}


/* ===== SONG ITEM s AUDIO TOGGLE (klasične pjesme) ===== */
.song-item--has-audio{flex-direction:row;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}
.song-item--has-audio .song-item__main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;justify-content:center}
.song-audio-toggle{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--color-primary);color:var(--color-text-inverse);display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:background .2s ease,transform .2s ease;padding:0;margin-left:auto}
.song-audio-toggle:hover{background:var(--color-primary-hover);transform:scale(1.08)}
.song-item--has-audio.is-playing .song-audio-toggle{background:var(--color-accent);color:var(--color-dark)}
.song-audio-embed{margin-top:var(--sp-2);width:100%}
.song-audio-embed iframe{width:100%;height:80px;border:none;border-radius:var(--radius-md);background:var(--color-bg-alt)}
.song-audio-embed__caption{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;margin-top:var(--sp-1)}

/* ===== CTA BANNER ACTIONS ===== */
.cta-banner__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);align-items:center;margin-top:var(--sp-2)}
.btn--call{display:inline-flex;align-items:center;gap:var(--sp-2)}
.btn--ghost{background:transparent;border:1px solid var(--color-text-inverse);color:var(--color-text-inverse)}
.btn--ghost:hover{background:oklch(from var(--color-text-inverse) l c h / .15)}

/* ===== MODAL — fix za is-open + body lock ===== */
body.modal-open{overflow:hidden}
.note-field.is-visible{display:block}

/* ===== SONG PICK GROUP — colour code 3+2+3 ===== */
.song-pick-group--prije{border-left:3px solid var(--color-primary);padding-left:var(--sp-4)}
.song-pick-group--srednje{border-left:3px solid var(--color-accent);padding-left:var(--sp-4)}
.song-pick-group--nakon{border-left:3px solid var(--color-text-muted);padding-left:var(--sp-4)}

/* ===== PA TIERS (razglas po veličini) ===== */
.pa-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin:var(--sp-6) 0}
.pa-tier{padding:var(--sp-5);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-2xl);transition:transform .25s ease,box-shadow .25s ease}
.pa-tier:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pa-tier--featured{border-color:var(--color-primary);background:linear-gradient(180deg,oklch(from var(--color-accent) l c h / .08),var(--color-surface));position:relative}
.pa-tier--featured::before{content:'najčešći izbor';position:absolute;top:-10px;right:var(--sp-4);background:var(--color-accent);color:var(--color-dark);padding:2px var(--sp-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pa-tier__num{font-family:var(--font-display);font-size:var(--text-base);color:var(--color-primary);font-weight:500;letter-spacing:.02em;margin-bottom:var(--sp-2)}
.pa-tier__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;color:var(--color-text);margin-bottom:var(--sp-3);line-height:1.3}
.pa-tier__list{list-style:none;padding:0;margin:0}
.pa-tier__list li{position:relative;padding-left:var(--sp-5);margin-bottom:var(--sp-2);color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.5}
.pa-tier__list li::before{content:'';position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2px solid var(--color-primary);border-bottom:2px solid var(--color-primary);transform:rotate(-45deg)}
@media(max-width:900px){
  .pa-tiers{grid-template-columns:1fr;gap:var(--sp-3)}
}

/* CTA banner actions wrapper */
.cta-banner__actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2);padding:0 var(--sp-4)}

/* ===== ROUND 3 — SECTION DIVIDER COLORS ===== */
.section-divider--on-bg{background:var(--color-bg-alt)}
.section-divider--on-alt{background:var(--color-bg-alt)}
.section-divider svg{display:block;width:100%;height:56px}

/* ===== ROUND 4 — SUBPAGE: invertirana alternacija ===== */
body.subpage .section{background:var(--color-bg-alt)}
body.subpage .section--alt{background:var(--color-bg)}

/* ===== HERO IMAGE LIGHT/DARK ===== */
.hero__img-light{display:block}
.hero__img-dark{display:none}
[data-theme="dark"] .hero__img-light,
.dark-mode .hero__img-light{display:none}
[data-theme="dark"] .hero__img-dark,
.dark-mode .hero__img-dark{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero__img-light{display:none}
  :root:not([data-theme="light"]) .hero__img-dark{display:block}
}

/* ===== ROUND 3 — TESTIMONIAL TEKST U --color-text ===== */
.testimonials-slider__quote,
.testimonial__text{color:var(--color-text) !important}

/* ===== ROUND 3 — MODERN SLIDER ===== */
.testimonials-slider{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding:0;
}
.testimonials-slider__track{
  border-radius:var(--radius-2xl);
  background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-2) 100%);
  border:1px solid var(--color-border);
  box-shadow:0 10px 40px -10px oklch(from var(--color-primary) l c h / .15);
  overflow:hidden;
  position:relative;
}
.testimonials-slider__track::before{
  content:'\201C';
  position:absolute;
  top:var(--sp-2);
  left:var(--sp-6);
  font-family:var(--font-display);
  font-size:7rem;
  line-height:1;
  color:var(--color-accent);
  opacity:.18;
  pointer-events:none;
}
.testimonials-slider__slide{
  padding:var(--sp-12) var(--sp-10) var(--sp-10);
  text-align:center;
}
.testimonials-slider__slide .testimonial__text{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:400;
  line-height:1.5;
  margin-bottom:var(--sp-6);
  max-width:60ch;
  margin-inline:auto;
  font-style:italic;
  position:relative;
  z-index:1;
}
.testimonials-slider__slide .testimonial__author{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.testimonials-slider__controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--sp-4);
  margin-top:var(--sp-6);
}
.testimonials-slider__btn{
  position:static;
  transform:none;
  width:44px;height:44px;
  border-radius:50%;
  background:transparent;
  color:var(--color-text);
  border:1px solid var(--color-border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.testimonials-slider__btn:hover{
  background:var(--color-primary);
  color:var(--color-text-inverse);
  border-color:var(--color-primary);
  transform:scale(1.06);
}
.testimonials-slider__dots{
  display:flex;
  justify-content:center;
  gap:var(--sp-2);
  margin:0;
}
.testimonials-slider__dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--color-divider);
  border:none;
  cursor:pointer;
  padding:0;
  transition:all .25s ease;
}
.testimonials-slider__dot.is-active{
  background:var(--color-primary);
  width:28px;
  border-radius:4px;
}

@media(max-width:640px){
  .testimonials-slider__slide{padding:var(--sp-8) var(--sp-5) var(--sp-6)}
  .testimonials-slider__slide .testimonial__text{font-size:var(--text-base)}
  .testimonials-slider__btn{width:40px;height:40px}
  .testimonials-slider__track::before{font-size:5rem;left:var(--sp-3)}
}

/* ===== ROUND 3 — FAQ QUESTIONS U --color-text (jača boja) ===== */
.faq__question{color:var(--color-text) !important;font-weight:500}
.faq__question span{color:var(--color-text)}

/* ===== ROUND 3 — MOBILNI MENI: logo na vrhu, ikone na dnu, mode toggle u headeru ===== */
@media(max-width:1349px){
  /* Header layout — mode toggle lijevo od hamburgera */
  .header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-2);
  }
  .header__logo{flex:1}
  .header__mobile-actions{
    display:flex;
    align-items:center;
    gap:var(--sp-1);
  }
  .header .theme-toggle.theme-toggle--mobile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;height:44px;
    padding:0;
    color:var(--color-text);
    background:transparent;
    border:none;
    cursor:pointer;
  }
  /* Mobile nav panel — logo gore, links u sredini, donji gumb odvojen */
  .header__nav{
    position:fixed;
    inset:0;
    top:0;
    background:var(--color-bg);
    flex-direction:column;
    align-items:stretch;
    padding:0;
    gap:0;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
    z-index:49;
    overflow-y:auto;
    box-shadow:var(--shadow-md);
    display:flex;
  }
  .header__nav.is-open{transform:translateX(0)}
  .header__nav .nav-mobile-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--sp-6) var(--sp-6) var(--sp-4);
    border-bottom:1px solid var(--color-divider);
    background:var(--color-bg-alt);
  }
  .header__nav .nav-mobile-logo img{
    height:64px;
    width:auto;
    object-fit:contain;
  }
  .header__nav .nav-mobile-logo .img-light{display:block}
  .header__nav .nav-mobile-logo .img-dark{display:none}
  [data-theme="dark"] .header__nav .nav-mobile-logo .img-light,
  .dark-mode .header__nav .nav-mobile-logo .img-light{display:none}
  [data-theme="dark"] .header__nav .nav-mobile-logo .img-dark,
  .dark-mode .header__nav .nav-mobile-logo .img-dark{display:block}

  .header__nav .nav-mobile-links{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:var(--sp-4) var(--sp-6);
    gap:0;
  }
  .header__nav .nav-mobile-links a{
    font-size:var(--text-base);
    padding:var(--sp-3) 0;
    border-bottom:1px solid var(--color-divider);
    color:var(--color-text);
  }
  .header__nav .nav-mobile-links a:last-child{border-bottom:none}

  .header__nav .nav-mobile-cta{
    padding:var(--sp-5) var(--sp-6);
    border-top:1px solid var(--color-divider);
    background:var(--color-bg-alt);
    margin-top:auto;
  }
  .header__nav .nav-mobile-cta .phone-reveal{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:var(--sp-3) var(--sp-6);
    background:var(--color-primary);
    color:var(--color-text-inverse);
    border-radius:var(--radius-full);
    font-weight:500;
    text-decoration:none;
    border:2px solid var(--color-primary);
  }

  /* Sakri inline theme-toggle iz nav (sad je u header__mobile-actions) */
  .header__nav > .theme-toggle{display:none}
  /* Sakri originalni phone-reveal direktno u .header__nav (zamijenjen s .nav-mobile-cta) */
  .header__nav > .phone-reveal{display:none}
}

/* Desktop — sakrij mobile-only elemente */
@media(min-width:1350px){
  .header__mobile-actions{display:none}
  .nav-mobile-logo,.nav-mobile-cta{display:none}
}

/* ===== ROUND 3 — MODAL CALL NOTE ===== */
.modal__note-call{
  font-size:var(--text-sm);
  color:var(--color-text);
  text-align:center;
  margin-top:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  background:oklch(from var(--color-accent) l c h / .12);
  border-left:3px solid var(--color-accent);
  border-radius:var(--radius-md);
}
.modal__note-call .phone-reveal--inline{
  color:var(--color-primary);
  font-weight:500;
  text-decoration:underline;
}

/* ===== ROUND 3 — MP3 AUDIO PLAYER (samo play ikonica) ===== */
.song-audio-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  padding:0;
  background:var(--color-primary);
  color:var(--color-text-inverse);
  border:none;
  border-radius:50%;
  cursor:pointer;
  flex-shrink:0;
  transition:transform .2s ease,background .2s ease;
}
.song-audio-toggle:hover{
  background:var(--color-primary-hover);
  transform:scale(1.08);
}
.song-audio-toggle.is-playing{
  background:var(--color-accent);
}
.song-audio-toggle .song-audio-toggle__label{display:none}
.song-audio-player{display:none}



/* ===== ROUND 4 — Header gap restore ===== */
@media(max-width:1349px){
  .header__nav .nav-mobile-links{
    gap:var(--sp-3);
  }
}

/* ===== ROUND 4 — MP3 player on every song row, button RIGHT of title/author ===== */
.song-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);transition:border-color .2s ease,box-shadow .2s ease}
.song-row:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.song-row__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.song-row__title{font-weight:500;color:var(--color-text);font-size:var(--text-sm);line-height:1.3;margin:0}
.song-row__author{font-size:var(--text-xs);color:var(--color-text-muted);margin:0}
.song-row .song-audio-toggle{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--color-primary);color:var(--color-text-inverse);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:background .2s ease,transform .2s ease;padding:0}
.song-row .song-audio-toggle:hover{background:var(--color-primary-hover);transform:scale(1.08)}
.song-row .song-audio-toggle.is-playing{background:var(--color-accent);color:var(--color-dark)}

/* ===== ROUND 4 — about__stats horizontal on desktop ===== */
.about__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-8)}
@media(max-width:768px){
  .about__stats{grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
}

/* ===== ROUND 4 — Form field styling consistency (apply contact form style to all inputs) ===== */
.song-pick-row input[type="text"],
.song-pick-row input[type="email"],
.song-pick-row input[type="tel"],
.note-field textarea,
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="tel"],
.modal textarea{
  flex:1;
  width:100%;
  padding:var(--sp-3) var(--sp-4);
  background:var(--color-surface);
  border:2px solid var(--color-border);
  border-radius:var(--radius-md);
  color:var(--color-text);
  font-size:var(--text-sm);
  font-family:var(--font-body);
}
.song-pick-row input[type="text"]::placeholder,
.note-field textarea::placeholder,
.modal input::placeholder,
.modal textarea::placeholder{
  color:var(--color-text-faint);
}
.song-pick-row input[type="text"]:focus,
.note-field textarea:focus,
.modal input:focus,
.modal textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h / .15);
}

/* ===== ROUND 4 — Iskustva (testimonials) bg opacity 10% ===== */
.testimonial{
  background:color-mix(in srgb, var(--color-bg-alt) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--color-divider) 50%, transparent);
}
.testimonials-slider__track{
  background:color-mix(in srgb, var(--color-surface) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--color-divider) 50%, transparent);
  backdrop-filter:blur(8px);
}