/* ============================================================
   MILLE BACI · D3 · KONTAKT — piši nam (žuti papir + pitanja)
   ============================================================ */

body{
  background:
    radial-gradient(46% 30% at 90% 4%,rgba(246,162,43,.28),transparent 70%),
    radial-gradient(36% 24% at 4% 40%,rgba(38,161,156,.12),transparent 70%),
    var(--paper);
}

/* ---------- hero ---------- */
.khero{width:var(--w);margin:0 auto;padding:8.4rem 0 2rem;position:relative;text-align:center}
.khero-q{
  position:absolute;top:4.6rem;right:clamp(0rem,6vw,5rem);
  font-family:var(--disp);font-weight:800;font-size:clamp(4rem,10vw,8rem);line-height:1;
  color:var(--mango);-webkit-text-stroke:3px var(--ink);text-stroke:3px var(--ink);
  transform:rotate(12deg);user-select:none;will-change:transform;
}
.khero-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(3rem,11vw,8.4rem);line-height:.96;letter-spacing:-.01em;
}
.khero-h span{display:inline-block}
.khero-h .kh2{color:var(--pink)}
.khero-lead{margin:1.4rem auto 0;max-width:56ch}
.khero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.khero-hand{margin-top:1.5rem;color:var(--teal);transform:rotate(-1.4deg)}

/* ---------- chat bubble: someone is typing... ---------- */
.chatbub{
  display:inline-flex;align-items:center;justify-content:center;margin-top:1.6rem;
  min-width:110px;min-height:52px;padding:.7rem 1.3rem;position:relative;
  background:#fff;border:3px solid var(--pink);border-radius:22px 22px 22px 6px;
  box-shadow:4px 5px 0 rgba(228,72,124,.16);
}
.cb-dots{display:inline-flex;gap:6px}
.cb-dots i{
  width:9px;height:9px;border-radius:50%;background:var(--pink);opacity:.35;
  animation:cbdot 1.1s ease-in-out infinite;
}
.cb-dots i:nth-child(2){animation-delay:.18s}
.cb-dots i:nth-child(3){animation-delay:.36s}
@keyframes cbdot{0%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-6px);opacity:1}}
.cb-msg{font-family:var(--hand);font-weight:700;font-size:1.35rem;color:var(--teal)}
@media (prefers-reduced-motion:reduce){.cb-dots i{animation:none}}

/* ---------- quick paths ---------- */
.kpath-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.kpath{
  position:relative;display:block;text-decoration:none;
  border:3px solid var(--pink);border-radius:20px;background:#fff;
  padding:1.5rem 3.4rem 1.5rem 1.4rem;overflow:hidden;
  box-shadow:6px 7px 0 rgba(228,72,124,.16);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
}
.kpath:nth-child(1){transform:rotate(-.6deg)}
.kpath:nth-child(2){transform:rotate(.5deg)}
.kpath:nth-child(3){transform:rotate(-.4deg)}
.kpath:hover{transform:translateY(-6px);box-shadow:10px 13px 0 var(--kc)}
.kpath-k{font-size:.92rem;opacity:.75;margin-bottom:.4rem}
.kpath-w{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.4rem,2.6vw,2rem);
}
.kpath-go{
  position:absolute;right:.9rem;bottom:.9rem;width:38px;height:38px;border-radius:50%;
  border:3px solid var(--pink);background:var(--kc);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;
  transition:transform .35s var(--spring);
}
.kpath:hover .kpath-go{transform:rotate(-45deg) scale(1.1)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:60fr 32fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.qa{
  border:3px solid var(--pink);border-radius:18px;background:#fff;
  margin-top:1rem;overflow:hidden;box-shadow:5px 6px 0 rgba(228,72,124,.14);
  transition:box-shadow .3s var(--spring);
}
.qa[open]{box-shadow:8px 10px 0 rgba(246,162,43,.5)}
.qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;
  padding:1.1rem 1.3rem;font-weight:700;font-size:1.02rem;user-select:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{
  margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;
  border:3px solid var(--pink);background:var(--mango);position:relative;
  transition:transform .4s var(--spring),background .25s;
}
.qa summary i::before,.qa summary i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--pink);border-radius:2px;
  transform:translate(-50%,-50%);
}
.qa summary i::before{width:12px;height:3px}
.qa summary i::after{width:3px;height:12px;transition:transform .3s var(--ease)}
.qa[open] summary i{transform:rotate(180deg);background:var(--pink)}
.qa[open] summary i::after{transform:translate(-50%,-50%) scaleY(0)}
.qa p{padding:0 1.3rem 1.2rem;max-width:64ch;opacity:.92}
.faq-fig{
  margin:2.4rem 0 0;position:sticky;top:6rem;transform:rotate(2deg);text-align:center;
}
.faq-fig img{border-radius:18px;border:3px solid var(--pink);box-shadow:7px 9px 0 rgba(38,161,156,.35)}
.faq-fig figcaption{margin-top:.8rem;color:var(--teal)}

/* ---------- social band ---------- */
.ksoc{position:relative}
.ksoc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink)}
.ksoc-in{text-align:center;color:var(--paper)}
.ksoc-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.3rem,4vw,2.8rem);line-height:1.15;margin-bottom:2rem;
}
.ksoc-h em{font-style:normal}
.ksoc-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.ksoc-btn{
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  font-family:var(--disp);font-weight:600;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  border:3px solid var(--paper);border-radius:999px;padding:.9rem 1.7rem;color:var(--paper);
  transition:transform .3s var(--spring),background .25s,color .25s;
}
.ksoc-btn:hover{background:var(--paper);color:var(--ink);transform:translateY(-4px) rotate(-1deg)}
.ksoc-note{margin-top:2rem;font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;opacity:.6}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .kpath-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .faq-fig{position:static;max-width:340px;margin:2rem auto 0}
}