@charset "UTF-8";
/* =========================================================================
   dotSell — arkusz MOBILNY
   Ładowany z media="(max-width: 1024px)".
   Plik jest samodzielny: zawiera własne podstawy i własny układ,
   nie nadpisuje styles.css (tamten w ogóle się tu nie ładuje).
   ========================================================================= */

/* ---------- 1. Zmienne ---------- */
:root{
	--font:'Google Sans', sans-serif;
	--c-font:#2c2e2f;
	--c-grey:#f5f9fc;
	--c-line:#e2eaf2;
	--c-1:#004c86;
	--c-2:#13ec7e;
	--c-3:#5bb8ff;
	--c-5:#03355c;
	--c-7:#04a353;
	--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:16px;
	line-height:1.6;
	background:#fff;
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}
img{max-width:100%;height:auto}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.02em;color:var(--c-5)}
h1{font-size:30px}
h2{font-size:25px}
h3{font-size:19px}
p{margin:0 0 1em}
a{color:var(--c-1)}
ul{margin:0;padding:0 0 0 1.2em}

.wrapper{width:100%;margin:auto;padding:0 18px}
.narrow{width:100%}
.center{text-align:center}
.hl{color:var(--c-7)}
.lead{font-size:17px;color:#4a5560}
.eyebrow{
	display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
	text-transform:uppercase;color:var(--c-7);margin-bottom:12px;
}

.section{padding:48px 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;justify-content:center;gap:8px;
	padding:14px 24px;border-radius:60px;font-weight:700;text-decoration:none;
	font-size:15.5px;border:2px solid transparent;
}
.btn--main{background:var(--c-7);color:#fff}
.btn--navy{background:var(--c-5);color:#fff}
.btn--outline{border-color:#c6d5e2;color:var(--c-5);background:#fff}

/* ---------- 4. Nagłówek ---------- */
.m-header{
	position:sticky;top:0;z-index:70;background:rgba(255,255,255,.96);
	backdrop-filter:blur(10px);border-bottom:1px solid var(--c-line);
}
.m-header__grid{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.m-header__logo img{height:32px;width:auto;display:block}
.m-nav{display:none}          /* menu mobilne — do wdrożenia w kolejnym kroku */
.m-header__phone{display:none}
.m-header__right{display:flex;align-items:center}
.m-header .btn{padding:11px 18px;font-size:14px}

/* ---------- 5. Hero ---------- */
.m-hero{
	color:#fff;padding:36px 0 0;position:relative;
	background:linear-gradient(44deg, rgb(6,58,98) 0%, rgb(6,73,125) 100%);
}
.m-hero__grid{padding:0 18px}
.m-hero h1{text-align:center;font-size:2.4rem;line-height:1.1;font-weight:600;color:inherit;margin:0}
.m-hero h2{text-align:center;font-size:1.5rem;line-height:1.3;font-weight:600;margin-top:8px;color:inherit}
.m-hero h2 span{font-weight:800;color:var(--c-2);display:inline}
.m-hero p{margin:0}
.m-hero a{color:inherit;text-decoration:none}

.m-hero__box{display:flex;flex-direction:column;align-items:center;padding-top:22px}
.m-hero__ren{order:20;width:100%;display:flex;flex-direction:column;align-items:center;padding:0}
.m-hero__ren p{font-size:1.05rem;text-align:center;margin-bottom:22px;line-height:1.55}
.m-hero__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;font-size:1rem}
.m-hero__links a{
	display:flex;align-items:center;height:44px;border-radius:40px;font-weight:600;
}
.m-hero__links .call,
.m-hero__links .mail{width:44px;background-color:#001e34;justify-content:center}
.m-hero__links .call svg,
.m-hero__links .mail svg{width:24px;height:auto}
.m-hero__links .offer{background-color:var(--c-2);padding:0 22px}
.m-hero__links .benefits{background-color:var(--c-3);padding:0 22px}

.m-hero__expert{order:10;width:100%;max-width:380px;text-align:center;position:relative;z-index:300}
.m-hero__expert .bg{
	border-top-left-radius:30px;border-top-right-radius:30px;
	background:url(../img/expert-bg.webp) center top no-repeat;background-size:cover;
	position:absolute;top:30px;right:0;left:0;bottom:0;z-index:10;
}
.m-hero__expert img{position:relative;bottom:-2px;z-index:100;max-height:320px;width:auto}
.m-hero__reviews{order:30;width:100%;padding-top:26px}

.m-hrev{width:100%;font-size:1rem;position:relative;z-index:2000}
.m-hrev__rating{padding:0 0 10px;text-align:center}
.m-hrev__rating img{display:inline-block}
.m-hrev__review{
	background-color:#fff;color:var(--c-font);padding:22px 24px;border-radius:10px;
	position:relative;line-height:1.55;box-shadow:0 5px 15px 5px rgba(0,0,0,.18);
}
.m-hrev__review::after{
	content:" ";display:inline-block;background:url(../img/quote.svg) center center no-repeat;
	background-size:contain;width:32px;height:32px;position:absolute;top:-14px;right:20px;
}
.m-hrev__more{padding:22px 0 0;text-align:center}
.m-hrev .m-google-opinie .logo{display:block;margin:0 0 10px}
.m-hrev .m-google-opinie .logo img{max-width:80px}
.m-hrev .m-google-opinie a{display:inline-block}
.m-hrev .m-google-opinie .realizacje{margin-left:22px}

/* ---------- 6. Certyfikaty ---------- */
.m-badges{padding:24px 0}
.m-badges__box{
	margin:0 18px;border:1px solid rgba(0,0,0,.16);border-radius:10px;
	display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;padding:16px 14px;
}
.m-badges__item{display:flex;align-items:center}
.m-badges__box img{max-width:70px;max-height:80px;margin:4px}

/* ---------- 7. Oferta w trzech blokach ---------- */
.m-paths{
	display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--c-line);
	border-radius:16px;overflow:hidden;box-shadow:0 14px 34px rgba(3,53,92,.10);margin-top:30px;
}
.m-paths__col{padding:26px 22px;border-bottom:1px solid var(--c-line)}
.m-paths__col:last-child{border-bottom:0}
.m-paths__col--main{background:linear-gradient(180deg,#f3fffa 0%,#fff 55%)}
.m-paths__head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.m-paths__head h3{margin:0;font-size:19px}
.m-paths__ico{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center}
.m-paths__col > p{font-size:14px;color:#7a8894;margin:0 0 16px}
.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;
}
.m-paths__list a::after{content:"→";color:#c3d2df;font-weight:700}
.m-paths__list .sub a{padding-left:16px;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:18px;padding-top:14px;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:34px 0;font-size:14.5px}
.m-footer__grid{display:grid;grid-template-columns:1fr;gap:26px}
.m-footer__logo{height:32px;width:auto;filter:brightness(0) invert(1);opacity:.9;margin-bottom:12px}
.m-footer h4{color:#fff;font-size:15px;margin-bottom:12px}
.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__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:18px;font-size:13px}