.srOnly{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }

    :root{
      --bg:#0b1220;
      --card:#111a2e;
      --muted:#8fa3c8;
      --text:#eaf1ff;
      --accent:#7c5cff;
      --accent2:#22c55e;
      --danger:#ef4444;
      --border:rgba(255,255,255,.08);
      --shadow: 0 20px 60px rgba(0,0,0,.35);
      --radius:18px;
      --download:#38bdf8;
    }

    *{box-sizing:border-box}
    body{
      margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
      background: radial-gradient(1200px 700px at 80% -10%, rgba(124,92,255,.35), transparent 55%),
                  radial-gradient(900px 600px at 10% 0%, rgba(34,197,94,.25), transparent 55%),
                  var(--bg);
      color:var(--text);
    }
    a{color:inherit}
    .wrap{max-width:1100px; margin:0 auto; padding:22px}

    .topbar{
      display:flex; gap:12px; align-items:center; justify-content:space-between;
      padding:10px 0;
    }
    .brand{display:flex; align-items:center; gap:12px;}

    .logo{
      width:72px;
      height:72px;
      object-fit:contain;
      border-radius:16px;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.10);
      padding:6px;
      box-shadow: 0 10px 30px rgba(124,92,255,.25);
      display:block;
    }

    .brand h1{margin:0; font-size:18px; letter-spacing:.2px}
    .brand p{margin:3px 0 0; color:var(--muted); font-size:12px}

    .actions{display:flex; gap:10px; align-items:center}

    .btn{
      border:1px solid var(--border);
      background: rgba(255,255,255,.06);
      color:var(--text);
      padding:10px 12px; border-radius:14px;
      cursor:pointer; transition:.15s; font-weight:600;
    }
    .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09)}
    .btn.primary{
      border:none;
      background: linear-gradient(135deg, var(--accent), #2dd4bf);
      box-shadow: 0 10px 30px rgba(124,92,255,.25);
      color:#07101f;
    }

    .iconBtn{
      width:48px;
      height:48px;
      padding:0;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(8px);
      box-shadow: 0 10px 30px rgba(0,0,0,.28);
      cursor:pointer;
      transition:.15s;
    }
    .iconBtn:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.09);
    }

    .iconBtn.whatsappBtn{
      border-color: rgba(34,197,94,.45);
      background: rgba(34,197,94,.14);
    }

    .iconBtn.viberBtn{
      border-color: rgba(124,92,255,.45);
      background: rgba(124,92,255,.14);
    }

    .waIcon{
      width:30px;
      height:30px;
      display:block;
      object-fit:contain;
    }

    .hero{
      margin-top:10px;
      display:grid; gap:16px;
      grid-template-columns: 1.2fr .8fr;
      align-items:stretch;
    }
    @media (max-width:900px){ .hero{grid-template-columns:1fr} }

    .panel{
      background: rgba(255,255,255,.05);
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:18px;
      backdrop-filter: blur(8px);
    }

    .heroTitle{font-size:34px; margin:0 0 8px}
    .sub{margin:0 0 14px; color:var(--muted); line-height:1.7}

    .badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
    .badge{
      padding:9px 10px; border-radius:999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.04);
      color:var(--text);
      font-size:12px;
    }

    .grid{
      margin-top:16px;
      display:grid; gap:12px;
      grid-template-columns: repeat(4, 1fr);
    }
    @media (max-width:900px){ .grid{grid-template-columns: repeat(2, 1fr);} }
    @media (max-width:520px){ .grid{grid-template-columns: 1fr;} }

    .card{
      background: rgba(255,255,255,.04);
      border:1px solid var(--border);
      border-radius: var(--radius);
      padding:14px;
      transition:.15s;
      cursor:pointer;
      position:relative;
      overflow:hidden;
      min-height:130px;
    }
    .card:hover{transform: translateY(-2px); background: rgba(255,255,255,.06)}
    .card.active{outline:2px solid rgba(124,92,255,.7)}
    .card h3{margin:0 0 6px; font-size:16px}
    .card p{margin:0; color:var(--muted); font-size:12px; line-height:1.6}

    .tag{
      position:absolute; top:12px; left:12px;
      padding:6px 9px; border-radius:999px;
      background: rgba(124,92,255,.18);
      border:1px solid rgba(124,92,255,.35);
      font-size:11px; color:#d9d1ff;
    }

    .card.download .tag{
      background: rgba(56,189,248,.15);
      border-color: rgba(56,189,248,.35);
      color:#cfefff;
    }
    .card.download:hover{ outline:2px solid rgba(56,189,248,.35); }

    .formRow{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:12px}
    @media (max-width:520px){ .formRow{grid-template-columns:1fr} }

    label{display:block; font-size:12px; color:var(--muted); margin:2px 0 6px}
    input, select{
      width:100%; padding:12px 12px;
      border-radius:14px;
      background: rgba(0,0,0,.22);
      color:var(--text);
      border:1px solid var(--border);
      outline:none;
    }
	select option {
  background: #111a2e; /* Tamno plava/crna boja sa tvoje stranice */
  color: var(--text);  /* Svijetli tekst da se sve jasno vidi */
}
    input:focus, select:focus{border-color: rgba(124,92,255,.6)}
    .hint{font-size:12px; color:var(--muted); margin-top:8px; line-height:1.6}
    .error{color:var(--danger); font-size:12px; margin-top:8px; display:none}
    .ok{color: #86efac; font-size:12px; margin-top:8px; display:none}

    .ctaRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
    .btn.whatsapp{background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.35)}
    .btn.telegram{background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.35)}
    .btn.buy{background: rgba(255,255,255,.07)}
    .footer{margin:18px 0 6px; color:var(--muted); font-size:12px; text-align:center}
    .small{font-size:11px; opacity:.9}

    .prodIcon{
      width:60px; height:60px;
      border-radius:16px;
      background:#000;
      display:flex; align-items:center; justify-content:center;
      margin-bottom:10px;
      overflow:hidden;
      box-shadow: 0 6px 16px rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.08);
    }
    .prodIcon img{
      width:135%;
      height:135%;
      object-fit:cover;
      transform: translateY(2px);
    }

    .card.hyness .tag{
      background: rgba(34,197,94,.16);
      border-color: rgba(34,197,94,.35);
      color:#c8ffe0;
    }
	/* Prilagođavanje za mobilne telefone i manje ekrane */
    @media (max-width: 650px) {
      .topbar {
        flex-direction: column; /* Ređa logo i ikonice jedno ispod drugog */
        align-items: center;
        text-align: center;
        gap: 16px;
        padding: 10px 0 20px 0;
      }

      .brand {
        flex-direction: column; /* Stavlja logo iznad naslova na mobitelu */
        gap: 10px;
      }

      .brand h1 {
        font-size: 20px;
      }

      .brand p {
        font-size: 12px;
        max-width: 320px;
        margin: 4px auto 0 auto;
      }

      .actions {
        width: 100%;
        justify-content: center; /* Savršeno centrira sve 3 staklene ikonice i jezik */
        gap: 10px;
        flex-wrap: wrap; /* Ako zatreba, prebaciće ih u novi red bez kvarenja izgleda */
      }
      
      .logo {
        width: 64px;
        height: 64px;
      }
    }

    /* Static prices remain available without JavaScript. */
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero > .panel, .card { min-width: 0; }
    .card h3 { overflow-wrap: anywhere; }
    .licensePrices { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
    .licensePrices div { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:7px; flex-wrap:wrap; }
    .licensePrices dt { font-size:12px; color:var(--muted); }
    .licensePrices dd { margin:0; font-size:20px; font-weight:750; color:#86efac; white-space:nowrap; }
    .licensePrices dd span { font-size:11px; }
    .pricingSection { margin-top:24px; }
    .pricingSection h2 { margin-top:0; font-size:25px; }
    .pricingSection p { color:var(--muted); line-height:1.7; }
    .priceTable { width:100%; border-collapse:collapse; }
    .priceTable th,.priceTable td { padding:14px 10px; text-align:left; border-bottom:1px solid var(--border); }
    .priceTable thead { background:rgba(124,92,255,.13); }
    .priceTable tbody td { color:#86efac; font-weight:700; white-space:nowrap; }
    .priceTable th { font-size:14px; }
    .priceTable caption { text-align:left; color:var(--muted); padding-bottom:12px; font-size:13px; }
    .priceTable a { text-underline-offset:4px; }
    .pricingFaq { margin-top:24px; }
    .pricingFaq h3 { font-size:17px; margin-bottom:5px; }
    .pricingFaq p { margin-top:0; }
    .directContact { margin-top:20px; display:flex; gap:16px; flex-wrap:wrap; }
    :focus-visible { outline:2px solid #a99aff; outline-offset:4px; }
    @media(max-width:520px) {
      .grid { grid-template-columns:1fr; }
      .priceTable th,.priceTable td { padding:12px 5px; font-size:12px; }
      .pricingSection { padding:14px; }
    }
  
    .sectionNav { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 22px; }
    .sectionNav a { text-decoration:none; padding:9px 14px; border:1px solid var(--border); border-radius:999px; font-size:13px; }
    .sectionNav a:hover { background:rgba(124,92,255,.18); }
    .hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .heroTitle { font-size:clamp(26px,3vw,36px); line-height:1.2; }
    .heroPrices { display:flex; flex-wrap:wrap; gap:14px; margin:24px 0; }
    .heroPrices a { padding:14px 18px; border-radius:16px; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.25); font-size:25px; font-weight:750; text-decoration:none; }
    .heroPrices span { display:block; color:var(--muted); font-size:13px; margin-top:4px; }
    .catalogue { margin:32px 0 24px; }
    .catalogue > h2 { font-size:25px; }
    .catalogue .grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .card { padding:18px; }
    .card p.licenceTerm { margin-top:12px; color:#b8c8e6; font-size:12px; }
    .pricingFaq { padding-top:20px; }
    .faqItem { border-top:1px solid var(--border); padding:12px 0; }
    .pricingSection p { max-width:85ch; }
    [id] { scroll-margin-top:20px; }
    .btn,.iconBtn { min-height:44px; }
    @media(max-width:1000px) { .catalogue .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media(max-width:760px) { .hero { grid-template-columns:1fr; } }
    @media(max-width:520px) { .catalogue .grid { grid-template-columns:1fr; } .wrap { padding:16px; } }
    @media(prefers-reduced-motion:reduce) { * { transition:none !important; } }


/* Multilingual navigation and native FAQ accordion. */
.languageControl { display:flex; align-items:center; gap:8px; max-width:100%; }
.languageControl label { margin:0; }
.languageControl select { width:170px; max-width:100%; min-height:44px; cursor:pointer; }
.brandName { margin:0; font-size:18px; font-weight:700; }
.brand h1 { font-size:20px; }
.heroTitle { overflow-wrap:anywhere; }
.card { display:flex; flex-direction:column; }
.card .licensePrices { margin-top:auto; padding-top:14px; }
.card p { margin-bottom:12px; }
.card[aria-pressed="true"] { outline:2px solid #a99aff; }
.faqItem { padding:0; border:1px solid var(--border); border-radius:12px; margin:10px 0; background:rgba(255,255,255,.025); }
.faqItem summary { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 18px; font-weight:650; list-style:none; line-height:1.5; }
.faqItem summary::-webkit-details-marker { display:none; }
.faqItem summary::after { content:'+'; color:#b4a4ff; font-size:24px; flex-shrink:0; }
.faqItem[open] summary::after { content:'−'; }
.faqItem[open] summary { border-bottom:1px solid var(--border); }
.faqItem p { padding:16px 18px; margin:0; }
.languageLinks { display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center; margin:20px 0; }
.languageLinks a { font-size:12px; color:var(--muted); text-underline-offset:3px; }
.languageLinks a[aria-current="page"] { color:var(--text); font-weight:700; }
.priceTable { table-layout:fixed; }
.priceTable th,.priceTable td { overflow-wrap:anywhere; }
.priceTable tbody td { white-space:normal; }
.hero > .panel { min-width:0; }
.heroPrices a { font-size:24px; }
.heroPrices span { max-width:18ch; }
.serialStatus { min-height:1.5em; }
.iconBtn { color:var(--text); text-decoration:none; }
@media(max-width:650px) { .languageControl { flex-basis:100%; justify-content:center; } .topbar { gap:12px; } }
@media(max-width:420px) { .priceTable th,.priceTable td { font-size:12px; } .languageControl select { width:190px; } }