/* ============ Tokens ============ */
  :root{
    --paper:#FBF7EC;
    --paper-raised:#FFFFFF;
    --ink:#26333A;
    --ink-soft:#5B6B70;
    --ink-faint:#94A2A6;
    --sky:#2E7DB8;
    --sky-deep:#215F8C;
    --sky-tint:#E4F0F7;
    --sunrise:#C9861A;
    --sunrise-ink:#8A5B0E;
    --sunrise-tint:#FBEED2;
    --berry:#A83A31;
    --berry-ink:#7C2620;
    --berry-tint:#F7E1DD;
    --dusk:#34527C;
    --dusk-ink:#233A59;
    --dusk-tint:#E3E9F1;
    --ground-tint:#E4EEE2;
    --line:rgba(38,51,58,0.13);
    --line-soft:rgba(38,51,58,0.08);
    --shadow:0 1px 2px rgba(38,51,58,0.06), 0 8px 24px -12px rgba(38,51,58,0.18);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#141B23;
      --paper-raised:#1C2530;
      --ink:#EFE8D8;
      --ink-soft:#AAB6BB;
      --ink-faint:#6E7B82;
      --sky:#75B7E6;
      --sky-deep:#9BCCEE;
      --sky-tint:#1E2E3B;
      --sunrise:#EFBC5F;
      --sunrise-ink:#F4CE8B;
      --sunrise-tint:#332913;
      --berry:#E28579;
      --berry-ink:#F0A99C;
      --berry-tint:#3A211D;
      --dusk:#8BA8D6;
      --dusk-ink:#AEC2E4;
      --dusk-tint:#1C2636;
      --ground-tint:#182A1E;
      --line:rgba(239,232,216,0.14);
      --line-soft:rgba(239,232,216,0.08);
      --shadow:0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.55);
    }
  }
  :root[data-theme="dark"]{
    --paper:#141B23;
    --paper-raised:#1C2530;
    --ink:#EFE8D8;
    --ink-soft:#AAB6BB;
    --ink-faint:#6E7B82;
    --sky:#75B7E6;
    --sky-deep:#9BCCEE;
    --sky-tint:#1E2E3B;
    --sunrise:#EFBC5F;
    --sunrise-ink:#F4CE8B;
    --sunrise-tint:#332913;
    --berry:#E28579;
    --berry-ink:#F0A99C;
    --berry-tint:#3A211D;
    --dusk:#8BA8D6;
    --dusk-ink:#AEC2E4;
    --dusk-tint:#1C2636;
    --ground-tint:#182A1E;
    --line:rgba(239,232,216,0.14);
    --line-soft:rgba(239,232,216,0.08);
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.55);
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Karla',ui-sans-serif,system-ui,sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fredoka',ui-rounded,system-ui,sans-serif;
    font-weight:600;
    line-height:1.12;
    margin:0;
    text-wrap:balance;
    letter-spacing:-0.01em;
  }
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  ul{margin:0;padding:0;list-style:none;}
  button{font:inherit;}
  :focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  }
  html{scroll-behavior:smooth;}

  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
  .eyebrow{
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--sky-deep);
  }
  .lede{font-size:19px;color:var(--ink-soft);max-width:56ch;}

  /* ============ Header ============ */
  header{
    position:sticky;top:0;z-index:40;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 28px;}
  .brand{display:flex;align-items:center;gap:10px;font-family:'Fredoka';font-weight:600;font-size:21px;}
  .brand svg{width:30px;height:30px;flex:none;}
  .navlinks{display:flex;align-items:center;gap:28px;font-size:15px;color:var(--ink-soft);}
  .navlinks a{white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent;transition:border-color .15s,color .15s;}
  .navlinks a:hover{color:var(--ink);border-color:var(--sky);}
  .navcta{display:flex;align-items:center;gap:14px;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 20px;border-radius:100px;
    font-weight:600;font-size:15px;
    border:1px solid transparent;
    cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn-primary{background:var(--sky);color:#fff;box-shadow:var(--shadow);}
  .btn-primary:hover{background:var(--sky-deep);transform:translateY(-1px);}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--sky);color:var(--sky-deep);}
  .menu-toggle{display:none;}

  .theme-toggle{
    width:40px;height:40px;border-radius:50%;flex:none;
    border:1px solid var(--line);background:var(--paper-raised);color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:border-color .15s, color .15s;
  }
  .theme-toggle:hover{border-color:var(--sky);color:var(--sky-deep);}
  .theme-toggle svg{width:18px;height:18px;}
  .theme-toggle .icon-sun{display:none;}
  :root[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
  :root[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block;}
    :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none;}
  }

  /* ============ Hero ============ */
  .hero{padding:76px 0 64px;}
  .hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
  .hero h1{font-size:clamp(34px,4.6vw,54px);margin:14px 0 18px;}
  .hero .lede{margin-bottom:30px;}
  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px;}
  .trust-row{display:flex;flex-wrap:wrap;gap:10px 22px;}
  .trust-item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-soft);}
  .trust-item svg{width:16px;height:16px;color:var(--sky);flex:none;}

  .flight-illustration{position:relative;}
  .flight-illustration svg{width:100%;height:auto;}

  /* ============ Section shell ============ */
  section{padding:78px 0;}
  .section-head{max-width:640px;margin:0 auto 44px;text-align:center;}
  .section-head h2{font-size:clamp(26px,3.2vw,36px);margin:10px 0 12px;}
  .section-head .lede{margin:0 auto;}
  .divider{height:1px;background:var(--line-soft);border:0;margin:0;}

  /* ============ Levels ============ */
  #levels{background:var(--paper-raised);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
  .level-path{position:relative;margin-bottom:8px;}
  .levels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .level-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:22px;
    padding:28px 26px 26px;
    display:flex;flex-direction:column;gap:16px;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .level-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
  .level-top{display:flex;align-items:center;justify-content:space-between;}
  .level-badge{
    width:46px;height:46px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    flex:none;
  }
  .level-badge svg{width:24px;height:24px;}
  .level-stage{font-family:'IBM Plex Mono';font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);}
  .level-card h3{font-size:22px;margin-top:2px;}
  .level-tagline{font-size:14.5px;color:var(--ink-soft);}
  .level-list{display:flex;flex-direction:column;gap:9px;margin-top:2px;}
  .level-list li{display:flex;align-items:baseline;gap:9px;font-size:14.5px;color:var(--ink-soft);}
  .level-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;position:relative;top:-2px;}
  .level-stat{
    font-family:'IBM Plex Mono';font-size:13px;font-weight:600;
    padding:7px 12px;border-radius:9px;
    display:inline-flex;align-items:center;gap:7px;width:fit-content;
    font-variant-numeric:tabular-nums;
  }
  .level-cta{margin-top:auto;padding-top:6px;font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:6px;}
  .level-cta svg{width:14px;height:14px;transition:transform .15s;}
  .level-card:hover .level-cta svg{transform:translateX(3px);}

  .starters{border-color:color-mix(in srgb, var(--sunrise) 32%, var(--line));}
  .starters h3{color:var(--sunrise-ink);}
  .starters .level-badge{background:var(--sunrise-tint);color:var(--sunrise-ink);}
  .starters .level-stat{background:var(--sunrise-tint);color:var(--sunrise-ink);}
  .starters .level-cta{color:var(--sunrise-ink);}
  .starters .level-list li::before{background:var(--sunrise);}
  .starters:hover{box-shadow:0 10px 26px -14px color-mix(in srgb, var(--sunrise) 55%, transparent), 0 1px 2px rgba(38,51,58,0.06);}

  .movers{border-color:color-mix(in srgb, var(--berry) 32%, var(--line));}
  .movers h3{color:var(--berry-ink);}
  .movers .level-badge{background:var(--berry-tint);color:var(--berry-ink);}
  .movers .level-stat{background:var(--berry-tint);color:var(--berry-ink);}
  .movers .level-cta{color:var(--berry-ink);}
  .movers .level-list li::before{background:var(--berry);}
  .movers:hover{box-shadow:0 10px 26px -14px color-mix(in srgb, var(--berry) 55%, transparent), 0 1px 2px rgba(38,51,58,0.06);}

  .flyers{border-color:color-mix(in srgb, var(--dusk) 32%, var(--line));}
  .flyers h3{color:var(--dusk-ink);}
  .flyers .level-badge{background:var(--dusk-tint);color:var(--dusk-ink);}
  .flyers .level-stat{background:var(--dusk-tint);color:var(--dusk-ink);}
  .flyers .level-cta{color:var(--dusk-ink);}
  .flyers .level-list li::before{background:var(--dusk);}
  .flyers:hover{box-shadow:0 10px 26px -14px color-mix(in srgb, var(--dusk) 55%, transparent), 0 1px 2px rgba(38,51,58,0.06);}

  /* ============ Feature grid ============ */
  .features{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
  .feature{
    padding:24px 18px;border-radius:18px;
    background:var(--paper-raised);
    border:1px solid var(--line-soft);
  }
  .feature-icon{
    width:40px;height:40px;border-radius:11px;
    background:var(--sky-tint);color:var(--sky-deep);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  }
  .feature-icon svg{width:20px;height:20px;}
  .feature h3{font-size:16.5px;margin-bottom:6px;}
  .feature p{font-size:14px;color:var(--ink-soft);}

  /* ============ Parents/Teachers ============ */
  #parents{background:var(--dusk-tint);}
  .parents-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
  #parents .section-head{margin:0 0 26px;text-align:left;max-width:520px;}
  #parents .lede{margin:0;}
  .parent-points{display:flex;flex-direction:column;gap:22px;margin-top:28px;}
  .parent-point{display:flex;gap:16px;}
  .parent-point-icon{
    width:38px;height:38px;border-radius:11px;flex:none;
    background:var(--paper-raised);color:var(--dusk-ink);
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line);
  }
  .parent-point-icon svg{width:18px;height:18px;}
  .parent-point h3{font-size:16px;margin-bottom:4px;}
  .parent-point p{font-size:14.5px;color:var(--ink-soft);}
  .shield-card{
    background:var(--paper-raised);border:1px solid var(--line);border-radius:20px;
    padding:28px;box-shadow:var(--shadow);
  }
  .shield-card .eyebrow{margin-bottom:10px;}
  .shield-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line-soft);}
  .shield-row:last-child{border-bottom:0;}
  .shield-name{font-size:14.5px;font-weight:600;}
  .shield-sub{font-size:12.5px;color:var(--ink-faint);}
  .shields{display:flex;gap:4px;}
  .shields svg{width:15px;height:15px;}

  /* ============ About ============ */
  #about .wrap{display:grid;grid-template-columns:180px 1fr;gap:44px;align-items:center;}
  .avatar{width:180px;height:180px;border-radius:50%;background:var(--sky-tint);position:relative;overflow:hidden;flex:none;}
  .avatar svg{position:absolute;inset:0;width:100%;height:100%;}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block;}
  .ivan-quote{font-family:'Fredoka';font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.35;color:var(--ink);text-wrap:balance;}
  .ivan-attrib{margin-top:16px;font-size:14.5px;color:var(--ink-soft);}
  .ivan-attrib strong{color:var(--ink);font-weight:700;}
  .ivan-bio{margin-top:14px;font-size:14.5px;color:var(--ink-soft);max-width:60ch;}

  /* ============ CTA band ============ */
  .cta-band{
    background:var(--sky);color:#fff;border-radius:28px;
    padding:52px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  }
  .cta-band h2{color:#fff;font-size:clamp(24px,3vw,32px);}
  .cta-band p{color:rgba(255,255,255,0.86);margin-top:8px;font-size:15.5px;}
  .cta-band .btn-primary{background:#fff;color:var(--sky-deep);}
  .cta-band .btn-primary:hover{background:#fff;opacity:0.92;}

  /* ============ Footer ============ */
  footer{border-top:1px solid var(--line-soft);padding:56px 0 32px;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:44px;}
  .footer-brand .brand{margin-bottom:12px;}
  .footer-brand p{font-size:14px;color:var(--ink-soft);max-width:32ch;}
  .footer-col h4{font-family:'IBM Plex Mono';font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px;}
  .footer-col ul{display:flex;flex-direction:column;gap:10px;}
  .footer-col a{font-size:14.5px;color:var(--ink-soft);transition:color .15s;}
  .footer-col a:hover{color:var(--sky-deep);}
  .footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:24px;border-top:1px solid var(--line-soft);}
  .footer-bottom p{font-size:13px;color:var(--ink-faint);}
  .social-row{display:flex;gap:10px;}
  .social-row a{
    width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
    transition:border-color .15s, color .15s;
  }
  .social-row a:hover{border-color:var(--sky);color:var(--sky-deep);}
  .social-row svg{width:15px;height:15px;}

  /* ============ Responsive ============ */
  @media (max-width:920px){
    .navlinks{display:none;}
    .hero-grid{grid-template-columns:1fr;}
    .flight-illustration{order:-1;max-width:420px;margin:0 auto;}
    .levels{grid-template-columns:1fr;}
    .features{grid-template-columns:repeat(2,1fr);}
    .parents-grid{grid-template-columns:1fr;gap:36px;}
    #about .wrap{grid-template-columns:1fr;text-align:center;}
    .avatar{margin:0 auto;}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .wrap{padding:0 20px;}
    .hero{padding:44px 0 40px;}
    section{padding:56px 0;}
    .features{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;gap:28px;}
    .cta-band{padding:36px 26px;flex-direction:column;align-items:flex-start;}
    .trust-row{gap:10px 16px;}
  }

/* =====================================================================
   EXTENSIONS — komponente potrebne unutrašnjim stranicama sajta
   (mokap je pokrivao samo početnu stranu)
   ===================================================================== */

/* ---- Mobilna navigacija ---- */
.menu-toggle{
  display:none;width:40px;height:40px;border-radius:50%;flex:none;
  border:1px solid var(--line);background:var(--paper-raised);color:var(--ink-soft);
  align-items:center;justify-content:center;cursor:pointer;
}
.menu-toggle svg{width:20px;height:20px;}
.menu-toggle:hover{border-color:var(--sky);color:var(--sky-deep);}

/* ---- Page hero (unutrašnje strane) ---- */
.page-hero{padding:56px 0 40px;}
.page-hero h1{font-size:clamp(30px,4vw,44px);margin:12px 0 16px;}
.page-hero.starters{background:var(--sunrise-tint);}
.page-hero.movers{background:var(--berry-tint);}
.page-hero.flyers{background:var(--dusk-tint);}
.page-hero-grid{display:grid;grid-template-columns:1fr 160px;gap:36px;align-items:center;}
.page-hero-mascot svg{width:100%;height:auto;}
.page-hero.starters .eyebrow{color:var(--sunrise-ink);}
.page-hero.movers  .eyebrow{color:var(--berry-ink);}
.page-hero.flyers  .eyebrow{color:var(--dusk-ink);}
.page-hero.starters h1{color:var(--sunrise-ink);}
.page-hero.movers  h1{color:var(--berry-ink);}
.page-hero.flyers  h1{color:var(--dusk-ink);}

/* ---- Breadcrumb ---- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-faint);}
.crumbs a{color:var(--ink-soft);}
.crumbs a:hover{color:var(--sky-deep);}
.crumbs span[aria-hidden]{opacity:.55;}

/* ---- Prose (tekstualni sadržaj stranica) ---- */
.prose{max-width:70ch;}
.prose > * + *{margin-top:18px;}
.prose h2{font-size:clamp(22px,2.6vw,28px);margin-top:40px;}
.prose h3{font-size:19px;margin-top:30px;}
.prose p{color:var(--ink-soft);}
.prose strong{color:var(--ink);}
.prose a{color:var(--sky-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.prose a:hover{color:var(--sky);}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:9px;padding-left:2px;}
.prose ol{list-style:decimal;padding-left:22px;}
.prose ul li{display:flex;align-items:baseline;gap:10px;color:var(--ink-soft);}
.prose ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sky);flex:none;position:relative;top:-2px;}
.prose ol li{color:var(--ink-soft);}
.prose blockquote{
  border-left:3px solid var(--sky);padding:4px 0 4px 18px;
  font-family:'Fredoka',ui-rounded,system-ui,sans-serif;font-size:19px;color:var(--ink);
}
.prose img{border-radius:16px;border:1px solid var(--line-soft);}
.prose hr{border:0;border-top:1px solid var(--line-soft);margin:34px 0;}

/* ---- Tabele ---- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.data{
  width:100%;border-collapse:collapse;font-size:14.5px;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
table.data th{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);
}
table.data td{padding:13px 16px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:top;}
table.data tr:last-child td{border-bottom:0;}

/* ---- Kartice resursa / testova ---- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px;}
.res-card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;
  padding:22px;display:flex;flex-direction:column;gap:10px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.res-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--sky);}
.res-card h3{font-size:17px;}
.res-card p{font-size:14px;color:var(--ink-soft);}
.res-card .res-meta{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
.res-card .level-cta{margin-top:auto;padding-top:8px;color:var(--sky-deep);}
.res-card .feature-icon{margin-bottom:2px;}
.res-card.starters .feature-icon{background:var(--sunrise-tint);color:var(--sunrise-ink);}
.res-card.movers  .feature-icon{background:var(--berry-tint);color:var(--berry-ink);}
.res-card.flyers  .feature-icon{background:var(--dusk-tint);color:var(--dusk-ink);}
.res-card.starters:hover{border-color:var(--sunrise);}
.res-card.movers:hover{border-color:var(--berry);}
.res-card.flyers:hover{border-color:var(--dusk);}

/* ---- Pill oznake ---- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;background:var(--sky-tint);color:var(--sky-deep);
}
.pill.starters{background:var(--sunrise-tint);color:var(--sunrise-ink);}
.pill.movers{background:var(--berry-tint);color:var(--berry-ink);}
.pill.flyers{background:var(--dusk-tint);color:var(--dusk-ink);}

/* ---- Napomena / callout ---- */
.callout{
  background:var(--sky-tint);border:1px solid var(--line-soft);border-radius:16px;
  padding:20px 22px;font-size:14.5px;color:var(--ink-soft);
}
.callout strong{color:var(--ink);}

/* ---- Skip link (pristupačnost) ---- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--sky);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-weight:600;
}
.skip-link:focus{left:0;}

/* ---- Responsive dopune ---- */
@media (max-width:920px){
  .menu-toggle{display:flex;}
  .navlinks.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper-raised);border-bottom:1px solid var(--line);
    padding:8px 28px 16px;box-shadow:var(--shadow);
  }
  .navlinks.open a{padding:12px 0;border-bottom:1px solid var(--line-soft);border-left:0;}
  .navlinks.open a:last-child{border-bottom:0;}
  header{position:sticky;}
  .nav{position:relative;}
  .page-hero-grid{grid-template-columns:1fr;}
  .page-hero-mascot{max-width:130px;}
}

/* ---- Kartica teme (mreža tema po nivou) ---- */
.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.topic-card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.topic-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.topic-thumb{
  aspect-ratio:4/3;width:100%;position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.topic-thumb img{width:100%;height:100%;object-fit:cover;}
.topic-thumb svg{width:44%;height:auto;opacity:.9;}
.topic-body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:5px;flex:1;}
.topic-body h3{font-size:16.5px;}
.topic-body p{font-size:13.5px;color:var(--ink-soft);}
.topic-card .topic-go{
  margin-top:auto;padding-top:10px;font-weight:600;font-size:13.5px;
  display:flex;align-items:center;gap:6px;
}
.topic-card .topic-go svg{width:14px;height:14px;transition:transform .15s;}
.topic-card:hover .topic-go svg{transform:translateX(3px);}

.topic-card.starters{border-color:color-mix(in srgb, var(--sunrise) 26%, var(--line));}
.topic-card.starters .topic-thumb{background:var(--sunrise-tint);color:var(--sunrise);}
.topic-card.starters h3,.topic-card.starters .topic-go{color:var(--sunrise-ink);}
.topic-card.starters:hover{border-color:var(--sunrise);box-shadow:0 10px 26px -14px color-mix(in srgb, var(--sunrise) 55%, transparent);}

.topic-card.movers{border-color:color-mix(in srgb, var(--berry) 26%, var(--line));}
.topic-card.movers .topic-thumb{background:var(--berry-tint);color:var(--berry);}
.topic-card.movers h3,.topic-card.movers .topic-go{color:var(--berry-ink);}
.topic-card.movers:hover{border-color:var(--berry);box-shadow:0 10px 26px -14px color-mix(in srgb, var(--berry) 55%, transparent);}

.topic-card.flyers{border-color:color-mix(in srgb, var(--dusk) 26%, var(--line));}
.topic-card.flyers .topic-thumb{background:var(--dusk-tint);color:var(--dusk);}
.topic-card.flyers h3,.topic-card.flyers .topic-go{color:var(--dusk-ink);}
.topic-card.flyers:hover{border-color:var(--dusk);box-shadow:0 10px 26px -14px color-mix(in srgb, var(--dusk) 55%, transparent);}

/* trenutna tema u mreži */
.topic-card[aria-current="page"]{outline:2px solid currentColor;outline-offset:-2px;}
.topic-card[aria-current="page"] .topic-go{opacity:.55;}

/* ---- Okvir za ugrađenu vežbu (Wordwall / Quizlet) ---- */
.embed-card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;margin-bottom:22px;
}
.embed-head{
  display:flex;align-items:center;gap:9px;padding:12px 16px;
  border-bottom:1px solid var(--line-soft);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
.embed-head svg{width:15px;height:15px;color:var(--sky);flex:none;}
.embed-card iframe{display:block;width:100%;border:0;background:var(--paper);}

/* ---- Blok sa vokabularom ---- */
.vocab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;}
.vocab-card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;padding:22px;
}
.vocab-card h3{font-size:16px;margin-bottom:12px;}
.vocab-card ul{display:flex;flex-direction:column;gap:8px;}
.vocab-card li{display:flex;align-items:baseline;gap:9px;font-size:14.5px;color:var(--ink-soft);}
.vocab-card li::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;position:relative;top:-2px;background:var(--sky);}
.vocab-card.starters h3{color:var(--sunrise-ink);}
.vocab-card.starters li::before{background:var(--sunrise);}
.vocab-card.movers h3{color:var(--berry-ink);}
.vocab-card.movers li::before{background:var(--berry);}
.vocab-card.flyers h3{color:var(--dusk-ink);}
.vocab-card.flyers li::before{background:var(--dusk);}

/* ---- Dve kolone: sadržaj + bočni stubac ---- */
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:36px;align-items:start;}

@media (max-width:1040px){
  .topic-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:920px){
  .split{grid-template-columns:1fr;gap:28px;}
  .topic-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .topic-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .topic-body{padding:12px 13px 14px;}
  .topic-body h3{font-size:15px;}
  .topic-body p{font-size:12.5px;}
}

/* =====================================================================
   ISPRAVKE nakon prve provere prikaza
   ===================================================================== */

/* Ikonice unutar dugmadi moraju imati fiksnu veličinu — inače SVG bez
   width/height uzme celu raspoloživu visinu i naraste preko cele kartice. */
.btn svg{width:15px;height:15px;flex:none;}

/* Maskota u zaglavlju podstrane nosi boju svog nivoa. */
.page-hero .page-hero-mascot{color:var(--ink);}
.page-hero.starters .page-hero-mascot{color:var(--sunrise);}
.page-hero.movers   .page-hero-mascot{color:var(--berry);}
.page-hero.flyers   .page-hero-mascot{color:var(--dusk);}

/* CTA traka: u tamnoj temi je --sky svetloplav, pa bela dugmad i beo tekst
   na njemu nemaju kontrast. Traka zato ima sopstvene tokene. */
:root{--cta-bg:#2E7DB8;--cta-fg:#FFFFFF;--cta-btn-bg:#FFFFFF;--cta-btn-fg:#215F8C;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cta-bg:#1D3F5E;--cta-fg:#EAF3FA;--cta-btn-bg:#75B7E6;--cta-btn-fg:#10202E;
  }
}
:root[data-theme="dark"]{
  --cta-bg:#1D3F5E;--cta-fg:#EAF3FA;--cta-btn-bg:#75B7E6;--cta-btn-fg:#10202E;
}
.cta-band{background:var(--cta-bg);color:var(--cta-fg);}
.cta-band h2{color:var(--cta-fg);}
.cta-band p{color:color-mix(in srgb, var(--cta-fg) 82%, transparent);}
.cta-band .btn-primary{background:var(--cta-btn-bg);color:var(--cta-btn-fg);}
.cta-band .btn-primary:hover{background:var(--cta-btn-bg);opacity:.9;}

/* Sličica teme kada je linijska ikonica, a ne fotografija. */
.topic-thumb.is-icon svg{width:38%;max-width:64px;height:auto;opacity:1;}
.topic-thumb.is-icon{background-image:
  radial-gradient(circle at 30% 20%, color-mix(in srgb, currentColor 10%, transparent), transparent 60%);}

/* =====================================================================
   VEŽBE SA TRENUTNIM ODGOVOROM (drill)
   Dete klikne i odmah vidi rezultat — bez dugmeta "proveri".
   ===================================================================== */

:root{
  --right:#3E7A5E;      /* tačno — zelena */
  --right-tint:rgba(62,122,94,0.13);
  --wrong:#B33A3A;      /* netačno — crvena */
  --wrong-tint:rgba(179,58,58,0.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --right:#7FC4A2;--right-tint:rgba(127,196,162,0.16);
    --wrong:#E58A82;--wrong-tint:rgba(229,138,130,0.14);
  }
}
:root[data-theme="dark"]{
  --right:#7FC4A2;--right-tint:rgba(127,196,162,0.16);
  --wrong:#E58A82;--wrong-tint:rgba(229,138,130,0.14);
}

.drill{margin:0 0 34px;}
.drill-title{font-size:19px;margin-bottom:4px;}
.drill-lead{font-size:14.5px;color:var(--ink-soft);margin-bottom:16px;}

/* traka napretka — prati skrol da dete uvek vidi dokle je stiglo */
.drill-bar{
  position:sticky;top:70px;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:9px 14px;margin-bottom:18px;border-radius:100px;
  background:color-mix(in srgb, var(--paper-raised) 92%, transparent);
  backdrop-filter:blur(8px);
  border:1px solid var(--line-soft);
}
.drill-track{flex:1;height:7px;border-radius:100px;background:var(--line-soft);overflow:hidden;}
.drill-fill{display:block;height:100%;width:0;border-radius:100px;background:var(--right);transition:width .3s ease;}
.drill-score{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:600;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.drill-reset{
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);
  border-radius:100px;padding:5px 13px;font-size:13px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:border-color .15s,color .15s;
}
.drill-reset:hover{border-color:var(--sky);color:var(--sky-deep);}

.drill-qs{display:flex;flex-direction:column;gap:14px;list-style:none;padding:0;margin:0;}

.drill-q{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;transition:border-color .2s ease, background .2s ease;
}
.drill-q.is-solved{border-color:color-mix(in srgb, var(--right) 45%, var(--line));}

.drill-hint{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;
}
.drill-sent{
  font-family:'Fredoka',ui-rounded,system-ui,sans-serif;
  font-size:20px;font-weight:500;line-height:1.5;color:var(--ink);margin-bottom:14px;
}
.drill-gap{
  display:inline-block;min-width:3.4em;text-align:center;
  border-bottom:2px dotted var(--ink-faint);color:var(--ink-faint);
  padding:0 4px;transition:color .2s, border-color .2s;
}
.drill-gap.is-filled{color:var(--right);border-bottom-color:var(--right);border-bottom-style:solid;}

.drill-opts{display:flex;flex-wrap:wrap;gap:9px;}
.drill-opts button{
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:100px;padding:9px 18px;font-size:15.5px;font-weight:600;cursor:pointer;
  transition:border-color .15s, background .15s, color .15s, transform .12s;
}
.drill-opts button:hover:not(:disabled){border-color:var(--sky);transform:translateY(-1px);}
.drill-opts button:disabled{cursor:default;}
.drill-opts button.is-right{background:var(--right-tint);border-color:var(--right);color:var(--right);}
.drill-opts button.is-wrong{background:var(--wrong-tint);border-color:var(--wrong);color:var(--wrong);}
.drill-opts button:disabled:not(.is-right):not(.is-wrong){opacity:.5;}

.drill-why{
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:14px;color:var(--ink-soft);
}
.drill-why b{color:var(--ink);}
.drill-why[hidden]{display:none;}

.drill-done{
  margin-top:18px;padding:22px 24px;border-radius:16px;text-align:center;
  background:var(--right-tint);border:1px solid color-mix(in srgb, var(--right) 40%, transparent);
}
.drill-done[hidden]{display:none;}
.drill-done h3{font-size:20px;color:var(--right);margin-bottom:6px;}
.drill-done p{font-size:14.5px;color:var(--ink-soft);}

@media (max-width:560px){
  .drill-bar{top:64px;gap:10px;padding:8px 12px;}
  .drill-sent{font-size:18px;}
  .drill-opts button{padding:8px 15px;font-size:15px;}
}
@media (prefers-reduced-motion: reduce){
  .drill-fill{transition:none;}
}

/* ---- Inline kod (koristi se u template-article.html) ---- */
code{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.88em;padding:2px 6px;border-radius:6px;
  background:var(--sky-tint);color:var(--sky-deep);
  overflow-wrap:break-word;
}
.prose pre{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;overflow-x:auto;font-size:13.5px;
}
.prose pre code{background:none;padding:0;color:var(--ink);}

/* Dugački URL-ovi u tekstu (pravni tekstovi) ne smeju da razvuku stranicu. */
.prose a,.prose p,.prose li{overflow-wrap:anywhere;}

/* Dugme unutar `prose` bloka: `.prose a` je specifičnije od `.btn-primary`,
   pa bi mu preuzelo boju i podvlačenje. Vraćamo izgled dugmeta. */
.prose a.btn{text-decoration:none;}
.prose a.btn-primary{color:#fff;}
.prose a.btn-primary:hover{color:#fff;}
.prose a.btn-ghost{color:var(--ink);}
.prose a.btn-ghost:hover{color:var(--sky-deep);}
.prose .cta-band a.btn-primary,.cta-band a.btn-primary{color:var(--cta-btn-fg);}
.prose .level-cta,.prose a.level-cta{text-decoration:none;}

/* =====================================================================
   TRAKA ZA PRISTANAK NA KOLAČIĆE
   Zamenjuje TermsFeed banner. Ne pokriva sadržaj — sedi u donjem levom
   uglu na širokim ekranima, a na telefonu preko cele širine.
   ===================================================================== */
.cookie-bar{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:60;
  max-width:520px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 4px 12px rgba(38,51,58,.10), 0 18px 44px -18px rgba(38,51,58,.42);
  opacity:0;transform:translateY(14px);
  transition:opacity .25s ease, transform .25s ease;
}
:root[data-theme="dark"] .cookie-bar{box-shadow:0 4px 12px rgba(0,0,0,.4), 0 18px 44px -18px rgba(0,0,0,.7);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cookie-bar{box-shadow:0 4px 12px rgba(0,0,0,.4), 0 18px 44px -18px rgba(0,0,0,.7);}
}
.cookie-bar.is-open{opacity:1;transform:translateY(0);}
.cookie-inner{padding:22px 24px 20px;}
.cookie-text h2{
  font-size:17px;margin-bottom:7px;
  display:flex;align-items:center;gap:9px;
}
.cookie-text h2::before{
  content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--sunrise);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--sunrise) 22%, transparent);
}
.cookie-text p{font-size:14px;line-height:1.55;color:var(--ink-soft);}
.cookie-text a{color:var(--sky-deep);text-decoration:underline;text-underline-offset:3px;}
.cookie-text a:hover{color:var(--sky);}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.cookie-actions .btn{padding:10px 20px;font-size:14.5px;}

@media (max-width:560px){
  .cookie-bar{left:12px;right:12px;bottom:12px;border-radius:18px;}
  .cookie-inner{padding:18px 18px 16px;}
  .cookie-actions .btn{flex:1;justify-content:center;}
}
@media (prefers-reduced-motion: reduce){
  .cookie-bar{transition:none;opacity:1;transform:none;}
}

/* ---- Sličice: fotografija u svetloj temi, ikonica u tamnoj ---------------
   Sve ilustracije imaju belu pozadinu. Na tamnoj strani sijaju kao prozori
   i vuku pogled jače nego naslovi ispod njih. Zato se u tamnoj temi umesto
   fotografije prikazuje ikonica teme u boji nivoa.
   Obe stvari stoje u HTML-u; menja se samo koja je vidljiva. */
.topic-thumb{box-shadow:inset 0 0 0 1px var(--line-soft);}
.topic-thumb .topic-ico{
  display:none;width:100%;height:100%;
  align-items:center;justify-content:center;
}
.topic-thumb .topic-ico svg{width:38%;max-width:64px;height:auto;}
.topic-thumb.is-icon .topic-ico{display:flex;}

:root[data-theme="dark"] .topic-thumb.has-both img{display:none;}
:root[data-theme="dark"] .topic-thumb.has-both .topic-ico{display:flex;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .topic-thumb.has-both img{display:none;}
  :root:not([data-theme="light"]) .topic-thumb.has-both .topic-ico{display:flex;}
}

/* Kad se skoči na deo testa preko linka (#part-2), naslov ne sme da završi
   ispod lepljivog zaglavlja. */
.drill{scroll-margin-top:96px;}