:root{
  --blue:#0E5C9C;
  --blue-d:#0A4677;
  --teal:#1B93C4;
  --green:#7DC242;
  --ink:#1A1D21;
  --ink-2:#5A6066;
  --ink-3:#8A9097;
  --bg:#FFFFFF;
  --bg-2:#F5F6F7;
  --tint:#EDF4FA;
  --line:#E4E7E9;
  --r:10px;
  --sec:88px;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100%}
body{
  margin:0;width:100%;max-width:100%;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:18px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden;
}
img,video{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{font-family:Manrope,Inter,system-ui,sans-serif;letter-spacing:-.02em;line-height:1.15;margin:0;font-weight:700}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--blue-d)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:12px;background:#fff;padding:12px 18px;z-index:200;clip-path:inset(50%);white-space:nowrap}
.skip:focus{clip-path:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:800px}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.hdr.is-stuck{border-color:var(--line);box-shadow:0 1px 14px rgba(26,29,33,.05)}
.hdr-in{display:flex;align-items:center;gap:16px;height:68px}
.hdr-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:1;min-width:0}
.hdr-logo img{width:38px;height:38px;object-fit:contain}
.hdr-logo span{font-family:Manrope,sans-serif;font-weight:600;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.hdr-logo b{color:var(--blue);font-weight:800}
.hdr-nav{display:none;gap:26px}
.hdr-nav a{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500}
.hdr-nav a:hover{color:var(--blue)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;text-decoration:none;
  font-family:Manrope,sans-serif;font-weight:600;font-size:17px;
  padding:15px 28px;border-radius:var(--r);border:1px solid var(--blue);
  min-height:52px;cursor:pointer;transition:background .18s,transform .18s;
}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:10px 18px;min-height:44px;font-size:15px}
.btn-ghost{background:#fff;color:var(--blue);border-color:#C9D6E2}
.btn-ghost:hover{background:var(--tint);color:var(--blue-d);border-color:var(--blue)}
.btn.full{width:100%}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}
.cta-row.center{justify-content:center;margin-top:44px}
.link-arrow{font-weight:500;font-size:17px;text-decoration:none;border-bottom:1px solid #B9CEE0;padding-bottom:2px}
.link-arrow::after{content:" \2193"}

/* sections */
.sec{padding:var(--sec) 0}
.sec-tint{background:var(--tint)}
.sec-quiet{background:var(--bg-2)}
.sec-head{max-width:760px;margin-bottom:40px}
.eyebrow{font-family:Manrope,sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
h1{font-size:clamp(32px,7.2vw,54px);font-weight:800}
h2{font-size:clamp(27px,5.4vw,40px)}
.big{font-size:clamp(30px,7vw,58px);letter-spacing:-.03em;line-height:1.08}
.lead{font-size:clamp(18px,2.4vw,21px);color:var(--ink-2);line-height:1.6}
.sec-lead{color:var(--ink-2);margin-top:16px}
.sec-out{margin-top:36px;font-size:clamp(19px,2.6vw,23px);font-family:Manrope,sans-serif;font-weight:600;line-height:1.4;max-width:820px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-quiet .big+.lead{margin-top:28px}

/* hero */
.hero{padding:calc(68px + 44px) 0 var(--sec)}
.hero-in{display:grid;gap:36px}
.hero h1{margin-bottom:20px}
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);margin-top:32px;overflow:hidden}
.facts li{background:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.fact-k{font-size:14px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.fact-v{font-family:Manrope,sans-serif;font-weight:700;font-size:16px;text-align:right;font-variant-numeric:tabular-nums}
.hero-fig{margin:0;border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.hero-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* image placeholders */
.img-slot{position:relative;min-height:180px}
.img-slot.is-empty{background:repeating-linear-gradient(135deg,#F0F2F4 0 10px,#E7EAEC 10px 20px);border:1px dashed #C3C9CE;border-radius:var(--r)}
.img-slot.is-empty img,.img-slot.is-empty video{display:none}
.img-slot.is-empty::after{
  content:attr(data-slot);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;line-height:1.5;color:#6C757D;letter-spacing:.02em;
}
.hero-fig.is-empty{aspect-ratio:4/3}
.teach-fig.is-empty{aspect-ratio:4/5}
.mapa-img.is-empty{aspect-ratio:2/1}
.video.is-empty{aspect-ratio:16/9}

/* problem cards */
.cards{display:grid;gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 24px;font-size:17px;line-height:1.55;position:relative;padding-left:22px}
.card::before{content:"";display:block;width:26px;height:2px;background:var(--teal);margin-bottom:14px}

/* numbered list */
.numlist{counter-reset:n;display:grid;gap:2px;border-top:1px solid var(--line)}
.numlist li{counter-increment:n;border-bottom:1px solid var(--line);padding:26px 0 26px 46px;position:relative}
.numlist li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:27px;font-family:Manrope,sans-serif;font-weight:700;font-size:14px;color:var(--teal);font-variant-numeric:tabular-nums}
.numlist h3{font-size:clamp(19px,2.6vw,23px);margin-bottom:8px}
.numlist p{color:var(--ink-2);font-size:17px}

/* checks */
.checks{display:grid;gap:14px;max-width:900px}
.checks li{position:relative;padding-left:36px;font-size:17px;line-height:1.55}
.checks li::before{
  content:"";position:absolute;left:0;top:6px;width:18px;height:10px;
  border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg);
}
.pull{margin-top:40px;background:#fff;border:1px solid #D6E4EF;border-left:3px solid var(--blue);border-radius:var(--r);padding:26px 24px;font-family:Manrope,sans-serif;font-weight:700;font-size:clamp(19px,2.8vw,25px);line-height:1.3}

/* program */
.tabs{display:flex;gap:8px;background:var(--bg-2);padding:5px;border-radius:var(--r);margin-bottom:26px}
.tab{flex:1;border:0;background:transparent;font-family:Manrope,sans-serif;font-weight:600;font-size:16px;color:var(--ink-2);padding:12px;border-radius:7px;cursor:pointer;min-height:46px}
.tab.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(26,29,33,.08)}
.days{display:grid;gap:0}
.day{display:none}
.day.is-on{display:block}
.day-head{margin-bottom:22px}
.day-n{display:none;font-family:Manrope,sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.day-head h3{font-size:clamp(22px,3.4vw,28px)}
.steps{display:grid;gap:0}
.steps li{padding:22px 0;border-bottom:1px solid var(--line)}
.steps li:first-child{border-top:1px solid var(--line)}
.steps h4{font-size:18px;margin-bottom:6px;font-weight:600}
.steps p{color:var(--ink-2);font-size:17px}
.note{margin-top:34px;background:var(--tint);border-radius:var(--r);padding:22px 24px;font-size:17px;line-height:1.5}

/* video */
.video{border-radius:var(--r);overflow:hidden;background:#0E1114}
.video video{width:100%;aspect-ratio:16/9;object-fit:cover}
#video .sec-lead{margin-top:26px;max-width:640px}

/* gets */
.gets{display:grid;gap:16px}
.gets li{display:flex;gap:16px;align-items:flex-start;background:var(--bg-2);border-radius:var(--r);padding:20px}
.gets .ico{flex:0 0 auto;width:22px;height:22px;margin-top:3px;border:2px solid var(--blue);border-radius:5px;position:relative}
.gets .ico::after{content:"";position:absolute;left:4px;top:5px;width:10px;height:5px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.gets p{font-size:17px;line-height:1.5}

/* predavac */
.teach{display:grid;gap:32px}
.teach-fig{margin:0;border-radius:var(--r);overflow:hidden;background:#E9ECEE}
.teach-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.teach-copy h2{margin-bottom:18px}
.teach-copy p{color:var(--ink-2);margin-bottom:14px}
.todo{background:#FFF6D9;border-bottom:1px dashed #C9A227;color:#7A5C00;padding:0 4px}
.todo-note{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;color:#6C757D;background:#FFF9E6;border:1px dashed #E0CE96;border-radius:8px;padding:14px 16px}

/* detalji */
.det{display:grid;gap:24px}
.det-list{border-top:1px solid var(--line)}
.det-list>div{display:grid;gap:2px;padding:16px 0;border-bottom:1px solid var(--line)}
.det-list dt{font-size:14px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.det-list dd{margin:0;font-size:17px}
.price{background:var(--tint);border:1px solid #D6E4EF;border-radius:var(--r);padding:28px 24px;align-self:start}
.price-k{font-size:14px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.price-v{font-family:Manrope,sans-serif;font-weight:800;font-size:52px;line-height:1.1;color:var(--blue);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:6px 0 2px}
.price-rsd{color:var(--ink-2);font-size:16px}
.price-fine{font-size:14px;line-height:1.5;color:var(--ink-3);margin:16px 0}
.price .btn{margin-top:8px}

/* mapa */
.mapa{margin-top:44px;display:grid;gap:24px}
.mapa-img{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.mapa-img img{width:100%;aspect-ratio:2/1;object-fit:cover}
.mapa-adr{font-family:Manrope,sans-serif;font-weight:600;font-size:18px;margin-bottom:16px}
.mapa-tips{margin-top:22px;display:grid;gap:10px;font-size:16px;color:var(--ink-2)}
.mapa-tips b{color:var(--ink);font-weight:600}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-family:Manrope,sans-serif;font-weight:600;font-size:18px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:6px;top:50%;background:var(--blue);transition:transform .22s}
.faq summary::before{width:14px;height:2px;margin-top:-1px}
.faq summary::after{width:2px;height:14px;margin-top:-7px;margin-right:6px}
.faq details[open] summary::after{transform:rotate(90deg)}
.faq details>div{padding:0 0 24px;color:var(--ink-2);font-size:17px;max-width:66ch}

/* prijava */
.prijava{display:grid;gap:36px}
.prijava-copy h2{margin-bottom:16px}
.price-inline{margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.price-inline b{font-family:Manrope,sans-serif;font-size:34px;font-weight:800;color:var(--blue);letter-spacing:-.02em}
.price-inline span{color:var(--ink-2);font-size:16px}
.form{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:16px}
.form[hidden]{display:none}
.field{display:grid;gap:6px}
.field label{font-size:15px;font-weight:600}
.opt{color:var(--ink-3);font-weight:400}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:17px;color:var(--ink);background:#fff;
  border:1px solid #D2D7DB;border-radius:8px;padding:13px 14px;min-height:52px;width:100%;
}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(14,92,156,.15)}
.field.is-bad input,.field.is-bad select{border-color:#B3261E;background:#FEF7F6}
.err{font-size:14px;color:#B3261E;min-height:0}
.err:empty{display:none}
.form-fine{font-size:14px;line-height:1.5;color:var(--ink-3)}
.check{gap:0}
.cb{display:flex;gap:12px;align-items:flex-start;font-size:16px;font-weight:400;line-height:1.5;cursor:pointer}
.cb input{flex:0 0 auto;width:22px;height:22px;margin:2px 0 0;accent-color:var(--blue)}
.cb span{flex:1}
.check .err{margin-top:8px}
.firma{border:1px solid #D6E4EF;background:var(--tint);border-radius:var(--r);padding:20px;margin:0}
.firma[hidden]{display:none}
.firma legend{font-family:Manrope,sans-serif;font-weight:600;font-size:15px;padding:0 8px;margin-left:-8px}
.firma-grid{display:grid;gap:16px;margin-top:12px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#submit{position:relative}
#submit[disabled]{opacity:.7;cursor:default}
#submit.is-busy .btn-t{visibility:hidden}
.spin{display:none;position:absolute;width:20px;height:20px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
#submit.is-busy .spin{display:block}
@keyframes sp{to{transform:rotate(360deg)}}
.fail{font-size:15px;line-height:1.5;background:#FEF7F6;border:1px solid #E8C6C3;color:#8C1F18;border-radius:8px;padding:14px 16px}
.fail a{color:#8C1F18}
.ok{background:#EAF6EC;border:1px solid #BFE0C6;border-radius:var(--r);padding:28px 24px;font-size:17px;color:#1E5B2A;display:grid;gap:12px;line-height:1.6}
.ok[hidden]{display:none}
.ok-h{font-family:Manrope,sans-serif;font-weight:700;font-size:clamp(21px,3vw,26px);color:#164722;line-height:1.25}
.ok-f{font-size:15px;color:#3D6B47}
.ok a{color:#1E5B2A}

/* footer */
.ftr{background:var(--ink);color:#C7CBD0;padding:56px 0 0;font-size:16px}
.ftr-in{display:grid;gap:32px;padding-bottom:40px}
.ftr-brand img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:8px;padding:6px;margin-bottom:14px}
.ftr-brand p{max-width:44ch;line-height:1.6}
.ftr-col h3{font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:14px;font-weight:700}
.ftr-col ul{display:grid;gap:9px}
.ftr a{color:#C7CBD0;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr-btm{border-top:1px solid #2C3137;padding-top:20px;padding-bottom:20px;font-size:14px;color:#868D95}

/* whatsapp */
.wa{
  position:fixed;right:16px;bottom:16px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.2);transition:transform .18s;
}
.wa:hover{transform:scale(1.06);color:#fff}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto !important}
}

/* ===== tablet ===== */
@media (min-width:700px){
  :root{--sec:104px}
  body{font-size:19px}
  .cards{grid-template-columns:1fr 1fr}
  .gets{grid-template-columns:1fr 1fr}
  .det{grid-template-columns:1.35fr 1fr;gap:40px}
  .mapa{grid-template-columns:1.3fr 1fr;gap:36px;align-items:start}
  .form{grid-template-columns:1fr 1fr;padding:30px}
  .field.full,.form .btn,.form-fine,.form .fail,.firma{grid-column:1/-1}
  .firma-grid{grid-template-columns:1fr 1fr}
  .ftr-in{grid-template-columns:1.4fr 1fr 1fr}
  .teach{grid-template-columns:1fr 1.2fr;gap:44px;align-items:center}
  .checks{grid-template-columns:1fr 1fr;gap:16px 40px}
  .facts{grid-template-columns:repeat(3,1fr)}
  .facts li{flex-direction:column;justify-content:flex-start;gap:4px;padding:16px 18px}
  .fact-v{text-align:left}
}

/* ===== desktop ===== */
@media (min-width:960px){
  :root{--sec:140px}
  .hdr-nav{display:flex}
  .hdr-in{height:76px}
  .hdr-logo img{width:42px;height:42px}
  .hdr-logo span{font-size:16px}
  .hero{padding:calc(76px + 72px) 0 var(--sec)}
  .hero-in{grid-template-columns:55fr 45fr;gap:56px;align-items:center}
  .hero-fig img{aspect-ratio:4/5}
  .hero-fig.is-empty{aspect-ratio:4/5}
  .cards{grid-template-columns:repeat(3,1fr);gap:18px}
  .gets{grid-template-columns:repeat(3,1fr)}
  .sec-head{margin-bottom:52px}
  .tabs{display:none}
  .days{grid-template-columns:1fr 1fr;gap:56px}
  .day{display:block}
  .day-n{display:block}
  .prijava{grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .form{padding:34px}
  .wa{right:28px;bottom:28px;width:60px;height:60px}
  .numlist li{padding-left:64px}
  .numlist li::before{font-size:15px}
}