:root{ --blue:#2a7de1; --blue-dark:#1d63b9; --dark:#0a1624; --text:#222; --muted:#45556b; --surface:#ffffff; --surface-alt:#f5f8ff; --shadow:0 14px 35px rgba(0,0,0,0.18); --radius:12px; } *{box-sizing:border-box;margin:0;padding:0} html{ scroll-behavior:smooth; } body{ font-family:Arial,Helvetica,sans-serif; background:#fff; color:var(--text); overflow-x:hidden; line-height:1.5; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; } button{ font:inherit; } ul{ padding-left:1.2rem; } :focus-visible{ outline:3px solid rgba(42,125,225,.35); outline-offset:3px; } .skip-link{ position:absolute; left:12px; top:-48px; background:var(--dark); color:#fff; padding:10px 14px; border-radius:8px; text-decoration:none; z-index:4000; transition:top .2s ease; } .skip-link:focus{ top:12px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .container{ width:min(92%,1200px); margin:auto; } header{ background:#ffffff; border-bottom:3px solid var(--blue); position:sticky; top:0; z-index:1000; } .nav{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; position:relative; gap:20px; } .logo img{ height:150px; width:auto; } nav, nav.menu{ display:flex; gap:28px; align-items:center; } nav a{ text-decoration:none; font-weight:600; color:#333; } nav a[aria-current="page"]{ color:var(--blue); } .call-btn{ background:var(--blue); color:white; padding:10px 18px; border-radius:6px; text-decoration:none; } .call-btn:hover, .call-btn:focus-visible{ background:var(--blue-dark); } main{ display:block; } .hero{ background: linear-gradient(rgba(10,22,36,.85),rgba(10,22,36,.85)), url('../img/minikoparka.png'); background-size:cover; background-position:center; padding:60px 0 40px; text-align:center; color:white; min-height:420px; display:flex; align-items:center; } .hero-logo{ max-width:700px; margin:auto; margin-bottom:10px; } .hero-logo img{ width:100%; } .hero-services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:30px; margin-top:-70px; } .hero-service{ background:linear-gradient(#ffffff,#f5f8ff); color:#222; padding:30px; border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,0.25); text-decoration:none; transition:transform .25s ease, box-shadow .25s ease; } .hero-service:hover, .hero-service:focus-visible{ transform:translateY(-6px) scale(1.02); box-shadow:0 25px 60px rgba(0,0,0,0.35); } .hero-service h2, .hero-service h3{ font-size:1.3rem; } .hero-service p{ margin-top:10px; line-height:1.6; } .section{ padding:90px 0; } .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; } .card{ background:white; border-radius:14px; box-shadow:var(--shadow); padding:20px; text-align:center; } .card img{ width:100%; height:180px; object-fit:contain; margin-bottom:15px; } .card p{ font-size:14px; line-height:1.5; } footer{ background:#071423; color:white; padding:50px 0; text-align:center; margin-top:80px; } .menu-toggle{ display:none; font-size:30px; cursor:pointer; background:transparent; border:0; color:var(--dark); padding:8px; line-height:1; } @media (max-width:900px){ .logo img{ height:60px; } .nav{ flex-wrap:wrap; } .menu-toggle{ display:block; } nav.menu{ display:none; flex-direction:column; position:absolute; top:100%; left:0; width:100%; background:white; padding:15px; gap:10px; box-shadow:0 10px 30px rgba(0,0,0,0.15); z-index:2000; } nav.menu.active{ display:flex; } nav.menu a{ display:block; padding:12px 0; font-size:18px; width:100%; } .call-btn{ width:100%; text-align:center; } .hero{ padding:40px 0; min-height:auto; } .hero-services{ grid-template-columns:1fr; margin-top:20px; } .sprzet-grid, .info-grid, .contact-grid{ grid-template-columns:1fr !important; gap:20px; } .info-card, .contact-card{ max-width:100%; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } }