  :root{
    --mint: #79D4B9;
    --sky: #A0D1F3;
    --navy: #0C1D33;
    --navy-soft: #3C5A76;
    --orange: #F15D06;
    --orange-deep: #C94D02;
    --green: #1DA75A;
    --card: #FFFFFF;
    --soft-bg: #E4F5F0;
    --line: #E3EEEA;
    --radius-lg: 22px;
    --radius-md: 14px;
    --shadow: 0 18px 40px -18px rgba(18,52,82,0.25);
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background: var(--soft-bg); color: var(--navy);
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:16.5px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }
  h1,h2,h3{ font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--navy); margin:0; }
  a{ color:inherit; text-decoration:none; }
  .container{ max-width:1180px; margin:0 auto; padding:0 28px; position:relative; z-index:1; }
  ::selection{ background: var(--orange); color:#fff; }
  :focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }

  /* ===== NAV ===== */
  header{ position: sticky; top:0; z-index:100; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  .nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:10px 34px; max-width:1320px; margin:0 auto; gap: 24px;}
  .logo{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
  .logo-badge{
    width:104px; height:104px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  @media (max-width:700px){
    .logo-badge{ width:52px; height:52px; }
    .nav-wrap{ padding:12px 20px; }
  }
  .logo-badge svg, .logo-badge img{ width:100%; height:100%; }
  .logo-text{ font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:1.1; }
  .logo-text b{ display:block; font-size:1.38rem; font-weight:800; color:var(--navy); }
  .logo-text span{ display:block; font-size:0.74rem; letter-spacing:0.18em; font-weight:600; color: var(--orange); }

  nav ul{ list-style:none; display:flex; gap:2px; margin:0; padding:0; flex-wrap:wrap; }
  nav a{ font-weight:600; font-size:1.1rem; padding:11px 12px; border-radius:999px; color: var(--navy-soft); transition: background 0.2s, color 0.2s; white-space:nowrap; }
  nav a:hover, nav a:focus-visible{ background: var(--soft-bg); color: var(--navy); }
  .nav-cta{ background: var(--orange); color:#fff !important; padding:12px 24px !important; margin-left:6px; box-shadow: var(--shadow); }
  .nav-cta:hover{ background: var(--orange-deep); }
  .burger{ display:none; background:none; border:2px solid var(--navy); border-radius:8px; padding:10px 12px; cursor:pointer; flex-shrink:0; }
  .burger span, .burger span::before, .burger span::after{ content:''; display:block; width:20px; height:2px; background:var(--navy); position:relative; }
  .burger span::before{ position:absolute; top:-6px; }
  .burger span::after{ position:absolute; top:6px; }
  @media (max-width: 1440px){
    nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); }
    nav.open{ display:block; }
    nav ul{ flex-direction:column; padding:12px 20px 20px; }
    .nav-cta{ margin-left:0; margin-top:8px; display:inline-block; }
    .burger{ display:block; }
  }

  /* ===== HERO ===== */
  .hero{
    background:
      radial-gradient(ellipse at center, transparent 52%, rgba(12,29,51,0.85) 100%),
      linear-gradient(135deg, var(--sky) 0%, var(--mint) 55%, var(--sky) 100%);
    padding: 64px 28px 90px;
    position: relative;
    overflow: hidden;
  }
  .hero-inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns: 1.05fr 0.95fr; gap:52px; align-items:center; position:relative; z-index:2; }
  @media (max-width:900px){ .hero-inner{ grid-template-columns: 1fr; } }
  .hero h1{ font-size: clamp(2.6rem, 5.4vw, 3.9rem); font-weight:800; line-height:1.08; letter-spacing:-0.01em; }
  .hero .lede{ margin-top:18px; font-size:1.15rem; color: var(--navy-soft); font-weight:500; max-width: 44ch; }
  .badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
  .badge{
    background: rgba(255,255,255,0.85); border:1px solid rgba(18,52,82,0.1);
    padding:8px 16px 8px 8px; border-radius:999px; font-size:0.86rem; font-weight:700; color:var(--navy);
    display:flex; align-items:center; gap:9px; text-decoration:none; transition: transform 0.15s, box-shadow 0.15s;
  }
  a.badge:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px -4px rgba(18,52,82,0.25); }
  .badge .badge-ic{ width:22px; height:22px; border-radius:7px; background: var(--orange); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .badge .badge-ic svg{ width:12px; height:12px; }
  .badge-highlight{
    background: var(--navy); color:#fff; border-color: var(--navy);
    box-shadow: 0 6px 16px -4px rgba(18,52,82,0.5);
  }
  .badge-highlight .badge-ic{ background: var(--green); }
  .hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
  .btn{ display:inline-flex; align-items:center; gap:8px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; font-size:1rem; padding:15px 28px; border-radius:999px; cursor:pointer; transition:transform 0.15s, box-shadow 0.15s; border: none; box-sizing:border-box; max-width:100%; }
  .btn:hover{ transform: translateY(-2px); }
  .btn-primary{ background: var(--orange); color:#fff; box-shadow: 0 12px 24px -8px rgba(219,95,36,0.55); }
  .btn-primary:hover{ background: var(--orange-deep); }
  .btn-ghost{ background:#fff; color:var(--navy); border: 1.5px solid rgba(18,52,82,0.18); }
  .btn-ghost:hover{ background: var(--soft-bg); }

  .hero-visual{ position:relative; }
  .visual-card{
    background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: 10px; position:relative;
  }
  .onama-hero-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; }
  .jump-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
  .jump-nav a{
    font-size:0.85rem; font-weight:700; color:var(--navy); background: rgba(255,255,255,0.7);
    padding:8px 16px; border-radius:999px; text-decoration:none; border:1px solid rgba(12,29,51,0.12);
    transition: background 0.15s;
  }
  .jump-nav a:hover{ background:#fff; }
  .onama-hero-photo{
    background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding:8px; aspect-ratio: 4/2.7; overflow:hidden;
  }
  .onama-hero-photo img{ width:100%; height:100%; object-fit:cover; border-radius:14px; display:block; }
  @media (max-width:900px){
    .onama-hero-grid{ grid-template-columns: 1fr; }
    .onama-hero-photo{ max-width:440px; margin:0 auto; aspect-ratio:4/2.7; }
  }
  .visual-illustration{
    border-radius: 16px; overflow:hidden; aspect-ratio: 4/3.2;
    background: linear-gradient(160deg, #EAF7F1, #DDEFF7);
    position:relative;
  }
  .price-float{
    position:absolute; left:-16px; bottom:-26px; background:#fff; border-radius:18px;
    box-shadow: var(--shadow); padding:18px 26px 18px 18px; display:flex; align-items:center; gap:16px;
    animation: floatIn 0.6s cubic-bezier(.2,1.2,.4,1) 0.3s backwards;
  }
  .price-float .icon{ width:52px; height:52px; border-radius:16px; background: var(--orange); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
  .price-float .icon svg{ width:22px; height:22px; }
  .price-float .label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:800; color: var(--orange); }
  .price-float .value{ font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1.7rem; font-weight:800; color:var(--navy); line-height:1.25; }
  .price-float .early{ font-size:0.82rem; font-weight:700; color: var(--green); }
  @keyframes floatIn{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:translateY(0); } }

  /* ===== SECTION SHELL ===== */
  section{ padding: 88px 0; }
  .eyebrow{ display:inline-block; font-size:0.78rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color: var(--orange-deep); background: rgba(242,121,61,0.12); padding:6px 14px; border-radius:999px; margin-bottom:14px; }
  .section-head{ max-width:640px; margin-bottom:44px; }
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .section-head h2{ font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight:700; }
  .section-head p{ color: var(--navy-soft); margin-top:12px; font-size:1.05rem; }

  .reveal{ opacity:0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ===== O NAMA ===== */
  .about-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 50px; align-items:center; }
  .about-stats{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top: 26px; }
  .stat-card{ background:#fff; border-radius: var(--radius-md); padding:20px; border:1px solid var(--line); }
  .stat-card .num{ font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:2rem; font-weight:800; color: var(--orange-deep); }
  .stat-card .lbl{ font-size:0.85rem; color: var(--navy-soft); font-weight:600; margin-top:2px; }
  .about-visual{ background: linear-gradient(160deg, var(--mint), var(--sky)); border-radius: var(--radius-lg); padding: 12px; display:flex; align-items:center; }
  .about-visual img{ width:100%; border-radius: calc(var(--radius-lg) - 6px); display:block; }
  .about-visual .icon-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
  .icon-tile{ background: rgba(255,255,255,0.85); border-radius:16px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:1.8rem; }
  @media (max-width:900px){ .about-grid{ grid-template-columns:minmax(0,1fr); } .about-visual{ order:-1; } }

  /* ===== PREDMETI ===== */
  #predmeti{ background:#fff; }
  .subject-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
  .subject-card{ border:1.5px solid var(--line); border-radius: var(--radius-lg); padding:30px 26px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
  .subject-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
  .subject-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:18px; }
  .subject-icon svg{ width:26px; height:26px; }
  .subject-card h3{ font-size:1.2rem; font-weight:700; margin-bottom:8px; }
  .subject-card p{ color: var(--navy-soft); font-size:0.95rem; margin:0; }
  @media (max-width: 900px){ .subject-grid{ grid-template-columns:minmax(0,1fr); } }

  /* ===== NAŠ PRISTUP ===== */
  .approach-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
  .approach-card{ text-align:center; padding: 10px; }
  .approach-num{ width:54px; height:54px; margin:0 auto 16px; border-radius:50%; background:#fff; border:2px solid var(--navy); display:flex; align-items:center; justify-content:center; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:800; color:var(--navy); }
  .approach-card h3{ font-size:1.05rem; font-weight:700; margin-bottom:8px; }
  .approach-card p{ font-size:0.9rem; color:var(--navy-soft); margin:0; }
  @media (max-width:900px){ .approach-grid{ grid-template-columns: repeat(2,1fr); } }

  /* ===== PREDAVAČI ===== */
  #predavaci{ background:#fff; }
  .teacher-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:22px; }
  .teacher-card{ background: var(--soft-bg); border-radius: var(--radius-lg); padding: 28px; display:flex; flex-direction:column; align-items:center; gap:18px; }
  .teacher-avatar{ width:160px; height:160px; border-radius:50%; background: linear-gradient(135deg, var(--mint), var(--sky)); border:3px solid var(--navy); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:2.2rem; font-weight:800; color:var(--navy); letter-spacing:0.5px; overflow:hidden; }
  .teacher-avatar-photo{ padding:0; }
  .teacher-avatar-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .teacher-card > div:not(.teacher-avatar){ width:100%; }
  .teacher-card h3{ font-size:1.15rem; font-weight:700; text-align:center; }
  .teacher-card .role{ font-size:0.85rem; font-weight:700; color: var(--orange-deep); margin: 2px 0 10px; text-align:center; }
  .teacher-card p{ font-size:0.92rem; color:var(--navy-soft); margin:0; }
  .teacher-highlights{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:6px; }
  .teacher-highlights li{ font-size:0.85rem; color:var(--navy-soft); padding-left:20px; position:relative; }
  .teacher-highlights li::before{ content:'✓'; position:absolute; left:0; color: var(--green); font-weight:800; }
  @media (max-width:700px){ .teacher-grid{ grid-template-columns:minmax(0,1fr); } }

  /* ===== KALKULATOR ===== */
  #kalkulator{ background: linear-gradient(120deg, var(--mint) 0%, var(--sky) 100%); }
  .calc-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 40px; max-width: 720px; margin: 0 auto; }
  .calc-row{ margin-bottom: 26px; }
  .calc-row > label.group-label{ display:block; font-weight:700; font-size:0.95rem; margin-bottom:12px; }
  .option-set{ display:flex; gap:12px; flex-wrap:wrap; }
  .option-pill{ position:relative; }
  #format-row.dimmed .option-set{ opacity:0.4; pointer-events:none; }
  #format-row.dimmed .online-link{ opacity:0.4; pointer-events:none; }
  .format-disabled-note{ font-size:0.85rem; color:var(--navy-soft); font-style:italic; margin-top:10px; }
  .option-pill input{ position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0; }
  .option-pill .face{ display:block; padding:13px 20px; border-radius:12px; border:1.5px solid var(--line); font-weight:600; font-size:0.94rem; transition: border-color 0.15s, background 0.15s; cursor:pointer; }
  .option-pill input:checked + .face{ border-color: var(--orange); background: rgba(242,121,61,0.08); color: var(--orange-deep); }
  .option-pill input:focus-visible + .face{ outline:3px solid var(--orange); outline-offset:2px; }
  .checkbox-row{ display:flex; align-items:center; gap:12px; padding:14px 18px; border:1.5px solid var(--line); border-radius:12px; }
  .checkbox-row input{ width:18px; height:18px; accent-color: var(--orange); }
  .checkbox-row label{ font-weight:600; font-size:0.94rem; flex-grow:1; cursor:pointer; }
  .checkbox-row .note{ font-size:0.82rem; color: var(--navy-soft); font-weight:500; }
  .calc-total{ margin-top: 30px; background: var(--navy); color:#fff; border-radius:16px; padding: 26px 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
  .calc-total .lbl{ font-size:0.85rem; opacity:0.75; font-weight:600; }
  .calc-total .amount{ font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:2.4rem; font-weight:800; color: var(--mint); }
  .installment-line{ margin-top:6px; font-size:0.92rem; font-weight:700; color: var(--mint); opacity:0.9; }

  /* ===== UTISCI ===== */
  .status-card{ max-width: 680px; margin: 0 auto; text-align:center; background:#fff; border-radius: var(--radius-lg); padding: 46px 36px; border: 1.5px dashed var(--line); }
  .status-card .stars{ font-size:1.4rem; letter-spacing:4px; color: var(--orange); margin-bottom:16px; }
  .status-card h3{ font-size:1.3rem; font-weight:700; margin-bottom:10px; }
  .status-card p{ color:var(--navy-soft); margin:0; }

  /* ===== KONTAKT / PRIJAVA ===== */
  #kontakt{ background: var(--navy); color:#fff; }
  #kontakt .section-head p{ color: rgba(255,255,255,0.72); }
  #kontakt .section-head h2{ color:#fff; }
  #kontakt .eyebrow{ background: rgba(183,236,214,0.18); color: var(--mint); }
  .contact-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; }
  .contact-list{ display:flex; flex-direction:column; gap:16px; }
  .contact-item{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:18px 22px; display:flex; align-items:center; gap:16px; }
  .contact-item .ic{ width:42px; height:42px; border-radius:50%; background: var(--orange); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .contact-item > div:not(.ic){ min-width:0; }
  .contact-item .lbl{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; opacity:0.65; font-weight:700; }
  .contact-item .val{ font-size:1.05rem; font-weight:700; overflow-wrap:break-word; word-break:break-word; min-width:0; }
  .loc-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 6px; }
  .loc-pill{ background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:999px; padding:6px 14px; font-size:0.82rem; font-weight:600; }
  @media (max-width:900px){ .contact-grid{ grid-template-columns: minmax(0,1fr); } }

  footer{ background: var(--navy); color: rgba(255,255,255,0.6); padding: 26px 28px; border-top:1px solid rgba(255,255,255,0.1); font-size:0.82rem; }
  .footer-inner{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  .footer-social{ display:flex; gap:10px; }
  .social-icon{
    width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,0.08);
    color:#fff; display:flex; align-items:center; justify-content:center;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .social-icon svg{ width:18px; height:18px; }
  .social-icon:hover{ background: var(--orange); transform: translateY(-2px); }

  /* ===== NAV ACTIVE STATE ===== */
  nav a.nav-active{ background: var(--navy); color:#fff; }

  /* ===== PAGE HERO (sub-pages) ===== */
  .page-hero{
    background:
      radial-gradient(ellipse at center, transparent 52%, rgba(12,29,51,0.85) 100%),
      linear-gradient(135deg, var(--sky) 0%, var(--mint) 55%, var(--sky) 100%);
    padding: 56px 28px 64px;
  }
  .page-hero .container{ position:relative; z-index:2; }
  .page-hero .eyebrow{ background: rgba(255,255,255,0.85); }
  .page-hero h1{ font-size: clamp(2.4rem, 4.8vw, 3.4rem); font-weight:800; margin-top:10px; }
  .page-hero p{ color: var(--navy-soft); margin-top:14px; font-size:1.08rem; max-width:56ch; }
  .breadcrumb{ font-size:0.85rem; font-weight:700; color: var(--navy-soft); margin-bottom:14px; }
  .breadcrumb a{ color: var(--orange-deep); }
  .breadcrumb a:hover{ text-decoration:underline; }

  /* ===== HOMEPAGE QUICK LINKS ===== */
  .quick-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
  .quick-card{
    border:1.5px solid var(--line); border-radius: var(--radius-lg); padding:26px;
    display:flex; flex-direction:column; gap:10px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  }
  .quick-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); border-color:transparent; }
  .quick-card .qi{ width:48px; height:48px; border-radius:14px; background: rgba(242,121,61,0.12); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
  .quick-card .qi svg{ width:24px; height:24px; }
  .quick-card h3{ font-size:1.1rem; font-weight:700; }
  .quick-card p{ font-size:0.92rem; color:var(--navy-soft); margin:0; flex-grow:1; }
  .quick-card .go{ font-size:0.86rem; font-weight:800; color: var(--orange-deep); }
  @media (max-width:900px){ .quick-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width:600px){ .quick-grid{ grid-template-columns: minmax(0,1fr); } }

  /* ===== CTA BAND ===== */
  .cta-band{ background: var(--navy); border-radius: var(--radius-lg); padding: 44px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; color:#fff; }
  .cta-band h3{ color:#fff; font-size:1.4rem; }
  .cta-band p{ color: rgba(255,255,255,0.75); margin-top:6px; }
  @media (max-width:700px){ .cta-band{ flex-direction:column; align-items:flex-start; } }

  /* ===== FLOATING CONTACT BUTTONS ===== */
  .floating-contact{ position: fixed; right: 22px; bottom: 22px; z-index: 999; display:flex; flex-direction:column; gap:12px; }
  .fab{
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 24px -6px rgba(12,29,51,0.4); transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 2px solid rgba(255,255,255,0.9);
  }
  .fab:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 28px -6px rgba(12,29,51,0.5); }
  .fab svg{ width:28px; height:28px; }
  .fab-whatsapp{ background:#25D366; }
  .fab-viber{ background:#7360F2; }
  .fab-instagram{ background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); }
  .fab-facebook{ background:#1877F2; }
  .fab-label{
    position:absolute; right:66px; top:50%; transform:translateY(-50%);
    background: var(--navy); color:#fff; font-size:0.8rem; font-weight:700;
    padding:6px 12px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none;
    transition: opacity 0.15s ease;
  }
  .fab-wrap{ position:relative; }
  .fab-wrap:hover .fab-label{ opacity:1; }
  @media (max-width:700px){ .fab-label{ display:none; } .floating-contact{ right:14px; bottom:14px; } .fab{ width:50px; height:50px; } .fab svg{ width:24px; height:24px; } }

  /* ===== SIGNUP FORM ===== */
  .signup-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 36px; }
  .signup-card h2{ font-size:1.4rem; }
  .form-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:22px; }
  .form-group{ display:flex; flex-direction:column; gap:6px; }
  .form-group.full{ grid-column: 1 / -1; }
  .form-group label{ font-size:0.85rem; font-weight:700; color:var(--navy); }
  .form-group input, .form-group select, .form-group textarea{
    border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.95rem; color:var(--navy); background:var(--soft-bg); transition: border-color 0.15s;
    width:100%; box-sizing:border-box;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color: var(--orange); background:#fff; }
  .form-group textarea{ resize: vertical; min-height:80px; }
  .form-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
  .btn-whatsapp{ background:#25D366; color:#fff; }
  .btn-whatsapp:hover{ background:#1DA851; }
  .form-note{ font-size:0.82rem; color:var(--navy-soft); margin-top:14px; }

  /* ===== MAP ===== */
  .map-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow:hidden; }
  .ucionice-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-top:24px; }
  .ucionica-item{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; }
  .ucionica-item img{ width:100%; height:100%; object-fit:cover; display:block; }
  @media (max-width:1000px){ .ucionice-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width:600px){ .ucionice-grid{ grid-template-columns: minmax(0,1fr); } }
  .map-tabs{ display:flex; flex-wrap:wrap; gap:8px; padding:18px 18px 0; }
  .map-tab{
    padding:9px 16px; border-radius:999px; border:1.5px solid var(--line); font-size:0.86rem; font-weight:700;
    color:var(--navy-soft); cursor:pointer; background:#fff; transition: border-color 0.15s, background 0.15s, color 0.15s;
  }
  .map-tab.active{ border-color: var(--orange); background: rgba(242,121,61,0.1); color: var(--orange-deep); }
  .map-frame-wrap{ padding: 18px; }
  .map-address{ padding: 4px 18px 0; margin:0; font-size:0.9rem; color: var(--navy-soft); font-weight:600; }
  .map-frame-wrap iframe{ width:100%; height:340px; border:0; border-radius:14px; display:block; }

  /* ===== UTISCI GRID (multiple cells on homepage) ===== */
  .utisci-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
  .utisci-grid .status-card{ max-width:none; margin:0; }
  @media (max-width:900px){ .utisci-grid{ grid-template-columns: minmax(0,1fr); } }

  /* ===== TESTIMONIAL QUOTES ===== */
  .testimonial-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; margin-top:36px; }
  .testimonial-group-title{ font-size:1.2rem; font-weight:800; color:var(--navy); margin-top:44px; }
  .testimonial-group-title:first-of-type{ margin-top:8px; }
  .testimonial-grid.compact{ margin-top:20px; }
  .testimonial-grid.compact .testimonial-card{ padding:20px 22px; gap:10px; }
  .testimonial-grid.compact .testimonial-card p{ font-size:0.85rem; }
  .testimonial-grid.compact .t-author{ font-size:0.8rem; }
  .testimonial-card{
    background: var(--soft-bg); border-radius: var(--radius-lg); padding:26px;
    display:flex; flex-direction:column; gap:14px;
  }
  .testimonial-card .stars{ color:var(--orange); font-size:0.85rem; letter-spacing:2px; }
  .testimonial-card p{ font-size:0.9rem; color:var(--navy-soft); line-height:1.6; flex:1; margin:0; }
  .testimonial-card .t-author{ font-size:0.85rem; font-weight:700; color:var(--navy); }
  @media (max-width:900px){ .testimonial-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
  @media (max-width:600px){ .testimonial-grid{ grid-template-columns: minmax(0,1fr); } }

  .video-testimonial{
    max-width:640px; margin:40px auto 0; background: var(--soft-bg); border-radius: var(--radius-lg);
    padding:24px;
  }
  .video-testimonial h3{ font-size:1.05rem; font-weight:700; color:var(--navy); margin-bottom:6px; }
  .video-testimonial p{ font-size:0.9rem; color:var(--navy-soft); margin:0; }

  /* ===== VIDEO UTISCI CARD ===== */
  .video-card{ padding-top:20px; }
  .video-embed-wrap{
    width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
    background:#000; margin-bottom:16px;
  }
  .video-embed-wrap iframe{ width:100%; height:100%; border:0; display:block; }

  /* ===== GALLERY ===== */
  .gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
  .gallery-item{
    border-radius: var(--radius-lg); overflow:hidden; cursor:pointer; aspect-ratio: 4/3;
    box-shadow: var(--shadow); position:relative;
  }
  .gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.3s ease; }
  .gallery-item:hover img{ transform: scale(1.06); }
  .gallery-placeholder{
    border-radius: var(--radius-lg); aspect-ratio: 4/3; border:1.5px dashed var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    background: #fff; color: var(--navy-soft);
  }
  .gallery-placeholder .gp-icon{ font-size:1.8rem; opacity:0.5; }
  .gallery-placeholder .gp-text{ font-size:0.85rem; font-weight:600; }
  @media (max-width:900px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width:600px){ .gallery-grid{ grid-template-columns: minmax(0,1fr); } }

  /* ===== LIGHTBOX ===== */
  .lightbox{
    display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background: rgba(12,29,51,0.92); z-index: 2000;
    align-items:center; justify-content:center; padding: 40px; cursor:zoom-out; box-sizing:border-box;
  }
  .lightbox.open{ display:flex; }
  .lightbox img{ max-width:92vw; max-height:88vh; border-radius:12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
  .lightbox-close{
    position:absolute; top:22px; right:30px; color:#fff; font-size:2.4rem; font-weight:300;
    cursor:pointer; line-height:1; opacity:0.8;
  }
  .lightbox-close:hover{ opacity:1; }

  /* ===== USPEŠNOST STATS ===== */
  .stats-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; }
  .stat-big{ text-align:center; }
  .stat-big-num{ font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:3rem; font-weight:800; color: var(--mint); line-height:1; }
  .stat-big-lbl{ font-size:0.95rem; color: rgba(255,255,255,0.75); margin-top:10px; font-weight:600; max-width:22ch; margin-left:auto; margin-right:auto; }
  @media (max-width:700px){ .stats-grid{ grid-template-columns: minmax(0,1fr); gap:28px; } }

  /* ===== PRICE CARDS (Paketi i cene) ===== */
  .price-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:24px; max-width:920px; margin:0 auto; }
  .price-card{
    background:#fff; border:1.5px solid var(--line); border-radius: var(--radius-lg);
    padding:32px 28px; display:flex; flex-direction:column; box-shadow: var(--shadow);
  }
  .price-card.featured{ border-color: var(--orange); position:relative; }
  .price-card.featured::before{
    content:'Najpopularnije'; position:absolute; top:-13px; left:28px;
    background: var(--orange); color:#fff; font-size:0.72rem; font-weight:800;
    padding:4px 12px; border-radius:999px; letter-spacing:0.04em;
  }
  .price-card h3{ font-size:1.2rem; font-weight:700; }
  .price-card .price{ font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:2.6rem; font-weight:800; color:var(--navy); margin:10px 0 4px; }
  .price-card .price sup{ font-size:1.1rem; top:-1.2em; }
  .price-card .desc{ font-size:0.92rem; color:var(--navy-soft); margin-bottom:16px; }
  .price-card ul{ list-style:none; padding:0; margin:16px 0 24px; flex-grow:1; }
  .price-card li{ padding:7px 0; border-top:1px dashed var(--line); font-size:0.92rem; color:var(--navy-soft); display:flex; gap:8px; }
  .price-card li:first-child{ border-top:none; }
  .price-card li::before{ content:'✓'; color: var(--green); font-weight:800; }
  .discount-note{
    display:flex; align-items:center; gap:8px; background: rgba(29,167,90,0.1);
    border:1px solid rgba(29,167,90,0.3); border-radius:10px; padding:9px 12px; font-size:0.88rem; font-weight:700; color:var(--green);
  }
  .discount-badge{ background: var(--green); color:#fff; padding:2px 8px; border-radius:999px; font-size:0.78rem; font-weight:800; }
  @media (max-width:700px){ .price-grid{ grid-template-columns:minmax(0,1fr); } }
  .price-options-note{
    max-width:760px; margin:28px auto 0; background: var(--soft-bg); border-radius: var(--radius-lg);
    padding:18px 24px; font-size:0.92rem; color:var(--navy-soft); line-height:1.6; text-align:center;
  }
  .price-options-note a{ color:var(--orange); font-weight:700; }

  /* ===== TEAM PHOTO ===== */
  .team-photo-wrap{ max-width:820px; margin:0 auto; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); }
  .team-photo-wrap img{ width:100%; display:block; }

  /* ===== FAQ ===== */
  .faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
  .faq-item{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 22px; }
  .faq-item summary{
    cursor:pointer; font-weight:700; color:var(--navy); list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap:16px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:'+'; font-size:1.4rem; color:var(--orange); font-weight:400; flex-shrink:0; }
  .faq-item[open] summary::after{ content:'\2212'; }
  .faq-item p{ margin:12px 0 0; color:var(--navy-soft); font-size:0.95rem; line-height:1.65; }
  .faq-item p a{ color:var(--orange); font-weight:700; }

  /* ===== GUARANTEE BADGE ===== */
  .guarantee-badge{
    max-width:760px; margin:32px auto 0; background:#fff; border:1.5px dashed var(--green);
    border-radius: var(--radius-lg); padding:22px 26px; display:flex; gap:16px; align-items:flex-start;
  }
  .guarantee-badge .gb-icon{ font-size:1.8rem; flex-shrink:0; }
  .guarantee-badge strong{ color:var(--navy); font-size:1.05rem; }
  .guarantee-badge p{ margin:6px 0 0; color:var(--navy-soft); font-size:0.92rem; line-height:1.55; }

  .guarantee-badge-lg{
    max-width:820px; padding:34px 40px; gap:22px; border-width:2px; margin-top:44px;
  }
  .guarantee-badge-lg .gb-icon{ font-size:2.6rem; }
  .guarantee-badge-lg strong{ font-size:1.35rem; }
  .guarantee-badge-lg p{ font-size:1.05rem; }

  /* ===== KOMUNIKACIJA ===== */
  .comm-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:40px; max-width:1000px; margin:0 auto; }
  .comm-col h3{ font-size:1.15rem; font-weight:800; color:var(--navy); margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid var(--orange); }
  .comm-item{ margin-bottom:22px; }
  .comm-item:last-child{ margin-bottom:0; }
  .comm-item h4{ font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:6px; }
  .comm-item p{ font-size:0.92rem; color:var(--navy-soft); line-height:1.65; margin:0; }
  @media (max-width:700px){ .comm-grid{ grid-template-columns:minmax(0,1fr); gap:32px; } }

  /* ===== ONLINE NASTAVA ===== */
  .online-card{ max-width:820px; margin:0 auto; background:#fff; border-radius: var(--radius-lg); padding:36px 40px; box-shadow: var(--shadow); }
  .online-card p{ color:var(--navy-soft); font-size:1rem; line-height:1.7; margin:0 0 16px; }
  .online-card p:last-of-type{ margin-bottom:28px; }
  .online-card strong{ color:var(--navy); }
  .online-facts{ display:grid; grid-template-columns: repeat(2, 1fr); gap:18px; border-top:1px solid var(--line); padding-top:24px; max-width:420px; margin-left:auto; margin-right:auto; }
  .online-fact{ text-align:center; }
  .of-num{ display:block; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1.7rem; font-weight:800; color:var(--orange); }
  .of-lbl{ display:block; font-size:0.82rem; color:var(--navy-soft); margin-top:4px; }
  @media (max-width:600px){ .online-facts{ grid-template-columns:minmax(0,1fr); gap:14px; } .online-card{ padding:28px 24px; } }

  /* ===== ONLINE LINK (inline CTA to O nama online section) ===== */
  .online-link{ display:inline-block; margin-top:10px; font-size:0.88rem; font-weight:700; color:var(--orange); }
  .online-link:hover{ text-decoration:underline; }

  /* ===== BODOVANJE (points calculator) ===== */
  .points-calc{ display:grid; grid-template-columns: repeat(2, 1fr); gap:24px; max-width:920px; margin:0 auto; }
  .points-block{ background: var(--soft-bg); border-radius: var(--radius-lg); padding:28px 30px; }
  .points-block h3{ font-size:1.05rem; font-weight:700; color:var(--navy); margin-bottom:18px; }
  .points-block .pb-max{ font-weight:500; color:var(--navy-soft); font-size:0.85rem; }
  .points-inputs{ display:flex; flex-direction:column; gap:14px; }
  .points-inputs .form-group label{ font-size:0.85rem; font-weight:600; color:var(--navy); margin-bottom:4px; display:block; }
  .points-inputs .form-group input{
    width:100%; padding:10px 14px; border-radius:10px; border:1.5px solid var(--line);
    font-size:0.95rem; font-family:inherit; background:#fff;
  }
  .points-inputs .form-group input:focus{ outline:none; border-color: var(--orange); }
  .points-subtotal{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:0.92rem; color:var(--navy-soft); }
  .points-subtotal strong{ color:var(--orange); font-size:1.05rem; }
  .points-total{
    max-width:920px; margin:28px auto 0; background: var(--navy); color:#fff; border-radius: var(--radius-lg);
    padding:20px 28px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;
    font-size:0.95rem; font-weight:600;
  }
  .points-total .pt-plus, .points-total .pt-eq{ color: var(--mint); font-weight:800; }
  .points-total .pt-max{ color: var(--mint); font-weight:800; font-size:1.05rem; }
  @media (max-width:700px){ .points-calc{ grid-template-columns:minmax(0,1fr); } }

  /* ===== DAY LAYOUT (Kako izgleda jedan nastavni dan) ===== */
  .day-layout{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
  .day-schedule{ display:flex; flex-direction:column; gap:10px; }
  .day-step{
    background: var(--soft-bg); border-radius:14px; padding:16px 20px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .day-step .ds-time{ font-weight:800; color:var(--navy); font-size:0.9rem; }
  .day-step .ds-label{ color:var(--navy-soft); font-size:0.9rem; }
  .day-step.ds-break{ background:transparent; border:1.5px dashed var(--line); padding:10px 20px; }
  .day-step.ds-group{ background: linear-gradient(135deg, var(--mint), var(--sky)); }
  .day-step.ds-group .ds-time, .day-step.ds-group .ds-label{ color: var(--navy); }
  @media (max-width:900px){ .day-layout{ grid-template-columns:minmax(0,1fr); gap:28px; } }

  .izborni-note{
    max-width:820px; margin:40px auto 0; background: var(--soft-bg); border-radius: var(--radius-lg);
    padding:28px 32px; border-left:4px solid var(--orange);
  }
  .izborni-note h3{ font-size:1.05rem; font-weight:700; color:var(--navy); margin-bottom:10px; }
  .izborni-note p{ font-size:0.94rem; color:var(--navy-soft); line-height:1.65; margin:0; }

  /* ===== LOGO WATERMARK (bele sekcije) ===== */
  section[style*="background:#fff"]{ position:relative; overflow:hidden; }
  section[style*="background:#fff"]::before{
    content:"";
    position:absolute;
    top:28px; right:28px;
    width:220px; height:220px;
    background-image:url('assets/logo.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:0.09;
    pointer-events:none;
    z-index:0;
  }
  @media (max-width:900px){
    section[style*="background:#fff"]::before{ width:140px; height:140px; top:16px; right:16px; }
  }

  /* ===== SRPSKI RESURSI (rečnik + lektira) ===== */
  .resource-block{
    background: var(--soft-bg); border-radius: var(--radius-lg); padding:0;
    margin-bottom:16px; overflow:hidden;
  }
  .resource-block summary{
    cursor:pointer; list-style:none; padding:22px 26px; font-weight:700; color:var(--navy);
    display:flex; justify-content:space-between; align-items:center; font-size:1.02rem;
  }
  .resource-block summary::-webkit-details-marker{ display:none; }
  .resource-block .rb-count{ font-weight:500; color:var(--navy-soft); font-size:0.85rem; }
  .resource-block .rb-toggle{ font-size:0.92rem; color:var(--orange); font-weight:700; flex-shrink:0; white-space:nowrap; }
  .resource-block .rb-open-label{ display:none; }
  .resource-block[open] .rb-closed-label{ display:none; }
  .resource-block[open] .rb-open-label{ display:inline; }
  .resource-block[open] summary{ border-bottom:1px solid var(--line); }

  .glossary-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:10px 24px;
    padding:22px 26px 26px; max-height:520px; overflow-y:auto;
  }
  .g-term{ font-size:0.86rem; color:var(--navy-soft); line-height:1.5; }
  .g-term strong{ color:var(--navy); font-weight:700; }
  @media (max-width:900px){ .glossary-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width:600px){ .glossary-grid{ grid-template-columns: 1fr; max-height:420px; } }

  .lektira-table-wrap{ padding:0 26px 26px; overflow-x:auto; }
  .lektira-table{ width:100%; border-collapse:collapse; font-size:0.85rem; }
  .lektira-table th{
    text-align:left; padding:10px 12px; color:var(--navy); font-weight:700;
    border-bottom:2px solid var(--navy); white-space:nowrap;
  }
  .lektira-table td{ padding:9px 12px; color:var(--navy-soft); border-bottom:1px solid var(--line); }
  .lektira-table tr:hover td{ background: rgba(241,93,6,0.05); }
