/* ============================================================
   podjetje-info.si — glavna predstavitvena stran (MCA RGB s.p.)
   Slog: premium agencijski — indigo, temni hero, živ poudarek
   ============================================================ */

:root{
  --ink:        oklch(22% 0.045 274);
  --ink-2:      oklch(45% 0.025 274);
  --paper:      oklch(98% 0.006 274);
  --surface:    oklch(100% 0 0);
  --soft:       oklch(96% 0.02 274);
  --line:       oklch(90% 0.015 274);
  --accent:     oklch(55% 0.205 272);
  --accent-700: oklch(46% 0.19 272);
  --accent-300: oklch(72% 0.13 272);
  --accent-100: oklch(94% 0.04 272);
  --cyan:       oklch(74% 0.13 215);
  --gold:       oklch(80% 0.13 90);

  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-hero: clamp(2.5rem, 1.1rem + 5.6vw, 5.2rem);
  --text-h2:   clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
  --text-h3:   clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --text-lead: clamp(1.08rem, 0.98rem + 0.5vw, 1.35rem);

  --space-section: clamp(4rem, 2.5rem + 6vw, 9rem);
  --container: 1160px;
  --radius: 18px;
  --radius-sm: 12px;
  --pill: 999px;

  --dur: 280ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 1px 2px oklch(22% 0.04 274 / 0.06), 0 14px 36px oklch(22% 0.06 274 / 0.10);
  --shadow-lg: 0 2px 8px oklch(22% 0.04 274 / 0.08), 0 30px 70px oklch(22% 0.08 274 / 0.18);
  --grad: linear-gradient(135deg, var(--accent), oklch(50% 0.2 300));
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.08; letter-spacing:-0.03em; margin:0; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem); }
.eyebrow{ font-family:var(--font-head); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.55rem; }
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--accent); display:inline-block; border-radius:2px; }
.eyebrow.on-dark{ color:var(--accent-300); } .eyebrow.on-dark::before{ background:var(--accent-300); }

/* gumbi */
.btn{ --bg:var(--accent); --fg:#fff;
  display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-head); font-weight:600; font-size:1rem;
  padding:.9rem 1.6rem; border-radius:var(--pill); border:1.5px solid transparent; background:var(--bg); color:var(--fg); cursor:pointer;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); will-change:transform; }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); background:var(--accent-700); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ --bg:var(--surface); border-color:var(--ink); box-shadow:var(--shadow); }
.btn--ghost-light{ --bg:transparent; --fg:#fff; border-color:oklch(100% 0 0 /.4); }
.btn--ghost-light:hover{ --bg:oklch(100% 0 0 /.1); border-color:#fff; }
.btn--lg{ padding:1.05rem 2rem; font-size:1.08rem; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:8px; }

/* glava */
.site-header{ position:sticky; top:0; z-index:60; backdrop-filter:saturate(150%) blur(12px); background:oklch(22% 0.045 274 / 0.78); transition:background var(--dur) var(--ease); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:#fff; }
.brand .mark{ width:38px; height:38px; border-radius:11px; background:var(--grad); color:#fff; display:grid; place-items:center; flex:0 0 auto; box-shadow:var(--shadow); }
.brand .dot{ color:var(--accent-300); }
.nav-links{ display:flex; align-items:center; gap:1.6rem; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:.95rem; font-weight:500; color:oklch(88% 0.01 274); transition:color var(--dur) var(--ease); }
.nav-links a:hover{ color:#fff; }
@media (max-width:920px){ .nav-links{ display:none; } }

/* hero (temni) */
.hero{ position:relative; overflow:hidden; color:#fff; background:
  radial-gradient(60% 60% at 80% 0%, oklch(45% 0.2 300 / .55), transparent 60%),
  radial-gradient(50% 50% at 0% 100%, oklch(55% 0.18 230 / .45), transparent 60%),
  var(--ink); padding-top:clamp(3rem,6vw,6rem); padding-bottom:clamp(4rem,7vw,8rem); }
.hero .container{ position:relative; z-index:1; max-width:920px; text-align:center; }
.hero .pill-top{ display:inline-flex; align-items:center; gap:.5rem; background:oklch(100% 0 0 /.08); border:1px solid oklch(100% 0 0 /.16); border-radius:var(--pill); padding:.4rem 1rem; font-size:.85rem; color:oklch(90% 0.01 274); margin-bottom:1.6rem; }
.hero .pill-top b{ color:var(--gold); }
.hero h1{ font-size:var(--text-hero); margin:0; }
.hero h1 .grad{ background:linear-gradient(100deg, var(--accent-300), var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead{ font-size:var(--text-lead); color:oklch(88% 0.015 274); max-width:46ch; margin:1.5rem auto 0; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2.2rem; }
.hero .trust{ margin-top:2rem; font-size:.9rem; color:oklch(82% 0.01 274); display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; }
.hero .trust b{ color:#fff; }

/* sekcije */
.section{ padding-block:var(--space-section); }
.section-head{ max-width:60ch; margin-inline:auto; text-align:center; margin-bottom:clamp(2.2rem,4vw,3.4rem); }
.section-head h2{ font-size:var(--text-h2); margin-top:.7rem; }
.section-head p{ color:var(--ink-2); font-size:var(--text-lead); margin:1rem auto 0; }
.soft{ background:var(--soft); }

/* koraki */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; counter-reset:s; }
@media (max-width:880px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.4rem; position:relative; }
.step .n{ font-family:var(--font-head); font-weight:800; font-size:1rem; width:38px; height:38px; border-radius:50%; background:var(--accent-100); color:var(--accent-700); display:grid; place-items:center; margin-bottom:.9rem; }
.step h3{ font-size:1.1rem; } .step p{ color:var(--ink-2); margin:.4rem 0 0; font-size:.94rem; }

/* features */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:900px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }
.feature{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.5rem; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.feature .ic{ width:48px; height:48px; border-radius:12px; background:var(--accent-100); color:var(--accent-700); display:grid; place-items:center; margin-bottom:.9rem; }
.feature .ic svg{ width:25px; height:25px; }
.feature h3{ font-size:var(--text-h3); } .feature p{ color:var(--ink-2); margin:.5rem 0 0; font-size:.95rem; }

/* cene */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; align-items:start; }
@media (max-width:920px){ .pricing{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.plan{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.9rem 1.7rem; display:flex; flex-direction:column; gap:1rem; position:relative; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.plan.featured{ border:2px solid var(--accent); box-shadow:var(--shadow-lg); }
.plan .tag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff; font-family:var(--font-head); font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .9rem; border-radius:var(--pill); white-space:nowrap; }
.plan h3{ font-size:1.4rem; }
.plan .price{ display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.plan .price b{ font-family:var(--font-head); font-weight:800; font-size:2.4rem; line-height:1; }
.plan .price .mo{ font-size:.95rem; color:var(--ink-2); }
.plan .price .vat{ width:100%; font-size:.78rem; color:var(--ink-2); }
.plan ul{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.6rem; }
.plan li{ display:grid; grid-template-columns:auto 1fr; gap:.6rem; font-size:.95rem; align-items:start; }
.plan li svg{ width:18px; height:18px; color:var(--accent); margin-top:.18rem; flex:0 0 auto; }
.plan li.muted{ color:var(--ink-2); }
.plan .btn{ margin-top:auto; justify-content:center; }
.plan.featured .btn{ background:var(--accent); }
.price-note{ text-align:center; color:var(--ink-2); font-size:.88rem; margin-top:1.4rem; }

/* primeri */
.examples{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:900px){ .examples{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .examples{ grid-template-columns:1fr; } }
.ex{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.4rem; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ex:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.ex .cat{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-700); font-weight:700; }
.ex h3{ font-size:1.12rem; margin:.3rem 0; }
.ex .stars{ color:var(--gold); font-size:.85rem; letter-spacing:1px; }
.ex .go{ font-size:.88rem; color:var(--accent); font-weight:600; margin-top:.6rem; display:inline-block; }

/* FAQ */
.faq{ max-width:780px; margin-inline:auto; display:grid; gap:.8rem; }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 1.3rem; transition:box-shadow var(--dur) var(--ease); }
.faq details[open]{ box-shadow:var(--shadow); }
.faq summary{ cursor:pointer; list-style:none; padding:1.1rem 0; font-family:var(--font-head); font-weight:600; font-size:1.05rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; color:var(--accent); transition:transform var(--dur) var(--ease); line-height:1; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:0 0 1.1rem; color:var(--ink-2); }

/* kontakt / CTA */
.cta{ background:var(--ink); color:#fff; border-radius:var(--radius); padding:clamp(2.4rem,5vw,4rem); text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg);
  background:radial-gradient(60% 80% at 50% 0%, oklch(45% 0.2 300 /.5), transparent 60%), var(--ink); }
.cta h2{ font-size:clamp(1.8rem,1rem+2.6vw,2.8rem); max-width:20ch; margin:0 auto; }
.cta p{ color:oklch(88% 0.01 274); margin:1rem auto 1.8rem; max-width:50ch; }
.cta-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.cta .btn--primary-light{ --bg:#fff; --fg:var(--accent-700); }
.cta .btn--primary-light:hover{ --bg:var(--accent-300); --fg:var(--ink); }

/* footer */
.site-footer{ background:var(--ink); color:oklch(82% 0.012 274); padding-block:clamp(2.5rem,4vw,3.5rem) 1.6rem; }
.footer-top{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; }
.footer-top .brand{ margin-bottom:.6rem; }
.footer-col h4{ font-family:var(--font-head); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin:0 0 .7rem; }
.footer-col a, .footer-col p{ display:block; font-size:.92rem; margin:.3rem 0; color:oklch(82% 0.012 274); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ margin-top:2rem; padding-top:1.2rem; border-top:1px solid oklch(100% 0 0 /.1); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.82rem; color:oklch(72% 0.01 274); }

/* piškotki */
.cookie{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90; max-width:560px; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:1.2rem 1.3rem; display:flex; flex-wrap:wrap; gap:.8rem 1rem; align-items:center; }
.cookie p{ margin:0; font-size:.9rem; color:var(--ink-2); flex:1 1 260px; }
.cookie a{ color:var(--accent); font-weight:600; }
.cookie .acts{ display:flex; gap:.5rem; }
.cookie .btn{ padding:.6rem 1.1rem; font-size:.9rem; }
.cookie[hidden]{ display:none; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* podstran (zasebnost) */
.legal-page{ max-width:820px; margin-inline:auto; padding-block:clamp(3rem,5vw,5rem); }
.legal-page h1{ font-size:clamp(2rem,1.2rem+2.4vw,3rem); margin-bottom:1rem; }
.legal-page h2{ font-family:var(--font-head); font-size:1.3rem; margin:2rem 0 .6rem; }
.legal-page p, .legal-page li{ color:var(--ink-2); }
.legal-page a{ color:var(--accent); }
.legal-page .back{ display:inline-block; margin-bottom:1.5rem; font-weight:600; color:var(--accent); }