/* =========================================================
   FONTOVI — samostalno hostovani (od 2026-09-07)
   Ranije su Sora/Inter/JetBrains Mono dolazili sa Google Fonts CDN-a - to
   šalje IP adresu svakog posetioca Google-u samo zbog učitavanja fonta, bez
   njegove odluke o tome (nemački sud, LG München 2022, presudio da je to
   kršenje GDPR-a). Fajlovi ispod su preuzeti direktno sa fonts.gstatic.com
   (isti fajlovi koje bi Google servirao) i sad žive u assets/fonts/ - sajt
   više ne šalje nijedan zahtev ka Google-u za fontove.

   Samo "latin" i "latin-ext" podskupovi (ćirilica/grčki/vijetnamski
   isečeni - sajt ih nikad ne koristi). "latin-ext" nosi srpsku latinicu
   (č ć ž š đ, U+010D/0107/017E/0161/0111 - sve unutar opsega U+0100-02BA
   dole) - provereno merenjem širine znakova na canvas-u pre nego što su
   fajlovi uzeti u upotrebu, isti postupak kao pri prelasku sa Manrope/Open
   Sans na Sora/Inter.

   Sve tri familije se kod Google-a serviraju kao variable fontovi - JEDAN
   fajl po podskupu pokriva sve debljine (zato dole ima više @font-face
   blokova sa istim src, različitim font-weight - to je namerno, ne
   duplikat, isti obrazac koji koristi i sâm Google).
   ========================================================= */

/* Sora */
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono */
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================
   SkyHosting — design tokens
   ========================================================= */
:root{
  /* Brand colors — used for fills, borders, icons and other non-text marks. */
  --sky: #F3908C;
  --hosting: #61AFD0;
  --ink: #14202B;
  --paper: #ffffff;

  /* Deeper versions of the two brand hues. The brand pastels sit at ~2.2:1 on
     white, so they can't carry small text or white-on-colour buttons. These
     keep the hue and clear 4.5:1 both ways: as text on light, and as a fill
     under white text. */
  --sky-deep: #C0483F;      /* 4.95:1 vs white */
  --hosting-deep: #1E7BA6;  /* 4.73:1 vs white */

  /* Pricing-card accents, taken from the supplied palette. The palette tones
     are border-only: at 3.26:1, 2.83:1 and 1.91:1 they cannot carry white
     button text, so each has a deepened partner that can.
     The palette has no true green — its closest tone is mint (hue 177°),
     which deepened would sit ~15° from the blue and make two cards look
     alike, so the green is pulled to 164° to keep the three distinct. */
  --card-blue: #3F9AAE;   --card-blue-deep: #2F7C90;   --card-blue-hover: #266475;
  --card-red:  #F96E5B;   --card-red-deep:  #C2402C;   --card-red-hover:  #A33523;
  --card-green:#79C9C5;   --card-green-deep:#237A63;   --card-green-hover:#1C6250;

  /* Treći nivo za DV/OV/EV oznaku validacije na /ssl-sertifikati (vlasnik,
     2026-09-01): OV je narandžasta, EV plava (preuzima --hosting koji je pre
     toga nosio OV). --card-orange-deep je 5.04:1 na belom u oba smera - važi
     i kao tamniji tekst na svetloj podlozi i kao pozadina bedža sa belim
     tekstom. */
  --card-orange:#E8A03D; --card-orange-deep:#A15F12; --card-orange-hover:#7D4A0E;

  /* Large display text (>=24px) only needs 3:1, so the hero headline accent
     can stay nearer the airy brand blue. */
  --hosting-display: #4A96B8;

  --text-muted: #68727C;
  --border: #e4e9ec;
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ background:#e9edf0; }
body{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:#e9edf0;
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1, h2, h3, p{ margin:0; }

a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--hosting);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Vlasnik (2026-09-12) traži da SVI efekti na sajtu rade UVEK, bez obzira na
   OS podešavanje "manje pokreta" (prefers-reduced-motion). Prvo je izuzetak
   važio samo za 4 hero dekoracije; prošireno istog dana na ceo sajt (hover
   prelazi na dugmadima/karticama, exit-intent modal, autoplay testimonial
   karusela). Zato OVDE NEMA `@media (prefers-reduced-motion: reduce)`
   pravila koje bi gasilo animacije/tranzicije - namerno, ne izostavljeno.
   main.js ima paralelnu izmenu (reduceMotion promenljiva i njena upotreba
   za autoplay karusela su uklonjeni). Videti docs/brand-guidelines.md §6. */

.page-shell{
  max-width:1440px;
  margin:0 auto;
  background:#fff;
  box-shadow:0 0 60px -20px rgba(20,32,43,0.18);
  overflow:hidden;
}

/* =========================================================
   HEADER
   ========================================================= */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.site-header{
  background:#fff;
  border-bottom:1px solid #eef1f3;
  position:relative;
  z-index:20;
}
.header-inner{
  max-width:1160px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  height:64px;
}
.header-logo{ display:flex; align-items:center; flex-shrink:0; }
.header-logo svg{ height:22px; width:auto; }
.header-logo-fallback{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:17px;
  color:var(--ink);
}

.header-nav{ display:none; }
.header-phone{ display:none; }
.header-lang{ display:none; }

.header-actions{ display:flex; align-items:center; gap:8px; }
.header-cta{
  background:var(--ink);
  color:#fff;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12.5px;
  padding:9px 13px;
  border-radius:8px;
  white-space:nowrap;
  transition: background-color .15s ease;
}
.header-cta:hover{ background:#233442; }

/* Hamburger — shown below the desktop nav breakpoint */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  flex-shrink:0;
  padding:0;
  background:none;
  border:1px solid #e4e9ec;
  border-radius:8px;
  cursor:pointer;
}
.nav-toggle-bars{
  position:relative;
  display:block;
  width:17px; height:12px;
}
.nav-toggle-bars span{
  position:absolute;
  left:0;
  display:block;
  width:100%; height:2px;
  border-radius:2px;
  background:var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars span:nth-child(1){ top:0; }
.nav-toggle-bars span:nth-child(2){ top:5px; }
.nav-toggle-bars span:nth-child(3){ top:10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.mobile-nav{
  border-top:1px solid #eef1f3;
  background:#fff;
  padding:8px 16px 16px;
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav nav{ display:flex; flex-direction:column; }
.mobile-nav nav a{
  position:relative;
  font-family:'Sora', sans-serif;
  font-weight:600;
  font-size:15px;
  color:#3f4a54;
  padding:13px 4px;
  border-bottom:1px solid #f2f5f6;
  transition: color .15s ease;
}
/* Isti problem i ista popravka kao desktop meni - obična promena boje u
   --ink se nije dovoljno razlikovala od podrazumevane #3f4a54. Bez tinta u
   pozadini - --hosting-deep na #EAF4F8 pada na 4.23:1 (ispod AA za tekst ove
   veličine), na čistom belom je 4.73:1. */
.mobile-nav nav a.active{
  color:var(--hosting-deep);
  font-weight:700;
}
/* Traka se crta kao pseudo-element u levoj margini, NE kao border-left.
   Border bi ušao u kutiju linka i gurnuo tekst udesno (probano 2026-09-14:
   tekst je otišao na 31px dok logo i futer stoje na 16px), a providna traka
   na svim linkovima bi isto uvukla ceo spisak. Ovako padding ostaje
   netaknut - tekst je tačno tamo gde je i pre - a traka stoji levo od njega,
   u praznini koju .mobile-nav ionako ima kao padding. */
.mobile-nav nav a.active::before{
  content:"";
  position:absolute;
  left:-10px;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:2px;
  background:var(--hosting-deep);
}
.mobile-nav nav a:last-child{ border-bottom:none; }
.mobile-nav-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
  margin-top:6px;
  border-top:1px solid #eef1f3;
}
.mobile-nav-phone{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}
.mobile-nav-phone svg{ width:15px; height:15px; stroke:var(--hosting); stroke-width:2; fill:none; }
.mobile-nav-lang{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12.5px;
  color:var(--ink);
  border:1px solid #e4e9ec;
  border-radius:7px;
  padding:7px 12px;
}
.mobile-nav-lang:hover{ border-color:var(--hosting); color:var(--hosting-deep); }

@media (min-width:420px){
  .header-inner{ padding:0 20px; }
  .header-cta{ font-size:12.5px; padding:9px 15px; }
}

@media (min-width:1024px){
  .header-inner{ padding:0 20px; height:76px; }
  .header-logo svg{ height:26px; }
  .header-actions{ gap:12px; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
  .header-lang{
    display:inline-flex;
    align-items:center;
    font-family:'Sora', sans-serif;
    font-weight:700;
    font-size:12px;
    letter-spacing:0.04em;
    color:#4d5862;
    border:1px solid #e4e9ec;
    border-radius:6px;
    padding:6px 9px;
    transition: color .15s ease, border-color .15s ease;
  }
  .header-lang:hover{ color:var(--hosting-deep); border-color:var(--hosting); }
  .header-nav{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .header-nav a{
    font-family:'Sora', sans-serif;
    font-weight:600;
    font-size:13px;
    color:#4d5862;
    white-space:nowrap;
    /* Providna donja linija na SVAKOM linku (ne samo aktivnom) da bi visina
       kutije bila ista u oba stanja - da aktivni link ne bi bio viši/niži od
       ostalih i pomerao red kad se strana promeni.

       Gornji padding (6px) NAMERNO je jednak zbiru donjeg (4px) i debljine
       linije (2px). Bez njega je kutija linka niža odozgo nego odozdo, pa je
       align-items:center u .header-inner centrirao TU kutiju, a ne tekst -
       tekst je ispadao ~3px iznad logotipa, telefona i dugmeta u istom redu
       (vlasnik prijavio 2026-09-14, odmah po uvođenju linije). Ako se ikad
       promeni padding-bottom ili debljina linije, promeni i ovo. */
    padding-top:6px;
    padding-bottom:4px;
    border-bottom:2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
  }
  .header-nav a:hover{ color:var(--ink); }
  /* Aktivna strana, popravljeno 2026-09-14: sama promena boje u --ink (skoro
     ista tamna nijansa kao podrazumevana #4d5862) se gubila u čitanju -
     korisnik nije mogao pouzdano da vidi na kojoj je strani. Sad nosi
     brend-plavu (--hosting-deep, 4.73:1 na belom - prolazi AA) i podvučenu
     liniju iste boje, umesto samo nijanse sive. */
  .header-nav a.active{
    color:var(--hosting-deep);
    font-weight:700;
    border-bottom-color:var(--hosting-deep);
  }
  .header-phone{
    display:flex;
    align-items:center;
    gap:7px;
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    font-weight:600;
    color:var(--ink);
    white-space:nowrap;
  }
  .header-phone svg{ width:15px; height:15px; stroke:var(--hosting); stroke-width:2; fill:none; flex-shrink:0; }
  .header-cta{ padding:10px 16px; font-size:13px; white-space:nowrap; }
}

@media (min-width:1280px){
  .header-inner{ padding:0 24px; }
  .header-actions{ gap:18px; }
  .header-nav{ gap:34px; }
  .header-nav a{ font-size:14px; }
  .header-phone{ font-size:13px; }
  .header-cta{ padding:11px 20px; font-size:13.5px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  background:#FFF9F6;
  display:grid;
  grid-template-columns:1fr;
  position:relative;
}
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, #e8d9d4 15%, #e8d9d4 85%, transparent);
}
.hero-left{
  padding:56px 28px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-kicker{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sky-deep);
  margin-bottom:20px;
}
.hero h1{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:32px;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--ink);
  max-width:480px;
}
.hero h1 .accent{ color:var(--hosting-display); }
.hero p.lead{
  margin-top:20px;
  font-size:16.5px;
  line-height:1.65;
  color:#5f5450;
  max-width:420px;
  font-weight:300;
}
.hero-ctas{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}
.btn-primary{
  background:var(--ink);
  color:#fff;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:14.5px;
  padding:15px 26px;
  border-radius:9px;
  border:none; /* nema efekta na postojeće <a> upotrebe; potrebno otkad se koristi i na <button> (/ssl-alati) */
  display:inline-block;
  cursor:pointer;
  transition: background-color .15s ease;
}
.btn-primary:hover{ background:#233442; }
.btn-secondary{
  color:var(--ink);
  font-family:'Sora', sans-serif;
  font-weight:600;
  font-size:14.5px;
  padding:15px 18px;
  border-bottom:1.5px solid var(--ink);
  transition: color .15s ease, border-color .15s ease;
}
.btn-secondary:hover{ color:var(--hosting); border-color:var(--hosting); }
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:20px 28px;
  margin-top:44px;
}
.hero-meta-item .k{
  font-family:'Sora', sans-serif;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--sky-deep);
  font-weight:700;
}
.hero-meta-item .v{ font-size:13px; color:#6b6055; margin-top:3px; }

.hero-right{
  position:relative;
  background:linear-gradient(160deg, var(--hosting), #4C8FAE);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:40px;
  min-height:340px;
}
.hero-right::before{
  content:"";
  position:absolute;
  width:320px; height:320px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  top:-60px; right:-80px;
}

/* mini product widget */
.pw{
  position:relative;
  background:#fff;
  border-radius:16px;
  width:290px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.35);
  overflow:hidden;
}
.pw-head{
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #eef1f3;
}
.pw-head .t{ font-family:'Sora', sans-serif; font-weight:700; font-size:13px; color:var(--ink); }
.pw-status{
  display:flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  color:#1d7a49;
}
.pw-status .d{
  width:6px; height:6px; border-radius:50%;
  background:#2FAE6B;
  box-shadow:0 0 0 3px rgba(47,174,107,0.2);
  animation: pw-pulse 2.2s ease-out infinite;
}
@keyframes pw-pulse{
  0%   { box-shadow:0 0 0 0 rgba(47,174,107,0.45); }
  70%  { box-shadow:0 0 0 7px rgba(47,174,107,0); }
  100% { box-shadow:0 0 0 0 rgba(47,174,107,0); }
}
.pw-body{ padding:18px; }
.pw-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0;
  border-bottom:1px solid #f4f6f7;
  font-size:12.5px;
}
.pw-row:last-child{ border-bottom:none; }
.pw-row .l{ color:#68727c; }
.pw-row .v{ font-family:'JetBrains Mono', monospace; font-weight:600; color:var(--ink); }
.pw-bar{ height:6px; background:#eef1f3; border-radius:3px; overflow:hidden; width:70px; }
.pw-bar-fill{ height:100%; background:var(--hosting); border-radius:3px; }

/* PDV napomena ispod podnaslova cenovnika */
.pricing-vat{
  margin-top:10px;
  font-size:13px;
  color:var(--text-muted);
}
.pw-price{
  background:#FFF9F6;
  margin:0 -18px -18px;
  padding:16px 18px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.pw-price .amt{ font-family:'Sora', sans-serif; font-weight:800; font-size:20px; color:var(--ink); }
.pw-price .per{ font-size:11px; color:#68727c; }
.pw-price .cta{
  background:var(--sky-deep);
  color:#fff;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:11.5px;
  padding:8px 14px;
  border-radius:7px;
  transition: filter .15s ease;
}
.pw-price .cta:hover{ filter:brightness(1.1); }

@media (min-width:1024px){
  .hero{
    grid-template-columns:1.05fr 1fr;
    min-height:580px;
  }
  .hero-left{ padding:80px 56px 64px 64px; }
  .hero h1{ font-size:46px; }
  .hero-meta{ margin-top:52px; }
}

/* =========================================================
   PROVERA DOMENA (traka ispod hero sekcije)
   ========================================================= */
.domain-band{
  background:var(--ink);
  padding:28px 20px;
}
.db-inner{
  max-width:1160px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.db-copy h2{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:20px;
  line-height:1.25;
  color:#fff;
  margin-bottom:6px;
}
.db-copy p{
  font-size:13.5px;
  line-height:1.6;
  color:#AEBAC4; /* 6.6:1 na --ink */
}
.db-badge{ margin-top:14px; }
/* Namerno neprimetan link - isti kao okolni tekst, boja samo na hover */
.db-quiet-link{ color:inherit; }
.db-quiet-link:hover{ color:var(--hosting); }

/* Input and button sit flush inside one white frame — the frame is the
   container's own padding, which is what makes the pair stand out against
   the dark band. */
.db-form{
  display:flex;
  align-items:center;
  gap:0;
  background:#fff;
  border:3px solid #fff;
  border-radius:12px;
  padding:0;
  overflow:hidden;
}
.db-form input[type="text"]{
  flex:1 1 auto;
  min-width:0;
  height:46px;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:15px;
  color:var(--ink);
  background:#fff;
  border:none;
  border-radius:9px 0 0 9px;
  padding:0 14px;
}
.db-form input[type="text"]::placeholder{ color:#7C868F; opacity:1; }
/* Focus ring goes on the frame, not the bare input, so it wraps the whole
   control instead of drawing a line between input and button. */
.db-form input[type="text"]:focus{ outline:none; }
.db-form:focus-within{
  outline:2px solid var(--hosting);
  outline-offset:2px;
}
.db-submit{
  flex:0 0 auto;
  height:46px;
  padding:0 22px;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:14.5px;
  color:#fff;
  background:var(--sky-deep);
  border:none;
  border-radius:0 9px 9px 0;
  cursor:pointer;
  white-space:nowrap;
  transition: filter .15s ease;
}
.db-submit:hover{ filter:brightness(1.1); }

@media (min-width:768px){
  .domain-band{ padding:30px 24px; }
  .db-form input[type="text"]{ height:50px; }
  .db-submit{ height:50px; padding:0 28px; }
}
@media (min-width:1024px){
  .db-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:40px;
  }
  /* flex-basis fiksiran na 480px umesto "auto", da bi tekst pouzdano prelamao
     u okviru te širine - "auto" bi izračunao osnovu iz NEPRELOMLJENE dužine
     pasusa, pa bi duži tekst (npr. engleska verzija sa dodatnom rečenicom o
     rezidentstvu) gurnuo formu za pretragu na svega ~300px i stisnuo je,
     otkriveno 2026-09-14 na en/index.php. Srpski tekst je kraći i ionako
     staje u 480px bez štete. */
  .db-copy{ flex:0 1 480px; }
  .db-form{ flex:1 1 340px; max-width:460px; }
}

/* =========================================================
   VODIČ — kako izabrati hosting
   ========================================================= */
.criteria{
  padding:56px 20px 60px;
  background:#fff;
  border-top:1px solid #eef1f3;
}
.criteria-head{
  max-width:640px;
  margin:0 auto 40px;
  text-align:center;
}
.criteria-kicker{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sky-deep);
  margin-bottom:14px;
}
.criteria-head h2{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:26px;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-bottom:12px;
}
.criteria-head > p{
  font-size:15px;
  line-height:1.65;
  color:var(--text-muted);
}
.criteria-grid{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:26px 32px;
  counter-reset: crit;
}
.criteria-grid li{ counter-increment: crit; }
.criteria-grid h3{
  display:flex;
  align-items:baseline;
  gap:9px;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:15.5px;
  color:var(--ink);
  margin-bottom:7px;
}
.criteria-grid h3::before{
  content: counter(crit, decimal-leading-zero);
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  font-weight:600;
  color:var(--hosting-deep);
  flex-shrink:0;
}
.criteria-grid p{
  font-size:13.5px;
  line-height:1.65;
  color:var(--text-muted);
  padding-left:29px;
}

@media (min-width:768px){
  .criteria{ padding:64px 24px 68px; }
  .criteria-grid{ grid-template-columns:1fr 1fr; }
  .criteria-head h2{ font-size:30px; }
}
@media (min-width:1024px){
  .criteria{ padding:76px 32px 80px; }
  .criteria-grid{ grid-template-columns:repeat(4, 1fr); }
}

/* =========================================================
   PREDNOSTI
   ========================================================= */
.benefits{
  padding:48px 24px;
  position:relative;
  box-shadow: inset 0 8px 16px -14px rgba(20,32,43,0.15);
}
.benefits-head{ max-width:520px; margin-bottom:40px; }
.benefits-kicker{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sky-deep);
  margin-bottom:14px;
}
.benefits-head h2{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:26px;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.benefits-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.b-card h3{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:16px;
  margin:18px 0 8px;
  color:var(--ink);
}
.b-card p{ font-size:13.5px; line-height:1.6; color:var(--text-muted); }
.icon{ width:30px; height:30px; }
.icon svg{
  width:30px; height:30px;
  stroke-width:1.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon.hosting svg{ stroke:var(--hosting); }
.icon.sky svg{ stroke:var(--sky); }
.icon.ink svg{ stroke:var(--ink); }
.icon.grey svg{ stroke:#78838d; }

/* cPanel wordmark (includes/cpanel-logo.php) je širi logo (viewBox
   1136x240), ne kvadratna ikonica kao ostale u .benefits-grid - zato
   dobija svoju širinu/visinu umesto deljenog .icon{width:30px} pravila.
   Mora se prepisati ŠIRINA i na .icon i na svg - inače img,svg{max-width:
   100%} (na vrhu ovog fajla) vraća svg nazad na širinu roditelja.

   Kontejner ipak drži istu VISINU (30px) kao ostale ikone i centrira
   uži logo (~19px) unutar nje flexbox-om - inače je margina .b-card
   h3{margin-top:18px} kolabirala sa razlikom u visini kontejnera, pa je
   "cPanel platforma" naslov ispadao bliže logu nego kod ostale tri
   kartice. */
.icon.cpanel-logo{ width:90px; height:30px; display:flex; align-items:center; }
.icon.cpanel-logo svg{ width:90px; height:auto; display:block; }

@media (min-width:768px){
  .benefits-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (min-width:1024px){
  .benefits{ padding:72px 64px 76px; }
  .benefits-head{ margin-bottom:52px; }
  .benefits-head h2{ font-size:32px; }
  .benefits-grid{ grid-template-columns:repeat(4, 1fr); }
}

/* =========================================================
   RNIDS badge (shared: pricing card + footer)
   ========================================================= */
.rnids-badge{ display:inline-flex; align-items:center; gap:14px; }
.rnids-badge .marks{ display:flex; align-items:center; }
.rnids-badge svg{ display:block; }
.rnids-badge .divider{ width:1px; height:30px; background:#dfe4e7; }
/* On the dark footer the official navy .срб mark would disappear, so the marks
   sit on a white chip. RNIDS colours themselves must not be altered. */
.on-dark .rnids-badge .marks{
  background:#fff;
  border-radius:6px;
  padding:5px 7px;
}
.rnids-badge .text{ font-family:'Sora', sans-serif; line-height:1.25; }
.rnids-badge .text .l1{ font-size:12px; font-weight:700; color:var(--ink); }
.rnids-badge .text .l2{ font-size:10.5px; color:#68727c; }

/* =========================================================
   CENOVNIK
   ========================================================= */
.pricing{
  padding:48px 24px;
  position:relative;
  background:
    linear-gradient(#FBFCFD, #FBFCFD),
    repeating-linear-gradient(135deg, #eef2f4 0px, #eef2f4 1px, transparent 1px, transparent 14px);
}
.pricing::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--sky), var(--hosting));
}
.pricing-head{ text-align:center; max-width:560px; margin:0 auto 40px; }
.pricing-kicker{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sky-deep);
  margin-bottom:14px;
}
.pricing-head h2{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:26px;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-bottom:12px;
}
.pricing-head p{ font-size:15px; color:var(--text-muted); line-height:1.6; }

.pricing-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
.p-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:30px 26px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden; /* clips the cloud art to the rounded corners */
  transition: transform .18s ease, box-shadow .18s ease;
}
.p-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px -18px rgba(20,32,43,0.28);
}

/* Per-package colour. Each card owns one hue via --accent/--accent-deep, so
   the border, category label, tick marks and button stay in step and only
   these three rules below need to know which card is which. */
/* --cloud is optional: when a card doesn't set it, the clouds fall back to
   --accent. Hosting and SSL set it because their cloud tone is deliberately
   not the same as their button. */
/* Border is a light tint of the same navy as the button, at the same visual
   weight as the coral border on the VPS card (2.85 vs 2.83 against white). */
.p-card--hosting{ --accent:#8098D6; --accent-deep:#192A56; --accent-hover:#24396E; --cloud:#2E4B8F; }
.p-card--vps    { --accent: var(--card-red);   --accent-deep: var(--card-red-deep);   --accent-hover: var(--card-red-hover); }
.p-card--ssl    { --accent: var(--card-green); --accent-deep: var(--card-green-deep); --accent-hover: var(--card-green-hover); --cloud:#55E6C1; }
/* .rs domen kartica na engleskoj početnoj (en/index.php), dodato 2026-09-13.
   --card-blue je isti token kojim registracija-domena.php već boji bedž
   "Nacionalni" u cenovniku domena (.tldp-tag) - .rs domen ovde i tamo nosi
   istu boju umesto nove, izmišljene. */
.p-card--domain { --accent: var(--card-blue);  --accent-deep: var(--card-blue-deep);  --accent-hover: var(--card-blue-hover); }

/* Cloud art, lower third of the card. The faintest layer reaches highest and
   the stronger ones stay low around the button — if every layer were strong
   across the full height, the feature text would drop to about 3:1. */
.card-art{
  position:absolute;
  left:0; right:0; bottom:0;
  height:36%;
  pointer-events:none;
  z-index:0;
  line-height:0;
}
.card-art svg{ display:block; width:100%; height:100%; }
.p-card > *:not(.card-art){ position:relative; z-index:1; }
.c-far { fill:var(--cloud, var(--accent)); opacity:.16; }
.c-mid { fill:var(--cloud, var(--accent)); opacity:.26; }
.c-near{ fill:var(--cloud, var(--accent)); opacity:.40; }

.p-card--hosting,
.p-card--vps,
.p-card--ssl,
.p-card--domain{ border-color: var(--accent); }

.p-card--hosting .p-category,
.p-card--vps .p-category,
.p-card--ssl .p-category,
.p-card--domain .p-category{ color: var(--accent-deep); }

.p-card--hosting .p-features li svg,
.p-card--vps .p-features li svg,
.p-card--ssl .p-features li svg,
.p-card--domain .p-features li svg{ stroke: var(--accent-deep); }

/* Button carries the card colour and deepens on hover — a black button under
   a coloured border reads as two unrelated pieces. */
.p-card--hosting .p-cta.primary,
.p-card--vps .p-cta.primary,
.p-card--ssl .p-cta.primary,
.p-card--domain .p-cta.primary{ background: var(--accent-deep); color:#fff; }

.p-card--hosting .p-cta.primary:hover,
.p-card--vps .p-cta.primary:hover,
.p-card--ssl .p-cta.primary:hover,
.p-card--domain .p-cta.primary:hover{ background: var(--accent-hover); }
.p-card.featured{
  border:2px solid var(--sky);
  position:relative;
  box-shadow:0 20px 40px -18px rgba(243,144,140,0.35);
  order:-1;
}
.p-card.featured:hover{
  box-shadow:0 26px 48px -18px rgba(243,144,140,0.45);
}
.p-badge{
  position:absolute;
  top:-11px; left:26px;
  background:var(--sky);
  color:var(--ink); /* ink not white: white on the coral fill is only 2.3:1 */
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:10.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:100px;
}
.p-category{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--hosting-deep);
  margin-bottom:10px;
}
.p-card.featured .p-category{ color:var(--sky-deep); }
.p-name{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:19px;
  color:var(--ink);
  margin-bottom:16px;
}
.p-from{
  font-family:'Sora', sans-serif;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#68727c;
  margin-bottom:2px;
}
.p-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.p-price .amt{ font-family:'Sora', sans-serif; font-weight:800; font-size:30px; color:var(--ink); }
.p-price .cur{ font-size:14px; color:#68727c; font-weight:600; }
.p-period{ font-size:12.5px; color:#68727c; margin-bottom:24px; }
.p-features{ margin-bottom:28px; flex-grow:1; }
.p-features li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13.5px;
  color:#4d5862;
  padding:7px 0;
}
.p-features li svg{
  width:15px; height:15px;
  stroke:var(--hosting);
  stroke-width:2.4;
  flex-shrink:0;
  margin-top:2px;
}
.p-card.featured .p-features li svg{ stroke:var(--sky); }
.p-trust{
  margin:0 0 20px;
  padding-top:16px;
  border-top:1px solid #f0f3f5;
}
.p-cta{
  text-align:center;
  padding:13px;
  border-radius:9px;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:14px;
  display:block;
  margin-bottom:10px;
  transition: background-color .15s ease;
}
/* The "Pogledaj sve..." link under the CTA is gone — the CTA itself now leads
   to the category page — so the button is the last thing in the card. */
.p-cta:last-child{ margin-bottom:0; }
.p-cta.primary{ background:var(--ink); color:#fff; }
.p-cta.primary:hover{ background:#233442; }
/* Featured CTA stays in the blue family per the design, deepened so white
   text on it is readable. */
.p-card.featured .p-cta.primary{ background:var(--hosting-deep); color:#fff; }
.p-card.featured .p-cta.primary:hover{ background:#186A8F; }
.p-more{ text-align:center; display:block; font-size:12.5px; color:#68727c; transition: color .15s ease; }
.p-more:hover{ color:var(--ink); }

@media (min-width:1024px){
  .pricing{ padding:76px 64px 80px; }
  .pricing-head{ margin-bottom:48px; }
  .pricing-head h2{ font-size:32px; }
  .pricing-grid{ grid-template-columns:repeat(3, 1fr); gap:20px; }
  .p-card.featured{ order:0; }
}

/* =========================================================
   CENOVNIK — "ugnježdena kartica" (web-hosting.php)
   Posebna komponenta od .p-card iznad, ne modifikacija - .p-card ostaje
   netaknuta za početnu stranicu. Po uzoru na freefrontend.com/
   css-pricing-tables ("Responsive pricing cards" - CodePen ZEPeEoN):
   beli unutrašnji blok sa sadržajem pluta unutar obojenog spoljnog
   okvira, dugme sedi direktno na toj obojenoj površini na dnu.

   Prilagođeno originalu: razmak je simetričan (original ima
   asimetrično pomeranje udesno - na širini ove kartice je delovalo
   neuravnoteženo), boja je FIKSNA po paketu umesto hover-only
   "aktivacije" jedne kartice - na dodir ekranima hover ne postoji, a
   cena mora biti čitljiva bez interakcije. Visina nije fiksna (original:
   23.4rem/25.3rem) nego prati sadržaj, jer ovde ima 7 stavki po paketu
   umesto 3-4.
   ========================================================= */
.hp-grid{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}
.hp-card{ display:flex; }
.hp-outer{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  border-radius:24px;
  padding:14px 16px 22px 16px;
  background:#EEF1F7;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hp-card:hover .hp-outer{ transform:translateY(-5px); }
.hp-ribbon{
  align-self:flex-start;
  margin:2px 4px 12px;
  background:#fff;
  color:var(--sky-deep);
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:10.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:6px 13px;
  border-radius:999px;
}
.hp-inner{
  background:#fff;
  border-radius:16px;
  /* 18px levo/desno, ne 24px - na najuzem 3-kolonskom razmaku (~1024px)
     "Neograničeno poddomena i parking domena" (PRO kartica) je tačno na
     ivici prelamanja u dva reda (0px rezerve), pa je ekstra prostor
     namerna sigurnosna margina, ne kozmetika. */
  padding:26px 18px 22px;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  box-shadow:0 16px 32px -14px rgba(20,32,43,0.28);
}
/* --hp-fg-inner je za elemente KOJI SEDE NA BELOJ .hp-inner podlozi
   (ikona, tagline, tačke uz listu) - mora biti dovoljno tamna nijansa
   boje kartice da se čita na belom. --hp-fg (bez -inner) je za elemente
   na OBOJENOM/TAMNOM .hp-outer (garancija ispod dugmeta) - te dve
   podloge su suprotne, pa im ne mogu služiti iste (svetle) boje. */
.hp-icon{ margin-bottom:14px; }
.hp-icon svg{ width:42px; height:42px; stroke-width:1.5; fill:none; stroke:var(--hp-fg-inner, var(--ink)); stroke-linecap:round; stroke-linejoin:round; }
.hp-tagline{ font-family:'Sora', sans-serif; font-weight:700; font-size:12.5px; color:var(--hp-fg-inner, var(--ink)); margin-bottom:6px; }
.hp-title{ font-family:'Sora', sans-serif; font-weight:800; font-size:23px; letter-spacing:-0.01em; color:var(--hp-fg-inner, var(--ink)); margin-bottom:18px; }
.hp-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.hp-price .amt{ font-family:'Sora', sans-serif; font-weight:800; font-size:32px; color:var(--ink); }
.hp-price .cur{ font-size:14px; font-weight:600; color:#68727c; }
.hp-price .per{ font-size:13px; color:#68727c; }
.hp-price .per::before{ content:"/ "; }
.hp-features{ margin-bottom:2px; }
.hp-features li{
  position:relative;
  font-size:13.5px;
  line-height:1.6;
  color:#4d5862;
  padding:7px 0 7px 18px;
  border-bottom:1px solid #f0f3f5;
}
.hp-features li:last-child{ border-bottom:none; }
.hp-features li::before{
  content:"";
  position:absolute; left:2px; top:15px;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--hp-fg-inner, var(--ink));
}
.hp-cta{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px;
  border-radius:12px;
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:14.5px;
  transition: gap .15s ease, filter .15s ease;
}
.hp-card:hover .hp-cta{ gap:11px; }
.hp-cta svg{ width:15px; height:15px; stroke-width:2.6; fill:none; stroke:currentColor; }
.hp-guarantee{
  margin:10px 0 0;
  text-align:center;
  font-size:11.5px;
  color: var(--hp-fg, var(--text-muted));
  opacity:.85;
}

/* START — plava. --hp-fg-inner i --hp-fg mogu biti ista boja ovde jer
   je hosting-deep već dovoljno taman za belu podlogu (isti token se
   već koristi kao tekst na beloj pozadini drugde u sistemu). */
.hp-card--start{ --hp-fg-inner: var(--hosting-deep); --hp-fg: #CFE7F2; }
.hp-card--start .hp-outer{ background:linear-gradient(0deg, #1e3f66 0%, #2d6a9f 60%, var(--hosting) 100%); box-shadow:0 20px 38px -20px rgba(30,123,166,0.45); }
.hp-card--start .hp-cta{ background:#fff; color:var(--hosting-deep); }
.hp-card--start .hp-cta:hover{ filter:brightness(0.97); }
.hp-card--start .hp-guarantee{ color: var(--hp-fg); opacity:1; }

/* ADVANCED — crvena, "Najtraženiji" */
.hp-card--advanced{ --hp-fg-inner: var(--sky-deep); --hp-fg: #FCE3E1; }
.hp-card--advanced .hp-outer{ background:linear-gradient(0deg, #7A2015 0%, var(--sky-deep) 60%, var(--sky) 100%); box-shadow:0 20px 38px -20px rgba(192,72,63,0.45); }
.hp-card--advanced .hp-cta{ background:#fff; color:var(--sky-deep); }
.hp-card--advanced .hp-cta:hover{ filter:brightness(0.97); }
.hp-card--advanced .hp-guarantee{ color: var(--hp-fg); opacity:1; }

/* PRO — crna + zlatna, "premium" osećaj. --gold/--gold-deep su novi
   tokeni, samo za ovu karticu - ne diraju postojeću fiksnu trojku
   sky/hosting/ink (isto kao što su card-blue/-red/-green ranije
   dodati kao pomoćna paleta samo za kartice). --gold-deep je
   zatamnjena verzija - --gold (svetlije zlatna) čita se dobro na
   crnoj pozadini, ali na BELOJ .hp-inner podlozi pada ispod 4.5:1, pa
   tagline/ikona/tačke uz listu koriste zatamnjenu verziju. */
.hp-card--pro{ --gold:#C9A961; --gold-deep:#8A6D2F; --hp-fg-inner: var(--gold-deep); --hp-fg: var(--gold); }
.hp-card--pro .hp-outer{ background:linear-gradient(0deg, #050505 0%, var(--gold-deep) 60%, var(--gold) 100%); border:1px solid var(--gold); box-shadow:0 20px 40px -18px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,169,97,0.15); }
/* Dugme i garancija NISU zlatni - START/ADVANCED oba imaju belo dugme,
   puna zlatna popuna bi ovde jedina "odskakala". Zlato ostaje prisutno
   kroz ivicu kartice, ikonu i tekst dugmeta (gold-deep), samo popuna
   dugmeta i garancija prate belu/svetlu konvenciju kao ostale dve. */
.hp-card--pro .hp-cta{ background:#fff; color: var(--gold-deep); }
.hp-card--pro .hp-cta:hover{ filter:brightness(0.97); }
.hp-card--pro .hp-guarantee{ color:#AEBAC4; opacity:1; }

.pricing-note{
  text-align:center;
  max-width:640px;
  margin:32px auto 0;
  font-size:13.5px;
  color:var(--text-muted);
}
.pricing-note a{ color:var(--hosting-deep); font-weight:700; }

@media (min-width:768px){
  /* Popravljeno 2026-09-03: .hp-card--advanced je ranije dobijala
     grid-column:1/-1 i na ovom (tablet) koraku, ne samo na 1024px+. Bez
     grid-auto-flow:dense (namerno se ne uvodi - menja vizuelni redosled u
     odnosu na DOM/tab redosled, WCAG 1.3.2), auto-postavljanje mreže tada
     ne popunjava prazninu iza START/PRO karticom koja dolazi posle - svaka
     kartica završi u sopstvenom redu sa praznom drugom kolonom pored sebe.
     Na ovoj širini se sad prikazuju kao običan 2-kolonski raspored (START +
     ADVANCED u prvom redu, PRO u drugom) - "puna širina" za ADVANCED ostaje
     rezervisana za 1024px+, gde već ima 3 kolone i drugačije poravnanje. */
  .hp-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px){
  /* align-items:end - poravnanje po dnu, pa ADVANCED (viši samo za
     prostor koji zauzima "Najtraženiji" bedž, jer sve tri kartice imaju
     isti broj stavki - 7) vizuelno "iskače" naviše iznad ostale dve,
     umesto da produžava nadole. */
  .hp-grid{ grid-template-columns:repeat(3, 1fr); align-items:end; gap:24px; }
  .hp-card--advanced{ grid-column:auto; }
}

/* =========================================================
   BEZBEDNOST (web-hosting.php)
   Namerno tamna sekcija (--ink), da se izdvoji od okolnih belih
   blokova - ista "ozbiljna" boja koja se koristi za PRO karticu iznad,
   plus suptilna šrafura (ista tehnika kao .pricing pozadina) i veliki
   providni oblak-vodeni žig u pozadini (ista silueta kao hero-cloud.php,
   samo beo i jedva vidljiv). Naslovni blok koristi .benefits-head/
   .benefits-kicker, samo je kicker boja ovde belja (--sky umesto
   --sky-deep - na TAMNOJ pozadini svetli pastel čita se odlično, to je
   baš onaj kontrast koji na BELOJ pozadini ne prolazi, videti
   docs/brand-guidelines.md napomenu uz --sky-deep).
   ========================================================= */
.security{
  position:relative;
  overflow:hidden;
  padding:48px 24px;
  color:#fff;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 14px),
    linear-gradient(160deg, var(--ink), #0d151d);
}
.security .benefits-kicker{ color: var(--sky); }
.security .benefits-head h2{ color:#fff; }
.security-watermark{
  position:absolute;
  width:640px; height:640px;
  right:-160px; bottom:-190px;
  fill:rgba(255,255,255,0.06);
  pointer-events:none;
}
.sec-grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:start;
}
.sec-copy > p{
  font-size:15px;
  line-height:1.7;
  color:#C7D2DA;
  margin-bottom:20px;
  max-width:560px;
}
.sec-list li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:14.5px;
  line-height:1.55;
  color:#C7D2DA;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,0.1);
  max-width:560px;
}
.sec-list li:last-child{ border-bottom:none; }
.sec-list li svg{
  width:17px; height:17px;
  stroke:var(--sky);
  stroke-width:2.4;
  flex-shrink:0;
  margin-top:2px;
}
.sec-callout{
  background:#fff;
  border-radius:14px;
  padding:28px;
  box-shadow:0 24px 48px -20px rgba(0,0,0,0.45);
}
.sec-callout .icon{ margin-bottom:14px; }
.sec-callout h3{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:17px;
  color:var(--ink);
  margin-bottom:8px;
}
.sec-callout p{
  font-size:13.5px;
  line-height:1.65;
  color:var(--text-muted);
  margin-bottom:14px;
}
.sec-callout a{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:13.5px;
  color:var(--hosting-deep);
}
.sec-callout a:hover{ text-decoration:underline; }

@media (min-width:1024px){
  .security{ padding:72px 64px 76px; }
  .sec-grid{ grid-template-columns:1.4fr 1fr; gap:48px; }
}

/* =========================================================
   UTISCI KORISNIKA (web-hosting.php) — karusel, jedan slajd vidljiv
   odjednom. Naslovni blok koristi .faq-head/.faq-kicker. Svi slajdovi
   su u istoj grid-ćeliji (grid-area:1/1) - čist CSS trik da kontejner
   uvek prati visinu NAJDUŽEG utiska, bez skokova pri smeni, i bez JS-a
   za merenje visine. JS (main.js) samo dodaje/skida .active, koja
   kontroliše opacity. Bez JS-a je vidljiv prvi utisak (default stanje
   iz markupa), a strelice i tačke su prava dugmad pa rade i sa
   tastature.
   ========================================================= */
.testimonials{
  padding:48px 24px;
  background:#fff;
}
.test-carousel{ max-width:760px; margin:0 auto; }
.test-track{
  display:grid;
  grid-template-areas:"stack";
}
.test-slide{
  grid-area: stack;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--border);
  border-top:4px solid var(--tc, var(--hosting-deep));
  border-radius:16px;
  padding:32px 28px 26px;
  box-shadow:0 20px 40px -24px rgba(20,32,43,0.22);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease;
}
.test-slide.active{ opacity:1; visibility:visible; }
.test-quote-mark{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:40px;
  line-height:1;
  color:var(--tc, var(--hosting-deep));
  margin-bottom:6px;
}
.test-slide blockquote{
  font-size:15px;
  line-height:1.75;
  color:#3f4a54;
  margin:0 0 22px;
}
.test-slide figcaption{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.test-avatar{
  flex-shrink:0;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--tc, var(--hosting-deep));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:13.5px;
}
.test-slide .name{
  display:block;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:13.5px;
  color:var(--ink);
}
.test-slide .role{
  display:block;
  font-size:12.5px;
  color:var(--tc, var(--text-muted));
  margin-top:2px;
}
.test-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:24px;
}
.test-arrow{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.test-arrow:hover{ background:#F3F7F9; border-color:var(--hosting); }
.test-dots{ display:flex; align-items:center; gap:8px; }
.test-dot{
  width:9px; height:9px;
  padding:0;
  border-radius:50%;
  border:none;
  background:#dfe4e7;
  cursor:pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.test-dot:hover{ background:#b7c0c7; }
.test-dot.active{ background:var(--sky-deep); transform:scale(1.25); }

@media (min-width:1024px){
  .testimonials{ padding:68px 64px 72px; }
  .test-slide{ padding:40px 48px 34px; }
  .test-slide blockquote{ font-size:16.5px; }
}

/* =========================================================
   HERO — REGISTRACIJA DOMENA
   Hero i pretraga u jednoj sekciji, tekst direktno na boji.

   Opseg gradijenta nije proizvoljan: da bi i tamno mastilo i beli deo
   naslova bili citljivi na CELOJ povrsini, pozadina mora ostati u uskom
   pojasu svetline. #579AB8 -> #4C8FAE drzi mastilo na 5.2:1 - 4.6:1
   (prolazi 4.5:1 za sitan tekst) i belo na 3.2:1 - 3.6:1 (prolazi 3:1,
   sto vazi samo za krupan naslov). Svetlija plava obara belo ispod 3:1,
   tamnija obara mastilo ispod 4.5:1 - zato se ne "pojacava".

   Ovu klasu dele DVE strane: /registracija-domena i /web-hosting.
   web-hosting ostaje plav (brend = Hosting Blue); domenska strana
   koristi tirkiznu varijantu nize (#provera-domena override).
   ========================================================= */
.hero-domain{
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg, #579AB8, #4C8FAE);
  padding:44px 20px 40px;
  text-align:center;
}
/* Domenska strana: isti pojas svetline, tirkizna nijansa (brend tirkiz
   #3F9AAE iz .hp-card/.p-card familije). Mastilo 5.1:1 - 4.6:1, belo
   3.3:1 - 3.6:1 - isti prolaz kao plava iznad. Menjano 2026-08-28. */
#provera-domena.hero-domain{
  background:linear-gradient(160deg, #3F9AAE, #3B93A6);
}
/* Oblak-znak sa loga kao pozadinska dekoracija - puna silueta, bela,
   jedva vidljiva. Boja je fill (SVG je pun oblik, ne obris). */
.hd-cloud{
  position:absolute;
  width:520px; height:520px;
  right:-130px; bottom:-150px;
  fill:rgba(255,255,255,0.16);
  pointer-events:none;
}
.hd-inner{ position:relative; max-width:560px; margin:0 auto; }

/* Kicker je beli bedž, a ne obojen tekst: --sky-deep na ovoj podlozi daje
   ~2.7:1, sto za 12px ne prolazi. Bela podloga resava kontrast i usput
   izgleda kao oznaka "ovlascen". */
.hd-kicker{
  display:inline-block;
  background:#fff;
  color:var(--ink);
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:11.5px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
}
.hd-title{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:26px;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
}
.hd-accent{ color:#fff; }
.hd-sub{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink);
  margin:12px 0 0;
}

/* Cela forma je bela - i polje i dugme. Dugme se odvaja tankom linijom i
   tamnim tekstom umesto bojom. */
.hd-form{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:460px;
  margin:24px auto 0;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 40px -18px rgba(10,20,30,0.5);
}
.hd-form input[type="text"], .hd-form input[type="email"]{
  flex:1 1 auto;
  min-width:0;
  height:48px;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:15px;
  color:var(--ink);
  background:#fff;
  border:none;
  padding:0 16px;
}
.hd-form input[type="text"]::placeholder, .hd-form input[type="email"]::placeholder{ color:#7C868F; opacity:1; }
.hd-form input[type="text"]:focus, .hd-form input[type="email"]:focus{ outline:none; }
.hd-form:focus-within{ outline:2px solid var(--ink); outline-offset:2px; }
.hd-submit{
  flex:0 0 auto;
  height:46px;
  padding:0 22px;
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:14.5px;
  color:#fff;
  background:var(--sky-deep);
  border:none;
  cursor:pointer;
  white-space:nowrap;
  transition: background-color .15s ease;
}
.hd-submit:hover{ background:#A33523; }
.hd-trust{
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  margin:10px 0 0;
}

/* Cene najtrazenijih ekstenzija - bele pilule bez ivice (uklonjena 2026-09-16,
   vlasnik preko DevTools-a - cistiji, ravniji izgled), svaka ekstenzija u
   drugoj boji teksta. Cena je uvek crna (trazeno) - boja nosi samo ekstenzija.
   Dve od trazene 4 boje (#F7D794, #EDA6A3) su prepustene kao svetle pastele:
   kao tekst na beloj pozadini padaju na ~1.4:1 i ~2.1:1, pa bi bile skoro
   nevidljive - tekst ekstenzije zato ide u potamnjenu varijantu istog tona da
   se moze procitati; #EDA6A3 se pritom poklapa sa vec postojecim --sky-deep
   tonom u sistemu. Font uvecan sa 12.5px na 14.5px istom prilikom. */
.hd-chips{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.hd-chip{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  background:#fff;
  border-radius:999px;
  padding:7px 13px;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:14.5px;
  transition: transform .15s ease;
}
.hd-chip:hover{ transform:translateY(-1px); }
.hd-chip b{
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
  font-size:11.5px;
  color:var(--ink);
}
.hd-chip--2{ color:#8A6D1F; } /* tekst potamnjen od trazenog #F7D794 - i dalje koristi en/rs-domain-registration.php za .in.rs */
/* Bedževi na oba .rs hero-a (registracija-domena.php i
   en/rs-domain-registration.php) sad imaju PO TLD-u fiksnu boju umesto
   generalne --1/2/3/4 rotacije (ukinuta 2026-09-18, vlasnikov zahtev) -
   svaka ekstenzija nosi istu boju na obe strane, srpskoj i engleskoj.
   .com/.xyz boje su tačne iz zvaničnih TLD logoa (mockup/TLD/com.svg,
   mockup/TLD/xyz.svg, provereno u SVG izvoru; 6,24:1 i 13,21:1 na belom).
   .rs/.net/.io koriste postojeće bren tokene (crvena/crna/zelena) umesto
   izmišljanja novih. */
.hd-chip--rs{ color:var(--sky-deep); }  /* crvena - postojeći brend token */
.hd-chip--com{ color:#1463A6; }
.hd-chip--net{ color:#2F3640; }         /* crna - isti ton kao stara --4 */
.hd-chip--io{ color:var(--card-green-deep); }  /* zelena - postojeći brend token */
.hd-chip--xyz{ color:#491D55; }

/* web-hosting.php cenovni čipovi u hero-u - namerno NE dele --1/--2/--3 sa
   čipovima iznad (oni su za 4 nasumične boje TLD ekstenzija na strani
   domena, ovde treba da se poklapaju sa bojama paketa u cenovniku ispod:
   START plava, ADVANCED crvena, PRO crna+zlatna). START zadržava tačno
   istu tamnoplavu kao ranija .hd-chip--1 (korisnik na nju nije imao
   primedbu) - samo je dobila sopstveno ime da se više ne oslanja na
   brojeve smišljene za drugu stranicu. Gold sam (bez -deep) pada na
   ~2.2:1 na beloj podlozi - ispod čak i 3:1 praga za tekst, zato ide
   potamnjena varijanta za oboje, isto kao .hp-card--pro. */
.hd-chip--start{ color:#192A56; }
.hd-chip--advanced{ color: var(--sky-deep); }
.hd-chip--pro{ color:#8A6D2F; }

/* Hero animacija, SAMO na /web-hosting (--wh modifikator, ne dira
   /registracija-domena koja deli istu .hero-domain klasu). Jedan autorski
   trenutak sa dva dela koja rade zajedno: oblak-znak u pozadini polako
   "diše" (spor float + blaga rotacija - direktna referenca na "Sky" u
   imenu brenda), a tri cenovna čipa uskaču jedan za drugim čim se strana
   učita, usmeravajući pažnju na cenu - to je najvažniji podatak na strani
   za konverziju. Bez prefers-reduced-motion provere (vlasnik, 2026-09-12:
   svi efekti na sajtu rade uvek - vidi napomenu na vrhu fajla). */
.hero-domain--wh .hd-cloud{
  animation: whCloudDrift 9s ease-in-out infinite;
}
@keyframes whCloudDrift{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(1.2deg); }
}
.hero-domain--wh .hd-chips li{
  opacity: 0;
  animation: whChipIn .6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-domain--wh .hd-chips li:nth-child(1){ animation-delay: .15s; }
.hero-domain--wh .hd-chips li:nth-child(2){ animation-delay: .27s; }
.hero-domain--wh .hd-chips li:nth-child(3){ animation-delay: .39s; }
@keyframes whChipIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Samostalno dugme umesto forme - koristi web-hosting.php (Varijanta B
   hero-a nema polje za pretragu, samo cenu + dugme koje skroluje do
   cenovnika). min-width sprečava da izgleda usko pored krupnog H1. */
.hd-submit-btn{
  display:inline-block;
  min-width:260px;
  margin-top:26px;
  background:var(--sky-deep);
  color:#fff;
  text-align:center;
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:15.5px;
  padding:17px 36px;
  border-radius:11px;
  transition: background-color .15s ease;
}
.hd-submit-btn:hover{ background:#A33523; }

@media (min-width:768px){
  .hd-form{ flex-direction:row; }
  .hd-submit{ height:48px; }
}
@media (min-width:1024px){
  .hero-domain{ padding:72px 32px 64px; }
  .hd-inner{ max-width:640px; }
  .hd-title{ font-size:38px; }
  .hd-sub{ font-size:16.5px; }
  .hd-cloud{ width:760px; height:760px; right:-170px; bottom:-210px; }
}

/* Kartica sa RNIDS znakom. Bedž stoji na mestu ikonice, pa se njegov tekst
   sakriva - naslov kartice vec kaze "Ovlašćeni registar", pa bi se dvaput
   ponovilo. Znak se ne crta ponovo ovde nego se koristi isti include. */
.b-card--rnids .rnids-badge .divider,
.b-card--rnids .rnids-badge .text{ display:none; }
.b-card--rnids .rnids-badge{ margin-bottom:-4px; }

/* =========================================================
   CENOVNIK DOMENA
   Jedna <table>, dva izgleda. Bazna pravila (bez media upita) su KARTICE za
   mobilni; jedan min-width blok ih vraća u tabelu. Zato su kartice vezane za
   [data-mobile="cards"] - prelazak na tabelu sa skrolom je promena te jedne
   reči u PHP-u.
   ========================================================= */
.tldp-section{
  padding:56px 20px 60px;
  background:#fff;
  border-top:1px solid #eef1f3;
}
.tldp-head{ max-width:640px; margin:0 auto 28px; text-align:center; }
.tldp-kicker{
  font-family:'Sora', sans-serif;
  font-weight:700; font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--card-blue-deep);
  margin-bottom:14px;
}
.tldp-head h2{
  font-family:'Sora', sans-serif;
  font-weight:800; font-size:26px; line-height:1.2;
  letter-spacing:-0.01em; color:var(--ink);
  margin-bottom:10px;
}
.tldp-head > p{ font-size:14px; color:var(--text-muted); }

/* Prekidač PDV-a: dva zapisa rečenice, samo jedan vidljiv u isto vreme.
   Podrazumevano je vidljiv "incl" - "excl" se otkriva kad najbliži
   .vat-scope predak dobije data-vat="excl" (postavlja ga JS, vidi
   main.js). .vat-scope, ne fiksan ID - registracija-domena.php i
   web-hosting.php imaju svaka svoj nezavisan prekidač na istoj strani. */
.vat-sentence[data-vat-state="excl"]{ display:none; }
.vat-scope[data-vat="excl"] .vat-sentence[data-vat-state="incl"]{ display:none; }
.vat-scope[data-vat="excl"] .vat-sentence[data-vat-state="excl"]{ display:inline; }

.vat-toggle{
  font:inherit;
  color:inherit;
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:text;
}
/* Tek kad JS potvrdi da može da reaguje na klik postaje link - bez JS-a
   ovo ostaje običan tekst, ne mrtvo dugme koje izgleda klikabilno. */
.vat-toggle:not(:disabled){
  color:var(--hosting-deep);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.vat-toggle:not(:disabled):hover{ color:var(--ink); }

.tldp{ max-width:1160px; margin:0 auto; }

.tldp-controls{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:18px;
}
.tldp-filter input{
  width:100%; height:44px;
  font-family:'Inter', system-ui, sans-serif; font-size:14.5px;
  color:var(--ink); background:#fff;
  border:1px solid var(--border); border-radius:9px;
  padding:0 14px;
}
.tldp-filter input::placeholder{ color:#7C868F; opacity:1; }
.tldp-sortmobile{ display:flex; align-items:center; gap:9px; }
.tldp-sortmobile[hidden]{ display:none; }
.tldp-sortmobile label{
  font-family:'Sora', sans-serif; font-weight:600;
  font-size:13px; color:var(--text-muted); flex-shrink:0;
}
.tldp-sortmobile select{
  flex:1 1 auto; height:44px;
  font-family:'Inter', system-ui, sans-serif; font-size:14px;
  color:var(--ink); background:#fff;
  border:1px solid var(--border); border-radius:9px; padding:0 10px;
}

.tldp-name{ font-family:'JetBrains Mono', monospace; font-weight:600; }
.tldp-tag{
  display:inline-block;
  font-family:'Sora', sans-serif; font-weight:700;
  font-size:10px; letter-spacing:0.05em; text-transform:uppercase;
  /* Puna boja umesto providne: providna podloga zavisi od toga šta je ispod,
     pa se kontrast ne može pouzdano izračunati. Tekst je --card-blue-hover
     (tamniji od -deep) jer je bedž sitan, 10px, i traži punih 4.5:1. */
  color:var(--card-blue-hover);
  background:#E8F3F6;
  border:1px solid var(--card-blue);
  border-radius:100px; padding:2px 8px;
  margin-left:7px; vertical-align:middle;
}
.tldp-tag--cctld{
  color:var(--card-red-hover);
  background:#FDECEA;
  border-color:var(--card-red);
  text-transform:none; /* "ccTLD" je termin sa smislenim malim slovima, ne skraćenica */
}
/* Bedž nosi objašnjenje kao balon na hover/focus - title atribut bi udvostručio
   tooltip (nativni + naš), pa se ne koristi. tabindex na bedžu čini balon
   dostupnim i sa tastature. */
.tldp-tag[data-tooltip]{ position:relative; cursor:help; }
.tldp-tag[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute; z-index:20;
  left:0; top:calc(100% + 8px);
  width:230px; max-width:70vw;
  background:var(--ink); color:#fff;
  font-family:'Inter', sans-serif; font-weight:400;
  text-transform:none; letter-spacing:normal;
  font-size:12.5px; line-height:1.5;
  padding:9px 11px; border-radius:8px;
  opacity:0; visibility:hidden;
  transition:opacity .15s ease;
  pointer-events:none;
}
.tldp-tag[data-tooltip]:hover::after,
.tldp-tag[data-tooltip]:focus-visible::after{
  opacity:1; visibility:visible;
}
.tldp-note{ display:block; font-size:12px; color:var(--text-muted); margin-top:3px; }
.tldp-free{ color:var(--card-green-deep); font-weight:700; }

/* Iste dve cene (sa/bez PDV-a) uvek stoje obe u markupu - server ih je vec
   izračunao - a ovde se samo bira koja se vidi, isto kao .vat-sentence gore. */
.price-excl{ display:none; }
.vat-scope[data-vat="excl"] .price-incl{ display:none; }
.vat-scope[data-vat="excl"] .price-excl{ display:inline; }
.tldp-footer{
  display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:baseline;
  gap:6px 16px;
  margin-top:16px;
}
.tldp-extras{ font-size:13.5px; line-height:1.7; color:var(--text-muted); }
.tldp-extras strong{ color:var(--ink); }
.tldp-updated{ font-size:13px; color:var(--text-muted); }
.tldp-empty, .tldp-noresult{
  max-width:1160px; margin:0 auto; padding:20px 0;
  font-size:14.5px; line-height:1.7; color:var(--text-muted);
}
.tldp-noresult[hidden]{ display:none; }
.tldp-empty a, .tldp-noresult a{ color:var(--hosting-deep); font-weight:700; }

/* --- bazno = KARTICE (mobilni) --- */
.tldp[data-mobile="cards"] .tldp-table         { display:block; }
.tldp[data-mobile="cards"] .tldp-table thead   { display:none; }
.tldp[data-mobile="cards"] .tldp-table tbody   { display:block; }
.tldp[data-mobile="cards"] .tldp-table tr{
  display:block;
  border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; margin-bottom:12px;
}
.tldp[data-mobile="cards"] .tldp-table th,
.tldp[data-mobile="cards"] .tldp-table td{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding:5px 0; border:0; text-align:left;
}
.tldp[data-mobile="cards"] .tldp-table th[scope="row"]{
  display:block;
  padding-bottom:10px; margin-bottom:6px;
  border-bottom:1px solid #f2f5f6;
  font-size:16px;
}
.tldp[data-mobile="cards"] .tldp-table td::before{
  content:attr(data-label);
  font-size:12.5px; color:var(--text-muted); flex-shrink:0;
}
/* Cena registracije je najvažnija - dobija svoj red i krupan broj. */
.tldp[data-mobile="cards"] .tldp-table td.tldp-main{
  font-family:'Sora', sans-serif;
  font-size:22px; font-weight:800; color:var(--ink);
}
/* Obnova je za sada ista cena kao registracija - na mobilnom se ne prikazuje
   dok se to ne promeni, da kartica ne bude duža nego što treba. */
.tldp[data-mobile="cards"] .tldp-table td[data-label="Obnova"]{ display:none; }

.tldp-loadmore{
  display:block; margin:18px auto 0;
  background:none; border:0; border-bottom:1.5px solid var(--ink);
  font-family:'Sora', sans-serif; font-weight:600; font-size:14.5px;
  color:var(--ink); cursor:pointer; padding:4px 2px;
}
.tldp-loadmore:hover{ color:var(--hosting-deep); border-color:var(--hosting-deep); }
.tldp-loadmore[hidden]{ display:none; }

/* --- skrolujuća tabela: rezervna varijanta, jedna reč u PHP-u --- */
.tldp[data-mobile="scroll"] .tldp-scroll{ overflow-x:auto; }

@media (min-width:768px){
  .tldp-section{ padding:64px 24px 68px; }
  .tldp-head h2{ font-size:30px; }
  .tldp-controls{ flex-direction:row; align-items:center; justify-content:space-between; }
  .tldp-filter{ flex:0 1 320px; }

  /* --- vraćanje u pravu tabelu ---
     Selektor mora da ponovi [data-mobile="cards"]: bazna pravila imaju
     atributski selektor, pa bi bez njega imala veću specifičnost i nadjačala
     ova pravila bez obzira na to što su u media upitu. */
  .tldp[data-mobile="cards"] .tldp-table         { display:table; width:100%; border-collapse:collapse; }
  .tldp[data-mobile="cards"] .tldp-table thead   { display:table-header-group; }
  .tldp[data-mobile="cards"] .tldp-table tbody   { display:table-row-group; }
  .tldp[data-mobile="cards"] .tldp-table tr      { display:table-row; border:0; border-radius:0; padding:0; margin:0; }
  .tldp[data-mobile="cards"] .tldp-table th,
  .tldp[data-mobile="cards"] .tldp-table td{
    display:table-cell; text-align:right;
    padding:11px 14px; border-bottom:1px solid #f2f5f6;
    font-size:14px;
  }
  .tldp[data-mobile="cards"] .tldp-table th[scope="row"]{
    display:table-cell; text-align:left;
    border-bottom:1px solid #f2f5f6; margin:0; padding:11px 14px; font-size:14px;
  }
  .tldp[data-mobile="cards"] .tldp-table td::before{ content:none; }
  .tldp[data-mobile="cards"] .tldp-table td.tldp-main{
    font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:600; color:var(--ink);
  }
  /* Obnova je skrivena samo na mobilnom - u pravoj tabeli se vraća. */
  .tldp[data-mobile="cards"] .tldp-table td[data-label="Obnova"]{ display:table-cell; }
  .tldp .tldp-table tbody tr:nth-child(odd){ background:#FBFCFD; }
  .tldp .tldp-table tbody tr:hover{ background:#F3F7F9; }

  /* [data-mobile="cards"] prefiks je nužan: opšte .tldp[...] .tldp-table th
     pravilo iznad (border-bottom:1px #f2f5f6) inače nadjačava po
     specifičnosti - isto obrazloženje kao komentar na vrhu ovog media bloka. */
  .tldp[data-mobile="cards"] .tldp-table thead th{
    font-family:'Sora', sans-serif;
    font-weight:700; font-size:12px;
    letter-spacing:0.05em; text-transform:uppercase;
    color:var(--hosting-deep);
    background:#E8F3F6;
    /* Izrazitija linija (duboki tirkiz, hover-ton hosting familije) da
       zaglavlje jasnije odvoji od tela tabele. */
    border-bottom:2px solid #266475;
    white-space:nowrap;
    transition:background-color .15s ease, color .15s ease;
  }
  .tldp[data-mobile="cards"] .tldp-table thead th[data-sort-key="tld"]{ text-align:left; }
  /* Kolona po kojoj je trenutno sortirano se izdvaja tamnijom pozadinom. */
  .tldp-table th[aria-sort]:not([aria-sort="none"]){
    background:var(--hosting-deep);
    color:#fff;
  }
  /* Cene u monospace sa tabular-nums da se kolone poravnaju. */
  .tldp .tldp-table td{
    font-family:'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
  }
}

/* Filter (JS) sakriva redove atributom [hidden], ali su .tldp-table tr
   pravila iznad specifičnija od podrazumevanog [hidden]{display:none} i bez
   ovoga bi ga nadjačala - red bi ostao vidljiv. */
.tldp-table tr[hidden]{ display:none !important; }

/* Dugmad za sortiranje pravi JS, pa bez JS-a nema mrtvih kontrola.
   aria-sort je jedini nosilac stanja - i za stil i za čitače ekrana. */
.tldp-sort{
  font:inherit; color:inherit;
  background:none; border:0; padding:0;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
}
.tldp-sort::after{
  content:"↕"; font-size:11px; opacity:.45;
}
.tldp-table th[aria-sort="ascending"] .tldp-sort::after { content:"↑"; opacity:1; }
.tldp-table th[aria-sort="descending"] .tldp-sort::after{ content:"↓"; opacity:1; }
.tldp-table th[aria-sort]:not([aria-sort="none"]) .tldp-sort{ color:#fff; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  padding:56px 20px 60px;
  background:#FBFBFA;
  border-top:1px solid #eef1f3;
  border-bottom:1px solid #eef1f3;
}
.faq-head{ max-width:640px; margin:0 auto 28px; text-align:center; }
.faq-kicker{
  font-family:'Sora', sans-serif;
  font-weight:700; font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--sky-deep); margin-bottom:14px;
}
.faq-head h2{
  font-family:'Sora', sans-serif;
  font-weight:800; font-size:26px; line-height:1.2;
  color:var(--ink);
}
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:10px;
}
.faq-item summary{
  font-family:'Sora', sans-serif;
  font-weight:700; font-size:15.5px;
  color:var(--ink);
  padding:16px 44px 16px 18px;
  cursor:pointer;
  position:relative;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; position:absolute; right:18px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid var(--text-muted);
  border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-item summary:focus-visible{
  outline:2px solid var(--hosting); outline-offset:-2px; border-radius:12px;
}
.faq-answer{ padding:0 18px 18px; }
.faq-answer p{ font-size:14.5px; line-height:1.75; color:#4d5862; }
.faq-answer a{ color:var(--hosting-deep); font-weight:700; text-decoration:none; }
.faq-answer a:hover, .faq-answer a:focus-visible{ text-decoration:underline; }
.faq-more{
  max-width:820px; margin:20px auto 0;
  font-size:14px; line-height:1.7; color:var(--text-muted); text-align:center;
}
.faq-more a{ color:var(--hosting-deep); font-weight:700; }

@media (min-width:768px){
  .faq{ padding:64px 24px 68px; }
  .faq-head h2{ font-size:30px; }
}

/* =========================================================
   SEO TEKST
   Collapsed state uses max-height (never display:none) so the
   full text stays crawlable without a click.
   ========================================================= */
/* Section Soft (#FBFBFA) je u docs/brand-guidelines.md dokumentovano
   kao "pozadina SEO bloka" - i dalje važi na homepage/domenima, gde
   seo-block stoji između dve sekcije drugog tona. Na web-hosting.php je
   između utisaka (belo) i FAQ-a (istog #FBFBFA tona), pa bez sopstvenog
   identiteta nestaje - blaga plava šrafura+tint to rešava, uz zadržanu
   čitljivost za dug tekst. Videti Changelog u brand-guidelines.md. */
.seo-block{
  padding:40px 24px;
  background:
    repeating-linear-gradient(135deg, rgba(30,123,166,0.05) 0px, rgba(30,123,166,0.05) 1px, transparent 1px, transparent 14px),
    linear-gradient(180deg, #EFF5F8, #F7FAFB);
  border-top:1px solid #eef1f3;
  border-bottom:1px solid #eef1f3;
}
.seo-inner{ max-width:820px; margin:0 auto; }
.seo-eyebrow{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--hosting-deep);
  margin-bottom:14px;
  text-align:center;
}
.seo-block h2{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.3;
  text-align:center;
  margin-bottom:24px;
  color:var(--ink);
}
.seo-visible{
  font-size:15px;
  line-height:1.75;
  color:#4d5862;
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.seo-visible b{ color:var(--ink); font-weight:700; }
.seo-toggle{ display:flex; justify-content:center; margin-top:22px; }
.seo-toggle-btn{
  font-family:'Sora', sans-serif;
  font-weight:600;
  font-size:13.5px;
  color:var(--ink);
  background:none;
  border:none;
  border-bottom:1.5px solid var(--sky);
  padding:0 0 2px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}
.seo-toggle-btn svg{
  width:14px; height:14px;
  stroke:var(--ink);
  stroke-width:2;
  transition: transform .2s ease;
}
.seo-toggle-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.seo-expand{
  max-width:680px;
  margin:0 auto;
  overflow:hidden;
  max-height:0;
  transition: max-height .3s ease;
}
.seo-expand.open{ max-height:900px; }
/* Duži tekst na strani domena bi se odsekao na 900px. Modifikator stoji samo na
   toj strani - početna se ne dira. */
.seo-expand--long.open{ max-height:2600px; }
.seo-expand-inner{ padding-top:24px; font-size:14px; line-height:1.8; color:var(--text-muted); }
.seo-expand-inner p{ margin-bottom:14px; }
/* No underline by request. Colour alone can't mark a link (it fails WCAG 1.4.1
   against the surrounding body text), so weight carries the distinction and the
   underline returns on hover/focus. */
.seo-expand-inner a{
  color:var(--hosting-deep);
  font-weight:700;
  text-decoration:none;
}
.seo-expand-inner a:hover,
.seo-expand-inner a:focus-visible{ text-decoration:underline; }

@media (min-width:1024px){
  .seo-block{ padding:56px 64px; }
  .seo-block h2{ font-size:24px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--ink);
  color:#c7d2da;
  padding:48px 24px 0;
}
.footer-top{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo{ display:block; margin-bottom:16px; }
.footer-brand .logo svg{ height:24px; width:auto; }
.footer-brand p{ font-size:13px; line-height:1.65; color:#9aa8b3; max-width:260px; margin-bottom:20px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:32px; height:32px;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background-color .15s ease;
}
.footer-social a svg{ width:15px; height:15px; stroke:#c7d2da; fill:none; stroke-width:1.8; }
/* X/Twitter mark is a solid glyph, not a line icon */
.footer-social a svg.icon-fill{ fill:#c7d2da; stroke:none; }
.footer-social a:hover{ background:var(--sky); }

.footer-col h2{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:18px;
}
.footer-col li{ margin-bottom:11px; }
.footer-col a{ color:#b3c0c9; font-size:13.5px; transition: color .15s ease; }
.footer-col a:hover{ color:var(--hosting); }

.footer-contact-item{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
  font-size:13.5px;
  color:#b3c0c9;
  transition: color .15s ease;
}
a.footer-contact-item:hover{ color:var(--hosting); }
.footer-contact-item svg{ width:15px; height:15px; stroke:var(--hosting); stroke-width:2; flex-shrink:0; }

.footer-bottom{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  padding:26px 0;
  flex-wrap:wrap;
  gap:16px;
}
.footer-copy{ font-size:12.5px; color:#8d9aa4; }
/* RNIDS bedž + Sectigo pečat pomereni ulevo 2026-09-21 (vlasnikov zahtev) -
   desna ivica je bila poravnata sa desnom ivicom sajta, tačno u istoj zoni
   gde tawk.to balon (position:fixed, donji desni ugao) sedi. margin-right
   ih odmiče van balonovog domašaja, pa je nekadašnji "rezervni" 90px razmak
   na dnu .footer-bottom (dodat kad je balon prvi put ugrađen, vidi napomenu
   uz <script> na kraju footer.php) sad nepotreban i uklonjen - to je i
   smanjilo visinu futera, ne samo pomeranje samo po sebi. */
.footer-trust{ display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-right:100px; }
.on-dark .rnids-badge .divider{ background:rgba(255,255,255,0.15); }
.on-dark .rnids-badge .text .l1{ color:#fff; }
.on-dark .rnids-badge .text .l2{ color:#9aa8b3; }
.google-rating{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
  margin-top:18px;
  color:#c7d2da;
  font-family:'Sora', sans-serif;
  font-size:12.5px;
  text-decoration:none;
}
.google-rating svg{ width:16px; height:16px; fill:#F6B93B; flex-shrink:0; }
.google-rating b{ color:#fff; }
.google-rating:hover{ color:#fff; }

/* Official Sectigo seal artwork — the PNG ships as-is, see docs/brand-guidelines.md */
.trust-seal{ display:inline-flex; align-items:center; flex-shrink:0; }
.trust-seal img{ width:82px; height:32px; }

/* Logoi načina plaćanja, 2026-09-20 - zamenili tekstualne .payment-pill
   "pilule" pravim zvaničnim SVG znakovima (assets/img/payment/, vlasnik ih
   je dobio od Banca Intese). Svi su ISTE visine reda (--pay-h), a širina im
   se razlikuje jer im se razlikuju proporcije - kartice su ~1.75:1, bedževi
   1:1, Banca Intesa 7.7:1. Zato se visina zadaje po logou u markup-u, a ovde
   stoji samo kutija. Znakovi se ne prebojavaju niti im se menja oblik. */
/* U KONTAKT koloni, ispod poslednje .footer-contact-item stavke - dva reda
   (display:flex column), svaki red je zaseban <ul> (deterministički prelom,
   ne oslanjanje na flex-wrap koji bi zavisio od širine kolone). Mali razmak
   od kontakt stavki iznad (margin-top), mali razmak između dva reda (gap). */
.footer-pay{ display:flex; flex-direction:column; gap:8px; margin-top:25px; }
.pay-logos{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.pay-logos li{ display:inline-flex; align-items:center; height:26px; }
.pay-logos img{ display:block; width:auto; }
/* Samo za znakove koji nemaju sopstvenu belu podlogu (Mastercard ID Check ima
   crn tekst, PayPal tamnoplav natpis) - bez ovoga bi se izgubili na #14202B.
   Ostalih pet su već gotove bele "kartice" i idu direktno na tamno. */
.pay-chip{
  background:#fff;
  border-radius:5px;
  padding:0 7px;
}

@media (min-width:768px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px 24px; }
}
@media (min-width:1024px){
  .site-footer{ padding:64px 64px 0; }
  .footer-top{
    grid-template-columns:1.3fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:48px;
  }
  .footer-bottom{ flex-direction:row; align-items:center; }
}

/* =========================================================
   VPS SERVERI  (/vps-serveri)
   Prvi put uveden ovde. Reuse: .benefits, .criteria, .security/.sec-*,
   .seo-block, .faq, .pricing + .hp-* (cenovnik) - ovde su samo delovi
   kojih pre nije bilo: crveni hero u dve kolone sa terminal/SolusVM
   ilustracijom, crvena familija .hp-card modifikatora i .addons mreža.
   ========================================================= */

/* ---- HERO: crvena varijanta, dve kolone ----
   Crvena je brend boja za VPS (docs/brand-guidelines.md, tabela "Boje
   kartica u cenovniku": VPS okvir #F96E5B, dugme #C2402C). Gradijent
   stoji u pojasu #C2402C -> #A33523: belo na #C2402C je 4.95:1 (isti
   odnos kao --sky-deep, već proveren u brend dokumentu), pa sitan beli
   tekst prolazi 4.5:1 na celoj površini; krupan H1 prolazi i sa laganim
   posvetljenjem pri vrhu. Svetlija crvena obara beli tekst - zato se ne
   "pojačava". Nijedan nov brend token nije uveden. */
.hero-vps{
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg, #C2402C 0%, #A33523 100%);
  color:#fff;
}
/* isti oblak-znak sa loga kao ostali hero-i (include hero-cloud.php),
   samo gore-desno i bledji. */
.hero-vps .hd-cloud{ right:-150px; top:-160px; bottom:auto; fill:rgba(255,255,255,0.10); }
.hv-inner{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px 44px;
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  align-items:center;
}
.hv-copy{ max-width:560px; }
.hv-kicker{
  display:inline-block;
  background:#fff;
  color:var(--ink);
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:11.5px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
}
.hv-title{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:29px;
  line-height:1.13;
  letter-spacing:-0.02em;
  color:#fff;
  margin:0;
}
.hv-title span{ color:#FFDAD3; }
.hv-sub{
  margin:16px 0 0;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-weight:300;
  font-size:15.5px;
  line-height:1.65;
  color:#FCE3E1;
  max-width:480px;
}
.hv-pricechip{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  margin:22px 0 0;
  padding:9px 15px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:999px;
}
.hv-pricechip .l{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#FCE3E1;
}
.hv-pricechip b{ font-family:'Sora', sans-serif; font-weight:800; font-size:17px; color:#fff; }
.hv-pricechip .per{ font-size:12px; color:#FCE3E1; }
.hv-ctas{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:24px;
}
.hv-cta-primary{
  display:inline-block;
  background:#fff;
  color:var(--card-red-deep);
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:14.5px;
  padding:15px 28px;
  border-radius:9px;
  transition: filter .15s ease;
}
.hv-cta-primary:hover{ filter:brightness(0.95); }
.hv-cta-secondary{
  color:#fff;
  font-family:'Sora', sans-serif;
  font-weight:600;
  font-size:14.5px;
  padding:14px 4px;
  border-bottom:1.5px solid rgba(255,255,255,0.6);
  transition: border-color .15s ease;
}
.hv-cta-secondary:hover{ border-color:#fff; }
.hv-trust{
  margin:26px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  font-size:12px;
  color:#FCE3E1;
}
.hv-trust span{ white-space:nowrap; }
.hv-trust span + span::before{ content:"\00B7"; margin-right:10px; color:rgba(255,255,255,0.5); }

/* desna kolona: ilustracija (terminal / SolusVM panel). Cela je
   dekorativna - aria-hidden na .hv-panel u markupu; sve podatke nosi
   leva kolona. */
.hv-panel{ position:relative; width:100%; max-width:440px; margin:0 auto; }
.hv-term{
  position:relative;
  background:#0d1117;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  box-shadow:0 34px 64px -24px rgba(0,0,0,0.55);
  overflow:hidden;
}
.hv-term-bar{
  display:flex;
  align-items:center;
  gap:7px;
  padding:11px 14px;
  background:#161b22;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.hv-term-bar i{ width:11px; height:11px; border-radius:50%; background:#ff5f56; }
.hv-term-bar i:nth-child(2){ background:#ffbd2e; }
.hv-term-bar i:nth-child(3){ background:#27c93f; }
.hv-term-bar > span{
  margin-left:8px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:#8b949e;
}
/* "ONLINE" u naslovnoj traci, skroz desno - uvek vidljiv */
.hv-term-bar .hv-term-status{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:'JetBrains Mono', monospace;
  font-weight:600;
  font-size:9.5px;
  letter-spacing:0.08em;
  color:#3fb950;
}
.hv-term-body{
  padding:16px 16px 18px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  line-height:1.75;
  color:#c9d1d9;
  /* drzi visinu dok main.js prekucava seansu red po red (kraci sadrzaj
     na pocetku ciklusa ne sme da pomera .hv-gauges ispod) - 7 redova */
  min-height:181px;
}
.hv-term-body .pr{ color:#7ee787; }
.hv-term-body .pt{ color:#79c0ff; }
.hv-term-body .ok{ color:#3fb950; }
.hv-term-body .dim{ color:#6e7681; }
/* Treptaj kursora - uvek aktivan; sajt nema prefers-reduced-motion
   kill-switch (vlasnik, 2026-09-12, vidi napomenu na vrhu fajla). */
.hv-cursor{
  display:inline-block;
  width:7px; height:14px;
  background:#c9d1d9;
  vertical-align:-2px;
  animation:hvblink 1.05s steps(1) infinite;
}
@keyframes hvblink{ 50%{ opacity:0; } }
.hv-gauges{
  border-top:1px solid rgba(255,255,255,0.06);
  padding:14px 16px 16px;
  display:grid;
  gap:9px;
  background:#0b0f14;
}
.hv-gauge{
  display:grid;
  /* fiksna poslednja kolona (dovoljno za "3.8 / 10 GB") + nowrap na .val -
     oznaka "GB" ostaje u istom redu sa brojem */
  grid-template-columns:36px 1fr 70px;
  align-items:center;
  gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  color:#8b949e;
}
.hv-gauge .track{
  display:block;
  height:6px;
  border-radius:3px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
}
/* .fill je <span> u <span class="track"> - mora eksplicitno display:block
   + fiksna visina (inline element ignoriše width/height). Širinu animira
   main.js (js-bar / data-fill); inline style="width:..%" je fallback bez
   JS-a. Bez CSS transitiona - main.js crta korak po korak (rAF). */
.hv-gauge .fill{ display:block; height:6px; border-radius:3px; }
.hv-gauge--cpu  .fill{ background:#3F9AAE; }  /* tirkiz      - CPU */
.hv-gauge--ram  .fill{ background:#79C9C5; }  /* mint        - RAM */
.hv-gauge--disk .fill{ background:#FFE2AF; }  /* peščano žuto - DISK */
.hv-gauge .val{ text-align:right; color:#c9d1d9; white-space:nowrap; }
/* beli "pill" koji drzi zvanicni SolusVM logo (assets/img/solusvm-logo.svg,
   inline preko PHP include-a, isto kao logo u header-u). */
.hv-badge-panel{
  position:absolute;
  left:16px; bottom:-13px;
  display:inline-flex;
  align-items:center;
  background:#fff;
  padding:8px 16px;
  border-radius:999px;
  box-shadow:0 10px 22px -10px rgba(0,0,0,0.45);
}
.hv-badge-logo{ display:block; height:10.5px; width:auto; }

@media (min-width:768px){
  .hv-inner{ padding:52px 32px 52px; }
  .hv-title{ font-size:34px; }
}
@media (min-width:1024px){
  .hv-inner{ grid-template-columns:1.05fr 0.95fr; gap:56px; padding:76px 40px 76px; }
  .hero-vps .hd-cloud{ width:720px; height:720px; right:-180px; top:-220px; }
  .hv-title{ font-size:43px; }
  .hv-sub{ font-size:16.5px; }
}

/* ---- CENOVNIK: reuse .hp-* (vidi /web-hosting), novi modifikatori. Tri
   VPS nivoa su tri RAZLICITE boje (odobreno 2026-08-28): START tirkiz
   #3F9AAE, ADVANCED koral #F96E5B (= --card-red), PRO tamnoplava #132440.
   Svaki .hp-outer je vertikalni gradijent linear-gradient(0deg, <tamno> 0%,
   <sredina> ~50%, <boja> 100%) - dno (0%) je najtamnije jer tu sedi
   .hp-guarantee, pa joj --hp-fg ostaje svetla. --hp-fg-inner je zatamnjena
   varijanta boje (ikona/tagline/naslov/tacke na BELOJ .hp-inner podlozi,
   mora proci 4.5:1). ---- */
.hp-grid--vps{ grid-template-columns:1fr; }
@media (min-width:768px){
  /* align-items:end -> sve tri kartice se ravnaju po DNU; ADVANCED je viši
     tačno za "Najtraženiji" bedž i time viri iznad START/PRO. Isti obrazac
     kao .hp-grid na /web-hosting. */
  .hp-grid--vps{ grid-template-columns:repeat(3, 1fr); align-items:end; gap:20px; }
}
@media (min-width:1024px){
  .hp-grid--vps{ gap:24px; }
}
/* START — tirkiz */
.hp-card--vstart{ --vteal:#3F9AAE; --vteal-deep:#215C6B; --hp-fg-inner: var(--vteal-deep); --hp-fg:#D6EEF2; }
.hp-card--vstart .hp-outer{ background:linear-gradient(0deg, #10333D 0%, var(--vteal-deep) 52%, var(--vteal) 100%); box-shadow:0 20px 38px -20px rgba(33,92,107,0.45); }
.hp-card--vstart .hp-cta{ background:#fff; color:var(--vteal-deep); }
.hp-card--vstart .hp-cta:hover{ filter:brightness(0.97); }
.hp-card--vstart .hp-guarantee{ color:var(--hp-fg); opacity:1; }

/* ADVANCED — koral, "Najtraženiji" */
.hp-card--vadv{ --vcoral:#F96E5B; --vcoral-deep:#C2402C; --hp-fg-inner: var(--vcoral-deep); --hp-fg:#FCE3E1; }
.hp-card--vadv .hp-outer{ background:linear-gradient(0deg, #5A160B 0%, var(--vcoral-deep) 52%, var(--vcoral) 100%); box-shadow:0 22px 40px -20px rgba(194,64,44,0.5); }
.hp-card--vadv .hp-cta{ background:#fff; color:var(--vcoral-deep); }
.hp-card--vadv .hp-cta:hover{ filter:brightness(0.97); }
.hp-card--vadv .hp-guarantee{ color:var(--hp-fg); opacity:1; }

/* PRO — tamnoplava (navy) */
.hp-card--vpro{ --vnavy:#132440; --vnavy-lift:#2E4E7A; --hp-fg-inner: var(--vnavy); --hp-fg:#C3D0E6; }
.hp-card--vpro .hp-outer{ background:linear-gradient(0deg, #0A1120 0%, var(--vnavy) 50%, var(--vnavy-lift) 100%); box-shadow:0 22px 42px -20px rgba(10,17,32,0.6); }
.hp-card--vpro .hp-cta{ background:#fff; color:var(--vnavy); }
.hp-card--vpro .hp-cta:hover{ filter:brightness(0.97); }
.hp-card--vpro .hp-guarantee{ color:var(--hp-fg); opacity:1; }
/* jednokratni setup - sedi ispod cene; obe vrednosti (sa/bez PDV-a) su u
   markupu, .price-incl/.price-excl ih menja kao i glavnu cenu jer .hp-setup
   sedi unutar iste .pricing.vat-scope sekcije. */
.hp-setup{ margin:-12px 0 18px; font-size:12px; color:#68727c; }
.hp-setup b{ font-family:'JetBrains Mono', monospace; font-weight:600; color:#4d5862; }
.pricing-group-kicker{
  text-align:center;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--card-red-deep);
  margin:0 0 18px;
}

/* ---- DODATNE VPS USLUGE ---- */
.addons{ padding:48px 24px; background:#fff; }
.addons-grid{
  margin:26px 0 0;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media (min-width:768px){ .addons-grid{ grid-template-columns:repeat(3, 1fr); } }
/* isti bocni razmak kao .benefits / .security - inace naslov ovog bloka
   sedi ~40px levije od ostalih sekcija na desktopu. */
@media (min-width:1024px){ .addons{ padding:72px 64px 76px; } }
.addon-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  background:#fff;
}
.addon-card .icon{ margin-bottom:12px; }
.addon-card .icon svg{ width:26px; height:26px; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.addon-card h3{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--ink);
  margin-bottom:8px;
}
.addon-card > p{
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
  margin-bottom:16px;
}
.addon-price{ margin-top:auto; display:grid; gap:0; }
.addon-price li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  font-size:12.5px;
  line-height:1.5;
  color:#4d5862;
  padding:9px 0;
  border-top:1px solid #f0f3f5;
}
.addon-price .amt{
  font-family:'JetBrains Mono', monospace;
  font-weight:600;
  font-size:12px;
  color:var(--ink);
  white-space:nowrap;
}

/* =========================================================
   O NAMA (o-nama.php)
   Hero je jednokolonski - nema proizvoda za desnu kolonu kao na
   pocetnoj, pa je fokus na velikom "answer-first" naslovu i traci
   cinjenica. Podaci firme stoje na JEDNOM mestu (sekcija
   .company-data), ne i u hero-u - da se ne dupliraju. Naslovni
   blokovi dele .criteria-head / .criteria-kicker sa ostatkom sajta.
   ========================================================= */

/* Bez podvlacenja linkova na /o-nama (zahtev vlasnika). Vazi samo za
   ovu stranu - <body class="page-about"> - pa deljene klase
   (.faq-answer a, .seo-expand-inner a...) na ostalim stranama ostaju
   netaknute. Fokus prsten (sitewide outline) i dalje oznacava fokus. */
.page-about a,
.page-about a:hover,
.page-about a:focus-visible{ text-decoration:none; }

.hero-about{
  position:relative;
  overflow:hidden;
  background:#FFF9F6;
  border-bottom:1px solid #eef1f3;
}
/* Isti oblak-znak (includes/hero-cloud.php) kao domenski hero, ovde
   taman i jedva vidljiv na toploj beloj podlozi. */
.hero-about .hd-cloud{
  fill:rgba(20,32,43,0.04);
  right:-150px; bottom:auto; top:-140px;
}
.ha-inner{
  position:relative;
  max-width:1160px;
  margin:0 auto;
  padding:48px 24px 44px;
}
.ha-kicker{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sky-deep);
  margin-bottom:18px;
}
.ha-title{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:32px;
  line-height:1.12;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
  max-width:620px;
}
.ha-title span{ color:var(--hosting-display); }
.ha-lead{
  margin:18px 0 0;
  font-size:16.5px;
  line-height:1.68;
  color:#5f5450;
  max-width:600px;
  font-weight:300;
}
.ha-lead b{ font-weight:600; color:#4a4340; }
.ha-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}
.ha-facts{
  list-style:none;
  margin:32px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:14px 26px;
  max-width:600px;
}
.ha-facts li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  line-height:1.5;
  color:#4d5862;
}
.ha-facts li::before{
  content:"";
  position:absolute;
  left:0; top:6px;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--hosting);
}
.ha-facts b{
  display:block;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:13px;
  color:var(--ink);
  margin-bottom:2px;
}

@media (min-width:768px){
  .ha-facts{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px){
  .ha-inner{ padding:64px 32px 60px; }
  .ha-title{ font-size:42px; }
}

/* KO SMO - tekst levo, citat-poster desno (2 kolone od 960px) */
.about-story{ padding:52px 24px 40px; background:#fff; }
.about-story-grid{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.about-story-copy .criteria-kicker{ text-align:left; }
.about-story-copy h2{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:24px;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 18px;
}
.about-story-copy p{
  font-size:15.5px;
  line-height:1.75;
  color:#4d5862;
  margin:0 0 16px;
}
.about-story-copy p:last-child{ margin-bottom:0; }
@media (min-width:768px){
  .about-story{ padding:64px 24px 48px; }
  .about-story-copy h2{ font-size:28px; }
}
@media (min-width:960px){
  .about-story{ padding:72px 32px 56px; }
  .about-story-grid{ grid-template-columns:1.25fr 0.85fr; gap:52px; align-items:center; }
}

/* Citat: na uskim ekranima klasican blockquote (SVG poster je previse
   visok pa jede prostor), a od 960px - kad "Ko smo" postane 2 kolone -
   desna kolona dobija gotov tipografski poster (assets/img/uspeh-je-
   nauka.svg) na tamnoj kartici, da svetle reci u SVG-u odskoce. */
.qp{ margin:0; }
.qp-text{
  margin:0;
  padding:2px 0 2px 20px;
  border-left:3px solid var(--sky);
  font-family:'Sora', sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:1.5;
  color:var(--ink);
}
.qp-svg{ display:none; }

@media (min-width:960px){
  .qp{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 28px;
    background:linear-gradient(160deg, #1c2b39, #0d151d);
    border-radius:16px;
  }
  .qp-text{ display:none; }
  .qp-svg{ display:block; width:100%; max-width:320px; height:auto; }
}

/* Centrirani naslov sekcije (deljeno: .about-services, .mvv) */
.svc-head{ max-width:640px; margin:0 auto 34px; text-align:center; }
.svc-head h2{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:26px;
  line-height:1.2;
  color:var(--ink);
  margin:0;
}

/* STA RADIMO - linkovane kartice usluga (interni hub).
   Suptilna dijagonalna srafura u pozadini (ista tehnika kao .seo-block
   / .pricing::before), blaga plava da ostane u brendu. */
.about-services{
  padding:44px 24px;
  border-top:1px solid #eef1f3;
  background:
    repeating-linear-gradient(135deg, rgba(30,123,166,0.045) 0, rgba(30,123,166,0.045) 1px, transparent 1px, transparent 13px),
    #fff;
}
.svc-grid{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.svc-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px 20px;
  background:#fff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.svc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px -22px rgba(20,32,43,0.35);
  border-color:#d5dde2;
}
.svc-card .icon{ margin-bottom:12px; }
.svc-card .icon svg{
  width:26px; height:26px;
  stroke-width:1.8; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.svc-card h3{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--ink);
  margin:0 0 6px;
}
.svc-card p{
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
  margin:0 0 14px;
}
.svc-card .svc-go{
  margin-top:auto;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:13px;
  color:var(--hosting-deep);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.svc-card .svc-go svg{ width:15px; height:15px; stroke:currentColor; stroke-width:2.2; fill:none; transition:transform .15s ease; }
.svc-card:hover .svc-go svg{ transform:translateX(3px); }
@media (min-width:768px){
  .about-services{ padding:60px 24px; }
  .svc-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px){
  .svc-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* MISIJA / VIZIJA / VREDNOSTI - vlasnikov sadrzaj, tri kartice */
.mvv{ padding:44px 24px; background:#FBFBFA; border-top:1px solid #eef1f3; }
.mvv-grid{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.mvv-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px 22px;
}
.mvv-card .k{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sky-deep);
  margin:0 0 12px;
}
.mvv-card > p{ font-size:14px; line-height:1.7; color:#4d5862; margin:0; }
.mvv-card ul{ margin:0; padding:0; list-style:none; }
.mvv-card li{
  position:relative;
  padding-left:18px;
  font-size:14px;
  line-height:1.55;
  color:#4d5862;
  margin-bottom:10px;
}
.mvv-card li:last-child{ margin-bottom:0; }
.mvv-card li::before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--hosting);
}
@media (min-width:768px){
  .mvv{ padding:60px 24px; }
  .mvv-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* PODACI FIRME - jedini blok sa podacima firme na strani.
   Tamna podloga (ista kao .security: --ink gradijent + blaga srafura) da
   bele .cd-card kartice iskoce. Naslovni blok koristi .criteria-head, pa
   se boje kickera/h2/uvoda prebacuju na svetlo (isto kao .security). */
.company-data{
  padding:44px 24px;
  color:#fff;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 14px),
    linear-gradient(160deg, var(--ink), #0d151d);
}
/* .criteria-head ima i kicker i uvodni <p> kao direktnu decu, pa
   ".criteria-head > p" nadjacava obican ".company-data .criteria-kicker";
   zato kicker ovde ide sa jednom klasom vise. */
.company-data .criteria-head .criteria-kicker{ color:var(--sky); }
.company-data .criteria-head h2{ color:#fff; }
.company-data .criteria-head > p{ color:#C7D2DA; }
.cd-grid{
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.cd-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px 22px;
  background:#fff;
  box-shadow:0 24px 48px -26px rgba(0,0,0,0.55);
}
.cd-card h3{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  margin:0 0 14px;
}
.cd-list{ margin:0; }
.cd-list > div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:9px 0;
  border-top:1px solid #f0f3f5;
}
.cd-list > div:first-child{ border-top:none; }
.cd-list dt{ font-size:12.5px; color:var(--text-muted); flex-shrink:0; }
.cd-list dd{
  margin:0;
  text-align:right;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--ink);
  word-break:break-word;
}
.cd-list dd.plain{ font-family:'Sora', sans-serif; font-weight:700; font-size:13px; }
.cd-list dd a{ font-family:'Sora', sans-serif; font-weight:700; font-size:13px; color:var(--hosting-deep); }
@media (min-width:768px){
  .company-data{ padding:56px 24px 60px; }
  .cd-grid{ grid-template-columns:1fr 1fr; }
}

/* CTA TRAKA - konverzija (hosting + domen), tamna kao .security.
   U pozadini je "twinkle" zrakasta tekstura (assets/img/bg-twinkle.svg,
   beli stroke) kao ::before sloj; sadrzaj je iznad (.about-cta > *). */
.about-cta{
  position:relative;
  overflow:hidden;
  padding:44px 24px;
  background:linear-gradient(160deg, var(--ink), #0d151d);
  color:#fff;
  text-align:center;
}
.about-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/assets/img/bg-twinkle.svg") center center / cover no-repeat;
  opacity:0.10;
  pointer-events:none;
}
.about-cta > *{ position:relative; z-index:1; }
.about-cta h2{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:24px;
  line-height:1.2;
  margin:0 0 10px;
}
.about-cta p{
  font-size:14.5px;
  line-height:1.65;
  color:#C7D2DA;
  max-width:460px;
  margin:0 auto 22px;
}
.ac-btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
/* --ink dugme bi se stopilo sa tamnom CTA podlogom. Ovde je par: belo
   puno dugme (primarno) + beli okvir (sekundarno), isti oblik i visina. */
.about-cta .btn-primary{ background:#fff; color:var(--ink); }
.about-cta .btn-primary:hover{ background:#e6ebee; }
.about-cta .btn-secondary{
  padding:15px 24px;
  border:1.5px solid rgba(255,255,255,0.45);
  border-radius:9px;
  color:#fff;
}
.about-cta .btn-secondary:hover{ border-color:#fff; color:#fff; }
@media (min-width:768px){
  .about-cta{ padding:60px 24px; }
  .about-cta h2{ font-size:28px; }
}

/* "SkyHosting - o firmi" (seo-block na /o-nama): jedina tekstura je
   "flurry" SVG (assets/img/bg-flurry.svg) preko blagog tinta. Bazna
   .seo-block ima jos jednu (CSS repeating-linear-gradient) srafuru - tu
   ovde iskljucujemo da ne bude duplo. */
.page-about .seo-block{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, #EFF5F8, #F7FAFB);
}
.page-about .seo-block::before{
  content:"";
  position:absolute;
  inset:0;
  /* Fiksna velicina + repeat: kad se "Procitaj vise" otvori i sekcija
     poraste, "cover" bi re-skalirao sliku (tekstura se "razvuce") - ovako
     se samo ponovi, ista razmera. */
  background:url("/assets/img/bg-flurry.svg") top center / 640px 640px repeat;
  opacity:0.12;
  pointer-events:none;
}
.page-about .seo-inner{ position:relative; z-index:1; }

  /* =========================================================
     SSL SERTIFIKATI — sve novo za /ssl-sertifikati

     Reuse bez ijedne izmene: .benefits-head / .criteria-head (naslovi sekcija),
     .faq, .seo-block, .svc-grid/.svc-card (SSL alati), .btn-primary/.btn-secondary,
     .vat-scope/.vat-toggle/.price-incl/.price-excl (PDV preklopnik), .hd-cloud.

     Boje: stranica ima zelenu (--card-green familija, već definisana kao SSL
     kartica na početnoj). Tri nivoa validacije:
       DV -> zelena      (--card-green / --card-green-deep) - postojeći token
       OV -> narandžasta (--card-orange / --card-orange-deep) - vlasnik,
             2026-09-01; jedina genuinski nova boja na strani, upisana i u
             docs/brand-guidelines.md
       EV -> plava       (--hosting / --hosting-deep) - postojeći token,
             preuzet od OV (koji je pre ove izmene bio plav)
     ========================================================= */

  /* ---- HERO ----
     Gradijent je u istom pojasu svetline kao .hero-domain: mastilo 5.3:1-4.7:1
     (prolazi 4.5:1 za sitan tekst), belo 3.1:1-3.5:1 (prolazi 3:1, što važi
     samo za krupan naslov). Svetlije obara belo, tamnije obara mastilo. */
  .hero-ssl{
    position:relative;
    overflow:hidden;
    background:linear-gradient(160deg, #41A18B, #3A9880);
    padding:40px 20px 44px;
  }
  .hero-ssl .hd-cloud{
    position:absolute;
    width:520px; height:520px;
    right:-160px; bottom:-190px;
    fill:rgba(255,255,255,0.14);
    pointer-events:none;
  }
  .hs-inner{ position:relative; max-width:1160px; margin:0 auto; }
  .hs-kicker{
    display:inline-block;
    background:#fff; color:var(--ink);
    font-family:'Sora', sans-serif;
    font-weight:800; font-size:11.5px;
    letter-spacing:0.09em; text-transform:uppercase;
    padding:6px 14px; border-radius:999px;
    margin:0 0 16px;
  }
  .hs-title{
    font-family:'Sora', sans-serif;
    font-weight:800; font-size:29px; line-height:1.14;
    letter-spacing:-0.02em; color:var(--ink);
    margin:0;
  }
  .hs-title .hs-accent{ color:#fff; }
  /* Prvi pasus je "answer-first" definicija - jedna rečenica koju AI pretraga
     može da citira doslovno. Zato je krupniji od ostalog teksta i stoji odmah
     ispod H1, bez ijednog elementa između. */
  .hs-lead{
    font-family:'Inter', system-ui, sans-serif;
    font-weight:400; font-size:15px; line-height:1.65;
    color:var(--ink); max-width:600px;
    margin:14px 0 0;
  }
  .hs-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none; }
  .hs-chip{
    font-family:'Sora', sans-serif; font-weight:700; font-size:12.5px;
    color:var(--ink); background:rgba(255,255,255,0.72);
    border:1px solid rgba(255,255,255,0.9);
    border-radius:100px; padding:5px 12px;
  }
  .hs-pricechip{
    display:inline-flex; align-items:baseline; gap:7px; flex-wrap:wrap;
    background:#fff; border-radius:12px;
    padding:10px 16px; margin:20px 0 0;
    box-shadow:0 14px 30px -16px rgba(10,20,30,0.55);
  }
  .hs-pricechip .l{ font-family:'Sora',sans-serif; font-size:12.5px; font-weight:600; color:var(--text-muted); }
  .hs-pricechip b{ font-family:'Sora',sans-serif; font-size:23px; font-weight:800; color:var(--ink); letter-spacing:-0.01em; }
  .hs-pricechip .per{ font-family:'Sora',sans-serif; font-size:12.5px; font-weight:600; color:var(--text-muted); }
  .hs-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; }
  /* Bela dugmad na boji - ista logika kao .about-cta: puna bela za primarno,
     beli obris za sekundarno. */
  .hero-ssl .btn-primary{ background:#fff; color:var(--ink); }
  .hero-ssl .btn-primary:hover{ background:#F2F6F5; color:var(--ink); }
  .hero-ssl .btn-secondary{ border-color:#fff; color:#fff; background:transparent; }
  .hero-ssl .btn-secondary:hover{ background:rgba(255,255,255,0.16); color:#fff; }
  .hs-panel{ margin:28px 0 0; }
  .hs-panel svg{ width:100%; max-width:520px; height:auto; display:block; margin:0 auto; }
  /* Nema ulazne fade-in animacije - sadržaj je odmah vidljiv (vlasnik,
     2026-09-01: "izbaci fade-in, neka odmah bude vidljivo"). Jedina
     animacija u ovoj ilustraciji je .hs-alert treperenje ispod. */

  /* Trougao upozorenja + "NIJE BEZBEDNO" bedž trepere par puta kao upozorenje,
     stoje mirno nekoliko sekundi, pa ponove - beskonačna petlja, čisto CSS,
     bez JS-a. Radi uvek (vlasnik, 2026-09-12) - bez animacije bedž bi
     jednostavno ostao stalno vidljiv, ništa se ne bi izgubilo. */
  .hs-alert{ animation:hsAlertBlink 6s ease-in-out .8s infinite; transform-origin:400px 234px; }
  /* Bag koji je izgledao kao "trepne pa se polako pojavljuje": bez zaustavne
     tačke odmah POSLE poslednjeg treptaja (15%), animacija je od 15% do 100%
     interpolirala neprekidno preko čitavog ostatka kruga - 82% od 6s ciklusa
     je bio jedan dug, spor prelaz umesto mirovanja. 18% zatvara taj razmak:
     isti brzi skok kao ostali treptaji, pa 18%-100% ostaje ravno (obe tačke
     opacity:1 = nema animacije, čisto mirovanje). */
  @keyframes hsAlertBlink{
    0%, 6%, 12%, 18%, 100%{ opacity:1; }
    3%, 9%, 15%{ opacity:.25; }
  }

  /* ---- IZBORNIK ----
     Bez JS-a: pitanja ostaju čitljiv tekst, a ispod njih stoji .sw-fallback
     tabela odluke sa istim sadržajem. JS sakriva tabelu i pali dugmad - po
     kućnom pravilu (isto kao .vat-toggle) kontrole se ne prikazuju mrtve. */
  .ssl-wizard{ background:#F6FAF9; padding:44px 20px 48px; }
  /* 1120px, ne 1000px: na 1000px druga kartica ("Treba li da u sertifikatu
     piše ime firme?", 289px teksta + 22px bedž + 8px razmak + 36px padding
     = 355px potrebno) nije stala u red - kartica je bila 321px. */
  .sw-inner{ max-width:1120px; margin:0 auto; }
  /* Forma je u HTML-u hidden, JS je otkriva. Bez JS-a radio dugmad ne bi radila
     ništa, pa umesto njih ostaje .sw-fallback tabela sa istim sadržajem. */
  .sw-steps{ display:flex; flex-direction:column; gap:18px; margin:26px 0 0; }
  .sw-steps[hidden]{ display:none; }
  .sw-step{
    background:#fff; border:1px solid var(--border); border-radius:14px;
    padding:18px 18px 20px; margin:0; min-width:0;
  }
  /* Ne <legend> - taj element ima poseban, nepredvidiv box model u
     različitim browserima (Firefox ga po podrazumevanom ponašanju ne steže
     na širinu roditelja) i prvi pokušaj (width:100% na samom legend-u) to
     nije dovoljno rešio, naslov je i dalje ispadao. Običan <div> sa
     aria-labelledby na <fieldset>-u nosi isto značenje za čitač ekrana bez
     ijedne od tih nedoslednosti - normalan blok element, normalno prelama. */
  .sw-step-head{
    display:flex; align-items:flex-start; gap:8px;
    font-family:'Sora', sans-serif; font-weight:700; font-size:15px;
    color:var(--ink); margin:0 0 4px;
  }
  .sw-num{
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 22px; width:22px; height:22px;
    border-radius:100px;
    background:var(--card-green-deep); color:#fff;
    font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:600;
  }
  .sw-step-title{ flex:1 1 auto; min-width:0; }
  .sw-opts{ display:flex; flex-direction:column; gap:8px; margin:12px 0 0; }
  .sw-opt{
    display:flex; align-items:flex-start; gap:10px;
    border:1px solid var(--border); border-radius:10px;
    padding:11px 13px; cursor:pointer;
    font-family:'Inter', system-ui, sans-serif; font-size:14px; line-height:1.5;
    color:var(--ink); background:#fff;
    transition:border-color .15s ease, background .15s ease;
  }
  .sw-opt:hover{ border-color:var(--card-green); background:#F7FCFB; }
  .sw-opt input{ margin:3px 0 0; accent-color:var(--card-green-deep); flex-shrink:0; }
  .sw-opt:has(input:checked){ border-color:var(--card-green-deep); background:#F1FAF7; }
  .sw-opt-note{ display:block; font-size:12.5px; color:var(--text-muted); margin-top:2px; }
  .sw-result{
    margin:22px 0 0; padding:18px 18px 20px;
    background:#fff; border:2px solid var(--card-green); border-radius:14px;
  }
  .sw-result[hidden]{ display:none; }
  .sw-result h3{
    font-family:'Sora', sans-serif; font-weight:800; font-size:17px;
    color:var(--ink); margin:0 0 8px;
  }
  .sw-result p{ font-family:'Inter', sans-serif; font-size:14.5px; line-height:1.65; color:var(--ink); margin:0 0 14px; }
  .sw-pick{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
    padding:12px 0 14px; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    margin-bottom:14px;
  }
  .sw-pick .n{ font-family:'Sora',sans-serif; font-weight:800; font-size:16.5px; color:var(--ink); }
  .sw-pick .p{ font-family:'Sora',sans-serif; font-weight:800; font-size:20px; color:var(--card-green-deep); }
  .sw-pick .u{ font-family:'Sora',sans-serif; font-weight:600; font-size:12.5px; color:var(--text-muted); }
  /* Dugme unutar rečenice, ne zaseban element - deljena akcija sa "Vidi sve
     koji odgovaraju" (main.js). Reset UA dugmeta na inline tekst pa mu se
     doda podebljan, krupniji, podvučen izgled kao link. */
  .sw-count-link{
    display:inline; background:none; border:0; padding:0; margin:0;
    font:inherit; font-weight:800; font-size:16px;
    color:var(--card-green-deep); text-decoration:underline; text-underline-offset:2px;
    cursor:pointer;
  }
  .sw-count-link:hover{ color:var(--card-green-hover); }
  /* Ova sekcija je zelena (SSL akcenat), pa Poruči/Vidi sve dugmad ovde
     prate istu boju kao .sc-cta na karticama ponude, umesto podrazumevane
     tamne/plave iz .btn-primary/.btn-secondary. */
  .sw-actions .btn-primary{ background:var(--card-green-deep); }
  .sw-actions .btn-primary:hover{ background:var(--card-green-hover); }
  .sw-actions .btn-secondary:hover{ color:var(--card-green-deep); border-color:var(--card-green-deep); }
  .sw-actions{ display:flex; flex-wrap:wrap; gap:10px; }
  .sw-fallback{ margin:22px 0 0; }
  .sw-fallback[hidden]{ display:none; }
  .sw-fallback table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
  .sw-fallback th, .sw-fallback td{
    text-align:left; padding:11px 13px; border-bottom:1px solid #f2f5f6;
    font-family:'Inter', sans-serif; font-size:13.5px; line-height:1.55; color:var(--ink);
  }
  .sw-fallback thead th{
    font-family:'Sora', sans-serif; font-weight:700; font-size:12px;
    letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted); background:#FBFCFD;
  }

  /* ---- ŠTA JE SSL ---- */
  .ssl-what{ padding:48px 20px 44px; }
  .ssl-what-inner{ max-width:1160px; margin:0 auto; }
  /* Definiciju držimo vizuelno izdvojenu: to je pasus koji Google i AI alati
     najčešće izvlače kao odgovor, pa mora da se čita kao celina. */
  .ssl-def{
    border-left:3px solid var(--card-green);
    padding:2px 0 2px 16px; margin:0 0 22px;
    font-family:'Inter', system-ui, sans-serif;
    font-size:16px; line-height:1.7; color:var(--ink); max-width:760px;
  }
  .ssl-what p{ font-family:'Inter', sans-serif; font-size:14.5px; line-height:1.75; color:var(--ink); max-width:760px; }
  .ssl-what a{ color:var(--card-green-deep); font-weight:700; }

  /* ---- TIPOVI VALIDACIJE ---- */
  .ssl-val{ background:#FBFBFA; padding:48px 20px 52px; }
  .ssl-val-inner{ max-width:1160px; margin:0 auto; }
  /* Dijagram ima fiksne proporcije i ne moze da se prelije kao tekst. Ispod
     ~840px se ne smanjuje dalje - skroluje se vodoravno u svom okviru, da
     natpisi ostanu citljivi. Sve sto dijagram kaze stoji i u tekstu ispod. */
  .ill-scroll{ margin:26px 0 12px; overflow-x:auto; }
  .ill-scroll svg{ width:100%; min-width:840px; height:auto; display:block; }
  .ill-cap{
    font-family:'Inter', sans-serif; font-size:12.5px; line-height:1.6;
    color:var(--text-muted); text-align:center; margin:0 0 30px;
  }
  .ssl-val-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
  /* Grid red već isteže kartice na istu visinu (grid podrazumevano radi
     align-items:stretch); flex kolona + margin-top:auto na .svc-facts drži
     donji deo ZALEPLJEN za dno kartice bez obzira na to koliko je dugačak
     gornji pasus - kraći pasusi ostave prazninu IZNAD tabele činjenica,
     ne pomeraju je naviše/naniže između kartica. */
  .ssl-val-card{
    display:flex; flex-direction:column;
    background:#fff; border:1px solid var(--border);
    border-top:4px solid var(--lvl); border-radius:14px;
    padding:20px 18px 22px;
    transition:background-color .18s ease;
  }
  .ssl-val-card:hover{ background:var(--lvl-tint); }
  .ssl-val-card--dv{ --lvl:var(--card-green);  --lvl-deep:var(--card-green-deep);  --lvl-tint:#F1FAF7; }
  .ssl-val-card--ov{ --lvl:var(--card-orange); --lvl-deep:var(--card-orange-deep); --lvl-tint:#FBF0E1; }
  .ssl-val-card--ev{ --lvl:var(--hosting);     --lvl-deep:var(--hosting-deep);     --lvl-tint:#EAF4F8; }
  /* .ssl-val-card .svc-code, ne samo .svc-code: ".ssl-val-card > p" ispod ima
     specifičnost (0,1,1) i bez ove dve klase (0,2,0) bi nadjačao beli tekst
     bez obzira na redosled u fajlu - baš ovo je bio uzrok "beleg fonta koji
     se ne vidi" (vlasnik, 2026-09-01). */
  .ssl-val-card .svc-code{
    display:inline-block; align-self:flex-start;
    font-family:'JetBrains Mono', monospace; font-weight:600; font-size:15px;
    letter-spacing:0.06em;
    color:#fff; background:var(--lvl-deep);
    border-radius:100px; padding:3px 10px 0 10px; margin:0 0 10px;
  }
  .ssl-val-card h3{
    font-family:'Sora', sans-serif; font-weight:800; font-size:18px;
    color:var(--ink); margin:0 0 8px;
  }
  .ssl-val-card > p{ font-family:'Inter', sans-serif; font-size:14px; line-height:1.7; color:var(--ink); margin:0 0 14px; }
  .svc-facts{ margin-top:auto; padding:14px 0 0; border-top:1px solid #f2f5f6; }
  .svc-facts div{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; }
  .svc-facts dt{ font-family:'Sora', sans-serif; font-weight:600; font-size:12.5px; color:var(--text-muted); }
  .svc-facts dd{ font-family:'Sora', sans-serif; font-weight:700; font-size:13px; color:var(--ink); margin:0; text-align:right; }
  /* "Detaljnije" link ka konkretnom FAQ članku na sslsertifikati.rs - deli
     stil sa .ssl-cov-card ispod, isti obrazac na oba mesta. */
  .svc-more{ margin:12px 0 0; padding:12px 0 0; border-top:1px solid #f2f5f6; }
  .svc-more a{ font-family:'Sora', sans-serif; font-weight:700; font-size:12.5px; color:var(--card-green-deep); text-decoration:none; }
  .svc-more a:hover{ color:var(--card-green-hover); text-decoration:underline; }

  /* ---- POKRIVENOST DOMENA ---- */
  .ssl-cov{ padding:48px 20px 52px; }
  .ssl-cov-inner{ max-width:1160px; margin:0 auto; }
  .ssl-cov-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:8px; }
  .ssl-cov-card{
    display:flex; flex-direction:column;
    border:1px solid var(--border); border-radius:14px;
    padding:18px 18px 20px; background:#fff;
  }
  .ssl-cov-card h3{ font-family:'Sora', sans-serif; font-weight:800; font-size:16.5px; color:var(--ink); margin:0 0 8px; }
  .ssl-cov-card p{ font-family:'Inter', sans-serif; font-size:14px; line-height:1.7; color:var(--ink); margin:0 0 12px; }
  /* Zeleni okvir = pokriveno sertifikatom (isti obrazac kao ostale ilustracije
     u ovoj sekciji, samo kao pravi HTML umesto SVG-a). Sivi tekst ispod/izvan
     okvira = nije pokriveno; margin-top:auto ga gura na dno kartice, pa sve
     tri kartice ostaju iste visine iako imaju različit broj primera. */
  .ssl-cov-box{
    display:flex; flex-direction:column; gap:5px;
    font-family:'JetBrains Mono', monospace; font-size:13px; line-height:1.5;
    color:var(--ink); background:#F1FAF7; border:1.5px solid var(--card-green-deep);
    border-radius:10px; padding:12px 14px; margin:0 0 10px;
  }
  .ssl-cov-box .hi{ color:var(--card-green-deep); font-weight:700; }
  .ssl-cov-out{
    display:flex; flex-direction:column; gap:5px;
    font-family:'JetBrains Mono', monospace; font-size:13px; line-height:1.5;
    color:var(--text-muted); margin:0; margin-top:auto; padding-top:2px;
  }
  .ssl-cov-out span::before{ content:"\2715\00a0"; color:var(--card-red-deep); font-weight:700; }
  .ssl-cov .ill-cap{ margin-top:20px; }

  /* ---- PONUDA (kartice proizvoda) ----
     Kompaktnija kartica od .hp-card: ovde ih ima 8+ (posle proširenja ponude
     do 15), pa velika kartica sa cenovnika hostinga ne bi stala. */
  .ssl-offer{ background:#FBFBFA; padding:48px 20px 54px; }
  .ssl-offer-inner{ max-width:1160px; margin:0 auto; }
  .ssl-group{ margin:34px 0 0; }
  /* Grupa danas nema "display" pravilo pa je [hidden] iz UA stylesheet-a
     dovoljan - ovo je zaštita unapred, da dodavanje bilo kakvog "display"
     ovde kasnije ne obori skrivanje grupe kao što je oborilo kod kartica. */
  .ssl-group[hidden]{ display:none; }
  .ssl-group h3{
    font-family:'Sora', sans-serif; font-weight:800; font-size:19px;
    color:var(--ink); margin:0 0 4px;
  }
  .ssl-group > p{ font-family:'Inter', sans-serif; font-size:14px; line-height:1.7; color:var(--text-muted); margin:0 0 18px; }
  .ssl-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
  .ssl-card{
    display:flex; flex-direction:column;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    padding:18px 18px 20px;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  /* OBAVEZNO uz "display" na kartici: filter u JS-u sakriva kartice preko
     hidden atributa, a ugrađeno pravilo browsera [hidden]{display:none}
     dolazi iz UA stylesheet-a - svako "display" pravilo odavde ga nadjača i
     kartica ostane vidljiva iako je označena kao skrivena. Bez ove linije
     filter "Pokriva" nije radio uopšte (2026-09-01). Isti razlog postoji i
     kod .tldp-table tr[hidden] na cenovniku domena. */
  .ssl-card[hidden]{ display:none; }
  .ssl-card:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -22px rgba(10,20,30,0.45); }
  .sc-badges{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
  .ssl-badge{
    font-family:'Sora', sans-serif; font-weight:700; font-size:10.5px;
    letter-spacing:0.05em; text-transform:uppercase;
    border-radius:100px; padding:3px 9px; border:1px solid;
  }
  /* Pune, neprovidne podloge - providne bi zavisile od toga šta je ispod, pa
     se kontrast ne bi mogao pouzdano izračunati (isto kao .tldp-tag). */
  .b-dv{ color:var(--card-green-hover);  background:#E8F6F1; border-color:var(--card-green); }
  .b-ov{ color:var(--card-orange-hover); background:#FBF0E1; border-color:var(--card-orange); }
  .b-ev{ color:var(--hosting-deep);      background:#E8F3F6; border-color:var(--hosting); }
  .b-cov{ color:var(--ink);             background:#F2F4F5; border-color:#D8DEE2; }
  .sc-brand{ font-family:'Sora', sans-serif; font-weight:700; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); margin:0 0 3px; }
  /* Oznaka brenda na kartici prati boju iz njegovog stvarnog loga, da vizuelno
     "poentira" na traku logotipa ispod. Comodo koristi njihovu tačnu crvenu
     (#E3002A iz assets/img/comodo-logo.svg, 4.89:1 na belom - prolazi za sitan
     podebljan tekst). RapidSSL logo je doslovno dvobojan - "Rapid" u zelenom,
     "SSL" u crnom (assets/img/rapidssl-logo.svg) - ali njihova zelena je na
     belom svega ~2:1, pa se za tekst koristi već odobrena --card-green-deep
     (5.20:1, ista boja kao DV bedž na ovoj strani) umesto sirove boje loga.
     GeoTrust logo je dvobojan (plava+narandžasta) bez jasne dominantne boje za
     tekst, pa ostaje na podrazumevanoj sivoj. */
  .sc-brand--comodo{ color:#E3002A; }
  .sc-brand--rapidssl .rb-1{ color:var(--card-green-deep); }
  .sc-brand--rapidssl .rb-2{ color:var(--ink); }
  .sc-name{ font-family:'Sora', sans-serif; font-weight:800; font-size:17px; line-height:1.3; color:var(--ink); margin:0 0 12px; }
  .sc-price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin:0 0 3px; }
  .sc-price .amt{ font-family:'Sora', sans-serif; font-weight:800; font-size:26px; letter-spacing:-0.01em; color:var(--ink); }
  .sc-price .cur{ font-family:'Sora', sans-serif; font-weight:700; font-size:13px; color:var(--ink); }
  .sc-per{ font-family:'Sora', sans-serif; font-weight:600; font-size:12.5px; color:var(--text-muted); margin:0 0 14px; }
  /* Dodatna stavka cene (npr. cena po dodatnom SAN domenu) - ista pozicija i
     stil kao .hp-setup na /web-hosting (jednokratni setup uz mesečnu cenu). */
  .sc-addon{ font-family:'Inter', sans-serif; font-size:12.5px; color:var(--text-muted); margin:-6px 0 14px; }
  .sc-addon b{ color:var(--ink); font-weight:700; }
  .sc-features{ list-style:none; margin:0 0 14px; padding:0; }
  .sc-features li{
    position:relative; padding:0 0 0 22px; margin-bottom:7px;
    font-family:'Inter', sans-serif; font-size:13.5px; line-height:1.55; color:var(--ink);
  }
  .sc-features svg{
    position:absolute; left:0; top:2px; width:14px; height:14px;
    fill:none; stroke:var(--card-green-deep); stroke-width:2.4;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .sc-meta{ margin:auto 0 14px; padding:12px 0 0; border-top:1px solid #f2f5f6; }
  .sc-meta div{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; }
  .sc-meta dt{ font-family:'Sora', sans-serif; font-weight:600; font-size:12.5px; color:var(--text-muted); }
  .sc-meta dd{ font-family:'JetBrains Mono', monospace; font-weight:500; font-size:12.5px; color:var(--ink); margin:0; text-align:right; }
  .sc-cta{
    display:block; text-align:center; text-decoration:none;
    background:var(--card-green-deep); color:#fff;
    font-family:'Sora', sans-serif; font-weight:700; font-size:14.5px;
    border-radius:9px; padding:11px 16px;
    transition:background .15s ease;
  }
  .sc-cta:hover{ background:var(--card-green-hover); color:#fff; }
  .sc-more{ display:block; text-align:center; margin:9px 0 0; font-family:'Sora',sans-serif; font-weight:600; font-size:12.5px; color:var(--text-muted); }
  .sc-more:hover{ color:var(--card-green-deep); }

  /* ---- FILTER PONUDE ----
     Ranije "Uporedni prikaz" - samostalna sekcija sa tabelom (drugi cenovnik
     iste ponude). Uklonjena 2026-09-01 kao suvišna; isti filter čipovi sada
     sede u #ponuda i sakrivaju/prikazuju .ssl-card umesto redova tabele -
     .sslt-* imena su ostala ista da se ne menja i JS. */
  .sslt-controls{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:22px 0 18px; }
  .sslt-group{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .sslt-label{
    font-family:'Sora', sans-serif; font-weight:700; font-size:11.5px;
    letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted);
    min-width:78px;
  }
  .sslt-chip{
    font-family:'Sora', sans-serif; font-weight:700; font-size:13px;
    color:var(--ink); background:#fff;
    border:1px solid var(--border); border-radius:100px;
    padding:7px 14px; cursor:pointer;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
  }
  .sslt-chip:hover{ border-color:var(--card-green); }
  /* Klasa, ne [aria-pressed="true"] - aria-pressed ostaje čisto za čitače
     ekrana, .is-active nosi vizuelno stanje. Odvajanje ovog dvoje sklanja
     svaku sumnju oko toga da li se dugme koje "reaguje" na klik (menja
     data i sadržaj strane) i dugme koje "izgleda pritisnuto" oslanjaju na
     isti mehanizam - sad su potpuno nezavisna. */
  .sslt-chip.is-active{ background:var(--card-green-deep); border-color:var(--card-green-deep); color:#fff; }
  .sslt-chip:disabled{ cursor:default; opacity:.55; }
  .sslt-chip:disabled:hover{ border-color:var(--border); }

  .sslt-noresult{ font-family:'Inter', sans-serif; font-size:14.5px; color:var(--text-muted); padding:16px 0; }
  .sslt-noresult[hidden]{ display:none; }
  .sslt-foot{ font-family:'Inter', sans-serif; font-size:13px; line-height:1.7; color:var(--text-muted); margin:14px 0 0; }
  .sslt-foot a{ color:var(--hosting-deep); }
  .sslt-foot a:hover{ color:var(--hosting); text-decoration:underline; }

  /* ---- KAKO SE IZDAJE ---- */
  .ssl-steps{ background:#FBFBFA; padding:48px 20px 52px; }
  .ssl-steps-inner{ max-width:1160px; margin:0 auto; }
  .sst-list{ counter-reset:sst; list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:16px; }
  /* Isti obrazac kao .ssl-val-card: flex kolona + margin-top:auto na
     .sst-time drži vreme zalepljeno za dno bez obzira na dužinu opisa
     iznad, a grid red već izjednačava visinu kartica u istom redu. */
  .sst-list li{
    display:flex; flex-direction:column;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    padding:18px 18px 20px; transition:background-color .18s ease;
  }
  .sst-list li:hover{ background:#F1FAF7; }
  .sst-list li::before{
    counter-increment:sst; content:counter(sst, decimal-leading-zero);
    display:block; font-family:'JetBrains Mono', monospace; font-weight:600;
    font-size:13px; color:var(--card-green-deep); margin-bottom:8px;
  }
  .sst-list h3{ font-family:'Sora', sans-serif; font-weight:800; font-size:16px; color:var(--ink); margin:0 0 7px; }
  .sst-list p{ font-family:'Inter', sans-serif; font-size:14px; line-height:1.7; color:var(--ink); margin:0; }
  .sst-list a{ color:var(--card-green-deep); font-weight:700; }
  .sst-time{
    display:block; margin-top:auto; padding-top:12px;
    border-top:1px solid #f2f5f6;
    font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-muted);
  }

  /* ---- TRAKA BRENDOVA ----
     Logotipi su zvanični SVG-ovi sa sajtova brendova, ubačeni preko <img> (kao
     Sectigo pečat u footer.php - zvanična oznaka treće strane, ne recoluje se
     CSS-om, pa nema razloga za PHP inline). Vlasnik je poslao GeoTrust-ov
     logo koji radi direktno na beloj pozadini (2026-09-01) - stariji fajl sa
     njihovog sajta je bio varijanta samo za tamnu pozadinu (beo tekst), zato
     su sva tri loga privremeno sedela u tamnom čipu; taj čip više nije
     potreban. GeoTrust-ov SVG je imao width/height="100%" na <svg> korenu
     bez fiksnih dimenzija - Firefox u <img> kontekstu tada pogrešno računa
     razmeru (poznat razmimoilaženje sa Chrome-om); ispravljeno na fiksne
     piksele (4485x769, isto kao viewBox) pri čuvanju fajla. */
  .ssl-brands{ padding:34px 20px 38px; text-align:center; }
  .ssl-brands p{ font-family:'Sora', sans-serif; font-weight:600; font-size:13px; color:var(--text-muted); margin:0 0 16px; }
  .ssl-brands-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:28px 40px; }
  /* .ssl-brands .ssl-brands-more, ne samo .ssl-brands-more: ".ssl-brands p"
     iznad ima specifičnost (0,1,1) i njegov margin:0 0 16px shorthand (koji
     postavlja i margin-top:0) bi nadjačao margin-top ovde bez obzira na
     redosled - ista vrsta bage kao .svc-code i .ssl-brands-more ranije. */
  .ssl-brands .ssl-brands-more{ margin-top:10px; font-family:'Sora', sans-serif; font-weight:700; font-size:13px; }
  .ssl-brands-more a{ color:var(--card-green-deep); text-decoration:none; }
  .ssl-brands-more a:hover{ color:var(--card-green-hover); text-decoration:underline; }
  .ssl-brand{ display:flex; align-items:center; justify-content:center; }
  .ssl-brand img{ height:26px; width:auto; display:block; }

  /* ---- SSL ALATI ----
     Koristi postojeći .svc-grid/.svc-card sa /o-nama, samo drugu pozadinu. */
  .ssl-tools{ padding:48px 20px 52px; background:#F6FAF9; }
  .ssl-tools-inner{ max-width:1160px; margin:0 auto; }
  .ssl-tools .svc-card .icon svg{ stroke:var(--card-green-deep); }

  /* =========================================================
     Širine ekrana
     ========================================================= */
  @media (min-width:900px){
    .ill-scroll svg{ min-width:0; }
  }

  @media (min-width:768px){
    .hero-ssl{ padding:56px 24px 60px; }
    .hs-title{ font-size:38px; }
    .hs-lead{ font-size:16px; }
    .ssl-val-grid{ grid-template-columns:repeat(3, 1fr); }
    .ssl-cov-grid{ grid-template-columns:repeat(3, 1fr); }
    .ssl-grid{ grid-template-columns:repeat(2, 1fr); }
    .sst-list{ grid-template-columns:repeat(2, 1fr); }
    .sw-steps{ flex-direction:row; }
    .sw-step{ flex:1 1 0; }
  }

  @media (min-width:1024px){
    .hero-ssl{ padding:64px 24px 68px; }
    .hs-inner{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:44px; align-items:center; }
    .hs-panel{ margin:0; }
    .hs-title{ font-size:44px; }
    .ssl-grid{ grid-template-columns:repeat(3, 1fr); }
    .sst-list{ grid-template-columns:repeat(4, 1fr); }
    .ill-scroll{ max-width:900px; margin-left:auto; margin-right:auto; }
  }

/* =========================================================
   SSL ALATI  (/ssl-alati/*)

   Zelena SSL tema (--card-green*), ista kao /ssl-sertifikati - alati su
   njena podfunkcija, ne posebna sekcija sajta.

   Ovo je prva prava forma na sajtu sa labelama/hint tekstom/textarea/select
   poljima (.db-form i .hd-form su samo jednolinijska pretraga domena) - .tf-*
   je nov, generički set komponenti napravljen za ovu priliku, reusable za
   sledećih 5 alata.
   ========================================================= */

/* ---- Header stranice alata ---- */
.tool-hero{
  background:#F1FAF7;
  border-bottom:1px solid var(--border);
  padding:40px 20px 34px;
}
.tool-hero-inner{ max-width:720px; margin:0 auto; }
.tool-kicker{
  font-family:'Sora', sans-serif; font-weight:700; font-size:13px;
  color:var(--card-green-deep); margin:0 0 12px;
}
.tool-kicker a{ color:var(--card-green-deep); text-decoration:underline; text-underline-offset:2px; }
.tool-kicker a:hover{ color:var(--card-green-hover); }
.tool-hero h1{
  font-family:'Sora', sans-serif; font-weight:800; font-size:28px; line-height:1.15;
  color:var(--ink); margin:0 0 12px;
}
.tool-lead{ font-size:15.5px; line-height:1.65; color:var(--ink); max-width:620px; margin:0; }
.tool-lead a{ color:var(--card-green-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.tool-lead a:hover{ color:var(--card-green-hover); }

.tool-body{ padding:40px 20px 56px; }
.tool-body-inner{ max-width:720px; margin:0 auto; }

.tool-intro{ margin:0 0 30px; }
.tool-intro p{ font-size:14.5px; line-height:1.75; color:var(--ink); margin:0 0 14px; }
.tool-intro p code{
  font-family:'JetBrains Mono', monospace; font-size:13px;
  background:#F6FAF9; border-radius:4px; padding:1px 5px;
}
.tool-intro ol{ margin:0; padding:0 0 0 22px; list-style:decimal; }
.tool-intro ol li{ font-size:14.5px; line-height:1.7; color:var(--ink); margin:0 0 8px; }

/* ---- Forma (.tf-* = "tool field") ---- */
.tool-form{ margin:0 0 30px; }
.tf-field{ margin:0 0 20px; }
/* Grid nosi razmak preko gap-a, ne preko margina na deci - tako isti .tf-field
   radi i samostalno (margin ispod) i unutar grid reda (gap ispod/između). */
.tf-field-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin:0 0 20px; }
.tf-field-grid .tf-field{ margin:0; }
.tf-label{
  display:block; font-family:'Sora', sans-serif; font-weight:700; font-size:14px;
  color:var(--ink); margin:0 0 6px;
}
.tf-req{ color:var(--card-red-deep); }
.tf-label-code{
  font-family:'JetBrains Mono', monospace; font-weight:400; font-size:12px;
  color:var(--text-muted); margin-left:2px;
}
.tf-input, .tf-select, .tf-textarea{
  width:100%; box-sizing:border-box; display:block;
  font-family:'Inter', system-ui, sans-serif; font-size:15px; color:var(--ink);
  background:#fff; border:1.5px solid var(--border); border-radius:9px;
  padding:0 14px; min-height:46px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tf-textarea{
  font-family:'JetBrains Mono', monospace; font-size:13px; line-height:1.6;
  padding:12px 14px; min-height:auto; resize:vertical;
}
.tf-select--inline{ max-width:280px; }
.tf-input:focus, .tf-select:focus, .tf-textarea:focus{
  outline:none; border-color:var(--card-green-deep);
  box-shadow:0 0 0 3px rgba(35,122,99,0.15);
}
.tf-hint{ font-size:12.5px; line-height:1.6; color:var(--text-muted); margin:6px 0 0; }

/* ---- Rezultat paneli ---- */
.tf-result{
  border-radius:14px; padding:20px 20px 22px; margin:0 0 30px;
  border:1.5px solid var(--border); background:#fff;
}
.tf-result--ok{ background:#F1FAF7; border-color:var(--card-green); }
.tf-result--warn{ background:#FBF0E1; border-color:var(--card-orange); }
.tf-result--error{ background:#FDF2F0; border-color:var(--card-red); }
.tf-result h2{ font-family:'Sora', sans-serif; font-weight:800; font-size:18px; color:var(--ink); margin:0 0 10px; }
.tf-result--error p{ font-size:14.5px; line-height:1.65; color:var(--card-red-hover); margin:0; }
.tf-result-warn{
  font-size:13.5px; line-height:1.6; color:var(--ink);
  background:#fff; border-left:3px solid var(--card-orange-deep);
  padding:8px 12px; margin:0 0 18px;
}
.tf-result-warn strong{ color:var(--card-orange-deep); }

.tf-output{ margin:0 0 16px; }
.tf-output:last-child{ margin-bottom:0; }
.tf-output-head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:'Sora', sans-serif; font-weight:700; font-size:13px; color:var(--ink);
  margin:0 0 6px;
}
.tf-output-actions{ display:flex; gap:8px; flex:0 0 auto; }
.tf-copy, .tf-download{
  font-family:'Sora', sans-serif; font-weight:700; font-size:12.5px;
  color:var(--card-green-deep); background:#fff; border:1px solid var(--card-green);
  border-radius:7px; padding:5px 10px; cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.tf-copy:hover, .tf-download:hover{ background:var(--card-green-deep); color:#fff; }
.tf-copy.is-copied{ background:var(--card-green-deep); color:#fff; }

/* ---- Lista podataka (rezultat dekodera) ---- */
.tf-datalist{ margin:0; display:grid; grid-template-columns:1fr; gap:0; }
.tf-datalist > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid #e6f1ee;
}
.tf-datalist > div:last-child{ border-bottom:none; }
.tf-datalist dt{ font-family:'Sora', sans-serif; font-weight:700; font-size:13.5px; color:var(--ink); flex:0 0 auto; }
.tf-datalist dd{ margin:0; font-size:13.5px; color:var(--ink); text-align:right; word-break:break-word; }

.tool-next{
  font-size:14px; line-height:1.7; color:var(--text-muted);
  border-top:1px solid var(--border); padding-top:20px;
}
.tool-next a{ color:var(--card-green-deep); font-weight:700; }
.tool-next a:hover{ color:var(--card-green-hover); }

@media (min-width:600px){
  .tf-field-grid{ grid-template-columns:1fr 1fr; }
  .tf-field-grid--3{ grid-template-columns:1fr 1fr 1fr; }
}
@media (min-width:768px){
  .tool-hero{ padding:52px 24px 44px; }
  .tool-hero h1{ font-size:32px; }
  .tool-body{ padding:52px 24px 68px; }
}

/* =========================================================
   SSL ALATI — runda 2 (Dekoder sertifikata, SSL-ključ kompatibilnost,
   SSL konverter, Provera SSL-a, Zašto nemam katanac)
   ========================================================= */

/* ---- Radio kartice (SSL konverter format) ---- */
.tf-fieldset{ border:0; padding:0; margin:0 0 20px; }
.tf-legend{
  display:block; font-family:'Sora', sans-serif; font-weight:700; font-size:14px;
  color:var(--ink); margin:0 0 8px; padding:0;
}
.tf-radio-group{ display:flex; flex-wrap:wrap; gap:8px; }
.tf-radio-card{
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid var(--border); border-radius:9px;
  padding:9px 16px; cursor:pointer;
  font-family:'Sora', sans-serif; font-weight:600; font-size:14px;
  color:var(--ink); background:#fff;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.tf-radio-card:hover{ border-color:var(--card-green); background:#F7FCFB; }
.tf-radio-card:has(input:checked){ border-color:var(--card-green-deep); background:#F1FAF7; color:var(--card-green-deep); }
.tf-radio-card input{ accent-color:var(--card-green-deep); margin:0; }
/* .tf-radio-card ima svoj display:inline-flex, pa [hidden] treba eksplicitan
   guard (isti obrazac kao .ssl-card[hidden] na /ssl-sertifikati - author
   display uvek pobedi UA [hidden]{display:none} pravilo). */
.tf-radio-card[hidden]{ display:none; }

/* ---- Fajl input (SSL konverter) ---- */
.tf-file{
  display:block; width:100%; box-sizing:border-box;
  font-family:'Inter', system-ui, sans-serif; font-size:14px; color:var(--ink);
  border:1.5px dashed var(--border); border-radius:9px;
  padding:12px 14px; background:#fbfbfa; cursor:pointer;
}
.tf-file:hover{ border-color:var(--card-green); }
.tf-file:focus-visible{ outline:none; border-color:var(--card-green-deep); box-shadow:0 0 0 3px rgba(35,122,99,0.15); }

/* ---- Poklapa se / ne poklapa se (SSL-ključ kompatibilnost, Zašto nemam katanac) ---- */
.tf-match{ font-family:'Sora', sans-serif; font-weight:700; font-size:14.5px; line-height:1.6; margin:0 0 8px; }
.tf-match:last-child{ margin-bottom:0; }
.tf-match--ok{ color:var(--card-green-deep); }
.tf-match--warn{ color:var(--card-orange-deep); }
.tf-match--error{ color:var(--card-red-hover); }

/* ---- Lanac sertifikata (Provera SSL-a) ---- */
.tf-chain{ display:flex; flex-direction:column; margin:0 0 30px; }
.tf-chain-item{
  border:1px solid var(--border); border-radius:12px;
  padding:16px 18px; background:#fff;
}
.tf-chain-role{
  display:inline-block; font-family:'Sora', sans-serif; font-weight:700; font-size:11px;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--card-green-deep);
  background:#F1FAF7; border-radius:5px; padding:3px 8px; margin:0 0 8px;
}
.tf-chain-item h3{ font-family:'Sora', sans-serif; font-weight:800; font-size:15px; color:var(--ink); margin:0 0 8px; word-break:break-word; }
.tf-chain-arrow{ text-align:center; font-size:18px; line-height:1; color:var(--text-muted); padding:6px 0; }

/* ---- Tabela nalaza (Zašto nemam katanac) ---- */
.tf-findings-wrap{ overflow-x:auto; }
.tf-findings{ width:100%; border-collapse:collapse; }
.tf-findings th, .tf-findings td{ text-align:left; padding:9px 10px; border-bottom:1px solid #f5dcd7; font-size:13px; white-space:nowrap; }
.tf-findings th{
  font-family:'Sora', sans-serif; font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--card-red-hover);
}
.tf-findings td{ color:var(--ink); font-family:'JetBrains Mono', monospace; }
.tf-findings-url{ white-space:normal; word-break:break-all; }

@media (min-width:600px){
  .tf-radio-card{ padding:10px 20px; }
}

/* =========================================================
   ČIŠĆENJE SAJTOVA OD VIRUSA  (/ciscenje-sajtova-od-virusa)

   Reuse: .criteria-head, .benefits/.b-card, .pricing/.p-card,
   .security/.sec-*, .svc-grid/.svc-card, .ssl-steps/.sst-list,
   .ill-scroll/.ill-cap, .about-cta, .faq, .seo-block, .tf-* (forma),
   vat-scope/.price-incl/.price-excl. Ovde je samo ono čega pre nije bilo.

   NIJEDAN NOV BREND TOKEN. Crvena je --card-red/-deep/-hover, zelena
   --card-green-deep, mastilo --ink - sve već postoji u :root i sve je
   provereno u docs/brand-guidelines.md.
   ========================================================= */

/* ---- HERO ----
   Jedini hero na sajtu na tamnoj mastilo podlozi: početna i /o-nama su
   tople bele, /web-hosting i /registracija-domena svetli, /vps-serveri
   crven, /ssl-sertifikati zelen. Crvena se ovde koristi SAMO kao akcenat
   u panelu, nikad kao podloga - da stranica ne bi izgledala kao sestra
   /vps-serveri (brend dokument izričito upozorava na "crveno = VPS").
   Belo na #14202B je 16.5:1, na #1D2E3C 13.6:1 - oba daleko iznad praga. */
.hero-clean{
  position:relative;
  overflow:hidden;
  background:linear-gradient(155deg, #1D2E3C 0%, #14202B 62%, #101A23 100%);
  color:#fff;
}
.hero-clean .hd-cloud{
  position:absolute;
  width:520px; height:520px;
  right:-160px; top:-170px; bottom:auto;
  fill:rgba(255,255,255,0.05);
  pointer-events:none;
}
.hc-inner{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px 46px;
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  align-items:center;
}
.hc-copy{ max-width:580px; }
.hc-kicker{
  display:inline-block;
  background:var(--sky);
  color:var(--ink); /* mastilo na koralnoj: 7.22:1 (brend dokument) */
  font-family:'Sora', sans-serif;
  font-weight:800; font-size:11.5px;
  letter-spacing:0.09em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px;
  margin:0 0 18px;
}
.hc-title{
  font-family:'Sora', sans-serif;
  font-weight:800; font-size:27px; line-height:1.16;
  letter-spacing:-0.02em; color:#fff;
  margin:0;
}
.hc-title span{ color:var(--sky); }
.hc-lead{
  margin:16px 0 0;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-weight:300; font-size:15.5px; line-height:1.68;
  color:#D6DEE5; max-width:520px;
}
.hc-lead b{ font-weight:700; color:#fff; }
.hc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:0; list-style:none; }
.hc-chips li{
  font-family:'Sora', sans-serif; font-weight:700; font-size:12.5px;
  color:#fff; background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  border-radius:100px; padding:6px 13px;
}
.hc-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:24px 0 0; }
.hc-cta-primary{
  display:inline-block;
  background:var(--sky-deep); color:#fff; /* belo na #C0483F: 4.95:1 */
  font-family:'Sora', sans-serif; font-weight:800; font-size:14.5px;
  padding:15px 28px; border-radius:9px;
  transition: background-color .15s ease;
}
.hc-cta-primary:hover{ background:#A63A32; }
.hc-cta-secondary{
  color:#fff;
  font-family:'Sora', sans-serif; font-weight:600; font-size:14.5px;
  padding:14px 4px;
  border-bottom:1.5px solid rgba(255,255,255,0.55);
  transition: border-color .15s ease;
}
.hc-cta-secondary:hover{ border-color:#fff; }

/* ---- HERO: editor sa ubačenim malicioznim kodom ----
   Cela desna kolona je dekorativna (aria-hidden u markupu) - sve što
   znači nosi leva kolona. Statično stanje u HTML-u je ZAVRŠNI kadar
   (čist fajl, zeleni status): to vide samo posetioci bez JS-a. Posetioci
   sa prefers-reduced-motion sada VIDE punu animaciju (vlasnik, 2026-09-12:
   hero animacije rade uvek) - main.js prekucava ciklus iznova za sve. */
.hc-panel{ position:relative; width:100%; max-width:460px; margin:0 auto; }
.hc-editor{
  position:relative;
  background:#0d1117;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  box-shadow:0 34px 64px -24px rgba(0,0,0,0.6);
  overflow:hidden;
}
.hc-editor-bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px;
  background:#161b22;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.hc-editor-bar i{ width:11px; height:11px; border-radius:50%; background:#ff5f56; }
.hc-editor-bar i:nth-child(2){ background:#ffbd2e; }
.hc-editor-bar i:nth-child(3){ background:#27c93f; }
.hc-editor-bar > span{
  margin-left:8px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:#8b949e;
}
.hc-state{
  margin-left:auto;
  font-family:'JetBrains Mono', monospace; font-weight:600;
  font-size:9.5px; letter-spacing:0.08em;
  white-space:nowrap;
}
.hc-state--clean{ color:#3fb950; }
.hc-state--infected{ color:#ff7b72; }
.hc-state--scanning{ color:#d29922; }

/* Numerisane linije koda. min-height drži visinu dok JS dodaje i skida
   red - bez toga bi .hc-log ispod poskakivao na svakom koraku ciklusa. */
.hc-code{
  margin:0; padding:16px 16px 14px 0;
  list-style:none;
  counter-reset:hcln;
  font-family:'JetBrains Mono', monospace;
  font-size:12px; line-height:1.85;
  color:#c9d1d9;
  min-height:158px;
}
.hc-code li{
  counter-increment:hcln;
  position:relative;
  padding:0 12px 0 46px;
  white-space:pre-wrap;
  word-break:break-word;
}
.hc-code li::before{
  content:counter(hcln);
  position:absolute; left:0; width:34px;
  text-align:right;
  color:#4a5460;
}
.hc-code .k{ color:#ff7b72; }
.hc-code .s{ color:#a5d6ff; }
.hc-code .f{ color:#d2a8ff; }

/* Ubačena linija: crvena podloga + trougao upozorenja umesto broja reda. */
.hc-code li.bad{
  background:rgba(248,81,73,0.14);
  box-shadow:inset 3px 0 0 #f85149;
  color:#ffa198;
}
.hc-code li.bad::before{ content:"\26A0"; color:#f85149; }
.hc-code li.gone{
  text-decoration:line-through;
  opacity:.45;
}

/* Skener: svetla traka koja jednom prelazi preko panela. Pokreće je
   .is-scanning klasa koju dodaje main.js; bez JS-a se nikad ne pojavi. */
.hc-scan{
  position:absolute; left:0; right:0; top:0;
  height:64px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg, rgba(88,166,255,0) 0%, rgba(88,166,255,0.20) 55%, rgba(88,166,255,0.55) 100%);
  border-bottom:1px solid rgba(88,166,255,0.75);
  z-index:2;
}
.hc-editor.is-scanning .hc-scan{ animation:hcSweep 1.9s ease-in-out; }
@keyframes hcSweep{
  0%   { opacity:0; transform:translateY(38px); }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { opacity:0; transform:translateY(230px); }
}

.hc-log{
  border-top:1px solid rgba(255,255,255,0.06);
  background:#0b0f14;
  padding:12px 16px 14px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; line-height:1.7;
  color:#8b949e;
  min-height:38px;
}
.hc-log .ok{ color:#3fb950; }
.hc-log .bad{ color:#ff7b72; }
.hc-log .run{ color:#d29922; }

/* ---- ZNACI ---- */
.signs{ padding:48px 24px; background:#fff; }
.sg-grid{ display:grid; grid-template-columns:1fr; gap:28px; margin-top:36px; }
.sg-card .icon{ display:block; }
.sg-card .icon svg{
  width:28px; height:28px;
  stroke:var(--sky-deep); stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.sg-card h3{
  font-family:'Sora', sans-serif; font-weight:700; font-size:16px;
  color:var(--ink); margin:14px 0 8px; line-height:1.35;
}
.sg-card p{ font-size:13.5px; line-height:1.65; color:var(--text-muted); margin:0; }
.sg-card code{
  font-family:'JetBrains Mono', monospace; font-size:12px;
  background:#f4f6f8; border-radius:4px; padding:1px 5px; color:var(--ink);
}
.sg-more{
  margin:34px 0 0; font-size:14px; line-height:1.7; color:var(--text-muted);
  border-top:1px solid var(--border); padding-top:20px;
}
.sg-more a{ color:var(--sky-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.sg-more a:hover{ color:#A63A32; }

/* ---- PROVERA SAJTA ----
   Prefiks je chk-, ne sc-: sc-* već pripada deci .ssl-card na
   /ssl-sertifikati. Sama forma je .tf-* komplet iz /ssl-alati, ovde bez
   ijedne izmene - jedino se fokus prsten i dugmad prebacuju sa zelene
   (SSL tema) na koralnu, jer je ovo druga sekcija sajta. */
.sitecheck{
  padding:48px 24px 52px;
  background:#FBFBFA;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.chk-inner{ max-width:760px; margin:0 auto; }
.chk-inner .criteria-head{ margin-bottom:28px; }
.sitecheck .tf-input:focus{
  border-color:var(--sky-deep);
  box-shadow:0 0 0 3px rgba(192,72,63,0.15);
}
.sitecheck .tool-form{ margin:0; }

/* Nalazi. Svaki nalaz je kartica sa nivoom ozbiljnosti, ne red u tabeli:
   objašnjenja su duga rečenica, a .tf-findings je nowrap tabela za kratke
   vrednosti (linija/tip/adresa) i ovde bi se raspala. */
.scf-list{ display:flex; flex-direction:column; gap:12px; margin:0 0 22px; }
.scf{
  border:1.5px solid var(--border); border-left-width:4px;
  border-radius:12px; background:#fff; padding:14px 16px;
}
.scf--high{ border-color:var(--card-red); border-left-color:var(--card-red-deep); background:#FDF2F0; }
.scf--warn{ border-color:var(--card-orange); border-left-color:var(--card-orange-deep); background:#FBF6EE; }
.scf--info{ border-color:var(--border); border-left-color:#9aa5ad; }
.scf-head{
  font-family:'Sora', sans-serif; font-weight:800; font-size:14.5px;
  color:var(--ink); margin:0 0 6px; line-height:1.4;
}
.scf-tag{
  display:inline-block; margin-right:8px;
  font-size:10.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:#fff; border-radius:5px; padding:3px 7px; vertical-align:1px;
}
.scf--high .scf-tag{ background:var(--card-red-deep); }
.scf--warn .scf-tag{ background:var(--card-orange-deep); }
.scf--info .scf-tag{ background:#68727C; }
.scf-text{ font-size:13.5px; line-height:1.65; color:var(--ink); margin:0; }
.scf-ev{
  font-family:'JetBrains Mono', monospace; font-size:12px; line-height:1.55;
  color:var(--ink); background:rgba(255,255,255,0.75);
  border:1px solid var(--border); border-radius:7px;
  padding:7px 10px; margin:9px 0 0;
  word-break:break-all;
}

/* Ograđenje. Namerno je istaknuto koliko i sam rezultat: površinski skener
   ne vidi backdoor u fajlu koji browser nikad ne traži, i stranica to sme
   da kaže samo jasno - inače "čist" rezultat postaje lažna sigurnost. */
.scf-caveat{
  font-size:13.5px; line-height:1.7; color:var(--ink);
  background:#fff; border:1px solid var(--border);
  border-left:4px solid var(--ink);
  border-radius:10px; padding:14px 16px; margin:0 0 26px;
}
.scf-caveat a{ color:var(--sky-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; }

/* ---- ŠTA ČISTIMO ---- */
.cleanlist{ padding:48px 24px; background:#fff; }
.cl-inner{ max-width:1160px; margin:0 auto; }
.cl-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  margin:36px 0 0; padding:0; list-style:none;
}
.cl-grid li{
  border:1px solid var(--border); border-radius:14px;
  padding:20px 20px 18px; background:#fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cl-grid li:hover{ border-color:var(--card-red); box-shadow:0 14px 28px -20px rgba(20,32,43,0.3); }
.cl-grid h3{
  font-family:'Sora', sans-serif; font-weight:700; font-size:15.5px;
  color:var(--ink); margin:0 0 8px;
}
.cl-grid p{ font-size:13.5px; line-height:1.65; color:var(--text-muted); margin:0 0 12px; }
.cl-grid code{
  display:inline-block;
  font-family:'JetBrains Mono', monospace; font-size:11.5px;
  color:var(--card-red-hover); background:#FDF2F0;
  border-radius:5px; padding:4px 8px;
  word-break:break-all;
}

/* ---- PROCES ----
   .ill-scroll svg globalno ima min-width:840px, a ovaj dijagram ima pet
   čvorova u viewBox-u od 1000 - na 840px bi tekst ispod čvorova pao na
   ~10px. Zato svoja min-width, sa istim praznjenjem na 900px kao SSL. */
.proc-ill svg{ min-width:940px; }

/* ---- CENOVNIK: tri usluge ----
   Iste .p-card kartice kao na početnoj; svaka samo postavlja svoj par
   boja, kao što brend dokument i predviđa. Crveno = gašenje požara,
   plavo = preventiva, zeleno = redovno održavanje. */
.p-card--ciscenje  { --accent: var(--card-red);   --accent-deep: var(--card-red-deep);   --accent-hover: var(--card-red-hover); }
.p-card--bezbednost{ --accent: var(--hosting);    --accent-deep: var(--hosting-deep);    --accent-hover:#186A8F; }
.p-card--odrzavanje{ --accent: var(--card-green); --accent-deep: var(--card-green-deep); --accent-hover: var(--card-green-hover); }

.p-card--ciscenje,
.p-card--bezbednost,
.p-card--odrzavanje{ border-color: var(--accent); }

.p-card--ciscenje .p-category,
.p-card--bezbednost .p-category,
.p-card--odrzavanje .p-category{ color: var(--accent-deep); }

.p-card--ciscenje .p-features li svg,
.p-card--bezbednost .p-features li svg,
.p-card--odrzavanje .p-features li svg{ stroke: var(--accent-deep); }

.p-card--ciscenje .p-cta.primary,
.p-card--bezbednost .p-cta.primary,
.p-card--odrzavanje .p-cta.primary{ background: var(--accent-deep); color:#fff; }

.p-card--ciscenje .p-cta.primary:hover,
.p-card--bezbednost .p-cta.primary:hover,
.p-card--odrzavanje .p-cta.primary:hover{ background: var(--accent-hover); }

/* .featured na početnoj prebacuje kicker i kvačice na koralnu i dugme na
   plavo; ovde istaknuta kartica već JESTE crvena, pa te tri prepravke
   treba vratiti na boju same kartice - inače "Najtraženije" kartica dobija
   plavo dugme koje nema veze sa svojim crvenim okvirom. */
.p-card--ciscenje.featured{ border:2px solid var(--card-red); box-shadow:0 20px 40px -18px rgba(249,110,91,0.35); }
.p-card--ciscenje.featured .p-category{ color: var(--card-red-deep); }
.p-card--ciscenje.featured .p-features li svg{ stroke: var(--card-red-deep); }
.p-card--ciscenje.featured .p-cta.primary{ background: var(--card-red-deep); }
.p-card--ciscenje.featured .p-cta.primary:hover{ background: var(--card-red-hover); }
/* .p-badge je do sada bio samo u mockupima - ova strana ga prva stvarno
   koristi, i time je otkrila latentan sudar: pravilo za oblake na karticama
   (.p-card > *:not(.card-art){position:relative}) je specifičnije od
   .p-badge{position:absolute}, pa je bedž ostajao u flex toku i razvlačio
   se preko cele širine kartice. Ista specifičnost + kasnije u fajlu =
   vraćeno na apsolutno. Ne dira nijednu drugu stranu jer .p-badge nigde
   drugde ne postoji. */
.p-card > .p-badge{ position:absolute; width:auto; z-index:2; }
.p-card--ciscenje.featured .p-badge{ background: var(--card-red); color:#fff; }

.p-lead{
  font-size:13.5px; line-height:1.6; color:var(--ink);
  margin:0 0 18px; padding-bottom:16px;
  border-bottom:1px solid #f0f3f5;
}

/* Traka iznad kartica: besplatna opcija za naše hosting korisnike. Uslovi
   se navode ovde, a ne u sitnim slovima - stranica i blog su se do sada
   razlikovali po tome da li je besplatno uslovno ili ne. */
.freeband{
  display:grid; grid-template-columns:1fr; gap:14px;
  align-items:center;
  background:var(--ink);
  border-radius:14px;
  padding:22px 22px 24px;
  margin:0 0 28px;
}
.fb-icon svg{ width:32px; height:32px; stroke:var(--sky); stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.fb-copy h3{
  font-family:'Sora', sans-serif; font-weight:800; font-size:18px;
  color:#fff; margin:0 0 8px;
}
.fb-copy p{ font-size:13.5px; line-height:1.7; color:#C8D2DA; margin:0; }
.fb-copy a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.fb-cta{
  justify-self:start;
  display:inline-block;
  background:#fff; color:var(--ink);
  font-family:'Sora', sans-serif; font-weight:800; font-size:14px;
  padding:13px 24px; border-radius:9px;
  white-space:nowrap;
  transition: filter .15s ease;
}
.fb-cta:hover{ filter:brightness(0.93); }

/* Garancija je do sada stajala kao peto pitanje u FAQ-u, gde je niko nije
   video. Ovde stoji odmah ispod cena, gde i odlučuje. */
.guarantee-strip{
  display:flex; align-items:flex-start; gap:10px;
  max-width:760px; margin:28px auto 0;
  font-size:13.5px; line-height:1.65; color:var(--text-muted);
  text-align:left;
}
.guarantee-strip svg{
  width:20px; height:20px; flex:0 0 auto; margin-top:1px;
  stroke:var(--card-green-deep); stroke-width:1.9; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.guarantee-strip b{ color:var(--ink); }

/* ---- PRIJAVA ---- */
.report{ padding:48px 24px 56px; background:#FBFBFA; border-top:1px solid var(--border); }
.rp-inner{ max-width:760px; margin:0 auto; }
.rp-inner .criteria-head{ margin-bottom:28px; }
.rp-form .tf-input:focus,
.rp-form .tf-select:focus,
.rp-form .tf-textarea:focus{
  border-color:var(--sky-deep);
  box-shadow:0 0 0 3px rgba(192,72,63,0.15);
}
.rp-checks{ display:grid; grid-template-columns:1fr; gap:8px; }
.rp-check{
  display:flex; align-items:flex-start; gap:9px;
  border:1.5px solid var(--border); border-radius:9px;
  background:#fff; padding:10px 13px;
  font-size:13.5px; line-height:1.5; color:var(--ink);
  cursor:pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.rp-check:hover{ border-color:var(--sky); background:#FFF9F8; }
.rp-check:has(input:checked){ border-color:var(--sky-deep); background:#FDF2F0; }
.rp-check input{ accent-color:var(--sky-deep); margin:2px 0 0; flex:0 0 auto; }
.rp-alt{ margin:16px 0 0; font-size:13.5px; line-height:1.7; color:var(--text-muted); }
.rp-alt a{ color:var(--sky-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; }

/* ---- PRVA POMOĆ ----
   .security je tamna sekcija sa /web-hosting; ovde joj se dodaje samo
   pasus "šta NE raditi", koji je jednako važan kao i sam spisak koraka. */
.sec-dont{
  margin:20px 0 0;
  font-size:13.5px; line-height:1.75; color:#C8D2DA;
  border-left:3px solid var(--card-red);
  padding:2px 0 2px 14px;
}
.sec-dont b{ color:#fff; }

@media (min-width:600px){
  .rp-checks{ grid-template-columns:1fr 1fr; }
}
@media (min-width:768px){
  .hc-title{ font-size:33px; }
  .sg-grid{ grid-template-columns:1fr 1fr; gap:30px 32px; }
  .cl-grid{ grid-template-columns:1fr 1fr; }
  .freeband{ grid-template-columns:auto 1fr auto; gap:20px; padding:24px 26px; }
  .fb-cta{ justify-self:end; }
}
@media (min-width:900px){
  .proc-ill svg{ min-width:0; }
}
@media (min-width:1024px){
  .hc-inner{ grid-template-columns:1.05fr 0.95fr; gap:48px; padding:64px 40px 68px; }
  .hc-title{ font-size:38px; }
  .hc-panel{ max-width:100%; }
  .signs{ padding:72px 64px 76px; }
  .sg-grid{ grid-template-columns:repeat(3, 1fr); gap:34px 36px; }
  .sitecheck{ padding:68px 24px 72px; }
  .cleanlist{ padding:72px 64px 76px; }
  .cl-grid{ grid-template-columns:repeat(3, 1fr); }
  .report{ padding:68px 24px 76px; }
}
@media (min-width:1280px){
  .hc-inner{ padding:72px 64px 76px; }
}

/* =========================================================
   WEBHOSTING-PROMO  (/webhosting-promo)
   Hero reuses .hero-domain/.hd-* (isti gradijent i "pilula" forma kao
   registracija-domena.php - .hd-form input[type="email"] je dodat uz
   postojeći type="text" selektor, ne posebno pravilo). Cenovnik reuse-uje
   .hp-card/.hp-* (isti kao web-hosting.php/vps-serveri.php) - ista tri
   ključa (start/advanced/pro) znače da nasleđuje i boje kartica bez ijedne
   nove definicije. Novo ovde je samo ono što stvarno ne postoji nigde
   drugde: otkriveni-kod stanje, precrtana stara cena, "zaključan" CTA pre
   prijave, bandl lista i exit-intent modal (na web-hosting.php).
   ========================================================= */

.promo-lead{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  margin:18px 0 0;
}

.promo-error{
  max-width:460px;
  margin:10px auto 0;
  background:#fff;
  border-radius:8px;
  padding:10px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--card-red-hover);
  text-align:left;
}

.promo-result{
  max-width:460px;
  margin:24px auto 0;
  background:#fff;
  border-radius:14px;
  padding:26px 24px;
  box-shadow:0 18px 40px -18px rgba(10,20,30,0.5);
}
.promo-result-lead{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:14.5px;
  color:var(--ink);
  margin:0;
}
.promo-code{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:28px;
  letter-spacing:0.04em;
  color:var(--sky-deep);
  background:#FDEFEE;
  border:2px dashed var(--sky-deep);
  border-radius:10px;
  padding:12px 20px;
  margin:0;
  display:inline-block;
  user-select:all;
}
.promo-code-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0;
}
.promo-copy{
  flex:0 0 auto;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--sky-deep);
  border:none;
  border-radius:10px;
  color:#fff;
  cursor:pointer;
  transition:background-color .15s ease;
}
.promo-copy:hover{ background:#A33523; }
.promo-copy:focus-visible{ outline:2px solid var(--hosting); outline-offset:2px; }
.promo-copy svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.promo-copy.is-copied{ background:var(--card-green-deep); }
.promo-result-note{
  font-size:13px;
  line-height:1.6;
  color:#68727c;
  margin:0;
}

/* Stara cena, precrtana, iznad velike promo cene u .hp-price. Unutar bele
   .hp-inner podloge (isto kao .hp-price .cur/.per pored nje), NE na
   obojenom .hp-outer gradijentu - zato obična siva, ne --hp-fg. */
.hp-price-old{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  font-weight:500;
  color:#68727c;
  text-decoration:line-through;
  text-decoration-color:var(--card-red-hover);
  margin-bottom:2px;
}

/* "Zaključan" CTA pre prijave - vidi se da nešto nedostaje (prava,
   solid-bela dugmad START/ADVANCED/PRO su rezervisana za posle prijave),
   umesto direktnog linka ka kupovini. Ista specifičnost (0,2,0) kao
   .hp-card--<key> .hp-cta pravila iznad, pobeđuje jer je definisano posle
   njih u datoteci. */
.hp-cta.hp-cta--locked{
  background:rgba(255,255,255,0.14) !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,0.55);
}
.hp-cta.hp-cta--locked:hover{ background:rgba(255,255,255,0.24) !important; }

.promo-bundles{
  max-width:900px;
  margin:44px auto 0;
  text-align:center;
}
.promo-bundles h3{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:17px;
  color:var(--ink);
  margin:0 0 16px;
}
.promo-bundle-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.promo-bundle-list li{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13.5px;
  color:var(--ink);
  text-align:left;
}
.promo-bundle-list .label{ color:#68727c; }
.promo-bundle-list b{ font-family:'JetBrains Mono', monospace; white-space:nowrap; }

@media (min-width:768px){
  .promo-bundle-list{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px){
  .promo-bundle-list{ grid-template-columns:repeat(4, 1fr); }
}

/* ---- Exit-intent modal (na /web-hosting, main.js ga prikazuje) ---- */
.exit-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.exit-modal[hidden]{ display:none; }
.exit-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(20,32,43,0.6);
}
.exit-modal-card{
  position:relative;
  max-width:420px;
  width:100%;
  background:#fff;
  border-radius:16px;
  padding:32px 28px 28px;
  text-align:center;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);
  animation:exitModalIn .25s ease;
}
@keyframes exitModalIn{
  from{ opacity:0; transform:translateY(12px) scale(.98); }
  to{ opacity:1; transform:none; }
}
.exit-modal-close{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  color:var(--text-muted);
  border-radius:8px;
}
.exit-modal-close:hover{ background:#F0F3F5; color:var(--ink); }
.exit-modal-kicker{
  font-family:'Sora', sans-serif; font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:0.09em; color:var(--sky-deep);
  margin:0 0 10px;
}
.exit-modal-card h3{
  font-family:'Sora', sans-serif; font-weight:800; font-size:22px;
  color:var(--ink); margin:0 0 10px; line-height:1.2;
}
.exit-modal-card p{
  font-size:14px; color:#4d5862; line-height:1.6; margin:0 0 22px;
}
.exit-modal-cta{
  display:inline-block;
  background:var(--sky-deep); color:#fff;
  font-family:'Sora', sans-serif; font-weight:800; font-size:14.5px;
  padding:14px 26px; border-radius:10px; text-decoration:none;
}
.exit-modal-cta:hover{ background:#A33523; }
.exit-modal-dismiss{
  display:block; margin:14px auto 0;
  background:none; border:none; cursor:pointer;
  font-size:12.5px; color:var(--text-muted); text-decoration:underline;
}

/* =========================================================
   PRAVILA PRIVATNOSTI + USLOVI KORIŠĆENJA
   (pravila-privatnosti.php, tos.php - dele ceo .page-legal /
   .legal-* sistem)
   Dug pravni tekst: mirni hero, "Ukratko" kartica, lepljiv
   sadržaj (TOC) sa leve strane od 1024px, numerisani odeljci.
   Nema JS-a - TOC je obična lista sidrenih linkova, mobilni
   je samo u dve kolone radi kompaktnosti. Bez novih brend
   tokena (docs/brand-guidelines.md nepromenjen).
   Linkovi ovde NOSE podvlačenje (za razliku od .page-about) -
   gustina teksta i pravna priroda traže jasno obeležen link.
   ========================================================= */

/* .page-shell ima overflow:hidden (kliping senke/dekoracija) - to pravi
   scroll-kontejner i GASI position:sticky na .legal-toc (sadržaj se ne
   "lepi" pri skrolu). overflow:clip kliping radi isto, ali NE pravi
   scroll-kontejner, pa sticky proradi. Scoped na .page-legal da ne dira
   ostale strane; stariji browseri bez podrške za `clip` zadrže `hidden`
   (TOC se onda samo ne lepi - strana i dalje radi). */
.page-legal .page-shell{ overflow:clip; }

.page-legal .legal-body a,
.page-legal .legal-tldr a{
  color:var(--hosting-deep);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
  overflow-wrap:anywhere;
}
.page-legal .legal-body a:hover,
.page-legal .legal-body a:focus-visible,
.page-legal .legal-tldr a:hover,
.page-legal .legal-tldr a:focus-visible{ text-decoration:none; }

/* Hero */
.hero-legal{
  background:#FFF9F6;
  border-bottom:1px solid #eef1f3;
}
.hl-inner{
  max-width:1160px;
  margin:0 auto;
  padding:44px 24px 40px;
}
.hl-kicker{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sky-deep);
  margin:0 0 16px;
}
.hl-title{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:32px;
  line-height:1.12;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
}
.hl-lead{
  margin:16px 0 0;
  font-size:16px;
  line-height:1.7;
  color:#5f5450;
  max-width:760px;
  font-weight:300;
}
.hl-lead b{ font-weight:600; color:#4a4340; }
.hl-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:22px 0 0;
  font-size:12.5px;
  color:var(--text-muted);
}
.hl-meta b{ color:var(--ink); font-weight:700; }
.hl-meta span{ position:relative; }

/* Spoljni okvir sadržaja strane */
.legal-wrap{
  max-width:1160px;
  margin:0 auto;
  /* Donji razmak odvaja poslednji odeljak od tamne .about-cta sekcije ispod. */
  padding:36px 24px 44px;
}

/* "Ukratko" kartica */
.legal-tldr{
  border:1px solid var(--border);
  border-left:3px solid var(--hosting);
  border-radius:14px;
  background:linear-gradient(180deg, #F4F9FB, #FBFDFE);
  padding:22px 22px 18px;
  margin-bottom:36px;
}
.legal-tldr h2{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--hosting-deep);
  margin:0 0 12px;
}
.legal-tldr ul{
  list-style:disc;
  margin:0;
  padding-left:20px;
  display:grid;
  gap:9px;
}
.legal-tldr li{
  font-size:13.5px;
  line-height:1.6;
  color:#43505a;
}
.legal-tldr li b{ color:var(--ink); font-weight:700; }
.legal-tldr-note{
  margin:14px 0 0;
  font-size:12px;
  color:var(--text-muted);
  font-style:italic;
}

/* Raspored: TOC + telo */
.legal-layout{ display:block; }

.legal-toc{
  border:1px solid var(--border);
  border-radius:12px;
  background:#FBFBFA;
  padding:16px 18px;
  margin-bottom:32px;
}
.legal-toc-title{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.09em;
  color:var(--text-muted);
  margin:0 0 10px;
}
.legal-toc ol{
  margin:0;
  padding:0 0 0 20px;
  list-style:decimal;
  columns:2;
  column-gap:26px;
  font-size:13px;
}
.legal-toc li{
  margin:0 0 7px;
  padding-left:2px;
  line-height:1.4;
  break-inside:avoid;
}
.legal-toc a{
  color:#43505a;
  font-weight:600;
  text-decoration:none;
}
.legal-toc a:hover,
.legal-toc a:focus-visible{ color:var(--hosting-deep); text-decoration:underline; }

/* Odeljci */
.legal-section{
  scroll-margin-top:24px;
  padding-top:28px;
  margin-top:28px;
  border-top:1px solid #eef1f3;
}
.legal-section:first-child{ border-top:none; margin-top:0; padding-top:4px; }
.legal-section h2{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:19px;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 14px;
  display:flex;
  gap:9px;
}
.legal-num{ color:var(--hosting-deep); flex:none; }
.legal-section h3{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  margin:18px 0 8px;
}
.legal-section p{
  font-size:14.5px;
  line-height:1.75;
  color:#4d5862;
  margin:0 0 12px;
}
.legal-section p:last-child{ margin-bottom:0; }
.legal-section p b,
.legal-list b{ color:var(--ink); font-weight:700; }

.legal-list{
  list-style:disc;
  margin:0 0 12px;
  padding-left:22px;
  display:grid;
  gap:8px;
}
.legal-list li{
  font-size:14.5px;
  line-height:1.7;
  color:#4d5862;
}

/* Definiciona lista (podaci firme). Na uskim ekranima dt/dd idu jedan ispod
   drugog - inače fiksna dt kolona + neprelomiva e-adresa u dd prelaze širinu
   ekrana (.page-shell ima overflow:hidden pa bi se adresa odsekla). */
.legal-dl{ margin:4px 0 12px; }
.legal-dl > div{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 0;
  border-top:1px solid #f0f3f5;
}
.legal-dl > div:first-child{ border-top:none; }
.legal-dl dt{
  font-family:'Sora', sans-serif;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-muted);
}
.legal-dl dd{
  margin:0;
  font-size:13.5px;
  color:var(--ink);
  font-weight:600;
  overflow-wrap:anywhere;
}

/* Tabele (svrhe / rokovi) */
.legal-table-wrap{
  overflow-x:auto;
  margin:4px 0 14px;
  border:1px solid var(--border);
  border-radius:10px;
}
.legal-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.legal-table th,
.legal-table td{
  text-align:left;
  padding:11px 14px;
  vertical-align:top;
  line-height:1.6;
}
.legal-table thead th{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--hosting-deep);
  background:#F4F9FB;
  border-bottom:1px solid var(--border);
}
.legal-table tbody tr + tr td{ border-top:1px solid #eef1f3; }
.legal-table td:first-child{ color:var(--ink); font-weight:600; width:46%; }
.legal-table td:last-child{ color:#4d5862; }
.legal-table b{ color:var(--ink); }

/* Istaknuta napomena (ograničenja, bezbednost, posebne vrste podataka) */
.legal-callout{
  border:1px solid #E4E9EC;
  border-left:3px solid var(--sky);
  background:#FFF8F7;
  border-radius:10px;
  padding:14px 16px;
  font-size:13.5px !important;
  line-height:1.7 !important;
  color:#4a4340 !important;
}
.legal-callout b{ color:var(--ink); }

/* URL koji nije link (u tekstu o kolačićima) */
.legal-url{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  color:var(--text-muted);
  word-break:break-all;
}

/* Kontakt kartice u poslednjem odeljku */
.legal-contact-grid{
  display:grid;
  gap:16px;
  margin-top:14px;
}
.legal-contact-card{
  border:1px solid var(--border);
  border-radius:12px;
  background:#FBFBFA;
  padding:16px 18px;
}
.legal-contact-card h3{
  margin:0 0 8px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--hosting-deep);
}
.legal-contact-card p{
  margin:0;
  font-size:13.5px;
  line-height:1.85;
  color:var(--ink);
}

@media (min-width:768px){
  .hl-title{ font-size:38px; }
  .hl-meta{ flex-direction:row; flex-wrap:wrap; gap:8px 20px; }
  .hl-meta span + span{ padding-left:21px; }
  .hl-meta span + span::before{
    content:"";
    position:absolute;
    left:0; top:50%;
    width:5px; height:5px;
    margin-top:-2.5px;
    border-radius:50%;
    background:var(--hosting);
  }
  .legal-tldr ul{ grid-template-columns:1fr 1fr; column-gap:28px; }
  .legal-contact-grid{ grid-template-columns:1fr 1fr; }

  /* Šira dt kolona pored dd vrednosti kad ima mesta */
  .legal-dl > div{ flex-direction:row; gap:16px; align-items:baseline; }
  .legal-dl dt{ flex:0 0 190px; text-transform:none; letter-spacing:0; font-size:12.5px; }
}

@media (min-width:1024px){
  .hl-inner{ padding:60px 32px 52px; }
  .hl-title{ font-size:42px; }
  .legal-wrap{ padding:44px 32px 64px; }

  .legal-layout{
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    gap:52px;
    align-items:start;
  }
  .legal-toc{
    position:sticky;
    top:24px;
    margin-bottom:0;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
  }
  .legal-toc ol{ columns:1; font-size:12.5px; }
  .legal-section:first-child{ padding-top:0; }
  .legal-section h2{ font-size:20px; }
}

/* =========================================================
   404 STRANICA (404.php)
   ========================================================= */
.hero-error{
  position:relative;
  overflow:hidden;
  background:#FFF9F6;
  border-bottom:1px solid #eef1f3;
  text-align:center;
}
/* Isti oblak-znak kao .hero-about, centriran iza velikog "404" - "izgubljen
   u oblacima" je doslovno stara šala sa žive 404 strane, samo sad vizuelno
   podržana dekoracijom umesto teksta koji je nosi sam. */
.hero-error .hd-cloud{
  fill:rgba(20,32,43,0.045);
  left:50%; top:-60px; bottom:auto;
  width:640px; height:640px;
  transform:translateX(-50%);
}
.he-inner{
  position:relative;
  max-width:640px;
  margin:0 auto;
  padding:56px 24px 48px;
}
.he-code{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:96px;
  line-height:1;
  letter-spacing:-0.03em;
  margin:0;
  color:var(--hosting-display);
}
.he-kicker{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sky-deep);
  margin:6px 0 18px;
}
.he-title{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:26px;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
}
.he-lead{
  margin:14px auto 0;
  font-size:16px;
  line-height:1.65;
  color:#5f5450;
  font-weight:300;
  max-width:460px;
}
.he-ctas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:28px;
}
.error-links{ padding-top:48px; }

@media (min-width:768px){
  .he-code{ font-size:128px; }
  .he-title{ font-size:32px; }
}
@media (min-width:1024px){
  .he-inner{ padding:72px 32px 60px; }
}

/* =========================================================
   IP ALAT (ip.php) - reuses .tool-hero/.tool-body/.tf-copy from
   SSL ALATI above; only the big IP display itself is new.
   ========================================================= */
.ip-display{
  text-align:center;
  background:#F6FAF9;
  border:2px solid var(--hosting-deep);
  border-radius:14px;
  padding:32px 20px 28px;
  margin:0 0 20px;
}
.ip-value{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:28px;
  line-height:1.3;
  letter-spacing:0.01em;
  color:var(--ink);
  margin:0;
  word-break:break-word;
}
.ip-hostname{
  font-size:13px;
  color:var(--text-muted);
  margin:10px 0 0;
}
.ip-copy-row{
  display:flex;
  justify-content:center;
  margin:0 0 30px;
}
/* Plava umesto zelene (--card-green-deep) koju .tf-copy nosi na SSL alatima -
   ovaj alat nije deo SSL porodice, plava drži vezu sa opštim brendom. Puna
   plava pozadina (ne belo dugme sa plavim tekstom kao pre) - vlasnikov zahtev,
   2026-09-14. Hover tamnija plava - ista vrednost (#186A8F) koja se već
   koristi za hover na drugom punom plavom dugmetu (.p-card.featured .p-cta). */
.ip-copy-btn{
  padding:10px 20px;
  font-size:13.5px;
  color:#fff;
  background:var(--hosting-deep);
  border-color:var(--hosting-deep);
}
.ip-copy-btn:hover, .ip-copy-btn.is-copied{
  background:#186A8F;
  border-color:#186A8F;
  color:#fff;
}
.ip-tool .tool-next a{ color:var(--hosting-deep); }
.ip-tool .tool-next a:hover{ color:var(--hosting); }

@media (min-width:600px){
  .ip-value{ font-size:36px; }
}

/* =========================================================
   TOOLS (tools.php) - 4 mrežna alata na jednoj strani, reuses
   .tool-hero/.tool-body/.tf-copy from SSL ALATI above (isto kao IP ALAT).
   ========================================================= */

/* Honeypot polje (anti-bot, vidi $honeypot/$honeypotTripped u tools.php) -
   NIJE .visually-hidden (ona i dalje najavljuje sadržaj čitaču ekrana, pa bi
   slepog posetioca navela da ga popuni i lažno okine zamku). Ovo je van
   ekrana I van tab-reda I van pristupačnog stabla za sve. */
.tf-hp{
  position:absolute; left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}

.tools-quicknav{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 40px;
}
.tools-quicknav a{
  font-family:'Sora', sans-serif; font-weight:700; font-size:13px;
  color:var(--hosting-deep); background:#fff;
  border:1.5px solid var(--border); border-radius:20px;
  padding:7px 14px;
  transition:border-color .15s ease, background-color .15s ease;
}
.tools-quicknav a:hover{ border-color:var(--hosting); background:#F6FAFC; }

.tools-section{ padding:36px 0; border-top:1px solid var(--border); }
.tools-section:first-of-type{ padding-top:0; border-top:none; }
.tools-section-head{ margin:0 0 18px; }
.tools-section-head h2{
  font-family:'Sora', sans-serif; font-weight:800; font-size:20px;
  color:var(--ink); margin:0 0 6px;
}
.tools-section-head p{ font-size:14px; line-height:1.65; color:var(--text-muted); margin:0; }

/* ---- DNS tabela ----
   table-layout:fixed + fiksna širina za TIP/TTL kolone je namerna: bez toga
   browser širinu kolona računa iz sadržaja (table-layout:auto), pa je jedan
   dug SPF TXT zapis (bez razmaka na koje bi mogao da prelomi) gurao VREDNOST
   kolonu preko ivice .tf-result kutije (koja ima overflow:hidden - sadržaj se
   nevidljivo seče, ne pravi scroll) i usput cepao TTL kolonu do te mere da se
   i sam trocifren broj (npr. "266") prelamao u dva reda. Fiksne širine za
   TIP/TTL + overflow-wrap na VREDNOST prisiljavaju baš tu kolonu da se
   prelama, umesto da se preliva. */
.dns-table{ width:100%; border-collapse:collapse; margin:0; table-layout:fixed; }
.dns-table th{
  text-align:left; font-family:'Sora', sans-serif; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted);
  padding:0 10px 8px 0; border-bottom:1.5px solid var(--border);
}
.dns-table th:first-child, .dns-table td:first-child{ width:64px; }
.dns-table th:last-child, .dns-table td:last-child{ width:54px; }
.dns-table td{
  padding:9px 10px 9px 0; border-bottom:1px solid #e6f1ee;
  font-size:13.5px; color:var(--ink); vertical-align:top;
}
.dns-table td:first-child{ font-family:'JetBrains Mono', monospace; font-weight:700; white-space:nowrap; }
.dns-table td:nth-child(2){ overflow-wrap:anywhere; word-break:break-word; }
.dns-table td:last-child{ font-family:'JetBrains Mono', monospace; white-space:nowrap; }

@media (max-width:420px){
  /* Na najužim telefonima TIP kolona ("CNAME", "AAAA") ne mora ceo naziv da
     stane u jedan red - prelama se pre nego što ugrozi VREDNOST kolonu. */
  .dns-table th:first-child, .dns-table td:first-child{ width:48px; }
  .dns-table td:first-child{ white-space:normal; overflow-wrap:break-word; }
}

/* ---- Blacklist zone lista ---- */
.tz-list{ display:flex; flex-direction:column; gap:0; margin:0 0 16px; }
.tz-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid #e6f1ee;
}
.tz-row:last-child{ border-bottom:none; }
.tz-zone{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--ink); }
.tz-badge{
  font-family:'Sora', sans-serif; font-weight:700; font-size:12px;
  border-radius:20px; padding:3px 12px; white-space:nowrap;
}
.tz-badge--ok{ background:#F1FAF7; color:var(--card-green-deep); }
.tz-badge--listed{ background:#FDF2F0; color:var(--card-red-hover); }
.tz-badge--note{ background:#F3F4F5; color:var(--text-muted); }

/* =========================================================
   TRAKA ZA PRISTANAK NA KOLAČIĆE (includes/cookie-consent.php,
   uključena iz footer.php, na svakoj strani). Ista bela-kartica
   + tamna pozadina/senka logika kao .exit-modal (reused pattern),
   ali .cookie-banner je fiksna traka na dnu, ne centrirani prozor.
   z-index namerno veći od .exit-modal (200) - ovo je fundamentalnija
   stvar (pravni zahtev, ne marketinški poziv) i mora da ostane iznad
   svega ostalog na strani. tawk.to balon se i ne učitava dok traka
   nije rešena (vidi main.js), pa sudar z-indexa sa njim ne postoji
   u praksi - to rešava i vizuelni sudar sa .footer-trust koji je
   ranije bio problem samo dok je balon bio bezuslovan.
   ========================================================= */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  display:flex; flex-direction:column; gap:16px;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background:#fff;
  box-shadow:0 -12px 32px -12px rgba(20,32,43,0.25);
  border-top:1px solid var(--border);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner-text strong{
  display:block; font-family:'Sora', sans-serif; font-weight:800; font-size:15px;
  color:var(--ink); margin-bottom:4px;
}
.cookie-banner-text p{ font-size:13.5px; line-height:1.6; color:var(--text-muted); margin:0; }
.cookie-banner-text a{ color:var(--hosting-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.cookie-banner-actions{ display:flex; flex-wrap:wrap; gap:10px; }

.cookie-btn{
  flex:1 1 auto;
  font-family:'Sora', sans-serif; font-weight:700; font-size:13.5px;
  padding:11px 16px; border-radius:9px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cookie-btn--primary{ background:var(--sky-deep); color:#fff; }
.cookie-btn--primary:hover{ background:#A33523; }
.cookie-btn--ghost{ background:#fff; border-color:var(--border); color:var(--ink); }
.cookie-btn--ghost:hover{ border-color:var(--sky-deep); color:var(--sky-deep); }

/* ---- Modal ("Prilagodi" / footer "Podešavanja kolačića") ---- */
.cookie-modal{
  position:fixed; inset:0; z-index:310;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.cookie-modal[hidden]{ display:none; }
.cookie-modal-backdrop{ position:absolute; inset:0; background:rgba(20,32,43,0.6); }
.cookie-modal-card{
  position:relative; width:100%; max-width:440px;
  background:#fff; border-radius:16px; padding:32px 28px 28px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);
  max-height:calc(100vh - 40px); overflow-y:auto;
}
.cookie-modal-close{
  position:absolute; top:12px; right:12px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--text-muted);
  border-radius:8px;
}
.cookie-modal-close:hover{ background:#F0F3F5; color:var(--ink); }
.cookie-modal-close svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; }
.cookie-modal-card h3{
  font-family:'Sora', sans-serif; font-weight:800; font-size:20px;
  color:var(--ink); margin:0 0 8px;
}
.cookie-modal-card > p{ font-size:13.5px; line-height:1.6; color:var(--text-muted); margin:0 0 20px; }

.cookie-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:14px 0; border-top:1px solid var(--border);
}
.cookie-row-text strong{ display:block; font-family:'Sora', sans-serif; font-weight:700; font-size:13.5px; color:var(--ink); margin-bottom:2px; }
.cookie-row-text span{ font-size:12.5px; line-height:1.5; color:var(--text-muted); }

/* Prekidač bez :has() na spoljnom labelu (input je unutra) - checked stanje
   se čita preko input:checked + span, isti obrazac kao već postojeći
   .sw-opt:has(input:checked) drugde u ovom fajlu, samo obrnuto ugnježdeno. */
.cookie-toggle{
  position:relative; flex:none; width:40px; height:24px;
  border-radius:999px; background:#D8DEE3; cursor:pointer;
  transition: background-color .15s ease;
}
.cookie-toggle input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.cookie-toggle span{
  position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.3);
  transition: transform .15s ease;
}
.cookie-toggle:has(input:checked){ background:var(--card-green-deep); }
.cookie-toggle:has(input:checked) span{ transform:translateX(16px); }
.cookie-toggle--locked{ background:var(--card-green-deep); opacity:0.55; cursor:default; }
.cookie-toggle--locked span{ transform:translateX(16px); box-shadow:none; }

.cookie-modal-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.cookie-modal-actions .cookie-btn{ flex:1 1 auto; }

@media (min-width:600px){
  .cookie-banner{ flex-direction:row; align-items:center; justify-content:space-between; }
  .cookie-banner-text{ max-width:560px; }
  .cookie-banner-actions{ flex-wrap:nowrap; }
  .cookie-btn{ flex:none; }
}