/*TYPO-START* Tipografija v2: Satoshi (logo, naslovi, tekst) + IBM Plex Mono (eyebrow oznake).
   Satoshi (Fontshare, besplatna licenca i za komercijalnu upotrebu) se hostuje lokalno iz /fonts/.
   U WordPress temi: fajlovi u /wp-content/themes/postani-vidljiv/assets/fonts/ (ili preko get_template_directory_uri()).
   Dok fajlova nema, koristi se Hanken Grotesk kao rezervni font. */
:root{
  --font-display:"Satoshi","Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --font-body:"Satoshi","Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
body{font-family:var(--font-body);font-weight:400}
*{font-stretch:normal!important}
/* Naslovi: Satoshi Medium; H1: Satoshi Bold; bez verzala */
h1,h2,h3,h4{font-family:var(--font-display)!important;text-transform:none!important}
h1{font-weight:700!important;letter-spacing:-.035em;line-height:1.02}
h2,h3,h4{font-weight:500!important}
h2{letter-spacing:-.03em;line-height:1.06}
h3,h4{letter-spacing:-.015em;line-height:1.2}
/* Logo: Satoshi Medium */
.logo{font-family:var(--font-display);font-weight:500!important;text-transform:none!important;letter-spacing:-.01em;font-size:1.12rem}
/* Eyebrow oznake iznad naslova: IBM Plex Mono Regular, verzal */
.tag,.mega .lbl,.eq-card .k,.case .type,.cases3 .type,.case2 .type,.du-k,.pc-d,.si-hero small,.kicker{
  font-family:var(--font-mono)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.08em!important}
.tag{font-size:.78rem}
/* Brojevi i dugmad ostaju jaki, ali u Satoshiju */
.btn{font-weight:700}
.btn:has(.long){gap:0}
/* ===== Mikro animacije (lagane; isključene kad korisnik traži manje pokreta) ===== */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion: no-preference){
  /* Pojavljivanje pri skrolanju: zasebna animacija, da ne smeta hover prelazima */
  .js-motion .rv{opacity:0}
  .js-motion .rv.in{opacity:1;animation:rvIn .8s var(--ease-out) var(--d,0ms) backwards}
  @keyframes rvIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  /* Dugmad: meko podizanje, sjenka i strelica */
  .btn{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .35s var(--ease-soft),border-color .35s var(--ease-soft),color .35s var(--ease-soft)}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0) scale(.98);transition-duration:.12s}
  .btn svg{transition:transform .45s var(--ease-out)}
  .btn:hover svg{transform:translateX(4px)}
  .btn-line:hover{border-color:currentColor}

  /* Kartice: meko podizanje i sjenka */
  .pain,.nine article,.benefit,.eq-card,.case2,.cases3 article,.story,.steps3 li,.five > div,.tri > div,.feature,.cost,.calc-out > div,.vsteps li > div,.pr,.kw-card,.report,.costs > div{
    transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .4s var(--ease-soft),background-color .4s var(--ease-soft)}
  @media (hover:hover){
    .pain:hover,.nine article:hover,.benefit:hover,.eq-card:hover,.case2:hover,.cases3 article:hover,.story:hover,.steps3 li:hover,.five > div:hover,.tri > div:hover,.feature:hover,.cost:hover{
      transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(11,42,51,.45)}
    .nine article:hover .ic,.pain:hover .ic,.benefit:hover .ic{transform:rotate(-6deg) scale(1.06)}
    .story:hover .play{transform:scale(1.08)}
  }
  .nine article .ic,.pain .ic,.benefit .ic,.story .play{transition:transform .55s var(--ease-out)}

  /* Meni: meki prelaz boje i pozadine, padajući meni se blago spusti */
  .menu > li > a,.menu summary{transition:color .3s var(--ease-soft),background-color .3s var(--ease-soft)}
  .menu summary::after{transition:transform .35s var(--ease-out)}
  @media (min-width:1001px){.dd[open] > .mega{animation:megaIn .45s var(--ease-out) both}}
  @keyframes megaIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  @media (max-width:1000px){.dd[open] > .mega{animation:megaInM .4s var(--ease-out) both}}
  @keyframes megaInM{from{opacity:0}to{opacity:1}}
  .mega ul a{transition:color .3s var(--ease-soft),border-color .3s var(--ease-soft)}
  .mega ul a::after{transition:transform .4s var(--ease-out)}

  /* Ostali linkovi i klikabilni elementi */
  a{transition:color .3s var(--ease-soft),opacity .3s var(--ease-soft)}
  .foot a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease-out),color .3s var(--ease-soft)}
  .foot a:hover{background-size:100% 1px}
  .svc a,.cities a{transition:transform .5s var(--ease-out),border-color .35s var(--ease-soft),color .35s var(--ease-soft),box-shadow .5s var(--ease-out)}
  .tablist button{transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft),border-color .3s var(--ease-soft)}
  .table-wrap tbody tr{transition:background-color .3s var(--ease-soft)}
  .table-wrap tbody tr:hover{background-color:color-mix(in srgb,var(--mint) 6%,transparent)}

  /* FAQ: meka promjena ikone i odgovor se blago spusti */
  .faq-list summary{transition:color .3s var(--ease-soft)}
  .faq-list summary:hover{color:var(--mint)}
  .pm{transition:transform .45s var(--ease-out),border-color .35s var(--ease-soft),color .35s var(--ease-soft),background-color .35s var(--ease-soft)}
  .faq-list summary:hover .pm{border-color:var(--mint)}
  .faq-list details[open] .a{animation:faqIn .5s var(--ease-out)}
  @keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* Polja forme: meki fokus */
  .field input,.field select,.field textarea,.cf input{transition:border-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft),background-color .3s var(--ease-soft)}

  /* Pulsiranje "vaše" oznake na mapi i AI oznake */
  .mphone .pin.you{animation:pinPulse 2.6s var(--ease-soft) infinite}
  @keyframes pinPulse{0%{box-shadow:0 0 0 0 rgba(255,122,89,.45)}70%{box-shadow:0 0 0 14px rgba(255,122,89,0)}100%{box-shadow:0 0 0 0 rgba(255,122,89,0)}}
  .ac-dot{animation:dotPulse 2.4s var(--ease-soft) infinite}
  @keyframes dotPulse{50%{box-shadow:0 0 0 7px rgba(63,208,180,.08)}}
  /* WhatsApp dugme u mockupima blago "diše" */
  .si-wa{animation:waBob 3.4s var(--ease-soft) infinite}
  @keyframes waBob{50%{transform:translateY(-3px)}}
  /* Istaknuti red u mockupima (vaša firma) lagano zasvijetli kad se pojavi */
  .js-motion .rv.in .place.you,.js-motion .rv.in .sp-res.you,.js-motion .rv.in .ho-row.you,.js-motion .rv.in li.you{animation:glowIn 1.4s var(--ease-out) .6s both}
  @keyframes glowIn{0%{box-shadow:0 0 0 0 rgba(255,122,89,0)}40%{box-shadow:0 0 0 6px rgba(255,122,89,.28)}100%{box-shadow:0 0 0 3px rgba(255,122,89,.15)}}
  /* Header dobije sjenku kad se skrola */
  .site-header{transition:box-shadow .45s var(--ease-soft),background-color .45s var(--ease-soft)}
  .site-header.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
}
/* Uski mobiteli (do 400 px): logo, dugme i meni u jednom redu bez izlaska iz ekrana */
@media (max-width:400px){.nav{gap:10px}.logo{font-size:1rem!important;gap:8px}.logo svg{width:26px;height:26px}.site-header .btn{padding-inline:12px}}
/* ===== Dugmad na mobitelu: jednake širine, centrirana, bez neravnog prelamanja =====
   1 dugme = puna širina; 2 dugmeta = jedno ispod drugog, ista širina;
   3 dugmeta = prvo (glavno) preko cijele širine, druga dva jedno pored drugog. */
@media (max-width:600px){
  .actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:440px;margin-inline:auto;justify-content:normal}
  .actions > .btn{width:100%;min-width:0;padding-inline:14px;text-align:center}
  .actions > .btn:only-child,
  .actions > .btn:first-child:nth-last-child(2),
  .actions > .btn:first-child:nth-last-child(2) ~ .btn,
  .actions > .btn:first-child:nth-last-child(3){grid-column:1 / -1}
  main .btn{max-width:440px;text-align:center}
  main .more-row .btn,main .founder .btn,main .proof-split .btn,main .hub-split .btn{width:100%}
  main .more-row{padding-inline:0}
}
/* ===== Plutajuća dugmad za brzi kontakt (mobitel) ===== */
@media (max-width:760px){
  .mbar{display:flex!important;gap:8px;position:fixed;left:50%;right:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
    background:none!important;backdrop-filter:none!important;border:0!important;padding:0!important;z-index:40;width:auto}
  .mbar .btn{border-radius:999px!important;padding:10px 16px!important;font-size:.88rem!important;gap:8px;white-space:nowrap;
    box-shadow:0 10px 24px -8px rgba(6,24,30,.55),0 0 0 1px rgba(255,255,255,.06)}
  .mbar .btn::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
  .mbar .btn-main{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M21 12a9 9 0 0 1-13.4 7.9L3 21l1.2-4.4A9 9 0 1 1 21 12Z'/%3E%3C/svg%3E")}
  .mbar .btn-line{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
    background:#0B2A33!important;color:#F2F7F7!important;border-color:#1D4651!important}
  body{padding-bottom:72px!important}
}
/* Vrlo uski ekrani: duži natpisi dugmadi ostaju u jednom redu */
@media (max-width:380px){main .btn{font-size:.86rem;gap:8px;padding-inline:10px!important;letter-spacing:-.01em}main .btn svg{width:16px;height:16px}}
/*TYPO-END*/