/* ============================================================
   Skola Golmana S.G., design system
   The live site is dark charcoal navy (#1B252F) broken by royal
   blue (#0A1CBF) and amber (#FFA800) bands, with Racing Sans One
   headlines and angled section dividers. This keeps all of it and
   sharpens it: real photography, clear hierarchy, one amber action.
   ============================================================ */

:root{
  /* charcoal navy ladder, from the live site's #1B252F */
  --ink:#1B252F;
  --ink-2:#131B23;
  --ink-3:#24313D;
  --ink-4:#314151;

  /* brand blue from the badge logo and CTA bands */
  --blue:#0A1CBF;
  --blue-2:#0815A0;
  --blue-3:#2A3CE0;
  --sky:#AEB8FF;          /* blue for text on dark */

  /* amber from the eyebrows and the hero wordmark: the action colour */
  --amber:#FFA800;
  --amber-2:#FFBC3A;

  --paper:#FFFFFF;
  --paper-2:#F3F4F6;
  --paper-3:#E6E9ED;
  --line:#DCE1E7;
  --line-2:#C4CCD5;

  --text:#34414E;
  --text-dim:#56636F;
  --text-hi:var(--ink);

  --on-ink:#D3DAE1;
  --on-ink-dim:#A9B5C1;

  --f-disp:'Racing Sans One','Arial Black',Impact,sans-serif;
  --f:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  --maxw:1200px;
  --gut:clamp(16px,4.4vw,44px);
  --hdr:64px;
  --r:14px;
  --r-s:10px;

  --sh-s:0 1px 2px rgba(19,27,35,.08),0 2px 8px rgba(19,27,35,.06);
  --sh-m:0 8px 24px rgba(19,27,35,.12),0 2px 6px rgba(19,27,35,.06);
  --sh-l:0 24px 60px rgba(19,27,35,.22),0 6px 16px rgba(19,27,35,.10);
  --sh-amber:0 12px 28px rgba(255,168,0,.32);
  --sh-blue:0 12px 28px rgba(10,28,191,.30);

  --ease:cubic-bezier(.22,.68,.34,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (min-width:1100px){ :root{ --hdr:76px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:calc(var(--hdr) + 8px)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--f);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
p,figure,blockquote{margin:0}
h1,h2,h3,h4{margin:0;color:var(--text-hi);line-height:1.15;font-weight:700}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.25em;height:1.25em;flex:none;display:inline-block}

::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--amber);color:var(--ink);font-weight:700;padding:12px 16px;border-radius:8px}
.skip:focus{top:12px}

/* ---------- display type: the live site's Racing Sans One, uppercase ---------- */
.disp{
  font-family:var(--f-disp);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.02;
}
h2.disp{font-size:clamp(30px,5.4vw,52px)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(64px,9vw,112px);position:relative}
.sec--paper{background:var(--paper)}
.sec--paper2{background:var(--paper-2)}
.sec--ink{background:var(--ink);color:var(--on-ink)}
.sec--ink2{background:var(--ink-2);color:var(--on-ink)}
.sec--ink h2,.sec--ink h3,.sec--ink2 h2,.sec--ink2 h3{color:#fff}

/* angled divider: a wedge in the previous section's colour, echoing the live site's
   shape dividers. It sits inside the section's top padding, never over content. */
.tilt::before{
  content:'';position:absolute;left:0;right:0;top:-1px;
  height:clamp(22px,3.6vw,48px);
  clip-path:polygon(0 0,100% 0,100% 0,0 100%);
  pointer-events:none;
}
.tilt--ink::before{background:var(--ink)}
.tilt--ink2::before{background:var(--ink-2)}
.tilt--paper::before{background:var(--paper)}
.tilt--paper2::before{background:var(--paper-2)}

.lede{font-size:clamp(17px,1.9vw,20px);line-height:1.6;color:var(--text)}
.sec--ink .lede,.sec--ink2 .lede{color:var(--on-ink)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);
}
.eyebrow::before{content:'';width:24px;height:4px;background:var(--amber);border-radius:2px;transform:skewX(-20deg)}
.sec--ink .eyebrow,.sec--ink2 .eyebrow{color:var(--amber)}

.shead{max-width:720px;margin-bottom:clamp(32px,5vw,56px)}
.shead h2{margin-top:14px}
.shead .lede{margin-top:16px}
.shead--c{margin-inline:auto;text-align:center}
.shead--c .eyebrow::before{display:none}

.hl{color:var(--blue)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;
  font-family:var(--f);font-size:16px;font-weight:700;letter-spacing:.01em;line-height:1.2;
  padding:12px 22px;border-radius:var(--r-s);border:2px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
  text-align:center;
}
.btn .ic{width:20px;height:20px}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--lg{min-height:56px;font-size:17px;padding:14px 26px}
.btn--wide{width:100%}

.btn--amber{background:var(--amber);color:var(--ink);box-shadow:var(--sh-amber)}
.btn--amber:hover{background:var(--amber-2);transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,168,0,.42)}
.btn--amber .ic{transition:transform .2s var(--ease)}
.btn--amber:hover .ic{transform:translateX(3px)}

.btn--blue{background:var(--blue);color:#fff;box-shadow:var(--sh-blue)}
.btn--blue:hover{background:var(--blue-2);transform:translateY(-2px)}

.btn--ink{background:var(--ink);color:#fff;box-shadow:0 12px 26px rgba(19,27,35,.28)}
.btn--ink:hover{background:var(--ink-2);transform:translateY(-2px)}

.btn--line{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.04)}
.btn--line:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}

.btn--line-dark{border-color:var(--line-2);color:var(--ink);background:var(--paper)}
.btn--line-dark:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}

.btn--line-ink{border-color:var(--ink);color:var(--ink)}
.btn--line-ink:hover{background:rgba(27,37,47,.08);transform:translateY(-2px)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(19,27,35,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:box-shadow .25s var(--ease);
}
.hdr.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.28)}
.hdr__in{height:var(--hdr);display:flex;align-items:center;gap:16px}

.logo{display:inline-flex;align-items:center;gap:10px;color:#fff;min-height:44px}
.logo img{width:54px;height:auto}
.logo picture{flex:none}
.logo__tx{display:flex;flex-direction:column;line-height:1}
.logo__tx b{font-family:var(--f-disp);font-weight:400;font-size:clamp(15px,4.7vw,18px);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.logo__tx i{font-style:normal;white-space:nowrap;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-top:5px}

.nav{display:none;margin-left:auto;gap:4px}
.nav a{color:var(--on-ink);font-size:15px;font-weight:500;padding:10px 12px;border-radius:8px;transition:color .2s,background-color .2s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}

.hdr__act{margin-left:auto;display:flex;align-items:center;gap:8px}
.hdr__tel{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:44px;height:44px;border-radius:10px;color:var(--amber);
  border:2px solid rgba(255,168,0,.45);
}
.hdr__tel .ic{width:20px;height:20px}
.hdr__tel span{display:none}
.hdr__cta{display:none;min-height:44px;padding:10px 18px}

.burger{width:44px;height:44px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:10px;background:rgba(255,255,255,.06)}
.burger span{width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mnav{background:var(--ink-2);border-top:1px solid rgba(255,255,255,.07);max-height:calc(100vh - var(--hdr));overflow-y:auto}
.mnav__in{display:flex;flex-direction:column;padding-block:8px 20px}
.mnav a:not(.btn){color:#fff;font-size:18px;font-weight:500;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.07)}
.mnav .btn{margin-top:16px}

@media (min-width:400px){
  .hdr__cta{display:inline-flex}
}
@media (min-width:1100px){
  .nav{display:flex}
  .hdr__act{margin-left:8px}
  .burger,.mnav{display:none!important}
  .hdr__tel{width:auto;padding:0 14px;border-color:transparent;color:#fff;font-weight:700;font-size:15px}
  .hdr__tel .ic{color:var(--amber)}
  .hdr__tel span{display:inline}
  .hdr__tel:hover{border-color:rgba(255,168,0,.45)}
  .logo img{width:62px}
  .logo__tx b{font-size:20px}
}

/* ---------- footer ---------- */
.ftr{background:var(--ink-2);color:var(--on-ink-dim);padding-top:clamp(56px,7vw,80px)}
.ftr__in{display:grid;gap:36px;padding-bottom:40px}
.ftr__h{font-size:13px;font-weight:700;line-height:1.45;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.ftr__blurb{margin-top:16px;max-width:30ch;color:var(--on-ink-dim)}
.logo--ftr img{width:84px}
.logo--ftr .logo__tx b{font-size:22px}
.ftr__col li{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--on-ink)}
.ftr__col li .ic{color:var(--amber);width:20px;height:20px}
.ftr__tel{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:18px;min-height:44px}
.social{display:flex;gap:12px}
.social li{min-height:0}
.social a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--blue);transition:transform .2s var(--ease),background-color .2s}
.social a:hover{background:var(--blue-3);transform:translateY(-3px)}
.social .ic,.ftr__col .social .ic{width:22px;height:22px;color:#fff}
.ftr__base{
  display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.08);padding-block:20px 24px;font-size:14px;
}
.ftr__base p a{color:#fff;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:10px}
.nw{white-space:nowrap}
.ftr__base p{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.heart{color:#FF5A6E}
@media (min-width:760px){
  .ftr__in{grid-template-columns:1.3fr 1fr 1fr}
}

/* ---------- mobile action bar ---------- */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:auto 1fr;gap:8px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(19,27,35,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.08);
  transform:translateY(110%);transition:transform .3s var(--ease-out);
}
.mbar.is-on{transform:none}
.mbar a{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-weight:700;font-size:16px}
.mbar .ic{width:20px;height:20px}
.mbar__tel{padding:0 18px;color:#fff;border:2px solid rgba(255,255,255,.3)}
.mbar__tel .ic{color:var(--amber)}
.mbar__go{background:var(--amber);color:var(--ink)}
/* the footer reserves the bar's height at the end of the page so it never covers the last line */
@media (max-width:899px){ .ftr__base{padding-bottom:calc(92px + env(safe-area-inset-bottom))} }
@media (min-width:900px){ .mbar{display:none} }

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rise.in{opacity:1;transform:none}
.rise-1{transition-delay:.08s}
.rise-2{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}

/* header on phones: logo, wordmark, phone, "Prijava" and the burger were one glued row and the
   wordmark touched the phone button. Under 480px "Prijava" goes (the hero button and the sticky
   bar carry that action), the row gets a real gap, and the wordmark may shrink but never overlap. */
.hdr__in{gap:10px}
.logo{min-width:0}
.logo__tx{min-width:0}
.logo__tx b,.logo__tx i{overflow:hidden;text-overflow:ellipsis}
@media (max-width:479px){
  .hdr .btn--amber{display:none}
  .logo__tx b{font-size:16px}
  .logo__tx i{font-size:10.5px;letter-spacing:.12em}
}
@media (max-width:359px){
  .logo__tx i{display:none}
}