@charset "UTF-8";
/* =========================================================================
   dotSell — arkusz DESKTOP
   Ładowany z media="(min-width: 1025px)".
   Wersję mobilną trzymamy w mobile.css — oba pliki są niezależne,
   dlatego sekcja "podstawy" jest w nich celowo zduplikowana.
   ========================================================================= */

/* ---------- 1. Zmienne ---------- */
:root{
	--font:'Google Sans', sans-serif;
	--c-font:#2c2e2f;
	--c-grey:#f5f9fc;
	--c-line:#e2eaf2;
	--c-1:#004c86;   /* granat marki      */
	--c-2:#13ec7e;   /* zieleń akcent     */
	--c-3:#5bb8ff;   /* błękit akcent     */
	--c-5:#03355c;   /* granat nagłówków  */
	--c-7:#04a353;   /* zieleń przycisków */
	--radius:16px;
	--shadow:0 16px 44px rgba(3,53,92,.08);
}

/* ---------- 2. Podstawy ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family:var(--font);
	color:var(--c-font);
	font-size:17px;
	line-height:1.62;
	background:#fff;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;font-weight:700;letter-spacing:-.02em;color:var(--c-5)}
h1{font-size:clamp(33px,4.4vw,60px)}
h2{font-size:clamp(26px,3vw,42px)}
h3{font-size:clamp(18px,1.5vw,22px)}
p{margin:0 0 1em}
a{color:var(--c-1)}
ul{margin:0;padding:0 0 0 1.2em}

.wrapper{max-width:1360px;margin:auto;padding:0 25px}
.narrow{max-width:940px;margin-inline:auto}
.center{text-align:center}
.center .lead{max-width:800px;margin-inline:auto}
.hl{color:var(--c-7)}
.lead{font-size:clamp(18px,1.5vw,21px);color:#4a5560}
.eyebrow{
	display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.15em;
	text-transform:uppercase;color:var(--c-7);margin-bottom:14px;
}

.section{padding:84px 0}
.section--grey{background:var(--c-grey)}
.section--dark{background:linear-gradient(160deg,#03355c 0%,#012540 100%);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .lead{color:#bcd4e6}
.section--dark .eyebrow,.section--dark .hl{color:var(--c-2)}
.m-tonal{background:linear-gradient(180deg,#ffffff 0%,#f5f9fc 100%)}

/* ---------- 3. Przyciski ---------- */
.btn{
	display:inline-flex;align-items:center;gap:10px;padding:17px 30px;border-radius:60px;
	font-weight:700;text-decoration:none;font-size:16.5px;transition:.18s;border:2px solid transparent;
}
.btn--main{background:var(--c-7);color:#fff;box-shadow:0 12px 28px rgba(4,163,83,.26)}
.btn--main:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(4,163,83,.34)}
.btn--navy{background:var(--c-5);color:#fff;box-shadow:0 10px 24px rgba(3,53,92,.22)}
.btn--navy:hover{transform:translateY(-2px);background:#02426e}
.btn--outline{border-color:#c6d5e2;color:var(--c-5);background:#fff}
.btn--outline:hover{border-color:var(--c-7);color:var(--c-7)}

/* ---------- 4. Nagłówek ---------- */
.m-header{
	position:sticky;top:0;z-index:70;background:rgba(255,255,255,.95);
	backdrop-filter:blur(10px);border-bottom:1px solid var(--c-line);
}
.m-header__grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:13px 0}
.m-header__logo img{height:40px;width:auto;display:block}
.m-nav ul{display:flex;justify-content:center;gap:24px;list-style:none;margin:0;padding:0}
.m-nav a{color:var(--c-font);text-decoration:none;font-size:15px;font-weight:600}
.m-nav a:hover{color:var(--c-7)}
.m-header__right{display:flex;align-items:center;gap:20px}
.m-header__phone{font-weight:700;color:var(--c-5);text-decoration:none;font-size:16px;white-space:nowrap}
.m-header .btn{padding:12px 26px;font-size:15px}

/* ---------- 5. Hero ---------- */
.m-hero{
	background-color:#004c86;color:#fff;padding:100px 0 0;
	background:linear-gradient(44deg, rgb(6,58,98) 0%, rgb(6,73,125) 100%);
	position:relative;
}
.m-hero::before{
	content:" ";height:12px;background:rgb(0,0,0);width:100%;display:block;
	position:absolute;bottom:0;z-index:100;mix-blend-mode:color-burn;opacity:.12;
}
.m-hero::after{
	content:" ";height:200px;width:100%;display:block;position:absolute;bottom:0;z-index:200;
	mix-blend-mode:color-burn;opacity:.1;
	background:linear-gradient(0deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
}
.m-hero__grid{max-width:1620px;margin:auto}
.m-hero h1{text-align:center;font-size:7rem;line-height:7rem;font-weight:600;color:inherit;letter-spacing:normal;margin:0}
.m-hero h2{text-align:center;font-size:4.125rem;line-height:5rem;font-weight:600;margin-top:-12px;color:inherit;letter-spacing:normal}
.m-hero h2 span{font-weight:800;color:var(--c-2)}
.m-hero p{margin:0}
.m-hero a{color:inherit;text-decoration:none}

.m-hero__box{display:flex;align-self:stretch;justify-content:center;padding-top:20px}
.m-hero__ren{
	display:flex;flex-direction:column;justify-content:center;
	flex:0 0 calc((100% - 400px) / 2);padding-right:50px;line-height:1.75;
}
.m-hero__ren p{font-size:1.625rem;text-align:right;margin-bottom:40px}
.m-hero__links{display:flex;align-items:stretch;justify-content:flex-end;color:var(--c-1);font-size:1.125rem}
.m-hero__links a{
	display:flex;align-items:center;height:46px;margin-right:30px;border-radius:40px;
	font-weight:600;transition:all 100ms ease-in-out;
}
.m-hero__links a span{display:block;padding-top:3px}
.m-hero__links .call,
.m-hero__links .mail{width:46px;background-color:#001e34;justify-content:center}
.m-hero__links .call svg,
.m-hero__links .mail svg{width:28px;height:auto}
.m-hero__links .call{margin-right:8px}
.m-hero__links .offer{background-color:var(--c-2);padding:0 25px}
.m-hero__links .offer:hover{background-color:#11d06f}
.m-hero__links .benefits{background-color:var(--c-3);padding:0 25px}
.m-hero__links .benefits:hover{background-color:#3cabff}

.m-hero__expert{text-align:center;position:relative;z-index:300}
.m-hero__expert .bg{
	border-top-left-radius:40px;border-top-right-radius:40px;
	background:url(../img/expert-bg.webp) center top no-repeat;
	position:absolute;top:50px;right:15px;left:15px;bottom:0;z-index:10;
}
.m-hero__expert .bg::before{
	content:" ";display:block;background:url(../img/shadow.webp) center bottom no-repeat;
	width:100%;height:500px;position:absolute;bottom:0;
}
.m-hero__expert .bg::after{
	content:" ";height:400px;width:100%;display:block;position:absolute;bottom:0;z-index:200;
	mix-blend-mode:multiply;opacity:.8;
	background:linear-gradient(0deg, rgb(8,83,108) 0%, rgba(8,83,108,0) 100%);
}
.m-hero__expert img{position:relative;bottom:-25px;z-index:100}
.m-hero__reviews{display:flex;flex:0 0 calc((100% - 400px) / 2);align-items:center;padding-top:40px}

/* opinia w hero */
.m-hrev{margin-left:80px;flex:0 0 480px;font-size:1.125rem;position:relative;z-index:2000}
.m-hrev__rating{padding:0 0 10px 30px}
.m-hrev__review{
	background-color:#fff;color:var(--c-font);padding:30px 35px;border-radius:10px;
	position:relative;line-height:1.625;box-shadow:0 5px 15px 5px rgba(0,0,0,.2);
}
.m-hrev__review::after{
	content:" ";display:inline-block;background:url(../img/quote.svg) center center no-repeat;
	width:40px;height:40px;position:absolute;top:-18px;right:25px;
}
.m-hrev__more{padding:30px 20px}
.m-hrev .m-google-opinie{position:relative;z-index:100}
.m-hrev .m-google-opinie .logo{margin-right:20px}
.m-hrev .m-google-opinie .logo img{max-width:90px}
.m-hrev .m-google-opinie a{display:inline-block}
.m-hrev .m-google-opinie a:hover{text-decoration:underline}
.m-hrev .m-google-opinie .realizacje{margin-left:50px}

/* ---------- 6. Certyfikaty ---------- */
.m-badges{padding:25px 0}
.m-badges__box{
	max-width:680px;margin:auto;border:1px solid rgba(0,0,0,.2);border-radius:10px;
	display:flex;align-items:center;justify-content:space-between;padding:20px 30px;
}
.m-badges__item{display:flex;align-items:center}
.m-badges__box img{max-width:90px;max-height:110px;margin:6px}

/* ---------- 7. Oferta w trzech blokach ---------- */
.m-paths{
	display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--c-line);
	border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(3,53,92,.10);margin-top:46px;
}
.m-paths__col{padding:34px 32px;border-right:1px solid var(--c-line)}
.m-paths__col:last-child{border-right:0}
.m-paths__col--main{background:linear-gradient(180deg,#f3fffa 0%,#fff 55%)}
.m-paths__head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.m-paths__head h3{margin:0;font-size:21px}
.m-paths__ico{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center}
.m-paths__ico img{max-width:100%;height:auto}
.m-paths__col > p{font-size:14.5px;color:#7a8894;margin:0 0 20px}
.m-paths__list{list-style:none;padding:0;margin:0}
.m-paths__list li{border-top:1px solid var(--c-line)}
.m-paths__list a{
	display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;
	text-decoration:none;color:var(--c-5);font-weight:600;font-size:15.5px;transition:.16s;
}
.m-paths__list a::after{content:"→";color:#c3d2df;font-weight:700;transition:.16s}
.m-paths__list a:hover{color:var(--c-7);padding-left:6px}
.m-paths__list a:hover::after{color:var(--c-7)}
.m-paths__list .sub a{padding-left:20px;font-weight:500;font-size:14.5px;color:#5d6b77}
.m-paths__list .sub a::before{content:"—";color:#c3d2df;margin-right:8px}
.m-paths__more{margin-top:20px;padding-top:16px;border-top:1px solid var(--c-line)}
.m-paths__more a{
	font-weight:700;color:var(--c-1);text-decoration:none;
	border-bottom:2px solid var(--c-2);font-size:15px;
}

/* ---------- 8. Stopka ---------- */
.m-footer{background:#012036;color:#8fb3cd;padding:44px 0;font-size:14.5px}
.m-footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:34px}
.m-footer__logo{height:36px;width:auto;filter:brightness(0) invert(1);opacity:.9;margin-bottom:14px}
.m-footer h4,.m-footer .menu-item-has-children > a{color:#fff;font-size:15px;margin-bottom:14px}
.m-footer ul{list-style:none;padding:0;margin:0}
.m-footer li{margin-bottom:8px}
.m-footer a{color:#8fb3cd;text-decoration:none}
.m-footer a:hover{color:var(--c-2)}
.m-footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;font-size:13.5px}