/* ── O NAMA PAGE ────────────────────────────────────────── */

/* HERO */
.on-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 60px;
  background: var(--ink);
}

.on-hero-bg { position:absolute; inset:0; pointer-events:none; }
.on-blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:0.2; }
.on-blob--1 { width:500px; height:500px; background:radial-gradient(circle,#e8880a,transparent); top:-100px; right:-80px; animation:blobA 14s ease-in-out infinite alternate; }
.on-blob--2 { width:400px; height:400px; background:radial-gradient(circle,#1a7a5e,transparent); bottom:-60px; left:60px; animation:blobB 18s ease-in-out infinite alternate; }
@keyframes blobA { 0%{transform:scale(1)} 100%{transform:scale(1.2) translate(-40px,60px)} }
@keyframes blobB { 0%{transform:scale(1)} 100%{transform:scale(1.1) translate(30px,-40px)} }

.on-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: center;
}

.on-label {
  font-size: 12px; font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--amber); margin-bottom: 12px;
}

.on-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 900; color: white;
  letter-spacing: -1.5px; line-height: 1.05;
  margin-bottom: 20px;
}
.on-title em { font-style: italic; color: var(--amber); }

.on-sub {
  font-size: 16px; color: rgba(255,255,255,0.6);
  line-height: 1.75; margin-bottom: 36px;
  max-width: 540px;
}

.on-hero-stats {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.on-stat { display: flex; flex-direction: column; }
.on-stat-n { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: white; letter-spacing: -0.5px; line-height: 1; }
.on-stat-l { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 3px; font-family: var(--font-mono); }
.on-stat-sep { width:1px; height:36px; background:rgba(255,255,255,0.12); }

/* Hero cards */
.on-hero-visual { position: relative; height: 280px; }

.on-card {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  backdrop-filter: blur(8px);
}

.onc-emoji { font-size: 24px; }
.onc-text { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); }

.on-card--1 { top: 20px;  left: 0;   width: 220px; animation: float1 5s ease-in-out infinite; }
.on-card--2 { top: 110px; right: 0;  width: 200px; animation: float2 6s ease-in-out infinite; }
.on-card--3 { bottom: 20px; left: 40px; width: 210px; animation: float3 7s ease-in-out infinite; }

@keyframes float1 { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-10px)} }
@keyframes float2 { 0%,100%{transform:translateY(-8px)} 50%{transform:translateY(0)}   }
@keyframes float3 { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-12px)} }

/* MISIJA */
.on-misija { padding: 80px 0; background: var(--white); }

.on-section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800; color: var(--ink);
  letter-spacing: -1px; line-height: 1.1;
  margin-bottom: 28px;
}

.on-misija-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: start;
}

.om-text p { font-size: 15px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 14px; }

.om-values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.omv-item {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.omv-icon  { font-size: 28px; margin-bottom: 10px; }
.omv-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.omv-desc  { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

/* TIM */
.on-tim { padding: 80px 0; }
.on-tim-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }

.tim-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px 20px;
  text-align: center;
  display: flex; flex-direction: column; gap: 10px;
  transition: all 0.2s;
}
.tim-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.tim-avatar {
  width: 72px; height: 72px;
  border-radius: 20px;
  margin: 0 auto;
  font-size: 32px;
  display: flex; align-items: center; justify-content: center;
}

.tim-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); }
.tim-role { font-size: 12px; color: var(--ink-soft); font-family: var(--font-mono); }
.tim-bio  { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }

/* KONTAKT */
.on-kontakt { padding: 80px 0; background: var(--white); }
.on-kontakt-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }

.ok-desc { font-size: 15px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 28px; }

.ok-channels { display: flex; flex-direction: column; gap: 16px; }

.ok-channel {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: var(--cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.ok-ch-icon  { font-size: 22px; flex-shrink: 0; }
.ok-ch-label { font-size: 11px; font-family: var(--font-mono); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.ok-ch-val   { font-size: 14px; font-weight: 600; color: var(--ink); }

.ok-form { display: flex; flex-direction: column; gap: 16px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* FAQ */
.on-faq { padding: 80px 0; }
.on-faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; align-items: start; }
.faq-col { display: flex; flex-direction: column; gap: 8px; }

.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.faq-q { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; cursor:pointer; font-size:14.5px; font-weight:600; color:var(--ink); transition:background 0.15s; gap:12px; }
.faq-q:hover { background:var(--cream); }
.faq-ch { font-size:12px; color:var(--ink-muted); transition:transform 0.2s; flex-shrink:0; }
.faq-item.open .faq-ch { transform:rotate(180deg); }
.faq-a { display:none; padding:0 18px 16px; font-size:14px; color:var(--ink-soft); line-height:1.7; border-top:1px solid var(--border); padding-top:14px; }
.faq-item.open .faq-a { display:block; }

/* CTA */
.on-cta { padding: 80px 0; }
.on-cta-inner {
  background: var(--amber);
  border-radius: 32px; padding: 64px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.on-cta-title { font-family: var(--font-display); font-size: clamp(28px,4vw,48px); font-weight: 900; color: white; letter-spacing:-1px; }
.on-cta-sub   { font-size: 16px; color: rgba(255,255,255,0.75); max-width: 480px; line-height:1.65; }
.on-cta-btns  { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.on-cta-btns .btn-primary { background: var(--ink); box-shadow: 0 4px 16px rgba(26,24,20,0.3); }
.on-cta-btns .btn-primary:hover { background: #2d2a24; }
.btn-white { background: white; color: var(--ink); border: none; border-radius: var(--radius); padding: 10px 20px; font-family:var(--font-body); font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; transition:all 0.2s; }
.btn-white.btn-lg { padding: 13px 26px; font-size: 15px; border-radius: 12px; }
.btn-white:hover { background: var(--cream); transform: translateY(-2px); }

/* FOOTER — reuse from index */
.footer { background:var(--ink); color:var(--cream); padding:60px 0 32px; }
.footer__top { display:grid; grid-template-columns:1fr 2fr; gap:60px; margin-bottom:48px; padding-bottom:40px; border-bottom:1px solid #2a2820; }
.footer__logo { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer .logo-icon { background:var(--amber); }
.footer .logo-name { font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--cream); }
.footer__tagline { color:#7a7265; font-size:14px; }
.footer__links { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.footer__col { display:flex; flex-direction:column; gap:10px; }
.footer__col-title { font-size:12px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.1em; color:#7a7265; margin-bottom:4px; }
.footer__col a { color:#a09890; text-decoration:none; font-size:14px; transition:color 0.18s; }
.footer__col a:hover { color:var(--cream); }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#5a5248; }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width: 960px) {
  .on-hero-inner    { grid-template-columns: 1fr; }
  .on-hero-visual   { display: none; }
  .on-misija-grid   { grid-template-columns: 1fr; gap: 40px; }
  .on-tim-grid      { grid-template-columns: repeat(2,1fr); }
  .on-kontakt-grid  { grid-template-columns: 1fr; gap: 40px; }
  .on-faq-cols      { grid-template-columns: 1fr; }
  .footer__top      { grid-template-columns: 1fr; }
  .footer__links    { grid-template-columns: repeat(2,1fr); }
  .on-cta-inner     { padding: 40px 24px; }
}

@media (max-width: 600px) {
  .om-values { grid-template-columns: 1fr; }
  .on-tim-grid { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
}