/* Start:/o-kompanii/style.css?17760934068096*/
.page-hero{padding-top: 72px; background: var(--green-deep); position: relative; overflow: hidden}
.page-hero::before{content: ''; position: absolute; top: -80px; right: -60px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(124,191,150,0.14) 0%, transparent 70%); pointer-events: none}
.page-hero::after{content: ''; position: absolute; bottom: -50px; left: 8%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(74,155,111,0.12) 0%, transparent 70%); pointer-events: none}
.page-hero-inner{max-width: 1200px; margin: 0 auto; padding: 72px 48px 80px; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center}
.breadcrumb{display: flex; align-items: center; gap: 8px; font-family: var(--body); font-size: 13px; font-weight: 500; color: rgba(255,255,255,.4); margin-bottom: 20px}
.breadcrumb a{color: rgba(255,255,255,.4); text-decoration: none; transition: color .2s}
.breadcrumb a:hover{color: var(--green-light)}
.breadcrumb span{color: rgba(255,255,255,.65)}
.breadcrumb-sep{opacity: .4}
.page-title{font-family: var(--heading); font-size: clamp(36px, 5vw, 60px); font-weight: 800; color: var(--white); letter-spacing: -.025em; line-height: 1.05; margin-bottom: 18px}
.page-lead{font-family: var(--body); font-size: 16px; font-weight: 400; color: rgba(255,255,255,.62); line-height: 1.72; max-width: 480px}
 
  /* Hero stats */
.hero-stats{display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 16px; overflow: hidden}
.hero-stat-card{background: rgba(255,255,255,.07); padding: 26px 24px; transition: background .2s}
.hero-stat-card:hover{background: rgba(255,255,255,.11)}
.hsc-val{font-family: var(--heading); font-size: 36px; font-weight: 800; color: var(--white); line-height: 1; margin-bottom: 5px}
.hsc-val span{color: var(--green-light)}
.hsc-label{font-family: var(--body); font-size: 13px; font-weight: 500; color: rgba(255,255,255,.5); line-height: 1.4}
 
  /* ─── SECTION COMMONS ──────────────────────────────── */
.section-inner{max-width: 1200px; margin: 0 auto; padding: 0 48px}
.section-tag{font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; display: block}
.section-title{font-family: var(--heading); font-size: clamp(26px, 3.6vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--text)}
.section-title em{font-style: normal; color: var(--green)}
 
  /* ─── MISSION ───────────────────────────────────────── */
.mission-section{padding: 50px 0 100px 0; background: var(--white)}
.mission-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; margin-top: 56px}
 
.mission-text{font-family: var(--body); font-size: 16px; line-height: 1.78; color: var(--text-muted); margin-top: 22px}
 
.mission-callout{background: var(--green-deep); border-radius: 20px; padding: 40px 36px; position: relative; overflow: hidden}
.mission-callout::before{content: ''; position: absolute; top: -40px; right: -40px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(124,191,150,0.15) 0%, transparent 70%); pointer-events: none}
.mc-icon{font-size: 36px; margin-bottom: 18px}
.mc-label{font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--green-light); text-transform: uppercase; margin-bottom: 12px; opacity: .8}
.mc-text{font-family: var(--heading); font-size: 18px; font-weight: 700; color: var(--white); line-height: 1.55}
.mc-text em{font-style: normal; color: var(--green-light)}
 
  /* ─── PRODUCTS ──────────────────────────────────────── */
.products-section{padding: 100px 0; background: var(--cream)}
.products-grid{display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 52px; border-radius: 16px; overflow: hidden}
 
.product-card{background: var(--white); padding: 30px 24px; transition: background .25s, transform .2s; cursor: default; position: relative}
.product-card:hover{background: var(--green-deep); transform: translateY(-3px); box-shadow: var(--shadow); z-index: 1}
.product-card:hover .pc-title{color: var(--white)}
.product-card:hover .pc-list{color: rgba(255,255,255,.55)}
.product-card:hover .pc-icon-wrap{background: rgba(255,255,255,.12)}
.pc-icon-wrap{width: 48px; height: 48px; border-radius: 12px; background: var(--green-pale); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; transition: background .25s}
.pc-title{font-family: var(--heading); font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 10px; line-height: 1.25; transition: color .25s}
.pc-list{font-family: var(--body); font-size: 12px; line-height: 1.65; color: var(--text-muted); transition: color .25s}
 
  /* ─── TEAM ──────────────────────────────────────────── */
.team-section{padding:50px 0; background: var(--white)}
.team-grid{display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: center; margin-top: 56px}
 
.team-desc{font-family: var(--body); font-size: 16px; line-height: 1.78; color: var(--text-muted); margin-top: 22px}
 
.team-values{display: flex; flex-direction: column; gap: 3px}
.team-value{background: var(--cream); padding: 24px 28px; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; transition: background .2s; border-radius: 4px}
.team-value:first-child{border-radius: 14px 14px 4px 4px}
.team-value:last-child {border-radius: 4px 4px 14px 14px}
.team-value:hover{background: var(--green-pale)}
.tv-icon{width: 44px; height: 44px; border-radius: 11px; background: var(--green-pale); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0}
.team-value:hover .tv-icon{background: var(--green-muted)}
.tv-title{font-family: var(--heading); font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 5px}
.tv-text {font-family: var(--body); font-size: 13px; line-height: 1.6; color: var(--text-muted)}
 
.cta-section{padding: 80px 0; background: var(--green-pale); border-top: 1px solid var(--green-muted)}
.cta-inner{display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap}
.cta-label{font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--green); text-transform: uppercase; margin-bottom: 9px}
.cta-title{font-family: var(--heading); font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--text); line-height: 1.15; letter-spacing: -.02em}
.cta-desc {font-family: var(--body); font-size: 15px; color: var(--text-muted); margin-top: 10px; max-width: 460px; line-height: 1.65}
.cta-btn{font-family: var(--heading); font-size: 14px; font-weight: 700; padding: 16px 40px; background: var(--green); color: var(--white); text-decoration: none; border-radius: 10px; display: inline-block; transition: transform .15s, background .2s, box-shadow .2s; white-space: nowrap}
.cta-btn:hover{background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(74,155,111,0.35)}
  
@media (max-width: 960px){nav{padding: 0 20px}
  .page-hero-inner{grid-template-columns: 1fr; gap: 36px; padding: 52px 24px 60px}
  .section-inner{padding: 0 24px}
  .mission-grid, .team-grid{grid-template-columns: 1fr; gap: 36px}
  .products-grid{grid-template-columns: 1fr 1fr}
  .hero-stats{grid-template-columns: 1fr 1fr}
  .cta-inner{flex-direction: column}
  .mission-section, .products-section, .team-section{padding: 64px 0}
}
@media (max-width: 520px) {
  .products-grid{grid-template-columns: 1fr}
  .hero-stats{grid-template-columns: 1fr 1fr}
}
/* End */
/* /o-kompanii/style.css?17760934068096 */