/* TippyTaps — "O nás" page. Ported from the PAWS design (PAWS-o-nas.html).
   Shell rules (.nav/.btn/.wrap/.hero/section/.shead/footer/reveal) live in
   site.css; only the page-specific blocks are here. Scoped under .tt-site so the
   generic class names can't collide with Astra/core. Design's --accent maps to
   the shared --pop token (terracotta = primary accent on content pages). */

/* ---- icon tint helpers (shared with the value cards) ---- */
.tt-site .ic-red{ background:#f6dccf; color:var(--pop-ink); }
.tt-site .ic-green{ background:#d5ece0; color:var(--green-ink); }
.tt-site .ic-ink{ background:var(--ink); color:var(--lime); }
.tt-site .ic-gold{ background:#f7ebcf; color:#a97d17; }

/* ---- hero stats (count-up) ---- */
.tt-site .stats4{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.tt-site .statb{ border:1px solid var(--line); border-radius:20px; padding:28px 24px; background:var(--card);
  text-align:center; transition:transform .18s, box-shadow .18s, border-color .18s; }
@media (hover:hover){ .tt-site .statb:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -22px rgba(24,39,31,.3); border-color:var(--ink); } }
.tt-site .statb .n{ font-family:var(--disp); font-size:48px; font-weight:800; color:var(--green-ink); line-height:1; }
.tt-site .statb .l{ font-size:14.5px; color:var(--ink-2); font-weight:600; margin-top:8px; }

/* ---- mission band ---- */
.tt-site .missionband{ background:var(--forest); color:#fff; border-radius:32px; padding:56px; }
.tt-site .missionband .mono{ color:var(--lime); }
.tt-site .missionband h2{ font-family:var(--disp); color:#fff; font-size:42px; font-weight:700; max-width:20ch;
  letter-spacing:-.02em; line-height:1.03; }
.tt-site .missionband p{ color:rgba(242,238,228,.82); font-size:18px; font-weight:500; max-width:60ch;
  margin-top:18px; line-height:1.6; }

/* ---- values (hodnoty) ---- */
.tt-site .vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tt-site .val{ border:1px solid var(--line); border-radius:20px; padding:26px; background:var(--card);
  transition:transform .18s, box-shadow .18s, border-color .18s; }
@media (hover:hover){ .tt-site .val:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -22px rgba(24,39,31,.3); border-color:var(--ink); } }
.tt-site .val .ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px; }
.tt-site .val .ic svg{ width:26px; height:26px; display:block; }
.tt-site .val h3{ font-family:var(--disp); font-size:20px; font-weight:600; margin-bottom:8px; letter-spacing:-.02em; }
.tt-site .val p{ font-size:15px; color:var(--ink-2); font-weight:500; line-height:1.55; }

/* ---- steps (ako to funguje) ---- */
.tt-site .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line);
  border-radius:24px; overflow:hidden; background:var(--card); }
.tt-site .stp{ padding:34px 30px; border-right:1px solid var(--line); }
.tt-site .stp:last-child{ border-right:0; }
.tt-site .stp .n{ font-family:var(--disp); font-size:56px; font-weight:700; color:var(--pop); line-height:1; }
.tt-site .stp h3{ font-family:var(--disp); font-size:20px; font-weight:600; margin-top:14px; letter-spacing:-.02em; }
.tt-site .stp p{ font-size:15px; color:var(--ink-2); font-weight:500; margin-top:9px; line-height:1.55; }

/* ---- team (tím) ---- */
.tt-site .team{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tt-site .tm{ border:1px solid var(--line); border-radius:20px; padding:24px; background:var(--card);
  text-align:center; transition:transform .18s, box-shadow .18s, border-color .18s; }
@media (hover:hover){ .tt-site .tm:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -22px rgba(24,39,31,.3); border-color:var(--ink); } }
.tt-site .tm .av{ width:76px; height:76px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
  font-family:var(--disp); font-weight:700; font-size:26px; background:#f6dccf; color:var(--pop-ink); }
.tt-site .tm h3{ font-family:var(--disp); font-size:17px; font-weight:600; letter-spacing:-.02em; }
.tt-site .tm .role{ font-size:13.5px; color:var(--pop-ink); font-weight:700; margin-top:4px; }

/* ---- partner CTA (emg) ---- */
.tt-site .emg{ background:var(--pop); color:#fff; border-radius:32px; padding:48px; display:flex; align-items:center;
  gap:32px; flex-wrap:wrap; position:relative; overflow:hidden; }
.tt-site .emg h2{ font-family:var(--disp); font-size:40px; font-weight:700; color:#fff; letter-spacing:-.02em; line-height:1.03; }
.tt-site .emg p{ font-size:17px; font-weight:500; opacity:.95; margin:10px 0 0; max-width:46ch; }
.tt-site .emg .grow{ flex:1; min-width:280px; position:relative; z-index:1; }
.tt-site .emg .ghost-paw{ position:absolute; right:-40px; bottom:-70px; width:340px; height:340px; color:rgba(255,255,255,.1); }
.tt-site .emg .ghost-paw svg{ width:100%; height:100%; display:block; }

@media (max-width:900px){
  .tt-site .stats4{ grid-template-columns:repeat(2,1fr); }
  .tt-site .vals{ grid-template-columns:1fr; }
  .tt-site .team{ grid-template-columns:repeat(2,1fr); }
  .tt-site .steps{ grid-template-columns:1fr; }
  .tt-site .stp{ border-right:0; border-bottom:1px solid var(--line); }
  .tt-site .stp:last-child{ border-bottom:0; }
  .tt-site .missionband{ padding:32px; }
  .tt-site .missionband h2{ font-size:30px; }
}
@media (max-width:720px){
  .tt-site .emg{ padding:30px; }
  .tt-site .emg h2{ font-size:30px; }
}