/* Font Satoshi ładowany przez w (functions.php), nie @import - bez blokowania renderu. */ :root{ --bg:#ffffff; --panel:#eef1f7; --panel-2:#e4e8f2; --img:#dfe3ee; --ink:#141a2e; --ink-soft:#26304d; --ink-mute:#3f465f; --navy:#1c265f; --navy-deep:#13193f; --navy-800:#161e4b; --red:#ef4130; --red-dark:#d5311c; --red-bright:#ff5a44; --muted:#5b6178; --muted-2:#656b85; --line:rgba(28,38,95,.12); --line-strong:rgba(28,38,95,.22); --cream:#eef1f8; --cream-soft:#c7cce0; --cream-line:rgba(238,241,248,.14); --radius:2px; --pad:28px; --wrap:1280px; --wrap-narrow:1080px; --wrap-slim:960px; --shadow-hero:0 22px 40px -22px rgba(12,18,45,.45); --shadow-card:0 16px 34px -16px rgba(15,22,55,.24); --font:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif; --e-soft:cubic-bezier(.22,.61,.36,1); --e-strong:cubic-bezier(.76,0,.24,1); } *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--navy-deep);overflow-x:clip;overscroll-behavior:none} /* granatowe tło html + przycięcie poziomego overflow (m.in. menu mobilne translateX(100%)) → brak białego paska przy przewijaniu w bok i przy „gumkowaniu" (overscroll) na górze/dole. */ body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55;font-size:16px;overflow-x:clip} img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.08} p{margin:0} ul{margin:0} ::selection{background:var(--red);color:#fff} :focus-visible{outline:2px solid var(--red);outline-offset:3px} /* ---------- LAYOUT ---------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%} .wrap--narrow{max-width:var(--wrap-narrow)} .wrap--slim{max-width:var(--wrap-slim)} .section{padding:clamp(64px,8vw,110px) 0;position:relative} .section--tight{padding:clamp(48px,6vw,84px) 0} .band-panel{background:var(--panel)} .band-navy{background:var(--navy);color:var(--cream)} .band-navy .h-md,.band-navy h2,.band-navy h3{color:#fff} .band-red{background:var(--red);color:#fff} /* ---------- TYPOGRAPHY HELPERS ---------- */ .h-xl{font-size:clamp(40px,6.6vw,86px);line-height:.98;letter-spacing:-.03em} .h-lg{font-size:clamp(34px,5.4vw,66px);line-height:1;letter-spacing:-.03em} .h-md{font-size:clamp(29px,4.2vw,50px);line-height:1.04;letter-spacing:-.022em} .h-sm{font-size:clamp(25px,3.2vw,38px);line-height:1.08;letter-spacing:-.02em} .h-xs{font-size:clamp(22px,2.6vw,30px);line-height:1.12;letter-spacing:-.015em} .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin:0 0 18px} .eyebrow--light{color:var(--red-bright)} .lede{font-size:clamp(16px,1.7vw,19px);line-height:1.65;color:var(--ink-mute)} .band-navy .lede{color:var(--cream-soft)} /* section header block */ .shead{max-width:760px;margin:0 0 clamp(38px,5vw,60px)} .shead--center{margin-left:auto;margin-right:auto;text-align:center} .shead--wide{max-width:940px} .shead--center .intro__lead{max-width:none;margin-inline:auto} .shead p.lede{margin-top:20px} /* ---------- BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:16px;font-weight:700;letter-spacing:-.01em;padding:16px 26px;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease} .btn svg{width:17px;height:17px;flex:none} .btn--primary{background:var(--red);color:#fff} .btn--primary:hover{background:var(--red-dark);color:#fff} .btn--dark{background:var(--navy);color:#fff} .btn--dark:hover{background:#fff;color:var(--navy)} .btn--invert{background:var(--red);color:#fff} .btn--invert:hover{background:#fff;color:var(--navy)} .btn--ghost{background:transparent;color:var(--cream);border:1px solid rgba(238,241,248,.4)} .btn--ghost:hover{border-color:var(--cream);background:rgba(238,241,248,.08)} .btn--outline{background:transparent;color:var(--ink);border:1px solid var(--line-strong)} .btn--outline:hover{border-color:var(--red);color:var(--red)} .btn--sm{padding:12px 20px;font-size:14px} .btn--lg{padding:19px 32px;font-size:17px} .btn--block{width:100%} .btn .ar{transition:transform .2s ease} .btn:hover .ar{transform:translateX(4px)} .arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--red);cursor:pointer} .arrow-link span{transition:transform .2s ease} .arrow-link:hover span{transform:translateX(5px)} .arrow-link--ink{color:var(--ink)} .arrow-link--ink:hover{color:var(--red)} .arrow-link--light{color:#fff} /* ---------- HEADER (glass) ---------- */ .site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px clamp(12px,3vw,28px) 0;pointer-events:none;transition:padding .45s var(--e-strong)} .site-header.is-scrolled{padding-top:8px} .site-header__inner{pointer-events:auto;position:relative;max-width:1500px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,1.6vw,22px);padding:11px 12px 11px 22px;background:rgba(19,25,63,.5);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 14px 40px rgba(9,13,35,.3);color:#fff;transition:max-width .5s var(--e-strong),background .4s var(--e-strong),box-shadow .4s var(--e-strong),padding .45s var(--e-strong),border-radius .45s var(--e-strong),border-color .4s var(--e-strong)} .site-header.is-scrolled .site-header__inner{max-width:1100px;padding-top:7px;padding-bottom:7px;background:rgba(14,19,48,.86);border-color:rgba(255,255,255,.08);border-radius:12px;box-shadow:0 10px 34px rgba(9,13,35,.5)} .brand{flex:none;display:flex;align-items:center} .brand img{height:30px;width:auto;transition:height .45s var(--e-strong),opacity .22s ease} .site-header.is-scrolled .brand img{height:25px} .site-header.is-scrolled .site-nav a{padding-top:6px;padding-bottom:6px} .site-header.is-scrolled .header-cta{padding-top:9px;padding-bottom:9px} .site-nav{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:2px} .site-nav a{position:relative;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:8px clamp(6px,.7vw,12px);font-size:clamp(13px,1vw,14.5px);font-weight:500;color:rgba(255,255,255,.8);letter-spacing:-.01em;transition:color .18s ease,padding .45s var(--e-strong)} .site-nav a:hover{color:#fff} .site-nav a.is-active{color:var(--red-bright);font-weight:600} .nav-home{position:relative;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.45);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none} .nav-home svg{width:15px;height:15px} .nav-home::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--red)} .site-header__right{display:flex;align-items:center;gap:16px;flex:none} .header-divider{width:1px;height:24px;background:rgba(255,255,255,.18);flex:none} .header-phone{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff;white-space:nowrap} .header-phone svg{width:16px;height:16px;opacity:.75} .header-cta{border-radius:9px;padding:11px 18px;font-size:14px;background:var(--red);color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:background .18s ease,padding .45s var(--e-strong)} .header-cta:hover{background:var(--red-dark)} .header-cta svg{width:15px;height:15px} .header-user{display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);transition:color .18s ease} .header-user:hover{color:#fff} .header-user svg{width:22px;height:22px} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex:none;z-index:120} .nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:transform .4s var(--e-strong),opacity .3s ease} .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.is-open span:nth-child(2){opacity:0} .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobilne menu - rozwijane WEWNĄTRZ samego paska (site-header__inner rośnie na pełny ekran) */ .header-menu{display:none} .header-menu a{font-size:clamp(26px,7vw,40px);font-weight:600;letter-spacing:-.02em;color:#fff;padding:10px 0;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--cream-line);opacity:0;transform:translateY(-14px);transition:opacity .32s ease,transform .32s var(--e-soft);transition-delay:calc((var(--n,10) - 1 - var(--i,0)) * .03s);-webkit-tap-highlight-color:transparent;outline:none} /* Brak ramki focus przy tapnięciu; ramkę zostawiamy tylko dla klawiatury. */ .header-menu a:focus-visible{outline:2px solid var(--red-bright);outline-offset:4px} .header-menu a.is-active{color:var(--red-bright)} .header-menu__foot{margin-top:clamp(24px,5vw,40px);display:flex;flex-wrap:wrap;gap:14px 28px;font-size:15px;color:var(--cream-soft)} .header-menu__foot a{font-size:15px;border:0;padding:0;color:var(--cream-soft)} .header-menu__panel svg{width:28px;height:28px;flex:none} .site-header__inner.is-open .header-menu{opacity:1;pointer-events:auto} .site-header__inner.is-open .header-menu a{opacity:1;transform:none;transition-delay:calc(.1s + var(--i,0) * .05s)} /* ---------- HERO (home) ---------- */ .hero{position:relative;background:var(--navy-deep);color:var(--cream);overflow:hidden;min-height:100svh;display:flex;align-items:flex-end;box-shadow:var(--shadow-hero)} .hero__bg{position:absolute;inset:0;overflow:hidden} .hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.5} .hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,20,50,.55) 0%,rgba(15,20,50,.28) 34%,rgba(13,17,42,.9) 100%)} .hero__grid{position:absolute;inset:0;background-image:linear-gradient(var(--cream-line) 1px,transparent 1px),linear-gradient(90deg,var(--cream-line) 1px,transparent 1px);background-size:64px 64px;opacity:.35;mask-image:radial-gradient(120% 90% at 50% 100%,#000 20%,transparent 75%)} .hero__inner{position:relative;max-width:var(--wrap);margin:0 auto;width:100%;padding:0 var(--pad) clamp(56px,7vw,96px)} .hero h1{max-width:14ch;color:#fff;font-size:clamp(42px,7vw,90px);line-height:.98;letter-spacing:-.035em} .hero h1 em{font-style:normal;color:var(--red-bright)} .hero__row{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end;margin-top:36px} .hero__row p{margin:0;max-width:540px;font-size:clamp(16px,1.7vw,19px);line-height:1.62;color:var(--cream-soft)} .hero__actions{display:flex;flex-wrap:wrap;gap:12px} @keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .hero__inner .eyebrow{animation:heroIn .85s var(--e-soft) both} .hero__inner h1{animation:heroIn .85s .1s var(--e-soft) both} .hero__row{animation:heroIn .85s .24s var(--e-soft) both} /* ---------- HERO (single/subpage) ---------- */ .pagehero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;min-height:clamp(360px,52vh,520px);display:flex;align-items:flex-end;box-shadow:var(--shadow-hero)} .pagehero__bg{position:absolute;inset:0} .pagehero__bg img{width:100%;height:100%;object-fit:cover;opacity:.42} .pagehero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,20,50,.5),rgba(13,17,42,.86))} .pagehero__inner{position:relative;max-width:var(--wrap);margin:0 auto;width:100%;padding:0 var(--pad) clamp(44px,6vw,72px)} .pagehero .crumbs{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--cream-soft);margin-bottom:20px} .pagehero .crumbs a:hover{color:#fff} .pagehero .crumbs span{opacity:.5} .pagehero h1{color:#fff;font-size:clamp(38px,6vw,74px);letter-spacing:-.032em;line-height:1;animation:heroIn .8s var(--e-soft) both} .pagehero__actions{animation:heroIn .8s .12s var(--e-soft) both} .pagehero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} /* ---------- INTRO / LEAD statement ---------- */ .intro__lead{font-family:var(--font);font-weight:600;letter-spacing:-.02em;font-size:clamp(24px,3.1vw,40px);line-height:1.16;color:var(--ink);max-width:20ch} .intro__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start} .intro__note{border-left:2px solid var(--red);padding-left:clamp(20px,2.4vw,30px)} .intro__note p{color:var(--ink-mute);font-size:clamp(16px,1.5vw,18px);line-height:1.68;margin-bottom:16px} .intro__note ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;margin-top:6px} .intro__note li{position:relative;padding-left:26px;color:var(--ink-mute);font-size:16.5px;line-height:1.5} .intro__note li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--red);transform:rotate(45deg)} /* ---------- CARD GRID ---------- */ .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .card-grid--2{grid-template-columns:repeat(2,1fr)} .card-grid--4{grid-template-columns:repeat(4,1fr)} .card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,2.4vw,34px);display:flex;flex-direction:column;gap:16px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;min-height:100%} a.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:transparent} .card__ico{width:52px;height:52px;border-radius:var(--radius);background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex:none} .card__ico svg{width:26px;height:26px} .card--accent .card__ico{background:var(--red)} .card h3{font-size:clamp(20px,1.7vw,23px);letter-spacing:-.01em} .card p{color:var(--muted);font-size:15.5px;line-height:1.6} .card .arrow-link{margin-top:auto;padding-top:6px} .card__kicker{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red)} /* ---------- HAIRLINE GRID (process / benefits) ---------- */ .hgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .hgrid--3{grid-template-columns:repeat(3,1fr)} .hgrid--2{grid-template-columns:repeat(2,1fr)} .hgrid--5{grid-template-columns:repeat(5,1fr)} .cell{background:var(--bg);padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column;gap:14px} .band-panel .cell{background:var(--panel)} .cell__num{font-size:clamp(30px,3vw,46px);font-weight:600;letter-spacing:-.03em;color:var(--red);line-height:1} .cell__ico{color:var(--navy)} .cell__ico svg{width:30px;height:30px;stroke-width:1.7} .cell h3{font-size:clamp(19px,1.6vw,22px)} .cell p,.cell li{color:var(--muted);font-size:15px;line-height:1.55} .cell ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px} .cell ul li{position:relative;padding-left:20px} .cell ul li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--red);transform:rotate(45deg)} /* benefit tick cell (compact) */ .tick{display:flex;gap:16px;align-items:flex-start} .tick__ico{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(239,65,48,.1);color:var(--red);display:flex;align-items:center;justify-content:center;margin-top:2px} .tick__ico svg{width:18px;height:18px} .tick p{color:var(--ink-mute);font-size:15.5px;line-height:1.55} .tick p strong{color:var(--ink);font-weight:700} /* ---------- STATS ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .stat{background:var(--bg);padding:clamp(30px,3vw,44px) clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:8px} .stat__ico{color:var(--red);margin-bottom:6px} .stat__ico svg{width:30px;height:30px} .stat__num{font-size:clamp(40px,5vw,72px);font-weight:600;letter-spacing:-.03em;line-height:.95;color:var(--navy)} .stat p{color:var(--muted);font-size:16px;line-height:1.4} /* ---------- SPLIT / STEP LIST ---------- */ .steps{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)} .step{background:var(--bg);display:grid;grid-template-columns:120px 1fr;gap:clamp(20px,4vw,56px);padding:clamp(30px,3.4vw,52px) clamp(24px,3vw,44px);align-items:start} .step__num{font-size:clamp(38px,4vw,64px);font-weight:600;letter-spacing:-.03em;color:var(--red);line-height:.9} .step__ico{color:var(--navy);margin-bottom:16px} .step__ico svg{width:36px;height:36px;stroke-width:1.6} .step h3{font-size:clamp(23px,2.4vw,32px);margin-bottom:18px} .step ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px;max-width:70ch} .step li{position:relative;padding-left:24px;color:var(--ink-mute);font-size:16px;line-height:1.55} .step li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--red);transform:rotate(45deg)} /* ---------- QUOTE / MOTTO BAND ---------- */ .motto{text-align:center} .motto .eyebrow{margin-bottom:22px} .motto blockquote{margin:0;font-size:clamp(28px,4vw,52px);font-weight:600;letter-spacing:-.025em;line-height:1.1;max-width:18ch;margin-inline:auto} .band-red .eyebrow{color:#fff;opacity:.8} /* red statement band */ .statement{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center} .statement h2{font-size:clamp(26px,3.2vw,42px);letter-spacing:-.022em;line-height:1.1;color:#fff} .statement p{color:rgba(255,255,255,.9);font-size:clamp(16px,1.5vw,18px);line-height:1.65} /* ---------- CASES (testimonial-like) ---------- */ .case{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(30px,3vw,44px);display:flex;flex-direction:column;gap:18px} .case__ico{width:46px;height:46px;color:var(--red)} .case h3{font-size:clamp(19px,1.7vw,23px);line-height:1.2} .case p{color:var(--muted);font-size:15.5px;line-height:1.62} /* ---------- KNOWLEDGE CARDS ---------- */ .klist{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .kcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease} .kcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)} .kcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--img)} .kcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e-soft)} .kcard:hover .kcard__media img{transform:scale(1.04)} .kcard__body{padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;flex:1} .kcard__body h3{font-size:clamp(20px,1.8vw,25px);line-height:1.15} .kcard__body p{color:var(--muted);font-size:15px;line-height:1.6} .kcard .arrow-link{margin-top:auto;padding-top:4px} /* ---------- SERVICE CROSS-LINK BANNERS ---------- */ .xnav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)} .xnav a{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(34px,4vw,56px);display:flex;flex-direction:column;gap:16px;min-height:280px;justify-content:flex-end;transition:background .3s ease} .xnav a::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;transition:opacity .4s ease,transform .6s var(--e-soft)} .xnav a:hover::before{opacity:.4;transform:scale(1.05)} .xnav a:hover{background:var(--navy-deep)} .xnav__ico{width:46px;height:46px;color:var(--red-bright);position:relative} .xnav__ico svg{width:46px;height:46px;stroke-width:1.5} .xnav a h3{font-size:clamp(24px,2.4vw,32px);position:relative} .xnav a p{color:var(--cream-soft);font-size:15px;line-height:1.6;position:relative;max-width:46ch} .xnav a .arrow-link{position:relative;color:#fff} /* ---------- FAMILY LOGOS ---------- */ .family{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .family__item{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:clamp(40px,5vw,72px)} .band-panel .family__item{background:var(--panel)} .family__item img{height:clamp(48px,5vw,70px);width:auto} /* ---------- CONTACT CARDS ---------- */ .contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .ccard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,2.6vw,38px);display:flex;flex-direction:column;gap:14px} .ccard__ico{width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center} .ccard__ico svg{width:22px;height:22px} .ccard h3{font-size:clamp(18px,1.5vw,21px)} .ccard p{color:var(--muted);font-size:14px} .ccard address{font-style:normal;color:var(--ink);font-size:17px;line-height:1.45;font-weight:600} /* ---------- FORM ---------- */ .brief{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,3.4vw,48px)} .brief-note{margin:0 0 20px;padding:13px 16px;border-radius:var(--radius);font-size:14px;font-weight:600;border:1px solid transparent} .brief-note--ok{background:rgba(26,125,74,.1);border-color:rgba(26,125,74,.35);color:#127a45} .brief-note--err{background:rgba(206,52,38,.1);border-color:rgba(206,52,38,.35);color:#c4362a} .brief--dark .brief-note--ok{background:rgba(52,199,120,.14);border-color:rgba(52,199,120,.4);color:#7ee0a6} .brief--dark .brief-note--err{background:rgba(255,96,80,.14);border-color:rgba(255,96,80,.4);color:#ff9d92} .brief-form{display:flex;flex-direction:column;gap:18px} .form-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .brief-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--ink-soft)} .brief-form input,.brief-form textarea{font-family:var(--font);padding:14px 15px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:15px;background:var(--bg);color:var(--ink);transition:border-color .18s ease} .brief-form textarea{min-height:150px;resize:vertical} .brief-form input:focus,.brief-form textarea:focus{border-color:var(--red);outline:none} .brief-form input::placeholder,.brief-form textarea::placeholder{color:var(--muted-2)} .brief--dark{position:relative;overflow:hidden;background:var(--navy-deep);border-color:rgba(255,255,255,.1);box-shadow:0 34px 80px -34px rgba(9,13,35,.7)} .brief--dark::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 100% -20%,rgba(239,65,48,.16),transparent 60%);pointer-events:none} .brief--dark .brief-form{position:relative} .brief--dark .brief-form label,.brief--dark .brief-form legend{color:var(--cream-soft)} .brief--dark .brief-form input,.brief--dark .brief-form textarea,.brief--dark .brief-form select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff} .brief--dark .brief-form input::placeholder,.brief--dark .brief-form textarea::placeholder{color:rgba(238,241,248,.5)} .brief--dark .brief-form input:focus,.brief--dark .brief-form textarea:focus,.brief--dark .brief-form select:focus{border-color:var(--red-bright);background:rgba(255,255,255,.1)} .brief--dark .btn--primary{box-shadow:0 16px 34px -14px rgba(239,65,48,.6)} /* ---------- MAP PLACEHOLDER ---------- */ .mapband{background:var(--navy-deep);position:relative;overflow:hidden;min-height:clamp(280px,34vw,420px);display:flex;align-items:center;justify-content:center;color:var(--cream)} .mapband__grid{position:absolute;inset:0;background-image:linear-gradient(var(--cream-line) 1px,transparent 1px),linear-gradient(90deg,var(--cream-line) 1px,transparent 1px);background-size:48px 48px;opacity:.5} .mapband__pin{position:relative;text-align:center} .mapband__pin svg{width:76px;height:auto;margin:0 auto 18px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.4))} .mapband__pin p{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-soft)} .mapband__pin strong{display:block;font-size:clamp(20px,2vw,26px);font-weight:600;color:#fff;letter-spacing:-.01em;margin-top:6px;text-transform:none} /* ---------- FOOTER ---------- */ .site-footer{background:var(--navy);color:var(--cream)} .footer-top{padding:clamp(56px,7vw,90px) 0;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center} .footer-top h3{color:#fff;font-size:clamp(24px,2.4vw,32px);margin-bottom:20px} .footer-top address{font-style:normal;color:var(--cream-soft);font-size:17px;line-height:1.7} .footer-top address strong{color:#fff;font-weight:700} .footer-cta{display:flex;justify-content:flex-end} .footer-bottom{border-top:1px solid var(--cream-line);padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .footer-bottom img{height:26px;width:auto} .footer-bottom p{color:var(--muted-2);font-size:13px} /* ---------- FLOATING QUICK CONTACT ---------- */ .quick{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:10px} .quick a{width:50px;height:50px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(239,65,48,.4);transition:background .18s ease,transform .18s ease} .quick a:hover{background:var(--red-dark);transform:translateY(-3px)} .quick a svg{width:22px;height:22px} /* ---------- REVEAL ---------- */ .reveal-init{opacity:0;transform:translateY(24px)} .reveal-in{opacity:1;transform:none;transition:opacity .7s var(--e-soft),transform .7s var(--e-soft)} .card.reveal-init,.case.reveal-init,.kcard.reveal-init,.stat.reveal-init,.ccard.reveal-init,.cell.reveal-init{transform:translateX(-32px)} .hgrid[data-reveal]>.cell,.stats[data-reveal]>.stat,.steps[data-reveal]>.step,.contact-cards[data-reveal]>.ccard,.family[data-reveal]>.family__item{opacity:0;transform:translateX(-32px);transition:opacity .6s var(--e-soft),transform .6s var(--e-soft)} .hgrid.reveal-in>.cell,.stats.reveal-in>.stat,.steps.reveal-in>.step,.contact-cards.reveal-in>.ccard,.family.reveal-in>.family__item{opacity:1;transform:none} .hgrid.reveal-in>.cell:nth-child(2),.stats.reveal-in>.stat:nth-child(2),.steps.reveal-in>.step:nth-child(2),.contact-cards.reveal-in>.ccard:nth-child(2),.family.reveal-in>.family__item:nth-child(2){transition-delay:.08s} .hgrid.reveal-in>.cell:nth-child(3),.stats.reveal-in>.stat:nth-child(3),.steps.reveal-in>.step:nth-child(3),.contact-cards.reveal-in>.ccard:nth-child(3),.family.reveal-in>.family__item:nth-child(3){transition-delay:.16s} .hgrid.reveal-in>.cell:nth-child(4),.steps.reveal-in>.step:nth-child(4){transition-delay:.24s} .hgrid.reveal-in>.cell:nth-child(5),.steps.reveal-in>.step:nth-child(5){transition-delay:.32s} .hgrid.reveal-in>.cell:nth-child(6){transition-delay:.4s} /* ---------- KATALOG POJAZDÓW (VEHIS embed / podgląd) ---------- */ .shead__lead{margin:18px 0 0;color:var(--muted);font-size:clamp(16px,1.5vw,18px);line-height:1.6;max-width:640px} .vehis-embed{margin-top:clamp(28px,4vw,44px);width:100vw;margin-left:calc(50% - 50vw)} .vehis-embed #v-embed{width:100%;border:0;display:block;min-height:640px} /* pasek marek */ .catalog__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);box-shadow:var(--shadow-card)} .catalog__brands{display:flex;flex-wrap:wrap;gap:8px} .brand-chip{font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink-soft);background:var(--panel);border:1px solid transparent;border-radius:var(--radius);padding:9px 14px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease} .brand-chip:hover{border-color:var(--line-strong);color:var(--ink)} .brand-chip.is-active{background:var(--navy);color:#fff} .brand-chip--more{background:transparent;border:1px dashed var(--line-strong);color:var(--muted)} .catalog__adv{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy);white-space:nowrap} .catalog__adv svg{width:18px;height:18px} .catalog__adv:hover{color:var(--red)} .catalog__sub{margin:clamp(22px,3vw,32px) 0 16px;font-size:clamp(18px,2vw,22px);font-weight:700;letter-spacing:-.02em;color:var(--ink)} /* siatka kart */ .catalog__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)} .ccar{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:18px 18px 18px;box-shadow:var(--shadow-card);cursor:pointer;transition:transform .2s var(--e-soft),box-shadow .2s ease} .ccar:hover{transform:translateY(-3px);box-shadow:0 22px 40px -18px rgba(15,22,55,.32)} .ccar:focus-visible{outline:2px solid var(--red);outline-offset:3px} .ccar.is-hidden{display:none} .ccar__brand{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .ccar__model{margin:2px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .ccar__media{margin:14px 0 16px;aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--panel),var(--panel-2));border-radius:var(--radius)} .ccar__media svg{width:72%;height:auto;color:var(--navy);opacity:.32} .ccar__price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .ccar__pcol{display:flex;flex-direction:column;gap:2px} .ccar__pcol--r{text-align:right} .ccar__cat{font-size:12px;color:var(--muted-2);text-decoration:line-through} .ccar__from{font-size:14px;color:var(--muted)} .ccar__from strong{display:block;font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em} .ccar__ratalbl{font-size:12.5px;color:var(--muted)} .ccar__rataval{display:block;font-size:19px;font-weight:800;color:var(--red);letter-spacing:-.02em} .catalog__powered{margin:clamp(22px,3vw,30px) 0 0;text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)} .catalog__powered strong{color:var(--navy);letter-spacing:.06em} .ccar__btn{margin-top:16px;width:100%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-size:14px;font-weight:700;color:#fff;background:var(--navy);border:1px solid var(--navy);border-radius:var(--radius);padding:12px 14px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease} .ccar:hover .ccar__btn,.ccar__btn:hover{background:var(--red);border-color:var(--red)} .catalog__empty{margin:22px 0 0;font-size:15px;color:var(--muted)} .catalog__reset{font-family:var(--font);font-size:15px;font-weight:700;color:var(--navy);background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;padding:0} .catalog__note{margin:clamp(22px,3vw,30px) 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)} .catalog__badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:var(--radius);padding:3px 9px;margin-right:8px;vertical-align:middle} @media (max-width:1000px){.catalog__grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.catalog__grid{grid-template-columns:1fr}.catalog__bar{justify-content:flex-start}} /* ---------- MODAL modelu ---------- */ .cmodal{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)} .cmodal[hidden]{display:none} .cmodal__backdrop{position:absolute;inset:0;background:rgba(11,15,38,.62);opacity:0;transition:opacity .25s ease;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .cmodal.is-open .cmodal__backdrop{opacity:1} .cmodal__panel{position:relative;width:min(920px,100%);max-height:calc(100svh - 2*clamp(12px,3vw,32px));overflow:auto;background:var(--bg);border-radius:var(--radius);box-shadow:0 40px 90px -30px rgba(9,13,35,.6);padding:clamp(22px,3.4vw,38px);transform:translateY(16px) scale(.98);opacity:0;transition:transform .3s var(--e-strong),opacity .3s ease} .cmodal.is-open .cmodal__panel{transform:none;opacity:1} .cmodal__x{position:absolute;top:14px;right:14px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:0;border-radius:var(--radius);color:var(--ink);cursor:pointer;transition:background .18s ease,color .18s ease} .cmodal__x svg{width:20px;height:20px} .cmodal__x:hover{background:var(--navy);color:#fff} .cmodal__brand{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .cmodal__head h3{margin:4px 0 0;font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.025em;color:var(--ink)} .cmodal__meta{margin:6px 0 0;font-size:14px;color:var(--muted)} .cmodal__vars{margin:clamp(20px,2.6vw,28px) 0 0} .cmodal__filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .cfil{font-size:12.5px;font-weight:600;color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;display:inline-flex;align-items:center;gap:8px} .cfil::after{content:"⌄";font-size:13px;line-height:1;color:var(--muted-2);transform:translateY(-2px)} .cfil--sort{margin-left:auto;color:var(--navy);border-color:var(--line-strong)} .cfil--sort::after{content:""} .cmodal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .cvar{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);padding:20px 16px 18px} .cvar--best{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset} .cvar__disc{position:absolute;top:-11px;right:14px;font-size:11px;font-weight:800;color:#fff;background:var(--red);border-radius:var(--radius);padding:3px 8px} .cvar__tag{position:absolute;top:-11px;left:16px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--navy);border-radius:var(--radius);padding:3px 8px} .cvar__name{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink)} .cvar__spec{margin-top:2px;font-size:12.5px;color:var(--muted)} .cvar__rlabel{margin-top:16px;font-size:12.5px;color:var(--muted)} .cvar__rval{font-size:24px;font-weight:800;color:var(--red);letter-spacing:-.025em;line-height:1.05} .cvar__pcat{margin-top:10px;font-size:12.5px;color:var(--muted-2)} .cvar__pcat s{color:var(--muted-2)} .cvar__price{margin-top:2px;font-size:12.5px;color:var(--muted)} .cvar__price b{display:block;font-size:18px;color:var(--ink);letter-spacing:-.02em} .cvar__cta{margin-top:14px;display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;color:#fff;background:var(--navy);border:1px solid var(--navy);border-radius:var(--radius);padding:11px 12px;transition:background .18s ease,border-color .18s ease} .cvar__cta:hover{background:var(--red);border-color:var(--red)} .cvar__feat{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px} .cvar__feat li{position:relative;padding-left:26px;font-size:13px;line-height:1.35;color:var(--ink-mute)} .cvar__feat li::before{position:absolute;left:0;top:0;width:18px;height:18px;text-align:center;font-weight:800;font-size:13px;border-radius:50%} .cvar__feat li.is-on::before{content:"✓";color:#0b7a4b;background:rgba(16,160,100,.14)} .cvar__feat li.is-off{color:var(--muted-2)} .cvar__feat li.is-off::before{content:"-";color:var(--muted-2);background:var(--panel)} .cmodal__foot{margin:clamp(20px,2.6vw,28px) 0 0;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px} .cmodal__disc{margin:0;max-width:44ch;font-size:13px;line-height:1.5;color:var(--muted)} @media (max-width:760px){.cmodal__grid{grid-template-columns:1fr}.cfil--sort{margin-left:0}.cmodal__foot{flex-direction:column;align-items:flex-start}.cmodal__foot .btn{width:100%}} /* ---------- PRELOADER (lot logo FLIP) ---------- */ .preloader{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none} .preloader__bg{position:absolute;inset:0;background:var(--navy-deep);transition:opacity .75s var(--e-strong)} .preloader.is-bgout .preloader__bg{opacity:0} .preloader__logo{position:relative;width:min(300px,54vw);height:auto;transform-origin:center center;will-change:transform;transition:opacity .2s ease} .preloader.is-hidden{display:none} body.is-preloading .brand img{opacity:0} @media (prefers-reduced-motion:reduce){.preloader{display:none}} /* ---------- ICON MOTION ---------- */ @keyframes icoIn{from{opacity:0;transform:scale(.62) translateY(5px)}to{opacity:1;transform:none}} .reveal-in .card__ico,.reveal-in .cell__ico,.reveal-in .stat__ico,.reveal-in .step__ico,.reveal-in .xnav__ico,.reveal-in .ccard__ico,.reveal-in .case__ico{animation:icoIn .55s var(--e-soft)} .card__ico,.xnav__ico,.cell__ico,.ccard__ico{transition:transform .32s var(--e-soft),background .25s ease} a.card:hover .card__ico{transform:translateY(-2px) scale(1.07)} .xnav a:hover .xnav__ico{transform:translateY(-3px) scale(1.05)} a.cell:hover .cell__ico{transform:scale(1.1)} /* ---------- RESPONSIVE ---------- */ @media (max-width:1160px){ .site-nav,.header-phone,.header-divider,.header-cta,.header-user{display:none} .nav-toggle{display:block} /* Pasek to jeden box, który sam rośnie na pełny ekran (nie osobna nakładka) */ .site-header{transition:padding .6s var(--e-strong)} /* Otwarte menu: pasek traci padding i zaokrąglenie → przylega do ścianek (animowane) */ body.is-menu-open .site-header,body.is-menu-open .site-header.is-scrolled{padding:0} /* flex-start na stałe - logo i burger nie skaczą na środek przy zamykaniu */ .site-header__inner{overflow:hidden;height:64px;align-items:flex-start;transition:background .4s var(--e-strong),box-shadow .4s var(--e-strong),border-color .4s var(--e-strong),border-radius .6s var(--e-strong),height .6s var(--e-strong)} .site-header__inner.is-open{height:100vh;height:100dvh;border-radius:0} .brand{min-height:42px} .header-menu{display:flex;flex-direction:column;justify-content:flex-start;position:absolute;left:0;right:0;top:64px;bottom:0;padding:8px clamp(22px,6vw,44px) 36px;opacity:0;pointer-events:none;overflow-y:auto;-webkit-overflow-scrolling:touch} /* Na mobile nagłówek nie zmienia się przy scrollu - zerujemy stan is-scrolled */ .site-header.is-scrolled{padding-top:14px} .site-header.is-scrolled .site-header__inner{max-width:none;padding-top:11px;padding-bottom:11px;background:rgba(19,25,63,.5);border-color:rgba(255,255,255,.12);border-radius:16px;box-shadow:0 14px 40px rgba(9,13,35,.3)} .site-header.is-scrolled .brand img{height:30px} } @media (max-width:1000px){ .card-grid,.hgrid--3,.hgrid--5,.stats,.contact-cards,.family{grid-template-columns:repeat(2,1fr)} .card-grid--4{grid-template-columns:repeat(2,1fr)} .hgrid--5{grid-template-columns:repeat(3,1fr)} } @media (max-width:900px){ .intro__grid,.statement,.footer-top{grid-template-columns:1fr;gap:28px} .xnav{grid-template-columns:1fr} .klist{grid-template-columns:1fr} .footer-cta{justify-content:flex-start} .step{grid-template-columns:1fr;gap:14px} .step__num{font-size:clamp(34px,10vw,52px)} } @media (max-width:680px){ .card-grid,.card-grid--2,.card-grid--4,.hgrid--3,.hgrid--2,.hgrid--5,.stats,.contact-cards,.family{grid-template-columns:1fr} .form-2{grid-template-columns:1fr} .hero{align-items:center} .hero__inner{padding-top:clamp(90px,22vw,130px);padding-bottom:clamp(90px,22vw,130px)} .hero__row{gap:24px} .hero__actions{width:100%} .hero__actions .btn{flex:1} .quick{right:12px;bottom:12px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important} .reveal-init,.card.reveal-init,.case.reveal-init,.kcard.reveal-init,.stat.reveal-init,.ccard.reveal-init,.cell.reveal-init{opacity:1;transform:none} .hgrid[data-reveal]>.cell,.stats[data-reveal]>.stat,.steps[data-reveal]>.step,.contact-cards[data-reveal]>.ccard,.family[data-reveal]>.family__item{opacity:1;transform:none;transition:none} .kcard:hover .kcard__media img,.xnav a:hover::before{transform:none} } /* ── Baza wiedzy: treść pojedynczego artykułu ─────────────────── */ .prose{font-size:clamp(16px,1.55vw,18px);line-height:1.75;color:var(--ink-soft)} .prose > *:first-child{margin-top:0} .prose p{margin:0 0 20px} .prose h2,.prose h3,.prose h4{color:var(--ink);letter-spacing:-.018em;line-height:1.15} .prose h2{font-size:clamp(24px,3vw,34px);margin:44px 0 16px} .prose h3{font-size:clamp(21px,2.4vw,27px);margin:40px 0 14px} .prose h4{font-size:clamp(19px,2vw,22px);margin:36px 0 12px} .prose ul,.prose ol{margin:0 0 22px;padding-left:1.25em} .prose li{margin:0 0 10px;padding-left:.25em} .prose ul li::marker{color:var(--red)} .prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .prose a:hover{color:var(--red-dark)} .prose strong{color:var(--ink);font-weight:700} .prose img{max-width:100%;height:auto;border-radius:var(--radius)} .prose blockquote{margin:28px 0;padding:4px 0 4px 24px;border-left:2px solid var(--red);color:var(--ink);font-weight:500} .prose .post-lead{font-size:clamp(18px,1.9vw,21px);line-height:1.6;color:var(--ink);font-weight:500; margin:0 0 34px;padding:0 0 28px;border-bottom:1px solid var(--line)} /* ── Paginacja listingu ───────────────────────────────────────── */ .pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:48px} .pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px; padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink-soft); font-weight:600;font-size:15px;text-decoration:none;transition:background .2s var(--e-soft),color .2s var(--e-soft),border-color .2s var(--e-soft)} .pagination .page-numbers:hover{border-color:var(--red);color:var(--red)} .pagination .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff} .pagination .page-numbers.dots{border-color:transparent} /* ── Formularz GAP: pola rozszerzone (select, radio, fieldset) ─── */ .brief-form select{font-family:var(--font);padding:14px 15px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:15px;background:var(--bg);color:var(--ink);transition:border-color .18s ease;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px} .brief-form select:focus{border-color:var(--red);outline:none} .brief-form fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .brief-form legend{padding:0;font-size:13px;font-weight:600;color:var(--ink-soft)} .choices{display:flex;flex-wrap:wrap;gap:8px} .choice{position:relative;display:inline-flex} .choice input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer} .choice span{display:inline-flex;align-items:center;padding:11px 16px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--ink-soft);transition:background .18s ease,border-color .18s ease,color .18s ease} .choice input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff} .choice input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px} .brief--dark .choice span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:var(--cream)} .brief--dark .choice:hover span{border-color:rgba(255,255,255,.45);color:#fff} .brief--dark .choice input:checked + span{background:var(--red);border-color:var(--red);color:#fff} .brief--dark .choice input:focus-visible + span{outline-color:var(--red-bright)} .form-full{grid-column:1/-1} .form-sub{grid-column:1/-1;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:8px 0 -2px} .form-sub:first-child{margin-top:0} /* Komunikat po wysłaniu */ .formmsg{grid-column:1/-1;padding:16px 18px;border-radius:var(--radius);font-size:15px;font-weight:600;border:1px solid transparent} .formmsg--ok{background:rgba(16,160,100,.1);border-color:rgba(16,160,100,.35);color:#0b7a4b} .formmsg--error{background:rgba(239,65,48,.08);border-color:rgba(239,65,48,.35);color:var(--red-dark)} .errpage{min-height:100svh;background:var(--navy-deep);color:var(--cream);display:flex;align-items:center;justify-content:center;padding:clamp(32px,7vw,80px) var(--pad);position:relative;overflow:hidden} .errpage::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 560px at 50% -8%,rgba(239,65,48,.2),transparent 62%);pointer-events:none} .errpage__inner{position:relative;max-width:660px;text-align:center;display:flex;flex-direction:column;align-items:center} .errpage__logo{display:inline-block;margin:0 0 clamp(26px,5vw,44px)} .errpage__logo img{height:42px;width:auto} .errpage__code{font-family:var(--font);font-size:clamp(96px,23vw,210px);line-height:.86;font-weight:900;letter-spacing:-.05em;color:#fff;margin:0} .errpage__code span{color:var(--red)} .errpage h1{margin:18px 0 14px;color:#fff} .errpage__lead{font-size:clamp(16px,1.8vw,19px);line-height:1.6;color:var(--cream-soft);max-width:46ch;margin:0 auto clamp(28px,4vw,36px)} .errpage__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .authpage{min-height:100svh;background:var(--navy-deep);display:flex;align-items:center;justify-content:center;padding:clamp(24px,6vw,64px) var(--pad);position:relative;overflow:hidden} .authpage::before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 520px at 50% -12%,rgba(239,65,48,.18),transparent 62%);pointer-events:none} .authpage__inner{position:relative;width:100%;max-width:430px;display:flex;flex-direction:column;align-items:center;gap:26px} .authpage__logo{display:block} .authpage__logo img{height:40px;width:auto} .authpage__card{width:100%;background:#fff;border-radius:var(--radius);padding:clamp(28px,5vw,40px);box-shadow:0 30px 70px -28px rgba(0,0,0,.55);transform-origin:center;animation:authCardIn .85s cubic-bezier(.34,1.5,.5,1) both} @keyframes authCardIn{from{opacity:0;transform:scale(.42)}55%{opacity:1}to{opacity:1;transform:scale(1)}} @media (prefers-reduced-motion:reduce){.authpage__card{animation:none}} .authpage__card h1{font-size:clamp(24px,3vw,30px);color:var(--ink);margin:0 0 6px} .authpage__sub{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 24px} .authpage__err{background:rgba(239,65,48,.08);border:1px solid rgba(239,65,48,.35);color:var(--red-dark);padding:11px 14px;border-radius:var(--radius);font-size:14px;font-weight:600;margin:0 0 18px} .authform{display:flex;flex-direction:column;gap:16px} .authform label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--ink-soft)} .authform input{font-family:var(--font);font-size:15px;padding:13px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--ink);transition:border-color .16s ease} .authform input:focus{outline:none;border-color:var(--red)} .authform button{margin-top:6px;background:var(--red);color:#fff;border:0;border-radius:var(--radius);padding:14px 18px;font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:-.01em;cursor:pointer;transition:background .18s ease} .authform button:hover{background:var(--red-dark)} .authpage__foot{color:var(--cream-soft);font-size:14px} .authpage__foot a{color:#fff;font-weight:600} .authpage__foot a:hover{color:var(--red-bright)}