/* audyt.html — style specyficzne dla tej strony (wspólne w css/common.css) */
/* ===== HERO ===== */
.audit-hero {
padding: 140px 24px 80px;
position: relative; overflow: hidden;
}
.audit-hero::before {
content: ''; position: absolute;
top: -100px; right: -5%; width: 600px; height: 600px;
background: none;
pointer-events: none;
}
.audit-hero-inner {
max-width: var(--max-width); margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.audit-hero-text { position: relative; }
.audit-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 16px; background: var(--color-secondary-light); color: var(--color-secondary-text);
border-radius: 100px; font-size: 14px; font-weight: 600; margin-bottom: 24px;
}
.audit-hero h1 {
font-size: clamp(28px,3.5vw,45px); font-weight: 800;
line-height: 1.2; letter-spacing: -1px; margin-bottom: 20px;
}
.audit-hero h1 em { font-style: normal; color: var(--color-primary-text); }
.audit-hero-sub {
font-size: 16px; color: var(--color-text); line-height: 1.7;
max-width: 480px; margin-bottom: 32px;
}
.hero-stats {
display: flex; gap: 32px; margin-top: 36px; padding-top: 28px;
border-top: 1px solid var(--color-border);
}
.hero-stat-value { font-size: 28px; font-weight: 800; color: var(--color-primary-text); }
.hero-stat-label { font-size: 14px; color: var(--color-text-muted); margin-top: 2px; }
/* Hero visual — audit checklist mockup */
.audit-calc {
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); padding: 26px 28px;
}
.ac-head { margin-bottom: 22px; }
.ac-head-label { font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--color-primary-text); margin-bottom: 4px; }
.ac-head-title { font-size: 22px; font-weight: 800; color: var(--color-text); letter-spacing: -0.4px; }
.ac-field { margin-bottom: 18px; }
.ac-field-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.ac-field-row label { font-size: 14px; font-weight: 600; color: var(--color-text); }
.ac-field-val { font-size: 16px; font-weight: 800; color: var(--color-primary-text); }
.audit-calc input[type=range] {
-webkit-appearance: none; appearance: none; width: 100%; height: 6px;
border-radius: 100px; background: var(--color-border); outline: none; cursor: pointer;
}
.audit-calc input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 20px; height: 20px;
border-radius: 50%; background: var(--color-primary); border: 3px solid #fff; cursor: pointer;
}
.audit-calc input[type=range]::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary);
border: 3px solid #fff; cursor: pointer;
}
.ac-results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 16px; }
.ac-result { background: var(--color-bg); border-radius: var(--radius); padding: 18px 16px; }
.ac-result-value { font-size: 32px; font-weight: 800; color: var(--color-primary-text); letter-spacing: -1px; line-height: 1; }
.ac-result-value.green { color: var(--color-secondary-text); }
.ac-result-label { font-size: 14px; color: var(--color-text-muted); margin-top: 8px; font-weight: 600; }
.ac-note { font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }
/* ===== CO AUDYTUJEMY ===== */
.audit-areas { padding: 80px 24px; }
.audit-areas-inner { max-width: var(--max-width); margin: 0 auto; }
.section-badge { display: block; font-size: 14px; font-weight: 700; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; margin-bottom: 10px; }
.section-badge svg { display: none; }
.section-title {
font-size: clamp(24px,3vw,36px); font-weight: 800;
letter-spacing: -0.8px; margin-bottom: 8px;
}
.section-sub {
max-width: 560px; color: var(--color-text); font-size: 16px;
line-height: 1.7; margin-bottom: 48px;
}
.areas-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px;
border-top: 1px solid var(--color-border);
}
.area-card { padding: 22px 0; border-bottom: 1px solid var(--color-border); }
.area-icon { display: none; }
.area-icon.purple { background: #F3E8FF; color: #7C3AED; }
.area-icon.rose { background: #FFF1F2; color: #E11D48; }
.area-icon.cyan { background: #ECFEFF; color: #0891B2; }
.area-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.area-card p { font-size: 16px; color: var(--color-text); line-height: 1.6; margin-bottom: 16px; }
.area-checks { list-style: none; }
.area-checks li {
font-size: 16px; color: var(--color-text); padding: 5px 0;
display: flex; align-items: center; gap: 8px;
}
.area-checks li::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: var(--color-primary); flex-shrink: 0; opacity: 0.5;
}
/* ===== JAK PRZEBIEGA AUDYT ===== */
.audit-process { padding: 80px 24px; background: var(--color-surface); }
.audit-process-inner { max-width: var(--max-width); margin: 0 auto; }
.process-timeline {
display: block; margin-top: 40px; position: relative; max-width: 760px;
}
.process-timeline::before {
content: ''; position: absolute; top: 12px; bottom: 14px; left: 17px;
width: 2px; height: auto; background: var(--color-border);
}
.pt-step { position: relative; padding: 0 0 30px 60px; }
.pt-step:last-child { padding-bottom: 0; }
.pt-num {
position: absolute; left: 0; top: 0; margin: 0;
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 800; color: var(--color-primary-text);
background: var(--color-surface); border: 2px solid var(--color-primary); z-index: 2;
}
.pt-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; padding-top: 5px; }
.pt-desc { font-size: 16px; color: var(--color-text); line-height: 1.7; max-width: 62ch; }
.pt-time {
display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600;
color: var(--color-secondary-text); background: var(--color-secondary-light);
padding: 3px 10px; border-radius: 100px;
}
/* ===== CO DOSTAJESZ ===== */
.audit-output { padding: 80px 24px; }
.audit-output-inner { max-width: var(--max-width); margin: 0 auto; }
.output-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px;
margin-top: 36px; border-top: 1px solid var(--color-border);
}
.output-card { padding: 24px 0; display: flex; gap: 20px; border-bottom: 1px solid var(--color-border); }
.output-num {
width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
background: var(--color-primary-light); color: var(--color-primary-text);
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 800;
}
.output-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.output-card p { font-size: 16px; color: var(--color-text); line-height: 1.6; }
/* ===== FORMULARZ AUDYTOWY ===== */
.audit-form-section {
padding: 80px 24px;
background: #1A1A2E;
}
.audit-form-inner {
max-width: var(--max-width); margin: 0 auto;
}
.audit-form-inner .section-badge {
background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8);
}
.audit-form-inner .section-title { color: #fff; }
.audit-form-inner .section-sub { color: rgba(255,255,255,0.6); }
/* Nagłówek i opis nad formularzem wyśrodkowane — na jednej osi z kartą formularza. */
.audit-form-inner .section-title, .audit-form-inner .section-sub { text-align: center; }
.audit-form-inner .section-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.audit-form-card {
background: #fff; border-radius: var(--radius-lg);
padding: 40px 36px; max-width: 640px; margin: 0 auto;
text-align: left;
}
.audit-form-card h3 {
font-size: 22px; font-weight: 700; margin-bottom: 4px;
}
.audit-form-card .form-intro {
font-size: 16px; color: var(--color-text); margin-bottom: 28px; line-height: 1.6;
}
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select {
width: 100%; padding: 12px 16px; border: 1.5px solid var(--color-border);
border-radius: 10px; font-size: 16px; font-family: inherit;
color: var(--color-text); background: var(--color-bg);
transition: border-color 0.2s, box-shadow 0.2s; outline: none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(59,139,219,0.1);
}
.form-group textarea { resize: vertical; min-height: 90px; }
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235A5A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.form-submit { width: 100%; margin-top: 4px; justify-content: center; }
.form-privacy { font-size: 14px; color: var(--color-text-muted); text-align: center; margin-top: 12px; line-height: 1.5; }
.form-privacy a { color: var(--color-text); text-decoration: underline; }
.form-divider {
display: flex; align-items: center; gap: 12px; margin: 24px 0;
font-size: 14px; font-weight: 600; color: var(--color-text-muted); text-transform: none; letter-spacing: 0;
}
.form-divider::before, .form-divider::after {
content: ''; flex: 1; height: 1px; background: var(--color-border);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
.audit-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.audit-hero-text { text-align: center; }
.audit-hero-sub { }
.hero-stats { justify-content: center; }
.areas-grid { grid-template-columns: 1fr; gap: 0; }
.output-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.audit-hero { padding: 110px 20px 50px; }
.audit-hero h1 { font-size: 28px; }
.hero-stats { flex-direction: column; gap: 16px; align-items: center; }
.btn-primary { width: 100%; justify-content: center; }
.form-row { grid-template-columns: minmax(0, 1fr); }
.audit-form-card { padding: 28px 20px; }
.audit-calc { padding: 22px 20px; }
.ac-result-value { font-size: 28px; }
}
@media (max-width: 360px) {
.ac-results { grid-template-columns: 1fr; }
}
/* ===== STACJONARNIE ===== */
.onsite { padding: 80px 24px; }
.onsite-inner { max-width: var(--max-width); margin: 0 auto; }
.onsite-content { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 48px; text-align: left; }
.onsite-text > p { font-size: 16px; color: var(--color-text); line-height: 1.7; margin-bottom: 16px; }
.onsite-text > p strong { color: var(--color-text); }
.onsite-perks { list-style: none; margin: 20px 0 0; }
.onsite-perks li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; font-size: 16px; color: var(--color-text); }
.onsite-perks li svg { flex-shrink: 0; margin-top: 2px; }
.onsite-cities { font-size: 16px; line-height: 1.75; color: var(--color-text); }
.onsite-note { margin-top: 20px; padding: 14px 18px; background: var(--color-secondary-light); border-radius: var(--radius); display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }
.onsite-note svg { flex-shrink: 0; }
.onsite-note strong { color: var(--color-text); }
@media (max-width: 860px) { .onsite-content { grid-template-columns: 1fr; } }
@media (max-width: 640px) { }
/* ============================================================
DWA POZIOMY AUDYTU
============================================================ */
.audit-tiers { padding: 80px 24px; background: var(--color-surface); }
.audit-tiers-inner { max-width: var(--max-width); margin: 0 auto; }
.tiers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; margin-top: 8px; }
.tier { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 30px 28px; background: var(--color-bg); display: flex; flex-direction: column; }
.tier.paid { border-color: var(--color-primary); background: var(--color-surface); position: relative; }
.tier-label { font-size: 14px; font-weight: 800; letter-spacing: 0; text-transform: none; margin-bottom: 10px; }
.tier.free .tier-label { color: var(--color-secondary-text); }
.tier.paid .tier-label { color: var(--color-primary-text); }
.tier h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 6px; }
.tier-price { font-size: 14px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 16px; }
.tier > p { font-size: 16px; color: var(--color-text); line-height: 1.7; margin-bottom: 18px; }
.tier-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.tier-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--color-text); line-height: 1.55; }
.tier-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--color-secondary-text); }
.tier-list li.off { color: var(--color-text); }
.tier-list li.off svg { color: var(--color-border); }
.tier .tier-cta { margin-top: auto; align-self: flex-start; }
.tiers-note { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; background: var(--color-primary-light); color: var(--color-primary-text); font-size: 14px; font-weight: 600; padding: 12px 22px; border-radius: 100px; }
/* ============================================================
PRÓBKA RAPORTU
============================================================ */
.audit-sample { padding: 70px 24px; }
.audit-sample-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 34px 32px; }
.sample-text h2 { font-size: clamp(22px,3vw,28px); font-weight: 800; letter-spacing: -0.6px; margin-bottom: 10px; }
.sample-text p { font-size: 16px; color: var(--color-text); line-height: 1.7; margin-bottom: 18px; }
.sample-doc { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; }
.sample-line { height: 8px; border-radius: 4px; background: var(--color-border); margin-bottom: 9px; }
.sample-line.w70 { width: 70%; } .sample-line.w45 { width: 45%; } .sample-line.w90 { width: 90%; }
.sample-line.accent { background: var(--color-primary); opacity: 0.55; }
.sample-tag { display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--color-primary-text); background: var(--color-primary-light); padding: 4px 10px; border-radius: 100px; margin-bottom: 14px; }
/* ============================================================
KIEDY AUDYT TO ZA DUŻO
============================================================ */
.audit-scope-limits { padding: 20px 24px 70px; }
.scope-limits-inner { max-width: 900px; margin: 0 auto; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius); background: var(--color-surface); padding: 28px 30px; }
.scope-limits-inner h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 10px; }
.scope-limits-inner > p { font-size: 16px; color: var(--color-text); line-height: 1.7; margin-bottom: 18px; }
.scope-limits-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.scope-limits-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; color: var(--color-text); line-height: 1.6; }
.scope-limits-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--color-accent-text); }
.scope-limits-list a { color: var(--color-primary-text); font-weight: 600; }
/* ============================================================
FAQ
============================================================ */
.audit-faq { padding: 80px 24px; background: var(--color-surface); }
.audit-faq-inner { max-width: 780px; margin: 0 auto; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 12px; background: var(--color-bg); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 24px; font-size: 16px; font-weight: 600; color: var(--color-text); display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: background 0.15s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--color-text); flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { background: var(--color-surface); }
.faq-answer { padding: 0 24px 18px; font-size: 16px; color: var(--color-text); line-height: 1.7; }
.faq-answer a { color: var(--color-primary-text); font-weight: 600; }
/* ============================================================
FORMULARZ — WZMOCNIENIA
============================================================ */
.audit-person { display: flex; align-items: center; gap: 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; }
.audit-person-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: var(--color-primary-light); color: var(--color-primary-text); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; overflow: hidden; }
.audit-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.audit-person b { display: block; font-size: 16px; font-weight: 700; }
.audit-person span { font-size: 16px; color: var(--color-text); }
.audit-contacts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 4px; }
.audit-contacts li { display: flex; align-items: center; gap: 9px; font-size: 16px; }
.audit-contacts a { color: var(--color-text); text-decoration: none; font-weight: 600; }
.audit-contacts a:hover { color: var(--color-primary-text); }
.audit-contacts svg { color: var(--color-primary-text); flex-shrink: 0; }
.form-reassure { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.form-reassure li { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text-muted); }
.form-reassure svg { color: var(--color-secondary-text); flex-shrink: 0; }
@media (max-width: 860px) {
.tiers-grid { grid-template-columns: 1fr; }
.audit-sample-inner { grid-template-columns: 1fr; padding: 26px 22px; }
}