/* ============================================================================
   SECURITY 360° — MOBILNI SLOJ
   Dopuna postojećih stranica, bez paralelne verzije sajta.
   Sve je zatvoreno u @media upite, pa desktop prikaz ostaje nepromenjen.
   Učitava se posle `site-navigation.css`. Oznake !important se koriste samo
   tamo gde stranica ima inline stil koji se drugačije ne može nadjačati.
   ========================================================================== */

/* -- 1. OSNOVA ----------------------------------------------------------- */

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* The document owns vertical scrolling, including Safari's page viewport. */
  html, body { height: auto !important; min-height: 100%; }
  body:not(.s360-menu-open) { overflow-x: clip !important; overflow-y: visible !important; }
  #dc-root, #dc-root > .sc-host { height: auto !important; min-height: 100dvh; }

  /* Zaglavlje je fiksno: naslov sekcije ne sme da završi ispod njega. */
  [id] { scroll-margin-top: 78px; }

  /* Slika nikad ne gura stranicu u širinu. */
  img, svg, video, canvas, iframe { max-width: 100%; }
}

/* -- 2. ZAGLAVLJE -------------------------------------------------------- */

@media (max-width: 1120px) {
  nav[style*="position: fixed"] {
    height: 62px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px;
  }
  nav[style*="position: fixed"] > a > img { height: 38px !important; }
  [data-r="burger"] {
    width: 46px !important; height: 46px !important;
    flex: 0 0 46px;
  }
}

@media (max-width: 380px) {
  nav[style*="position: fixed"] > a > img { height: 33px !important; }
}

/* -- 3. MOBILNI MENI ----------------------------------------------------- */

[data-site-menu="true"] {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
}

/* Grupisani meni: naslov grupe pa linkovi te grupe. */
.s360-menu-group {
  display: block;
  margin: 22px 0 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #C9A45C;
}
.s360-menu-links > .s360-menu-group:first-child { margin-top: 6px; }

[data-site-menu="true"] .s360-menu-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 11px 0 !important;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 19px !important;
  letter-spacing: -.01em;
  color: #E9E6DF;
  border-bottom: 1px solid rgba(233,230,223,.07);
}
[data-site-menu="true"] .s360-menu-link[aria-current="page"] { color: #E7CE96; }

/* Glavna akcija stoji na vrhu menija — dohvatljiva palcem, bez skrolovanja. */
.s360-menu-cta {
  display: grid;
  gap: 10px;
  margin: 0 0 4px;
}
.s360-menu-cta > a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 15px 18px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.s360-menu-cta > a.s360-cta-primary {
  background: linear-gradient(100deg, #C9A45C, #E7CE96);
  color: #05090F;
}
.s360-menu-cta > a.s360-cta-secondary {
  border: 1px solid rgba(201,164,92,.45);
  color: #E7CE96; font-weight: 500;
}

/* Telo sajta se ne pomera dok je meni otvoren. */
body.s360-menu-open { overflow: hidden !important; }

/* -- 4. RASPORED I ČITLJIVOST -------------------------------------------- */

@media (max-width: 768px) {
  /* Više kolona na telefonu otežava čitanje - sve ide u jednu. */
  section [style*="grid-template-columns: repeat(2"],
  section [style*="grid-template-columns: repeat(3"],
  section [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Dosledne bočne margine i jednak vertikalni ritam. Desktop razmaci od
     ~100 px po sekciji na telefonu prave prazne ekrane između sadržaja. */
  section {
    padding-left: 18px !important; padding-right: 18px !important;
    padding-top: 54px !important; padding-bottom: 54px !important;
  }

  /* Glavni tekst najmanje 16 px. Natpisi u monospace fontu (oznake sekcija,
     brojevi, kodovi) ostaju kakvi jesu - oni nisu tekst za čitanje. */
  section:not(.s360-consent) p:not([style*="JetBrains"]):not(.sim-small):not(.sim-disclaimer):not(.sim-fallback),
  article p:not([style*="JetBrains"]),
  section li:not([style*="JetBrains"]):not(.sim-small) {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* Sitne monospace oznake i uputstva (9-10 px na desktopu) na telefonu
     postaju čitljiva; ostaju oznake, ne postaju glavni tekst. */
  section p[style*="font-size: 9px"],
  section p[style*="font-size: 10px"],
  section span[style*="font-size: 9px"] {
    font-size: 12px !important;
    letter-spacing: .12em !important;
  }

  /* Naslovi se prilagođavaju širini bez neprirodnog lomljenja reči. */
  h1, h2, h3 { overflow-wrap: break-word; hyphens: none; }
  h1 { font-size: clamp(30px, 8.4vw, 44px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(25px, 6.8vw, 36px) !important; line-height: 1.16 !important; }
  h3 { font-size: clamp(19px, 5.2vw, 26px) !important; line-height: 1.24 !important; }

  /* Naslov sekcije ne treba da nosi desktop razmak do sadržaja. */
  section > div > div[data-reveal]:first-child { margin-bottom: 26px !important; }
}

/* -- 5. DODIRNE METE -----------------------------------------------------
   Vezano za način upravljanja, ne samo za širinu: telefon okrenut vodoravno
   je i dalje telefon, pa mete moraju ostati velike i na 812 px. */

@media (max-width: 940px), (pointer: coarse) {
  /* Samostalni linkovi i dugmad dobijaju punu dodirnu visinu.
     Linkovi unutar pasusa se ne diraju - tamo bi razmak kvario red teksta. */
  section > a, section > div a[style*="letter-spacing"],
  section button,
  footer a {
    min-height: 44px;
  }
  section a[style*="display: flex"],
  section a[style*="display: inline-flex"],
  section button[style*="display: flex"] { align-items: center; }

  /* Center the complete CTA label and arrow; reading links and navigation keep their layout. */
  section a[style*="display: flex"][style*="padding"],
  section a[style*="display: inline-flex"][style*="padding"],
  section button[type="submit"],
  section button[style*="background: linear-gradient"],
  .bp-button, .sim-primary, .sim-secondary, .sim-text-button,
  .tour-primary, .tour-secondary, .tour-text-button,
  .s360-menu-cta a, .s360-consent-actions button {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Tekstualni linkovi tipa "PROČITAJTE ANALIZU" su niski - dodaje se prostor. */
  section a[style*="letter-spacing"]:not([style*="padding"]) {
    display: inline-flex; align-items: center;
    padding-top: 13px !important; padding-bottom: 13px !important;
  }

  /* Naslov kartice, putanja i kontakt podaci su takođe dodirne mete. */
  h2 > a, h3 > a, h4 > a,
  a[href^="mailto:"], a[href^="tel:"],
  nav[aria-label="Putanja"] a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  nav[aria-label="Putanja"] { gap: 6px 10px !important; }

  /* Naslov teksta u kartici je i sam link — mora imati dodirnu visinu. */
  section a[style*="display: block"][style*="padding: 0px"] {
    min-height: 44px; padding-top: 6px !important; padding-bottom: 6px !important;
  }

  /* Povratak iz scene simulacije. */
  .sim-back { display: inline-flex; align-items: center; min-height: 44px; }
}

/* -- 6. FORME ------------------------------------------------------------ */

@media (max-width: 940px), (pointer: coarse) {
  /* Ispod 16 px iOS sam uvećava stranicu pri fokusu na polje. */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 52px;
  }
  textarea { min-height: 128px; }
  form label > span { font-size: 12px !important; line-height: 1.6 !important; }
  form label > span:not([style*="JetBrains"]) { font-size: 15px !important; }

  /* Polje na koje se kuca mora ostati iznad tastature. */
  input, select, textarea { scroll-margin-top: 92px; scroll-margin-bottom: 140px; }

  form [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  button[type="submit"] { width: 100%; min-height: 56px; }
}

/* Greška se ne označava samo bojom. */
.s360-field-error {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: #F0A5A5;
}
.s360-field-error::before { content: '!'; flex: 0 0 auto; font-weight: 700; }
[aria-invalid="true"] { border-color: #C96A6A !important; }

/* -- 7. POČETNA ---------------------------------------------------------- */

@media (max-width: 900px) {
  /* Ukrasna 3D grafika na telefonu izlazi iz ekrana i potiskuje poruku.
     Uzrok se uklanja, ne sakriva: element se ne prikazuje, a three.js se
     na tim širinama uopšte ne učitava (vidi initThree na početnoj). */
  [data-r="hero-art"] { display: none !important; }

  section[data-r="hero"] {
    min-height: 0 !important;
    padding-top: 100px !important;
    padding-bottom: 56px !important;
  }
  [data-r="scroll-hint"] { display: none !important; }

  /* Dve akcije, jedna ispod druge, obe pune širine. */
  [data-r="hero"] div[style*="flex-wrap: wrap"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  [data-r="hero"] a[href="Risk Check.dc.html"],
  [data-r="hero"] a[href="Security 360 Zakazivanje.dc.html"] {
    justify-content: center; min-height: 56px; padding: 16px 20px !important;
  }
}

/* -- 6b. UKRASI KOJI NA TELEFONU SAMO ZAUZIMAJU EKRAN ---------------------
   Ništa od sadržaja se ne gubi: uklanja se samo ono što na malom ekranu
   nema šta da pokaže, a troši ekran i bateriju. */

@media (max-width: 768px) {
  /* Faze imaju čitljiv broj i miran prsten; aktivna faza posvetli pri skrolovanju. */
  [data-r="tl-step"] > div:first-child {
    width: clamp(112px, 30vw, 128px) !important; height: auto !important;
    border-color: rgba(231,206,150,.75) !important;
    background: radial-gradient(circle at 36% 28%, #65502e 0%, #25251f 40%, #0b1320 76%) !important;
    box-shadow: 0 0 0 5px rgba(201,164,92,.07), 0 0 30px rgba(201,164,92,.15), inset 0 0 26px rgba(201,164,92,.1) !important;
    margin-bottom: 24px !important;
  }
  [data-r="tl-step"] > div:first-child > span:last-child { font-size: 44px !important; color: #FFF0CC !important; text-shadow: 0 0 18px rgba(231,206,150,.45); }
  [data-r="tl-step"].is-active > div:first-child {
    background: radial-gradient(circle at 36% 28%, #84612f 0%, #403522 42%, #111923 78%) !important;
    border-color: #E7CE96 !important;
    box-shadow: 0 0 0 6px rgba(201,164,92,.12), 0 0 42px rgba(201,164,92,.25), inset 0 0 28px rgba(231,206,150,.12) !important;
  }
  [data-r="tl-step"].is-active > div:first-child > span:last-child {
    color: #FFF0CC !important; text-shadow: 0 0 24px rgba(201,164,92,.5);
  }
  [data-r="tl-step"] > div:first-child > span:not(:last-child) { display: none !important; }
  [data-r="tl-line"] { display: none !important; }

  /* Dekorativni prstenovi oko kruga usluga — na telefonu se ionako ne vide. */
  #usluge [data-r="wheel-stage"] > div:nth-child(2),
  #usluge [data-r="wheel-stage"] > div:nth-child(3) { display: none !important; }

  /* „Slepe tačke" na početnoj: natpis preko scene ponavlja tekst iz kartice
     odmah ispod, a na uskom ekranu se preklapa sa tačkama. Ostaju tačke. */
  #blindspot div[style*="place-items: center"][style*="pointer-events: none"] {
    display: none !important;
  }
  #blindspot div[style*="aspect-ratio: 16 / 11"] {
    aspect-ratio: 4 / 3 !important;
  }
}

/* -- 7b. O NAMA: animacija kruga se na telefonu ne prikazuje ---------------
   Sekcija `#pristup` je visoka 520vh: na telefonu to je pet ekrana skrolovanja
   kroz animaciju koja nosi 250 slova teksta, a oznake oko kruga ionako izlaze
   iz kadra. Isti put — od signala do odluke — odmah ispod stoji u sekciji
   „Od signala do odluke", u sedam koraka koji se otvaraju dodirom. Zato se
   animacija na telefonu ne prikazuje, a nijedna poruka se ne gubi. */

@media (max-width: 768px) {
  #pristup { display: none !important; }
}

/* Krug usluga na telefonu već prelazi u kartice; polje za izbor mora biti 16 px. */
@media (max-width: 768px) {
  #usluge .wheel-mobile-picker select { font-size: 16px !important; }
}

/* -- 8. SIMULACIJE ------------------------------------------------------- */

@media (max-width: 768px) {
  .sim-shell { margin-top: 82px !important; }

  /* Kadar se ne seče ni na jednoj širini: `.sim-viewport` već drži odnos 3:2,
     isti kao fotografije (1536 x 1024), pa oznake u procentima ostaju na mestu. */

  /* Dodirne tačke su veće i uočljivije. */
  .sim-hotspot { min-width: 48px !important; min-height: 48px !important; }
  .sim-ring { width: 30px !important; height: 30px !important; }
  .sim-hotspot[data-state=unknown] { opacity: .58; }
  .sim-hotspot[data-state=unknown] .sim-ring { width: 24px !important; height: 24px !important; }
  .sim-hotspot.is-selected .sim-ring {
    box-shadow: 0 0 0 6px rgba(201,164,92,.22), 0 0 0 7px currentColor;
  }

  /* Details expand in the page; a swipe never gets trapped inside a second scrollbar. */
  .sim-panel, .tour-panel {
    max-height: none; overflow: visible; overscroll-behavior: auto;
    scroll-margin-top: 82px;
  }
  .sim-shell, .tour-shell { overflow-anchor: none; }
  .sim-panel p { font-size: 16px !important; line-height: 1.7 !important; }
  .sim-heading p { font-size: 16px !important; }
  .sim-steps li { font-size: 15.5px !important; line-height: 1.65 !important; }
  .sim-small { font-size: 14.5px !important; line-height: 1.7 !important; }
  .sim-option { font-size: 15.5px !important; min-height: 56px; }
  /* Natpis stoji preko fotografije: povećava se koliko sme, da ne pokrije kadar. */
  .sim-stamp > p { font-size: 13.5px !important; line-height: 1.55 !important; }

  .sim-back { display: inline-flex; align-items: center; min-height: 44px; }
  .sim-bottom { flex-wrap: wrap; gap: 10px; }
  .sim-bottom .sim-secondary { flex: 1 1 42%; }

  /* Spisak tačaka ispod scene: na telefonu jedna ispod druge, bez bočnog skrola. */
  .sim-points { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  .sim-point { flex: none !important; min-height: 64px; }
}

/* Uputstvo za dodir - prikazuje se na uređaju bez pokazivača. */
.sim-touch-hint { display: none; }
@media (hover: none) {
  .sim-touch-hint {
    display: block; margin: 12px 0 0;
    font-size: 15px; line-height: 1.6; color: #C9A45C;
  }
}

/* -- 9. RISK CHECK ------------------------------------------------------- */

@media (max-width: 768px) {
  /* „Prethodno“ i „Dalje“ stoje jedno pored drugog i dohvatljivi su palcem;
     brojač koraka ide u red ispod, preko cele širine. */
  [data-r="rc-nav"] { gap: 10px !important; }
  [data-r="rc-nav"] > button {
    flex: 1 1 42%; justify-content: center;
    min-height: 54px; padding-left: 12px !important; padding-right: 12px !important;
  }
  [data-r="rc-nav"] > span {
    flex: 1 0 100%; margin-left: 0 !important; text-align: center; padding-top: 4px;
  }
}

/* -- 9b. DONJE AKCIJE --------------------------------------------------- */

@media (max-width: 1120px) {
  [data-r="stickybar"] {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width: 768px) {
  body:has([data-r="stickybar"]) .site-footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }
}

/* -- 10. PODNOŽJE -------------------------------------------------------- */

@media (max-width: 940px), (pointer: coarse) {
  .site-footer [data-r="foot"] a,
  footer a { min-height: 44px !important; display: flex; align-items: center; }
}

/* -- 11. SMANJENO KRETANJE ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -- 12. FOKUS ----------------------------------------------------------- */

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #E7CE96;
  outline-offset: 2px;
}

/* Mobile navigation: fixed header/tabs/actions, independently scrolling links. */
@media (max-width: 1120px) {
  [data-site-menu="true"][data-s360-menu="spreman"] {
    height: 100dvh; box-sizing: border-box; overflow: hidden !important;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom)) !important;
    background: radial-gradient(ellipse at top right, rgba(201,164,92,.08), transparent 55%), #05090f !important;
  }
  [data-site-menu="true"] > div:first-child { height: 54px !important; margin-bottom: 18px !important; }
  [data-site-menu="true"] > div:first-child img { height: 42px !important; }
  .s360-menu-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .s360-menu-tabs { display: flex; flex: 0 0 auto; gap: 6px; padding: 5px; margin-bottom: 12px; border: 1px solid rgba(201,164,92,.22); background: rgba(255,255,255,.025); }
  .s360-menu-tabs button {
    flex: 1; min-height: 46px; border: 0; background: transparent; color: #9AA6B7;
    font: 600 13px 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  }
  .s360-menu-tabs button[aria-selected="true"] { background: linear-gradient(100deg, #C9A45C, #E7CE96); color: #05090f; }
  .s360-menu-links { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 3px 12px; scrollbar-width: thin; scrollbar-color: #665332 transparent; }
  .s360-menu-links[hidden] { display: none !important; }
  [data-site-menu="true"] .s360-menu-link { min-height: 48px; font-size: 17px !important; line-height: 1.3; gap: 16px; }
  .s360-menu-link::after {
    content: ''; margin-left: auto; flex: 0 0 14px; width: 14px; height: 14px;
    background: #C9A45C;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M4 4h8v8' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M4 4h8v8' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .s360-menu-group { margin-top: 18px; }
  [data-site-menu="true"] .s360-menu-cta {
    flex: 0 0 auto; margin: 12px 0 0 !important; padding-top: 14px !important;
    border-top: 1px solid rgba(233,230,223,.1); gap: 8px;
  }
  [data-site-menu="true"] .s360-menu-cta > a { min-height: 50px; box-sizing: border-box; padding: 13px 12px !important; font-size: 11.5px !important; }
}
@media (max-height: 600px) and (max-width: 1120px) {
  [data-site-menu="true"] .s360-menu-cta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-site-menu="true"] > div:first-child { margin-bottom: 8px !important; }
}

.s360-carousel-controls { display: none; }
.s360-gold-icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.16em; color: #E7CE96; flex-shrink: 0; }
.scene-action .s360-gold-icon, .focus-arrow .s360-gold-icon { width: 22px; height: 22px; }
.sim-primary, .tour-primary { background: linear-gradient(110deg, #242015, #0b121c) !important; color: #E7CE96 !important; border: 1px solid #C9A45C !important; }
@media (max-width: 768px) {
  [data-mobile-hide="security-profile"] { display: none !important; }
  section#top[data-r="hero"] > div:nth-child(2) { text-align: center; margin-inline: auto; width: 100%; }
  section#top[data-r="hero"] > div:nth-child(2) > div { justify-content: center; }
  section#top[data-r="hero"] > div:nth-child(2) > p { margin-left: auto !important; margin-right: auto !important; }
  section#top[data-r="hero"] > div:nth-child(2) > div:first-child { font-size: 10px !important; letter-spacing: .16em !important; gap: 8px !important; }
  section#top[data-r="hero"] > div:nth-child(2) > div:first-child > span { width: 18px !important; flex-shrink: 0; }
  section [data-s360-carousel="true"] {
    display: grid !important; grid-template-columns: none !important;
    grid-auto-flow: column !important; grid-auto-columns: 100% !important;
    gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important;
    max-width: 100%; min-width: 0; padding-bottom: 12px;
    scroll-snap-type: x mandatory; scroll-padding-inline: 0;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; background: transparent !important; border: 0 !important;
    margin-bottom: 0 !important;
  }
  section [data-s360-carousel="true"] > * {
    min-width: 0; max-width: 100%; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always;
    overflow-wrap: break-word;
  }
  section [data-s360-carousel="true"]::-webkit-scrollbar { display: none; width: 0; height: 0; }
  section [data-s360-carousel="true"]::-webkit-scrollbar-thumb { background: #C9A45C; }
  section [data-s360-carousel="true"]::-webkit-scrollbar-track { background: rgba(233,230,223,.08); }
  .s360-carousel-controls { display: flex; align-items: center; gap: 8px; margin: 12px 0 26px; color: #9AA6B7; }
  .s360-carousel-hint { margin-right: auto; font: 12px 'Space Grotesk', sans-serif; }
  .s360-carousel-count { font: 11px 'JetBrains Mono', monospace; color: #C9A45C; margin-right: 6px; }
  .s360-carousel-controls button {
    width: 44px; min-height: 44px; padding: 0; border: 1px solid rgba(201,164,92,.35);
    color: #E7CE96; background: rgba(201,164,92,.04); font-size: 20px; cursor: pointer;
  }
  .s360-carousel-controls button:disabled { opacity: .3; cursor: default; }
}

@media (max-width: 768px) {
  #usluge [data-r="wheel-panel"], #usluge .wheel-mobile-picker { min-width: 0; max-width: 100%; }
  #usluge .wheel-mobile-picker select { width: 100%; max-width: 100%; box-sizing: border-box; }
  section .bp-signals[data-s360-carousel] > span { white-space: normal; padding: 16px !important; border: 1px solid rgba(201,164,92,.22); line-height: 1.5; }
}
@media (max-width: 768px) {
  #usluge [data-r="wheel-stage"] { min-width: 0; max-width: 100% !important; overflow: hidden !important; }
}
/* About page: a visible mark, paired rows stacked, and unobtrusive swiping. */
@media (max-width: 768px) {
  [data-r="hero-mark"]:has([data-r="hero-mark-glow"]) {
    justify-self: center !important;
    max-width: 360px !important;
    margin-inline: auto !important;
  }
  [data-r="hero-mark-glow"] {
    opacity: .85 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  #o-nama-metod [data-r="cmp"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
    margin-bottom: 12px;
  }
  body:has(#o-nama-metod) section [data-s360-carousel="true"] {
    scrollbar-width: none !important;
  }
  body:has(#o-nama-metod) section [data-s360-carousel="true"]::-webkit-scrollbar {
    display: none;
    height: 0;
  }
}

/* Interactive blind spots: readable explanations outside the photo. */
.s360-offboarding-column{min-width:0;background:#05090F}
.s360-offboarding-scene .s360-offboarding-hotspot{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;min-height:44px!important;padding:0!important;border:0;background:transparent;cursor:pointer;z-index:2}
.s360-offboarding-hotspot>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #E7CE96;border-radius:50%;background:rgba(5,9,15,.94);color:#E7CE96;font:600 12px 'JetBrains Mono',monospace;box-shadow:0 0 0 4px rgba(5,9,15,.3)}
.s360-offboarding-hotspot[aria-pressed=true]>span{background:#E7CE96;color:#05090F;box-shadow:0 0 0 5px rgba(201,164,92,.3)}
.s360-offboarding-hotspot:focus-visible{outline:2px solid #E7CE96;outline-offset:0;border-radius:50%}
.s360-offboarding-detail{padding:24px;border-top:1px solid rgba(201,164,92,.35);background:#0B1420;color:#E9E6DF;scroll-margin-top:90px}
.s360-offboarding-detail>span{font:11px/1.6 'JetBrains Mono',monospace;letter-spacing:.1em;color:#E7CE96}
.s360-offboarding-detail h4{font:500 23px/1.3 'Space Grotesk',sans-serif;margin:12px 0;color:#E9E6DF}
.s360-offboarding-detail p{font:16px/1.7 Manrope,sans-serif;margin:12px 0;color:#D1D9E5}
.s360-offboarding-detail .s360-offboarding-action{padding-top:14px;border-top:1px solid rgba(233,230,223,.12)}
.s360-offboarding-action strong{color:#E7CE96}
.s360-offboarding-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:22px 18px;border-top:1px solid rgba(201,164,92,.2)}
.s360-offboarding-legend li{min-width:0}
.s360-offboarding-legend button{width:100%;height:100%;display:block;padding:16px!important;border:1px solid rgba(201,164,92,.25);background:#080F19;text-align:left!important;cursor:pointer;color:#E9E6DF}
.s360-offboarding-legend button[aria-pressed=true]{border-color:#E7CE96;background:#111D2C}
.s360-offboarding-legend button>span{display:block;font:10px/1.6 'JetBrains Mono',monospace;letter-spacing:.06em;color:#E7CE96}
.s360-offboarding-legend p{margin:8px 0 0;color:#D1D9E5;font:15px/1.6 Manrope,sans-serif}
@media(max-width:768px){
 .s360-offboarding-scene .s360-offboarding-hint{left:14px!important;right:14px;font-size:9px!important;line-height:1.6;letter-spacing:.1em!important}
 .s360-offboarding-detail{padding:22px 18px}
 .s360-offboarding-legend{grid-template-columns:1fr}
}

/* The menu stays scrollable, without link underlines, row rules or a visible bar. */
@media(max-width:1300px){
 [data-site-menu=true] .s360-menu-link{text-decoration:none!important;border-bottom:0!important;box-shadow:none!important}
 [data-site-menu=true] .s360-menu-cta{border-top:0!important}
 .s360-menu-links{scrollbar-width:none!important}
 .s360-menu-links::-webkit-scrollbar{display:none;width:0}
}
@media(max-width:768px){
 .site-footer{text-align:center}
 .site-footer a{text-decoration:none!important;text-align:center!important}
 .site-footer [data-r=foot-top]>div:first-child{justify-items:center!important;text-align:center!important}
 .site-footer [data-r=foot-top]>div:first-child>div{justify-content:center!important}
 .site-footer [data-r=foot] a{justify-content:center!important;width:100%}
 .site-footer .s360-footer-toggle{position:relative;justify-content:center!important;text-align:center!important;padding-inline:32px}
 .site-footer .s360-footer-toggle::after{position:absolute;right:0;top:50%;transform:translateY(-50%)}
 .site-footer .s360-footer-panel{justify-items:stretch;text-align:center}
 .site-footer.site-footer [data-r=foot-bottom]{align-items:center!important;justify-content:center!important;text-align:center!important}
 .site-footer .s360-footer-legal{align-items:center!important;text-align:center}
 .site-footer .s360-footer-legal-controls{width:100%}
}