/* Koszalin — autorski motyw techniczny */
:root {
    --ink: #214e61;
    --deep: #255f72;
    --brand: #007d87;
    --brand-soft: #d7f1f0;
    --coral: #f38563;
    --coral-soft: #ffe9e2;
    --paper: #ffffff;
    --background: #f2f8fa;
    --line: #cbdee4;
    --muted: #4f7180;
    --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--ink); font: 16px/1.68 Arial, Helvetica, sans-serif; }
a { color: var(--brand); text-underline-offset: 4px; }
a:hover { color: #b54c35; }
a:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; border-radius: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }
p { margin: 0 0 16px; font-size: 16px; }
h1, h2, h3 { line-height: 1.18; letter-spacing: -.035em; margin: 0 0 20px; color: var(--ink); }
h1 { font-size: 40px; font-weight: 800; max-width: 760px; }
h2 { font-size: 28px; font-weight: 800; }
h3 { font-size: 20px; font-weight: 800; }
strong { font-weight: 800; }
.wrap { width: min(1120px, calc(100% - 52px)); margin: 0 auto; }
.utility-bar { border-bottom: 1px solid #bad5dd; background: #e0eff3; }
.utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 13px; font-weight: 700; letter-spacing: .035em; color: var(--deep); }
.main-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-size: 21px; font-weight: 800; letter-spacing: -.035em; }
.brand-symbol { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 3px solid var(--brand); border-radius: 10px; color: var(--brand); font-size: 14px; font-weight: 900; letter-spacing: -.045em; position: relative; }
.brand-symbol::after { content: ''; width: 21px; height: 4px; border-radius: 3px; background: var(--coral); position: absolute; bottom: 5px; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.nav-links a { font-weight: 700; font-size: 15px; color: var(--deep); text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; }
.header-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 47px; padding: 10px 17px; background: var(--brand); border: 2px solid var(--brand); border-radius: 9px; color: white; text-decoration: none; font-size: 15px; font-weight: 800; line-height: 1.3; transition: transform .15s, background .15s, border-color .15s; }
.btn:hover { transform: translateY(-2px); background: #00666f; color: white; }
.btn:active { transform: translateY(0); }
.btn--light { background: white; border-color: var(--line); color: var(--brand); }
.btn--light:hover { background: var(--brand-soft); color: var(--ink); }
.btn--phone { background: var(--coral); border-color: var(--coral); color: #214e61; }
.btn--phone:hover { background: #ff9b7d; color: #214e61; }
.btn--small { min-height: 40px; padding: 8px 13px; font-size: 14px; }
.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cta-pair .btn { min-width: 176px; }
.hero { background: white; border-bottom: 1px solid var(--line); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.37fr) minmax(300px, .83fr); align-items: center; gap: 42px; padding: 58px 0 54px; }
.hero-copy { min-width: 0; }
.eyebrow { display: inline-block; margin: 0 0 13px; color: var(--brand); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.hero-copy p { max-width: 710px; }
.hero-visual { border-radius: 20px; overflow: hidden; background: #d9f2ef; border: 1px solid #b7dfe0; }
.illustration { position: relative; min-height: 270px; display: flex; align-items: center; justify-content: center; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 22% 76%, #b6e0df 0, #b6e0df 16%, transparent 16.5%), linear-gradient(145deg, #e9faf8, #c0e6e5); }
.illustration::before, .illustration::after { content: ''; position: absolute; width: 200px; height: 200px; border: 1px solid #7bbfc1; border-radius: 50%; opacity: .45; z-index: -1; }
.illustration::before { top: -97px; right: -62px; }
.illustration::after { bottom: -114px; left: -73px; width: 260px; height: 260px; }
.machine { position: relative; background: #f7fcff; border: 7px solid #3a8090; box-shadow: 10px 12px 0 #8ac9ce; width: 190px; height: 207px; border-radius: 14px; }
.machine::before { content: ''; position: absolute; top: 39px; left: 0; right: 0; height: 5px; background: #3a8090; }
.machine::after { content: ''; position: absolute; top: 12px; left: 18px; height: 10px; width: 63px; background: #a3d7d9; border-radius: 3px; }
.machine-knob { position: absolute; top: 8px; right: 18px; width: 22px; height: 22px; border: 5px solid #3a8090; border-radius: 50%; }
.machine-window { position: absolute; top: 57px; left: 31px; width: 116px; height: 116px; border: 12px solid #64aab6; border-radius: 50%; background: #d3f0f4; overflow: hidden; }
.machine-window::before { content: ''; position: absolute; width: 100px; height: 68px; background: #7dc4cd; border-radius: 50%; left: -8px; top: 38px; transform: rotate(-19deg); }
.machine-window::after { content: ''; position: absolute; width: 64px; height: 64px; border: 2px solid white; border-radius: 50%; left: 14px; top: 14px; opacity: .65; }
.service-tool { position: absolute; right: 21%; top: 31px; width: 24px; height: 75px; border: 7px solid var(--coral); border-radius: 15px 15px 8px 8px; transform: rotate(31deg); background: #fff6ef; }
.service-tool::after { content: ''; position: absolute; height: 40px; width: 8px; border-radius: 4px; background: var(--coral); left: 1px; top: 45px; }
.machine--dishwasher { height: 197px; }
.machine--dishwasher .machine-window { top: 62px; left: 23px; width: 132px; height: 89px; border: 6px solid #64aab6; border-radius: 5px; background: repeating-linear-gradient(0deg, #c4e5e9 0 12px, #81bfcd 13px 16px); }
.machine--dishwasher .machine-window::before { width: 28px; height: 34px; border: 4px solid white; border-top: 0; background: transparent; border-radius: 0 0 6px 6px; left: 45px; top: 22px; transform: none; }
.machine--dishwasher .machine-window::after { display: none; }
.machine--fridge { height: 224px; width: 152px; }
.machine--fridge::before { top: 108px; }
.machine--fridge::after { top: 20px; left: auto; right: 14px; width: 7px; height: 63px; background: #64aab6; }
.machine--fridge .machine-knob { border: 0; top: 135px; right: 14px; width: 7px; height: 46px; background: #64aab6; border-radius: 3px; }
.machine--fridge .machine-window { display: none; }
.machine--oven { height: 198px; }
.machine--oven .machine-window { width: 130px; height: 103px; left: 23px; top: 66px; border: 9px solid #4a91a0; border-radius: 5px; background: #82bccb; }
.machine--oven .machine-window::before { width: 82px; height: 30px; left: 15px; top: 32px; transform: none; border-radius: 50%; background: #e0f4f5; }
.machine--oven .machine-window::after { width: 90px; height: 8px; left: 10px; top: 7px; border: 0; border-radius: 4px; background: #fff; }
.visual-caption { padding: 17px 22px 19px; background: #255f72; color: white; font-size: 15px; font-weight: 700; line-height: 1.55; }
.visual-caption strong { color: #ffe5db; }
.local-strip { background: #e4f3f5; border-bottom: 1px solid var(--line); padding: 22px 0 23px; }
.local-strip p { margin: 0; }
.local-strip strong { color: var(--deep); }
.section { padding: 53px 0; background: white; border-bottom: 1px solid var(--line); }
.section--tint { background: var(--background); }
.section--soft { background: #e7f3f3; }
.section-index { display: inline-block; margin-bottom: 13px; font-size: 13px; font-weight: 900; letter-spacing: .16em; color: #408694; }
.prose { max-width: 850px; }
.prose p:last-child { margin-bottom: 0; }
.feature-split { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(245px, .78fr); gap: 34px; align-items: start; }
.info-panel { border-top: 5px solid var(--coral); border-radius: 0 0 14px 14px; padding: 22px; background: #e7f3f3; }
.info-panel h3 { margin: 0 0 12px; font-size: 19px; }
.info-panel p { margin: 0 0 12px; }
.info-panel p:last-child { margin-bottom: 0; }
.plain-list { padding: 0; margin: 18px 0; list-style: none; }
.plain-list li { padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line); position: relative; font-size: 16px; }
.plain-list li::before { content: ''; position: absolute; top: 21px; left: 4px; width: 9px; height: 9px; background: var(--coral); border-radius: 3px; transform: rotate(45deg); }
.plain-list li:last-child { border-bottom: 0; }
.process-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.process-step { padding-left: 20px; border-left: 3px solid #91c7ca; }
.process-step span { display: block; color: #c56851; font-weight: 900; font-size: 13px; margin-bottom: 8px; }
.process-step h3 { font-size: 18px; margin: 0 0 9px; }
.process-step p { margin-bottom: 0; }
.contact-band { background: #255f72; color: white; padding: 39px 0 42px; }
.contact-band h2, .contact-band p { color: white; }
.contact-band h2 { margin-bottom: 13px; }
.contact-band .cta-pair { margin-top: 19px; }
.contact-band .btn--light { background: white; }
.locations-end { padding: 27px 0 30px; background: white; }
.locations-end h2 { font-size: 22px; margin-bottom: 12px; }
.locations-end p { margin: 0 0 9px; }
.footer { background: #e0eff3; border-top: 1px solid #b8d3db; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 28px 0; }
.footer p { margin: 0; color: var(--muted); font-weight: 700; }
.footer nav { display: flex; flex-wrap: wrap; gap: 17px; }
.footer nav a { color: var(--deep); font-size: 14px; font-weight: 700; }
.footer nav a:last-child { font-size: 12px; font-weight: 400; }

@media (max-width: 1100px) {
    .header-inner { gap: 15px; }
    .nav-links { gap: 12px; }
    .header-actions .btn { padding: 8px 12px; }
    .hero-inner { gap: 26px; grid-template-columns: minmax(0, 1.3fr) minmax(270px, .8fr); }
}
@media (max-width: 900px) {
    .header-inner { justify-content: flex-start; }
    .header-actions { margin-left: auto; }
    .nav-links { order: 3; width: 100%; gap: 24px; padding-top: 5px; }
    .hero-inner { grid-template-columns: 1fr; padding: 43px 0; gap: 30px; }
    .hero-visual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); align-items: stretch; }
    .visual-caption { display: flex; align-items: center; }
    .illustration { min-height: 225px; }
    .feature-split { grid-template-columns: 1fr; gap: 23px; }
    .info-panel { max-width: none; }
}
@media (max-width: 640px) {
    .wrap { width: min(100% - 30px, 1120px); }
    .utility-inner { display: block; text-align: center; font-size: 11px; }
    .utility-inner span + span { display: none; }
    .header-inner { padding: 16px 0; }
    .brand { font-size: 19px; }
    .nav-links { justify-content: space-between; gap: 10px; }
    .nav-links a { font-size: 14px; }
    .header-actions { width: 100%; margin-left: 0; }
    .header-actions .btn { flex: 1; min-width: 0; }
    h1 { font-size: 40px; }
    h2 { font-size: 28px; }
    .hero-inner { padding: 37px 0; }
    .hero-visual { display: block; }
    .illustration { min-height: 245px; }
    .visual-caption { display: block; }
    .section { padding: 40px 0; }
    .process-row { grid-template-columns: 1fr; gap: 22px; }
    .cta-pair { display: grid; grid-template-columns: 1fr; }
    .cta-pair .btn { min-width: 0; }
    .footer-inner { display: block; }
    .footer nav { margin-top: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn { transition: none; }
}