:root{
    --ink:#20140F;
    --red:#6B1B22;
    --red-soft:#8A2B32;
    --teget:#16233F;
    --teget-2:#1F3157;
    --parchment:#F3ECDC;
    --parchment-dim:#DCD3BC;
    --orange:#D9822B;
    --orange-soft:#EDA860;
    --blue-soft:#8FB3D9;
    --radius:14px;
    --font-display:'Alegreya', Georgia, serif;
    --font-body:'PT Sans', Arial, sans-serif;
    --font-mono:'IBM Plex Mono', 'Courier New', monospace;
    --maxw:1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    background:var(--parchment);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
  :focus-visible{outline:3px solid var(--orange); outline-offset:3px;}

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(243,236,220,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--parchment-dim);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
  }
  .brand{
    font-family:var(--font-display); font-weight:900; font-size:1.35rem;
    text-decoration:none; letter-spacing:0.01em;
    display:flex; align-items:center; gap:10px;
  }
  .brand .mark{
    width:30px; height:30px; border-radius:8px; background:var(--teget);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .brand .mark svg{width:16px; height:16px;}
  .navlinks{display:flex; gap:24px; list-style:none; margin:0; padding:0; align-items:center;}
  .navlinks a{
    text-decoration:none; font-weight:700; font-size:0.95rem;
    color:var(--teget); position:relative; padding-bottom:4px;
  }
  .navlinks a::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--orange); transform:scaleX(0); transform-origin:left;
    transition:transform 0.2s ease;
  }
  .navlinks a:hover::after, .navlinks a:focus-visible::after{transform:scaleX(1);}
  .navlinks .badge{
    font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.04em; text-transform:uppercase;
    background:var(--orange); color:#fff; padding:1px 6px; border-radius:999px; margin-left:5px; vertical-align:middle;
  }
  .navToggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
  .navToggle svg{width:26px; height:26px;}

  @media (max-width:820px){
    .navlinks{
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; align-items:flex-start; background:var(--parchment);
      border-bottom:1px solid var(--parchment-dim);
      padding:8px 24px 20px; gap:14px; display:none;
    }
    .navlinks.open{display:flex;}
    .navToggle{display:block;}
  }

  /* ---------- Zigzag divider (signature motif) ---------- */
  .sara{
    height:14px; width:100%;
    background-image: linear-gradient(135deg, var(--orange) 25%, transparent 25%),
                       linear-gradient(225deg, var(--orange) 25%, transparent 25%),
                       linear-gradient(45deg, var(--orange) 25%, transparent 25%),
                       linear-gradient(315deg, var(--orange) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 14px;
    background-repeat: repeat-x;
    opacity:0.55;
  }
  .sara.dark{opacity:0.85;}

  /* ---------- Hero ---------- */
  .hero{
    background:var(--red);
    color:var(--parchment);
    padding:72px 0 0;
    overflow:hidden;
  }
  .hero-inner{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
    padding-bottom:64px;
  }
  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr; padding-bottom:40px;}
  }
  .eyebrow{
    font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--orange-soft); margin:0 0 18px;
  }
  h1{
    font-family:var(--font-display); font-weight:900; font-style:italic;
    font-size:clamp(2.3rem, 4.5vw, 3.6rem); line-height:1.08; margin:0 0 20px;
  }
  h1 .accent{color:var(--orange-soft); font-style:normal;}
  .lead{font-size:1.1rem; color:var(--parchment-dim); max-width:46ch; margin:0 0 30px;}
  .cta-row{display:flex; gap:14px; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-body); font-weight:700; font-size:0.98rem;
    padding:13px 24px; border-radius:999px; text-decoration:none;
    border:2px solid transparent; cursor:pointer; transition:transform 0.15s ease, background 0.15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--orange); color:#fff;}
  .btn-primary:hover{background:var(--orange-soft);}
  .btn-ghost{border-color:var(--parchment-dim); color:var(--parchment);}
  .btn-ghost:hover{border-color:var(--orange-soft); color:var(--orange-soft);}
  /* ghost dugme na svetloj podlozi — inace je tekst kremast i nevidljiv */
  .btn-ghost.on-light{border-color:var(--red); color:var(--red); background:transparent;}
  .btn-ghost.on-light:hover{background:var(--red); border-color:var(--red); color:#fff;}

  /* ---------- Phrase flip card (signature interactive element) ---------- */
  .card-stage{display:flex; justify-content:center;}
  .phrase-card{
    width:100%; max-width:360px;
    background:var(--teget-2);
    border:1px solid rgba(237,168,96,0.25);
    border-radius:var(--radius);
    padding:28px 26px;
    box-shadow:0 20px 50px rgba(0,0,0,0.35);
  }
  .phrase-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
  .phrase-top span{font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--parchment-dim);}
  .toggle{
    display:inline-flex; background:rgba(0,0,0,0.25); border-radius:999px; padding:3px; gap:2px;
  }
  .toggle button{
    font-family:var(--font-mono); font-size:0.72rem; font-weight:600; letter-spacing:0.04em;
    border:none; background:none; color:var(--parchment-dim); padding:6px 12px; border-radius:999px; cursor:pointer;
  }
  .toggle button[aria-pressed="true"]{background:var(--orange); color:#fff;}
  .cyr{font-family:var(--font-display); font-size:2rem; font-weight:700; margin:6px 0 4px; transition:color 0.2s ease;}
  .cyr.ti{color:var(--orange-soft);}
  .cyr.vi{color:var(--blue-soft);}
  .phonetic{font-family:var(--font-mono); font-size:0.95rem; color:var(--parchment-dim); margin:0 0 16px;}
  .eng{font-size:0.95rem; color:var(--parchment); border-top:1px solid rgba(255,255,255,0.12); padding-top:14px; margin:0;}
  .pill{
    display:inline-block; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em;
    text-transform:uppercase; padding:3px 10px; border-radius:999px; margin-bottom:10px;
  }
  .pill.ti{background:rgba(237,168,96,0.15); color:var(--orange-soft);}
  .pill.vi{background:rgba(143,179,217,0.18); color:var(--blue-soft);}

  /* ---------- Levels strip ---------- */
  .levels{background:var(--parchment); padding:72px 0;}
  .section-head{max-width:640px; margin:0 0 44px;}
  .section-head .eyebrow{color:var(--red);}
  .section-head h2{font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.4rem); margin:0 0 12px; font-weight:800;}
  .section-head p{color:#4A4636; margin:0; font-size:1.02rem;}

  .level-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  @media (max-width:900px){.level-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.level-grid{grid-template-columns:1fr;}}
  .level-card{
    background:#fff; border:1px solid var(--parchment-dim); border-radius:var(--radius);
    padding:24px 20px; text-decoration:none; color:var(--ink);
    transition:border-color 0.15s ease, transform 0.15s ease;
  }
  .level-card:hover{border-color:var(--orange); transform:translateY(-3px);}
  .level-card .tag{
    font-family:var(--font-mono); font-weight:600; font-size:0.85rem; color:var(--red);
    display:block; margin-bottom:10px;
  }
  .level-card h3{font-family:var(--font-display); font-size:1.3rem; margin:0 0 8px; font-weight:700;}
  .level-card p{margin:0; font-size:0.92rem; color:#5b5744;}

  /* ---------- Games section ---------- */
  .games{background:#fff; padding:72px 0; border-top:1px solid var(--parchment-dim); border-bottom:1px solid var(--parchment-dim);}
  .games .section-head .eyebrow{color:var(--red);}
  .game-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media (max-width:860px){.game-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.game-grid{grid-template-columns:1fr;}}
  .game-card{
    background:var(--parchment); border-radius:var(--radius); padding:26px 22px;
    border:1px solid var(--parchment-dim); position:relative;
  }
  .game-card .icon{
    width:44px; height:44px; border-radius:10px; background:var(--red);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .game-card .icon svg{width:22px; height:22px; stroke:var(--orange-soft);}
  .game-card h3{font-family:var(--font-display); font-size:1.2rem; margin:0 0 8px; font-weight:700;}
  .game-card p{margin:0 0 14px; font-size:0.92rem; color:#5b5744;}
  .game-card a.play{font-family:var(--font-mono); font-size:0.8rem; font-weight:600; color:var(--red); text-decoration:none;}
  .game-card a.play:hover{color:var(--orange);}
  .soon-badge{
    position:absolute; top:20px; right:20px;
    font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase;
    background:var(--orange); color:#fff; padding:3px 9px; border-radius:999px;
  }

  /* ---------- Method / features ---------- */
  .method{background:var(--teget); color:var(--parchment); padding:72px 0;}
  .method .section-head p{color:var(--parchment-dim);}
  .method .eyebrow{color:var(--orange-soft);}
  .feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media (max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.feature-grid{grid-template-columns:1fr;}}
  .feature{
    background:var(--teget-2); border-radius:var(--radius); padding:26px 22px;
    border:1px solid rgba(237,168,96,0.15);
  }
  .feature svg{width:30px; height:30px; margin-bottom:16px; stroke:var(--orange-soft);}
  .feature h3{font-family:var(--font-display); font-size:1.15rem; margin:0 0 8px; font-weight:700;}
  .feature p{margin:0; font-size:0.92rem; color:var(--parchment-dim);}

  /* ---------- About ---------- */
  .about{padding:76px 0; background:var(--parchment);}
  .about-inner{display:grid; grid-template-columns:0.9fr 1.1fr; gap:52px; align-items:center;}
  @media (max-width:860px){.about-inner{grid-template-columns:1fr;}}
  .quote{
    font-family:var(--font-display); font-style:italic; font-weight:700;
    font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.35; color:var(--teget); margin:0 0 18px;
  }
  .quote span{color:var(--red);}
  .about-meta{font-family:var(--font-mono); font-size:0.85rem; color:#6b6650;}
  .stat-row{display:flex; gap:36px; margin-top:26px; flex-wrap:wrap;}
  .stat b{display:block; font-family:var(--font-display); font-size:2rem; color:var(--red); font-weight:800;}
  .stat span{font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; color:#6b6650;}

  /* ---------- CTA band ---------- */
  .band{background:var(--teget); color:var(--parchment); padding:56px 0; text-align:center;}
  .band h2{font-family:var(--font-display); font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 14px; font-weight:800;}
  .band p{margin:0 0 26px; color:var(--parchment-dim);}

  /* ---------- Footer ---------- */
  footer{background:var(--teget); color:var(--parchment-dim); padding:52px 0 28px; font-size:0.9rem; border-top:1px solid rgba(237,168,96,0.15);}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px;}
  @media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
  .footer-grid h4{font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange-soft); margin:0 0 14px;}
  .footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
  .footer-grid a{text-decoration:none; color:var(--parchment-dim);}
  .footer-grid a:hover{color:var(--orange-soft);}
  .footer-bottom{
    border-top:1px solid rgba(237,168,96,0.15); padding-top:22px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-size:0.82rem; color:#8b8770;
  }

  /* ---------- Game page ---------- */
  .game-hero{background:var(--red); color:var(--parchment); padding:44px 0 40px;}
  .breadcrumb{font-family:var(--font-mono); font-size:0.8rem; color:var(--orange-soft); text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-bottom:18px;}
  .breadcrumb:hover{color:#fff;}
  .game-hero h1{font-size:clamp(1.9rem,3.6vw,2.6rem); margin:0 0 12px;}
  .game-hero .lead{margin:0;}
  .game-play{background:var(--parchment); padding:48px 0 76px;}
  .game-frame-wrap{
    background:var(--teget); border-radius:var(--radius); padding:12px;
    box-shadow:0 20px 50px rgba(0,0,0,0.18); margin-bottom:28px;
  }
  .game-frame-inner{position:relative; width:100%; padding-top:66%; border-radius:8px; overflow:hidden; background:#000;}
  .game-frame-inner iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .game-fallback{font-family:var(--font-mono); font-size:0.85rem; text-align:center; color:var(--parchment-dim); margin:12px 0 0;}
  .game-fallback a{color:var(--orange-soft);}
  .game-info{display:grid; grid-template-columns:1.3fr 0.7fr; gap:32px; align-items:start;}
  @media (max-width:820px){.game-info{grid-template-columns:1fr;}}
  .game-info h2{font-family:var(--font-display); font-size:1.4rem; margin:0 0 12px;}
  .game-info p{color:#4A4636; font-size:0.98rem;}
  .controls-card{background:#fff; border:1px solid var(--parchment-dim); border-radius:var(--radius); padding:22px;}
  .controls-card h3{font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--red); margin:0 0 14px;}
  .controls-card ul{margin:0; padding-left:18px; font-size:0.92rem; color:#4A4636;}
  .controls-card li{margin-bottom:8px;}
  .controls-card kbd{font-family:var(--font-mono); background:var(--parchment); border:1px solid var(--parchment-dim); border-radius:4px; padding:1px 6px; font-size:0.82rem;}

  /* ---------- Generic page hero (Lessons / Courses / Exercises hubs) ---------- */
  .page-hero{background:var(--red); color:var(--parchment); padding:44px 0 40px;}
  .page-hero h1{font-family:var(--font-display); font-weight:900; font-size:clamp(1.9rem,3.6vw,2.6rem); margin:0 0 12px; font-style:italic;}
  .page-hero .lead{margin:0; max-width:62ch; color:var(--parchment-dim); font-size:1.05rem;}

  /* ---------- Body copy sections on light bg ---------- */
  .copy-block{background:var(--parchment); padding:56px 0 8px;}
  .copy-block p{max-width:72ch; color:#4A4636; font-size:1.02rem;}

  /* ---------- Video / course cards ---------- */
  .video-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
  @media (max-width:760px){.video-grid{grid-template-columns:1fr;}}
  .video-card{background:#fff; border:1px solid var(--parchment-dim); border-radius:var(--radius); overflow:hidden;}
  .video-card .frame{position:relative; width:100%; padding-top:56.25%; background:#000;}
  .video-card .frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .video-card .vc-body{padding:18px 20px;}
  .video-card h3{font-family:var(--font-display); font-size:1.15rem; margin:0 0 10px;}
  .video-card a.play{font-family:var(--font-mono); font-size:0.82rem; font-weight:600; color:var(--red); text-decoration:none;}
  .video-card a.play:hover{color:var(--orange);}

  /* ---------- Accordion (Tests & Exercises) ---------- */
  .acc{background:#fff; border:1px solid var(--parchment-dim); border-radius:var(--radius); margin-bottom:14px; overflow:hidden;}
  .acc summary{
    font-family:var(--font-display); font-weight:700; font-size:1.15rem; cursor:pointer;
    padding:18px 22px; list-style:none; display:flex; justify-content:space-between; align-items:center;
    color:var(--teget); gap:12px;
  }
  .acc summary::-webkit-details-marker{display:none;}
  .acc summary::after{content:'+'; font-family:var(--font-mono); font-size:1.3rem; color:var(--red); flex-shrink:0;}
  .acc[open] summary::after{content:'\2013';}
  .acc-body{padding:0 22px 22px;}
  .course-group{margin-bottom:6px;}
  .course-group h4{font-family:var(--font-mono); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--red); margin:0 0 10px; padding-top:16px; border-top:1px solid var(--parchment-dim);}
  .course-group:first-child h4{border-top:none; padding-top:0;}
  .link-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:5px 20px; margin:0 0 4px; padding:0; list-style:none;}
  .link-list li a{font-size:0.9rem; color:#4A4636; text-decoration:none; line-height:1.6;}
  .link-list li a:hover{color:var(--red); text-decoration:underline;}
  .acc-lead{font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color:#8b8770; padding:0 22px 12px;}

  /* ---------- Fill-in-the-blank exercises (modernized Hot Potatoes) ---------- */
  .fib-block{background:#fff; border:1px solid var(--parchment-dim); border-radius:var(--radius); padding:26px 28px; margin-bottom:22px;}
  .fib-block h3{font-family:var(--font-display); font-size:1.2rem; color:var(--red); margin:0 0 16px;}
  .fib-line{font-size:1.05rem; line-height:2.1; color:#3a3628;}
  .fib-line b{font-family:var(--font-mono); font-weight:700; color:#8b8770; margin-right:6px;}
  .fib-input{
    border:none; border-bottom:2px solid var(--teget-2); background:var(--parchment);
    font-family:inherit; font-size:1em; width:110px; text-align:center; padding:3px 6px;
    border-radius:4px 4px 0 0; transition:all 0.15s ease;
  }
  .fib-input:focus{outline:none; border-color:var(--orange); background:#fff;}
  .fib-input.correct{border-color:#3E7A4F; background:rgba(62,122,79,0.12); color:#2c5c3a;}
  .fib-input.incorrect{border-color:#8A2B32; background:rgba(138,43,50,0.1); color:#7a2028;}
  .fib-toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:28px 0;}
  .fib-btn{
    font-family:var(--font-body); font-weight:700; font-size:0.92rem; padding:11px 22px;
    border-radius:999px; border:2px solid var(--red); background:var(--red); color:#fff; cursor:pointer;
  }
  .fib-btn:hover{background:var(--red-soft);}
  .fib-btn.ghost{background:transparent; color:var(--red);}
  .fib-btn.ghost:hover{background:rgba(107,27,34,0.06);}
  .fib-score{font-family:var(--font-mono); font-weight:700; font-size:0.95rem; color:var(--teget); margin-left:auto;}

  /* ---------- Lane skiing game (topic games) ---------- */
  .lg-wrap{background:var(--teget); border-radius:var(--radius); padding:12px; box-shadow:0 20px 50px rgba(0,0,0,0.18); margin-bottom:28px; position:relative;}
  .lg-hud{display:flex; justify-content:space-between; align-items:center; padding:6px 10px 12px; font-family:var(--font-mono); color:var(--parchment-dim);}
  .lg-hud .lg-score{font-size:0.85rem; letter-spacing:0.05em; text-transform:uppercase;}
  .lg-hud .lg-score b{color:var(--orange-soft); font-size:1.1rem; margin-left:6px;}
  .lg-hud .lg-lives{color:var(--wine, #B85868); font-size:1.1rem; letter-spacing:2px;}
  .lg-canvas-box{position:relative; width:100%; aspect-ratio:8/5; border-radius:8px; overflow:hidden; background:#0F1830;}
  .lg-canvas-box canvas{width:100%; height:100%; display:block;}
  .lg-mobile-controls{display:none; justify-content:space-between; padding:10px 4px 2px;}
  .lg-mobile-controls button{
    flex:1; margin:0 6px; padding:14px 0; border-radius:10px; border:none;
    background:var(--teget-2); color:var(--orange-soft); font-family:var(--font-mono); font-size:1.1rem; font-weight:700;
    cursor:pointer;
  }
  @media (max-width:760px){ .lg-mobile-controls{display:flex;} }
  .lg-overlay{
    position:absolute; inset:12px; border-radius:8px; background:rgba(22,35,63,0.88);
    display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:20px;
  }
  .lg-overlay h3{font-family:var(--font-display); font-size:1.6rem; color:var(--parchment); margin:0;}
  .lg-overlay p{font-family:var(--font-mono); color:var(--orange-soft); margin:0; font-size:1.3rem;}
  .lg-overlay button{
    font-family:var(--font-body); font-weight:700; font-size:0.95rem; padding:12px 26px; border-radius:999px;
    border:none; background:var(--orange); color:#fff; cursor:pointer;
  }
  .lg-overlay button:hover{background:var(--orange-soft);}

  /* ---------- Video embed (responsive 16:9) ---------- */
  .video-embed{
    position:relative; width:100%; max-width:720px; margin:0 auto;
    aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
    background:var(--teget); box-shadow:0 18px 44px rgba(0,0,0,0.16);
  }
  .video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .video-caption{
    font-family:var(--font-mono); font-size:0.8rem; color:#8b8770;
    text-align:center; margin:14px 0 0;
  }

  /* ---------- Screencast-O-Matic quiz player ---------- */
  .som-embed{
    position:relative; width:100%; max-width:860px; margin:0 auto;
    aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
    background:var(--teget); box-shadow:0 18px 44px rgba(0,0,0,0.16);
  }
  .som-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

  /* "Igraj ovo umesto vežbe" — link from an exercise to its matching game */
  .play-cta{
    max-width:820px; margin:34px auto 0;
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    background:#fff; border:1px solid rgba(22,35,63,0.14);
    border-left:4px solid var(--orange); border-radius:var(--radius);
    padding:20px 24px;
  }
  .play-cta > div{flex:1 1 260px;}
  .play-cta .kicker{
    margin:0 0 4px; font-family:var(--font-mono); font-size:0.72rem;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--red);
  }
  .play-cta p{margin:0;}
  .play-cta .btn{flex:0 0 auto; margin:0;}
  @media (max-width:560px){
    .play-cta{padding:18px 20px;}
    .play-cta .btn{width:100%; text-align:center;}
  }


  /* Book Creator e-book, ugradjen u stranicu */
  .book-embed{
    position:relative; width:100%; max-width:900px; margin:0 auto;
    aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
    background:var(--teget); box-shadow:0 18px 44px rgba(0,0,0,0.16);
  }
  .book-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  @media (max-width:640px){ .book-embed{aspect-ratio:3/4;} }

  /* Wordwall igrica ugradjena u lekciju */
  .ww-embed{
    position:relative; width:100%; max-width:820px; margin:0 auto;
    aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden;
    background:var(--teget); box-shadow:0 14px 34px rgba(0,0,0,0.14);
  }
  .ww-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  @media (max-width:640px){ .ww-embed{aspect-ratio:4/5;} }
  .ww-caption{
    text-align:center; font-family:var(--font-mono); font-size:0.74rem;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--red);
    margin:0 0 12px;
  }

  /* Tabela azbuke */
  .abc-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(122px, 1fr));
    gap:10px; margin:8px 0 4px;
  }
  .abc{
    background:#fff; border:1px solid rgba(22,35,63,0.12); border-radius:10px;
    padding:11px 13px; display:flex; align-items:baseline; gap:9px;
  }
  .abc b{font-family:var(--font-display); font-size:1.18rem; color:var(--teget); line-height:1;}
  .abc span{font-family:var(--font-mono); font-size:0.78rem; color:#8b8770;}
  .abc.new{border-color:rgba(217,130,43,0.55); background:rgba(217,130,43,0.07);}

  /* Kartice za PDF preuzimanje */
  .dl-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px;}
  .dl{
    display:block; background:#fff; border:1px solid rgba(22,35,63,0.13);
    border-radius:var(--radius); padding:18px 20px; text-decoration:none;
    transition:transform 0.15s ease, border-color 0.15s ease;
  }
  .dl:hover{transform:translateY(-2px); border-color:var(--orange);}
  .dl b{display:block; font-family:var(--font-display); font-size:1.06rem; color:var(--teget); margin-bottom:3px;}
  .dl span{font-family:var(--font-mono); font-size:0.74rem; color:#8b8770; letter-spacing:0.06em; text-transform:uppercase;}

  /* Mesto za Marininu pesmu, dok ne stigne */
  .song-slot{
    max-width:820px; margin:0 auto;
    background:rgba(217,130,43,0.07);
    border:1px dashed rgba(217,130,43,0.55);
    border-radius:var(--radius);
    padding:28px 26px; text-align:center;
  }
  .song-slot .note{
    display:block; font-family:var(--font-mono); font-size:0.72rem;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--red); margin-bottom:8px;
  }
  .song-slot p{margin:0; color:#6b6650;}


  /* Marinina igrica ugradjena u lekciju */
  .game-embed{
    position:relative; width:100%; max-width:900px; margin:0 auto;
    aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden;
    background:var(--teget); box-shadow:0 18px 44px rgba(0,0,0,0.18);
  }
  .game-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  @media (max-width:640px){ .game-embed{aspect-ratio:3/4;} }

  /* ---- legal pages ---------------------------------------------------- */
  .legal{max-width:820px; margin:0 auto;}
  .legal h2{font-family:var(--font-display); font-size:1.24rem; color:var(--red);
    margin:34px 0 10px; padding-top:14px; border-top:1px solid rgba(22,35,63,0.10);}
  .legal p{line-height:1.75; color:#4A4636; margin:0 0 14px;}
  .legal ul{margin:0 0 16px 20px; padding:0;}
  .legal li{line-height:1.7; color:#4A4636; margin-bottom:8px;}
  .legal a{color:var(--red); font-weight:700;}
  .legal-table{width:100%; border-collapse:collapse; margin:14px 0 8px; font-size:0.93rem;}
  .legal-table th{text-align:left; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--red); padding:0 14px 8px 0; border-bottom:1px solid rgba(22,35,63,0.16);}
  .legal-table td{padding:12px 14px 12px 0; border-bottom:1px solid rgba(22,35,63,0.07);
    vertical-align:top; line-height:1.65; color:#4A4636;}
  .legal-table td:first-child{white-space:nowrap;}
  @media (max-width:640px){ .legal-table, .legal-table tr, .legal-table td, .legal-table th{display:block; width:100%;}
    .legal-table td:first-child{white-space:normal; padding-bottom:2px; border:0;} }

  /* ---- cookie consent ------------------------------------------------- */
  .sl-cookies{position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
    max-width:920px; margin:0 auto; background:var(--teget); color:var(--parchment);
    border-radius:var(--radius); box-shadow:0 18px 44px rgba(0,0,0,0.28);
    padding:20px 22px; display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
  .sl-cookies p{margin:0; flex:1 1 320px; font-size:0.94rem; line-height:1.6; color:var(--parchment);}
  .sl-cookies a{color:var(--orange); font-weight:700;}
  .sl-cookies .sl-actions{display:flex; gap:10px; flex-wrap:wrap;}
  .sl-cookies button{font-family:var(--font-body); font-weight:700; font-size:0.9rem;
    padding:11px 20px; border-radius:999px; border:2px solid transparent; cursor:pointer;}
  .sl-cookies .sl-accept{background:var(--orange); color:#fff;}
  .sl-cookies .sl-decline{background:transparent; color:var(--parchment); border-color:rgba(243,236,220,0.5);}
  .sl-cookies .sl-decline:hover{border-color:var(--parchment);}
  @media (max-width:640px){ .sl-cookies{padding:18px; } .sl-cookies .sl-actions{width:100%;} .sl-cookies button{flex:1;} }

  /* ---- testimonials --------------------------------------------------- */
  .tmn-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px;}
  .tmn{background:#fff; border:1px solid rgba(22,35,63,0.12); border-left:3px solid var(--orange);
    border-radius:var(--radius); padding:20px 22px 18px; display:flex; flex-direction:column;}
  .tmn p{margin:0 0 14px; line-height:1.68; color:#4A4636; font-size:0.95rem; flex:1;}
  .tmn p::before{content:'\201C'; font-family:var(--font-display); font-size:1.5rem; color:var(--orange);
    line-height:0; vertical-align:-0.15em; margin-right:4px;}
  .tmn .who{font-family:var(--font-display); font-size:1rem; color:var(--teget); font-weight:700;}
  .tmn .where{font-family:var(--font-mono); font-size:0.74rem; color:#8b8770; letter-spacing:0.04em;
    text-transform:uppercase; margin-top:3px;}
  .tmn-lead{max-width:640px; margin:0 auto 30px; text-align:center; color:#4A4636; line-height:1.7;}