/* ============================================================
   GrowthKing - o-nas.css
   Tylko strona /o-nas. Ten sam jezyk co /portfolio: ciemne hero,
   potem jasne sekcje z duza iloscia powietrza, bez ikon i ozdobnikow.
   Strona konczy sie jasno (logotypy), pod stopka nie ma szwu.
   ============================================================ */

/* ============ HERO ============ */
.on-hero{background:radial-gradient(720px 420px at 78% 22%,rgba(0,85,255,.38),transparent 64%),radial-gradient(620px 360px at 30% 0%,rgba(193,18,31,.14),transparent 58%),linear-gradient(135deg,#05070d 0%,#0B1828 54%,#1a1a1a 100%);color:#fff;padding:170px 0 92px}
.on-hero .eyebrow{color:#fff}
.on-hero .eyebrow::before{background:url("logo-fav-white.svg") center/contain no-repeat}
.on-hero h1{color:#fff;font-size:clamp(2.3rem,4.4vw,3.6rem);font-weight:600;line-height:1.04;max-width:17ch}
.on-lead{margin-top:20px;color:rgba(255,255,255,.74);font-size:1.1rem;line-height:1.7;max-width:62ch}
/* badge partnera Klaviyo: ten sam co w hero /oferta */
.klaviyo-hero-logo{display:inline-flex;align-items:center;gap:12px}
.klaviyo-hero-logo img{height:54px;width:auto;max-width:230px;object-fit:contain}
.klaviyo-hero-logo span{position:relative;color:rgba(255,255,255,.88);font-size:.95rem;font-weight:400;padding:9px 16px 9px 28px;background:rgba(255,255,255,.13);backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%);clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%);white-space:nowrap}
.on-proof{margin-top:32px}

/* ============ JULIA ============ */
.on-julia{background:#fff}
.on-julia-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
/* Zdjecie w pelnym kadrze, bez przyblizania. */
.on-photo{margin:0;border-radius:28px;overflow:hidden;background:#F4F5F8;aspect-ratio:1/1}
.on-photo img{width:100%;height:100%;object-fit:cover;display:block}
.on-julia-text h2{font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--ink)}
.on-bio{margin-top:20px;color:var(--g700);font-size:1.06rem;line-height:1.75;max-width:58ch}
.on-quote{margin-top:22px;font-family:var(--font-head);font-weight:600;font-size:1.45rem;line-height:1.3;color:var(--ink);max-width:40ch}
.on-facts{margin-top:32px;border-top:1px solid var(--line)}
.on-facts>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.on-facts dt{font-size:.88rem;color:var(--g500)}
.on-facts dd{font-size:.97rem;line-height:1.55;color:var(--ink)}
.on-facts a{color:var(--blue-strong);text-decoration:underline;text-decoration-color:rgba(29,63,214,.3);text-underline-offset:4px}
.on-facts a:hover{text-decoration-color:currentColor}

/* ============ MODEL WSPÓŁPRACY ============ */
.on-model{background:var(--bg-base)}
.on-model-head{max-width:680px;margin-bottom:44px}
.on-model-head h2{font-size:clamp(2rem,3.2vw,2.8rem);color:var(--ink)}
.on-model-head p{margin-top:14px;color:var(--g700);font-size:1.04rem;line-height:1.7}
.on-model-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.on-model-card{background:#fff;border:1px solid rgba(11,24,40,.07);border-radius:22px;padding:30px 28px 32px;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
.on-model-card:hover{transform:translateY(-4px);box-shadow:0 28px 56px -32px rgba(11,24,40,.3)}
.on-model-card h3{font-size:1.5rem;line-height:1.1;color:var(--ink)}
.on-model-card p{margin-top:14px;color:var(--g700);font-size:.96rem;line-height:1.65}

/* ============ KLIENCI ============ */
.on-clients{background:#fff}
.on-clients-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.on-clients-head h2{font-size:clamp(2rem,3.2vw,2.8rem);color:var(--ink);max-width:20ch}
.on-logos{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.on-logos li{height:104px;display:grid;place-items:center;padding:18px;border-radius:16px;background:#F4F5F8}
.on-logos img{max-height:34px;max-width:82%;width:auto;height:auto;object-fit:contain}
.on-logos .is-tall img{max-height:52px}
.on-logos .is-square img,.on-logos .is-portrait img{max-height:62px}
.on-logos .is-blend img{mix-blend-mode:multiply;max-height:64px}

/* ============ MOBILE ============ */
@media (max-width:1024px){
  .on-julia-grid{grid-template-columns:1fr;gap:40px}
  .on-photo{max-width:440px}
  .on-model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .on-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .on-hero{padding:140px 0 64px}
  .klaviyo-hero-logo{flex-wrap:wrap}
  .on-facts>div{grid-template-columns:1fr;gap:4px}
  .on-model-grid{grid-template-columns:1fr}
  .on-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .on-model-card{transition:none}
  .on-model-card:hover{transform:none}
}