/* Viralis pristajalne strani: skupni slog */
:root { --blue:#0F86F0; --blue2:#00A3FF; --ink:#17233A; --ink70:#4A5A75; --line:#E3E9F2; --bg:#FAFBFD; --chip:#EEF5FD; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--ink); line-height:1.65;
       background-image: radial-gradient(circle, #CBE0F5 1.1px, transparent 1.1px); background-size: 34px 34px; }
.ovoj { max-width: 880px; margin: 0 auto; padding: 0 22px; }
.skip { position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff; padding:10px 18px; border-radius:0 0 12px 0; font-weight:700; z-index:50; text-decoration:none; }
.skip:focus { left:0; }
:focus-visible { outline:3px solid var(--blue); outline-offset:2px; border-radius:6px; }
header { position:sticky; top:0; background:rgba(250,251,253,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:10; }
.glava { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.glava img { height:30px; width:auto; display:block; }
.glava a.nazaj { font-size:14px; font-weight:600; color:var(--ink70); text-decoration:none; }
.glava a.nazaj:hover { color:var(--blue); }
main { background: linear-gradient(180deg, rgba(250,251,253,.6), rgba(250,251,253,.92)); }
h1 { font-size: clamp(30px, 5vw, 44px); line-height:1.15; letter-spacing:-.02em; margin: 46px 0 14px; }
h1 span { color: var(--blue); }
.uvod { font-size:19px; color:var(--ink70); max-width:660px; margin:0 0 26px; }
.cta { display:inline-block; background:linear-gradient(135deg,#33B1FF,#0F86F0); color:#fff; text-decoration:none; font-weight:700;
       padding:14px 30px; border-radius:999px; box-shadow:0 12px 34px rgba(15,134,240,.32); }
.cta.drugi { background:none; color:var(--ink); border:1px solid var(--line); box-shadow:none; margin-left:10px; }
.mikro { font-size:14px; color:var(--ink70); margin-top:14px; }
h2 { font-size:26px; margin:54px 0 14px; letter-spacing:-.01em; }
p { margin: 0 0 16px; color: var(--ink70); }
p strong { color: var(--ink); }
a.notranja { color:var(--blue); font-weight:600; text-decoration:none; }
.kartice { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:22px 0; }
.kartica { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; }
.kartica h3 { margin:0 0 8px; font-size:17px; }
.kartica p { margin:0; font-size:15px; }
.paket { background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px; margin:26px 0; box-shadow:0 20px 50px rgba(23,35,58,.06); }
.paket .cena { font-size:34px; font-weight:800; margin:0; }
.paket .ime { color:var(--blue); font-weight:700; margin:2px 0 14px; }
.paket ul { margin:0 0 18px; padding:0 0 0 2px; list-style:none; }
.paket li { padding:5px 0 5px 26px; position:relative; color:var(--ink70); font-size:15px; }
.paket li::before { content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:700; }
.ceniki { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:24px 0; }
.cenik { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; }
.cenik.poudarjen { border-color:#BBDDFB; box-shadow:0 18px 44px rgba(15,134,240,.14); }
.cenik .cena { font-size:28px; font-weight:800; margin:0; }
.cenik .ime { color:var(--blue); font-weight:700; font-size:15px; margin:2px 0 8px; }
.cenik p.opis { font-size:14px; margin:0; }
.pojasnilo { font-size:13.5px; color:var(--ink70); background:var(--chip); border:1px solid #DCEBFA; border-radius:12px; padding:12px 16px; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin-bottom:10px; }
.faq summary { font-weight:700; cursor:pointer; color:var(--ink); }
.faq p { margin:10px 0 0; font-size:15px; }
.zakljucek { text-align:center; padding:50px 0 70px; }
footer { border-top:1px solid var(--line); padding:26px 0 40px; font-size:14px; color:var(--ink70); background:#fff; }
footer a { color:var(--ink70); text-decoration:none; margin-right:14px; }
footer a:hover { color:var(--blue); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; } }