/* ============================================================ FINANSUS — tokeny i style strony (wg księgi identyfikacji) Granat #0D4494 prowadzi · złoto #F6A400 tylko akcent ============================================================ */ :root{ --navy:#0D4494; --navy-dark:#074785; --navy-deep:#0B4376; --gold:#F6A400; --orange:#F2922C; --bg:#FFFFFF; --bg-alt:#F2F5FA; --bg-card:#FFFFFF; --bg-tile-alt:#EEF3FA; --text:#343A40; --text-soft:#5A6470; --heading:#0D4494; --heading-2:#074785; --line:#DCE3EE; --shadow:0 2px 10px rgba(13,68,148,.09); --logo-light-o:1; --logo-dark-o:0; --f-bg:#E9EFF7; --f-text:#414D5E; --f-head:#0D4494; --f-soft:#5F6B7C; --f-line:rgba(13,68,148,.22); --f-hover:#074785; --photo-frame:#0D4494; --ok-ink:#2E7D32; --err-ink:#C62828; } @media (prefers-color-scheme: dark){ :root{ --bg:#0F1115; --bg-alt:#141926; --bg-card:#171C28; --bg-tile-alt:#1B2233; --text:#E7EAF0; --text-soft:#A6AFC0; --heading:#9FBCEE; --heading-2:#8FB0E8; --line:#2A3346; --shadow:0 2px 12px rgba(0,0,0,.45); --logo-light-o:0; --logo-dark-o:1; --f-bg:#0E1626; --f-text:#C9D6F0; --f-head:#FFFFFF; --f-soft:#9DB0D8; --f-line:rgba(255,255,255,.18); --f-hover:#FFFFFF; --photo-frame:#F6A400; --ok-ink:#66BB6A; --err-ink:#EF9A9A; } } :root[data-theme="dark"]{ --ok-ink:#66BB6A; --err-ink:#EF9A9A; --bg:#0F1115; --bg-alt:#141926; --bg-card:#171C28; --bg-tile-alt:#1B2233; --text:#E7EAF0; --text-soft:#A6AFC0; --heading:#9FBCEE; --heading-2:#8FB0E8; --line:#2A3346; --shadow:0 2px 12px rgba(0,0,0,.45); --logo-light:none; --logo-dark:inline-block; --photo-frame:#F6A400; } :root[data-theme="light"]{ --ok-ink:#2E7D32; --err-ink:#C62828; --bg:#FFFFFF; --bg-alt:#F2F5FA; --bg-card:#FFFFFF; --bg-tile-alt:#EEF3FA; --text:#343A40; --text-soft:#5A6470; --heading:#0D4494; --heading-2:#074785; --line:#DCE3EE; --shadow:0 2px 10px rgba(13,68,148,.09); --logo-light-o:1; --logo-dark-o:0; --f-bg:#E9EFF7; --f-text:#414D5E; --f-head:#0D4494; --f-soft:#5F6B7C; --f-line:rgba(13,68,148,.22); --f-hover:#074785; --photo-frame:#0D4494; } *{box-sizing:border-box} html{scroll-behavior:smooth} /* Płynne przejście między podstronami (View Transitions API — zasada projektu dla obu marek; przeglądarki bez wsparcia nawigują normalnie, reduced-motion wyłącza animację) */ @view-transition{navigation:auto} ::view-transition-old(root){animation-duration:.4s;animation-timing-function:ease} ::view-transition-new(root){animation-duration:.4s;animation-timing-function:ease} @media (prefers-reduced-motion: reduce){ @view-transition{navigation:none} } /* Anty-błysk: cele animacji wejścia ukryte od PIERWSZEGO malowania (klasa js nadawana inline w ), zanim main.js je uzbroi (.rv-armed); bezpiecznik .rv-safe pokazuje treść, gdyby main.js nie wstał. Bez JS (brak .js) wszystko widoczne od razu. */ @media (prefers-reduced-motion: no-preference){ html.js .rv:not(.rv-armed), html.js .page-body .wrap>*:not(.rv-armed):not(.svc-grid), html.js .page-body .svc-main>*:not(.rv-armed), html.js .page-body .svc-side>*:not(.rv-armed){opacity:0} html.js.rv-safe .rv:not(.rv-armed), html.js.rv-safe .page-body .wrap>*:not(.rv-armed):not(.svc-grid), html.js.rv-safe .page-body .svc-main>*:not(.rv-armed), html.js.rv-safe .page-body .svc-side>*:not(.rv-armed){opacity:1} } /* płynne przejście jasny↔ciemny — klasa nadawana na czas przełączenia motywu */ html.theme-anim body, html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{ transition:background-color 1.5s ease,color 1.5s ease,border-color 1.5s ease, box-shadow 1.5s ease,fill 1.5s ease,stroke 1.5s ease,opacity 1.5s ease !important; } body{ margin:0; background:var(--bg); color:var(--text); font:400 1rem/1.65 'Inter','Segoe UI',Calibri,Arial,sans-serif; -webkit-font-smoothing:antialiased; } .wrap{max-width:1120px;margin:0 auto;padding:0 24px} h1,h2,h3,h4{color:var(--heading);line-height:1.22;text-wrap:balance;margin:0 0 .5em} h1{font-size:clamp(1.7rem,3.4vw,2.35rem);font-weight:800;letter-spacing:-.015em} h2{font-size:1.5rem;font-weight:800} h3{font-size:1.12rem;color:var(--heading-2)} p{margin:.45em 0} a{color:var(--heading);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;height:auto} ul{padding-left:1.2em} .skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:8px 14px;z-index:100} .skip:focus{left:8px;top:8px} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* ---------- header ---------- */ .site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow .25s ease} .site-header.scrolled{box-shadow:0 4px 16px rgba(13,68,148,.13)} .bar{display:flex;align-items:center;gap:16px;padding:10px 0} .logo{display:flex;align-items:center;gap:12px;text-decoration:none} .logo:hover{text-decoration:none} .logo img{width:auto;display:block} /* crossfade logo między motywami (zamiast przeskoku display) */ .logo .l-light{opacity:var(--logo-light-o);transition:opacity 1.5s ease} .logo .l-dark{opacity:var(--logo-dark-o);transition:opacity 1.5s ease;position:absolute;left:0;top:0} .logo-text-w{position:relative;display:block} /* żywy sygnet (jak flaga RAFIB): ciągłe kołysanie, hover przyspiesza */ .logo-mark{display:block;position:relative;animation:markSway 5.2s ease-in-out infinite;transform-origin:50% 90%} .logo-mark img{height:42px} .logo-text{height:15.5px} .logo:hover .logo-mark{animation-duration:2.1s} @keyframes markSway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.9deg)}} .site-header nav{margin-left:auto} .site-header nav ul{display:flex;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0} .site-header nav a{display:block;padding:7px 9px;font-size:.85rem;font-weight:600;color:var(--text);border-radius:6px;position:relative;white-space:nowrap} .site-header nav a:hover{text-decoration:none} .site-header nav a::after{content:"";position:absolute;left:9px;right:100%;bottom:3px;height:2px;background:var(--gold);transition:right .25s ease} .site-header nav a:hover::after,.site-header nav a:focus-visible::after{right:9px} .site-header nav a.on{color:var(--heading);font-weight:700} .hdr-tools{display:flex;align-items:center;gap:10px;font-size:.82rem} .hdr-mail{color:var(--text-soft);font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:5px} .hdr-mail:hover{color:var(--heading);text-decoration:none} .lang{white-space:nowrap} .lang b{color:var(--heading)} .lang-sep{color:var(--text-soft);margin:0 3px} .lang-a{color:var(--text-soft);font-weight:600} .lang-a:hover,.lang-a:focus-visible{color:var(--heading);text-decoration:none} .theme-btn,.nav-toggle{border:1px solid var(--line);background:var(--bg-card);color:var(--text);border-radius:6px;padding:4px 9px;cursor:pointer;font-size:.82rem} .theme-btn:hover,.nav-toggle:hover{border-color:var(--heading)} .nav-toggle{display:none} /* ---------- hero (home) ---------- */ .hero{position:relative;overflow:hidden;background:var(--bg-alt)} .hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center;padding-top:60px;padding-bottom:60px} .eyebrow{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--heading-2);margin-bottom:14px} .eyebrow .sq{display:inline-flex;gap:3px} .eyebrow .sq i{width:9px;height:9px;border-radius:2px;display:inline-block} .eyebrow .sq i:nth-child(1){background:#B9C4D6} .eyebrow .sq i:nth-child(2){background:var(--orange)} .eyebrow .sq i:nth-child(3){background:var(--navy)} .hero h1{font-size:clamp(1.9rem,4vw,2.7rem)} .hero .lead{font-size:1.05rem;max-width:34em} .hero .lead b{color:var(--heading)} /* orkiestrowane wejście hero (CSS-only — działa też bez JS) */ @keyframes heroUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .hero .eyebrow{animation:heroUp 1.1s ease .1s both} .hero h1 .hl{display:inline-block;animation:heroUp 1.2s ease both} .hero h1 .hl:nth-of-type(1){animation-delay:.35s} .hero h1 .hl:nth-of-type(2){animation-delay:.7s} .hero h1 .hl:nth-of-type(3){animation-delay:1.05s} .hero .lead{animation:heroUp 1.2s ease 1.5s both} .hero .btn{animation:heroUp 1.2s ease 1.9s both} .fan{position:relative;height:320px} .fan svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} @keyframes sway1{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.8deg)}} @keyframes sway2{0%,100%{transform:rotate(2.2deg)}50%{transform:rotate(-2.6deg)}} @keyframes sway3{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(2deg)}} @keyframes fanFade{from{opacity:0}to{opacity:1}} .fan .f1,.fan .f2,.fan .f3{transform-origin:85% 92%} .fan .f1{animation:sway1 8s ease-in-out infinite} .fan .f2{animation:sway2 10s ease-in-out infinite} .fan .f3{animation:sway3 12s ease-in-out infinite} /* wejście warstw (fade z opóźnieniem) + „otwieranie" wachlarza na hover */ .fan .spread{transform-origin:85% 92%;transition:transform .5s ease,filter .3s ease} .fan .s1{animation:fanFade 1.8s ease .2s both} .fan .s2{animation:fanFade 1.8s ease .7s both} .fan .s3{animation:fanFade 1.8s ease 1.2s both} .fan:hover .s1{transform:rotate(-4deg)} .fan:hover .s3{transform:rotate(4deg)} /* interaktywny wachlarz: skrzydła = filary (klikalne, z etykietami) */ .fan .blade{cursor:pointer;outline:none} .fan .blade:focus-visible path{stroke:var(--gold);stroke-width:3} .fan.hot-dor .b-dor .spread{transform:rotate(-6deg);filter:brightness(1.12)} .fan.hot-ksi .b-ksi .spread{filter:brightness(1.12)} .fan.hot-aud .b-aud .spread{transform:rotate(5deg);filter:brightness(1.15)} .fan.hot-dor .b-ksi,.fan.hot-dor .b-aud, .fan.hot-ksi .b-dor,.fan.hot-ksi .b-aud, .fan.hot-aud .b-dor,.fan.hot-aud .b-ksi{opacity:.55;transition:opacity .3s ease} .fan-tip{ position:absolute;background:var(--navy);color:#fff;border:1px solid var(--gold); font-size:.78rem;font-weight:600;padding:4px 11px;border-radius:999px;white-space:nowrap; opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease; pointer-events:none;z-index:2; } .tip-dor{left:4%;top:8%} .tip-ksi{left:20%;top:30%} .tip-aud{left:46%;top:56%} .fan.hot-dor .tip-dor,.fan.hot-ksi .tip-ksi,.fan.hot-aud .tip-aud{opacity:1;transform:none} /* ---------- przyciski ---------- */ .btn{display:inline-block;margin-top:20px;padding:12px 26px;border-radius:6px;background:var(--navy);color:#fff;font-weight:700;font-size:.95rem;transition:transform .18s ease,background .18s ease} .btn:hover{background:var(--navy-dark);transform:translateY(-1px);text-decoration:none;color:#fff} .btn-gold{display:inline-block;padding:13px 28px;border-radius:6px;background:var(--gold);color:#0D4494;font-weight:800;font-size:.98rem;white-space:nowrap;transition:transform .18s ease,filter .18s ease} .btn-gold:hover{transform:translateY(-1px);filter:brightness(1.05);text-decoration:none;color:#0D4494} /* ---------- sekcje ---------- */ section{padding:56px 0} .sec-alt{background:var(--bg-alt)} .label{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--heading-2);display:inline-block;margin-bottom:8px;position:relative;padding-bottom:6px} .label::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width 1.5s ease .4s} .rv.in .label::after{width:100%} .no-js .label::after,.rv:not(.rv-armed) .label::after{width:100%} .sec-head p{max-width:46em;color:var(--text-soft)} .rv{opacity:0;transform:translateY(18px);transition:opacity 1.2s ease,transform 1.2s ease} .rv.in{opacity:1;transform:none} /* ---------- karty ---------- */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px} .cards2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px} .card{background:var(--bg-card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:24px 22px;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease} .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--orange))} .card:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(13,68,148,.14)} .card.alt{background:var(--bg-tile-alt)} .card .num{ font:800 1.02rem/1 Consolas,'JetBrains Mono',monospace;color:var(--gold); letter-spacing:.14em;display:block;margin-bottom:14px;padding-bottom:10px; border-bottom:1px solid var(--line); } .card h3{font-size:1.2rem;color:var(--heading);margin-bottom:.35em} .card p{font-size:.93rem;color:var(--text-soft)} .card ul{margin:12px 0 0;padding:0;list-style:none} .card li{font-size:.9rem;padding:5px 0 5px 20px;position:relative} .card li::before{content:"";position:absolute;left:0;top:1.1em;width:10px;height:2px;background:var(--gold)} .more{display:inline-block;margin-top:14px;font-size:.88rem;font-weight:700} .more::after{content:" →"} /* rysujące się piktogramy kart */ .picon{width:42px;height:42px;display:block;margin-bottom:12px;color:var(--gold);transition:color .25s ease,transform .25s ease} .picon .draw{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .rv.rv-armed .picon .draw{stroke-dasharray:100;stroke-dashoffset:100} .rv.rv-armed.in .picon .draw{animation:iconDraw 1.8s ease forwards} .rv.rv-armed.in .picon .draw:nth-child(2){animation-delay:.5s} .rv.rv-armed.in .picon .draw:nth-child(3){animation-delay:1s} @keyframes iconDraw{to{stroke-dashoffset:0}} .card:hover .picon{color:var(--heading);transform:translateY(-2px)} .badge-new{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0D4494;background:var(--gold);border-radius:4px;padding:2px 7px;margin-left:8px;vertical-align:2px} /* ---------- wspólnicy ---------- */ .partners{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center} .photo-frame{position:relative;max-width:460px} .photo-frame::before{content:"";position:absolute;inset:16px -16px -16px 16px;border-radius:12px;border:2px solid var(--photo-frame);z-index:0;transition:transform 3.5s ease .3s,opacity 3.5s ease .3s} /* ramka „osadza się" dopiero gdy samo zdjęcie jest widoczne (własny .rv, przy aktywnym JS) */ .photo-frame.rv-armed::before{opacity:0;transform:translate(-14px,-14px)} .photo-frame.rv-armed.in::before{opacity:1;transform:none} .photo-frame img{position:relative;z-index:1;display:block;border-radius:10px;box-shadow:0 12px 30px rgba(13,68,148,.18)} .who{display:grid;gap:16px;margin-top:18px} .who .p{ display:block;border-left:3px solid var(--gold);padding:6px 10px 6px 14px;border-radius:0 8px 8px 0; color:inherit;text-decoration:none;transition:background .3s ease,border-color .3s ease,transform .3s ease; } .who a.p:hover,.who a.p:focus-visible{ background:rgba(13,68,148,.06);border-left-color:var(--navy);transform:translateX(3px);text-decoration:none; } .who .p b{color:var(--heading);font-size:1rem} .who .p .p-go{opacity:0;transition:opacity .3s ease;color:var(--gold);font-weight:800} .who a.p:hover .p-go,.who a.p:focus-visible .p-go{opacity:1} .who .p span{display:block;font-size:.88rem;color:var(--text-soft)} .chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px} .chip{font-size:.76rem;font-weight:600;color:var(--heading-2);border:1px solid var(--line);background:var(--bg-card);border-radius:999px;padding:3px 10px} .chip.star{border-color:var(--gold)} /* animowane pojawianie odznak (tylko przy aktywnym JS) */ .rv.rv-armed .chips .chip{opacity:0;transform:translateY(6px)} .rv.rv-armed.in .chips .chip{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease} .rv.rv-armed.in .chips .chip:nth-child(2){transition-delay:.18s} .rv.rv-armed.in .chips .chip:nth-child(3){transition-delay:.36s} .rv.rv-armed.in .chips .chip:nth-child(4){transition-delay:.54s} .rv.rv-armed.in .chips .chip:nth-child(5){transition-delay:.72s} .rv.rv-armed.in .chips .chip:nth-child(6){transition-delay:.9s} /* profile na /wspolnicy/ */ .profile{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:34px 0;padding:26px 24px;background:var(--bg-card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)} .profile.alt{background:var(--bg-tile-alt)} .profile h2{margin-bottom:.1em} .profile .role{color:var(--gold);font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase} .profile p{color:var(--text)} .books{font-size:.88rem;color:var(--text-soft)} /* ---------- pas wyróżników ---------- */ .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px} .t{ background:var(--bg-card);border:1px solid var(--line);border-radius:8px;padding:20px 18px; box-shadow:var(--shadow);position:relative;overflow:hidden; transition:transform .18s ease,box-shadow .18s ease; } .t::before{content:"";position:absolute;top:0;left:0;height:3px;width:42px;background:linear-gradient(90deg,var(--gold),var(--orange));transition:width .5s ease} .t:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(13,68,148,.14)} .t:hover::before{width:100%} .t.alt{background:var(--bg-tile-alt)} /* wejście kafelków z opóźnieniem + rysująca się złota kreska (przy aktywnym JS) */ .rv.rv-armed .t{opacity:0;transform:translateY(10px)} .rv.rv-armed .t::before{width:0} .rv.rv-armed.in .t{opacity:1;transform:none;transition:opacity 1.1s ease,transform 1.1s ease,box-shadow .18s ease} .rv.rv-armed.in .t::before{width:42px} .rv.rv-armed.in .t:hover::before{width:100%} .rv.rv-armed.in .t:nth-child(2){transition-delay:.25s} .rv.rv-armed.in .t:nth-child(3){transition-delay:.5s} .rv.rv-armed.in .t:nth-child(4){transition-delay:.75s} .t b{display:block;font-size:1.22rem;font-weight:800;color:var(--heading);letter-spacing:-.01em} .t .count{font-variant-numeric:tabular-nums} .t small{display:block;font-size:.84rem;color:var(--text-soft);margin-top:4px} /* ---------- pas CTA ---------- */ .band{background:var(--navy);color:#fff;padding:52px 0;position:relative;overflow:hidden} .band-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;position:relative;z-index:1} /* ambientowy motyw wachlarza dryfujący w tle pasa CTA */ .band-fan{ position:absolute;right:-90px;bottom:-150px;width:430px;height:430px;pointer-events:none; background: radial-gradient(circle at 100% 100%, rgba(255,255,255,.10) 0 38%, transparent 38.5%), radial-gradient(circle at 100% 100%, rgba(246,164,0,.14) 0 54%, transparent 54.5%), radial-gradient(circle at 100% 100%, rgba(255,255,255,.05) 0 70%, transparent 70.5%); transform-origin:100% 100%; animation:bandDrift 26s ease-in-out infinite; } @keyframes bandDrift{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.06)}} .band img{height:38px;width:auto} .band h2{color:#fff;margin:.25em 0 .25em} .band p{color:#C9D6F0;max-width:38em;margin:0} /* ---------- stopka ---------- */ .site-footer{background:var(--f-bg);color:var(--f-text);padding:42px 0 26px;font-size:.88rem} .foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px} .site-footer img{height:36px;width:auto} .foot-logo{position:relative;display:inline-block;margin-bottom:10px} .foot-logo .fl-light{opacity:var(--logo-light-o);transition:opacity 1.5s ease} .foot-logo .fl-dark{opacity:var(--logo-dark-o);transition:opacity 1.5s ease;position:absolute;left:0;top:0} .site-footer h4{color:var(--f-head);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{padding:2px 0} .site-footer a{color:var(--f-text)} .site-footer a:hover{color:var(--f-hover)} .site-footer b{color:var(--f-head)} .foot-reg{font-size:.78rem;color:var(--f-soft)} .foot-note{border-top:1px solid var(--f-line);margin-top:28px;padding-top:14px;font-size:.78rem;color:var(--f-soft)} /* ---------- podstrony ---------- */ .page-head{background:var(--bg-alt);padding:30px 0 26px;border-bottom:1px solid var(--line)} .page-head h1{margin:14px 0 4px} .page-head .lead{color:var(--text-soft);max-width:48em;margin:0} .crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.82rem} .crumb{display:inline-block;background:var(--bg-card);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:600;color:var(--heading-2)} a.crumb:hover{border-color:var(--heading);text-decoration:none} .crumb-here{font-weight:800;color:var(--heading);border-color:var(--gold)} .crumb-sep{color:var(--text-soft)} .page-body{padding:38px 0 56px} .page-body h2{margin-top:1.4em} .page-body h2:first-child{margin-top:0} .page-body ul li{margin:.3em 0} .page-body .cols{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px} .callout{border-left:4px solid var(--gold);background:var(--bg-alt);border-radius:0 8px 8px 0;padding:14px 18px;margin:20px 0} .callout b{color:var(--heading)} .note-verify{font-size:.8rem;color:var(--text-soft);border:1px dashed var(--line);border-radius:6px;padding:8px 12px;margin-top:26px} /* Podstrony usługowe: treść + boczna karta eksperta (front matter: expert) */ .svc-grid{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:48px;align-items:start} .svc-side{position:sticky;top:96px} .svc-expert{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:28px 24px 24px;text-align:center;position:relative;overflow:hidden} .svc-expert::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--orange))} .svc-face{width:116px;height:116px;border-radius:50%;object-fit:cover;border:3px solid var(--photo-frame);display:block;margin:2px auto 16px;transition:transform .6s ease} .svc-expert:hover .svc-face{transform:scale(1.04)} .svc-name{display:block;font-size:1.06rem;color:var(--heading);font-weight:800;margin-top:2px} .svc-mini{display:block;font-size:.85rem;color:var(--text-soft);margin:6px 0 12px;line-height:1.5} .svc-expert.rv-armed .svc-face{opacity:0;transform:scale(.8)} .svc-expert.rv-armed.in .svc-face{opacity:1;transform:none;transition:opacity 1.4s ease .3s,transform 1.4s ease .3s} .svc-main h2{margin-top:1.9em} .svc-main h2:first-child{margin-top:.2em} .svc-main h2::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--orange));margin-bottom:12px} .svc-main>ul>li,.svc-main ol>li{margin-bottom:.45em} @media (max-width:900px){.svc-grid{grid-template-columns:1fr;gap:26px}.svc-side{position:static}} .doc-links{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0} .doc-links a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg-card);border-radius:8px;padding:10px 14px;font-weight:600;font-size:.9rem} .doc-links a:hover{border-color:var(--heading);text-decoration:none} .shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px} .shots img{border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)} .shot{margin:14px 0 8px;overflow-x:auto} .shot img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);background:#fff} /* ---------- wachlarz kompetencji (doradztwo) ---------- */ .dfan-wrap{display:none} .dfan-wrap.on{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center;margin-bottom:34px} .dfan-fallback.off{display:none} .dfan-fig{position:relative} .dfan{width:100%;height:auto;display:block;animation:dfanSway 14s ease-in-out infinite;transform-origin:95% 97%} @keyframes dfanSway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.2deg)}} .dblade{cursor:pointer;outline:none} .dblade path{transition:opacity .5s ease,filter .5s ease,transform .5s ease;transform-origin:400px 390px} .dblade text{font:700 17px Consolas,'JetBrains Mono',monospace;pointer-events:none;transition:opacity .5s ease} .dblade text.dlabel{font:600 12.5px Inter,system-ui,sans-serif;letter-spacing:.2px;opacity:.92} .dblade:focus-visible path{stroke:var(--gold);stroke-width:3} .dfan.hot .dblade path{opacity:.28} .dfan.hot .dblade text{opacity:.35} .dfan.hot .dblade.on path{opacity:1;filter:brightness(1.1);transform:scale(1.035)} .dfan.hot .dblade.on text{opacity:1} /* wejście skrzydeł */ .dfan-wrap.rv-armed .dblade{opacity:0} .dfan-wrap.rv-armed.in .dblade{opacity:1;transition:opacity 1.1s ease} .dfan-wrap.rv-armed.in .dblade:nth-child(2){transition-delay:.15s} .dfan-wrap.rv-armed.in .dblade:nth-child(3){transition-delay:.3s} .dfan-wrap.rv-armed.in .dblade:nth-child(4){transition-delay:.45s} .dfan-wrap.rv-armed.in .dblade:nth-child(5){transition-delay:.6s} .dfan-wrap.rv-armed.in .dblade:nth-child(6){transition-delay:.75s} .dfan-wrap.rv-armed.in .dblade:nth-child(7){transition-delay:.9s} .dfan-wrap.rv-armed.in .dblade:nth-child(8){transition-delay:1.05s} .dfan-panel{ background:var(--bg-card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow); padding:26px 24px;min-height:15em;position:relative;overflow:hidden; } .dfan-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--orange))} .dfan-panel h3{font-size:1.3rem;margin:.2em 0 .4em} .dfan-panel p{color:var(--text-soft)} /* ---------- oś „Jak pracujemy" (podstrony) ---------- */ .steps{list-style:none;margin:20px 0 10px;padding:0;position:relative} .steps::before{content:"";position:absolute;left:17px;top:10px;bottom:10px;width:2px;background:var(--line)} .steps::after{content:"";position:absolute;left:17px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--gold),var(--orange));transform:scaleY(1);transform-origin:top;transition:transform 2.2s ease .4s} .steps li{position:relative;padding:0 0 24px 54px;max-width:44em} .steps li:last-child{padding-bottom:0} .steps .n{ position:absolute;left:0;top:-3px;width:36px;height:36px;border-radius:50%; background:var(--navy);color:#fff;font:700 .92rem/36px Consolas,'JetBrains Mono',monospace; text-align:center;box-shadow:0 2px 8px rgba(13,68,148,.25); } .steps b{color:var(--heading)} .rv.rv-armed .steps::after{transform:scaleY(0)} .rv.rv-armed.in .steps::after{transform:scaleY(1)} .rv.rv-armed .steps li{opacity:0;transform:translateX(-10px)} .rv.rv-armed.in .steps li{opacity:1;transform:none;transition:opacity 1s ease,transform 1s ease} .rv.rv-armed.in .steps li:nth-child(2){transition-delay:.3s} .rv.rv-armed.in .steps li:nth-child(3){transition-delay:.6s} .rv.rv-armed.in .steps li:nth-child(4){transition-delay:.9s} .rv.rv-armed.in .steps li:nth-child(5){transition-delay:1.2s} .rv.rv-armed.in .steps li:nth-child(6){transition-delay:1.5s} .rv.rv-armed.in .steps li:nth-child(7){transition-delay:1.8s} /* ---------- formularze ---------- */ form{margin-top:10px} .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px} .f-full{grid-column:1 / -1} label{display:block;font-size:.86rem;font-weight:600;color:var(--heading-2);margin-bottom:4px} input[type=text],input[type=email],input[type=tel],textarea,select{ width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px; background:var(--bg-card);color:var(--text);font:inherit;font-size:.95rem; } textarea{min-height:120px;resize:vertical} .consent{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;color:var(--text-soft);font-weight:400} .consent input{margin-top:3px} .hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden} button[type=submit]{border:0;cursor:pointer} .nip-msg{font-size:.78rem;margin-top:6px;color:var(--text-soft)} .nip-msg.ok{color:var(--ok-ink)} .nip-msg.err{color:var(--err-ink)} .form-msg{margin-top:14px;padding:12px 16px;border-radius:6px;display:none} .form-msg.ok{display:block;background:rgba(46,125,50,.12);border-left:4px solid #2E7D32;color:var(--text)} .form-msg.err{display:block;background:rgba(198,40,40,.10);border-left:4px solid #C62828;color:var(--text)} /* koszyk zamówienia arkusza */ .order-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start} .koszyk{background:var(--bg-tile-alt);border:1px solid var(--line);border-radius:8px;padding:22px;position:sticky;top:80px} .koszyk .k-title{font-weight:800;color:var(--heading);font-size:1.05rem;display:flex;align-items:center;gap:8px;margin-bottom:10px} .koszyk .k-item{font-size:.92rem;padding:10px 0;border-top:1px solid var(--line)} .koszyk .k-price{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;text-align:right} .koszyk .k-price small{display:block;font-size:.72rem;letter-spacing:.08em;color:var(--text-soft)} .koszyk .k-price b{font-size:1.25rem;color:var(--heading);font-variant-numeric:tabular-nums} .koszyk .k-price .gold{color:var(--gold)} .koszyk .btn{width:100%;text-align:center;margin-top:16px} @media (prefers-reduced-motion: reduce){ .fan .f1,.fan .f2,.fan .f3{animation:none} .fan .spread{animation:none;transition:none;opacity:1;transform:none!important;filter:none!important} .hero .eyebrow,.hero h1 .hl,.hero .lead,.hero .btn{animation:none} .fan-tip{transition:none;transform:none} .band-fan{animation:none} .photo-frame::before{opacity:1!important;transform:none!important;transition:none} .rv{opacity:1!important;transform:none!important;transition:none} .label::after{width:100%!important;transition:none} .picon .draw{stroke-dashoffset:0!important;animation:none!important} .picon{transition:none} .logo-mark{animation:none} .dfan{animation:none} .dblade{opacity:1!important;transition:none} .svc-face{opacity:1!important;transform:none!important;transition:none} .dblade path{transition:none;transform:none!important} .dblade text{transition:none} .steps li{opacity:1!important;transform:none!important;transition:none} .steps::after{transform:scaleY(1)!important;transition:none} .chips .chip{opacity:1!important;transform:none!important;transition:none} .t{opacity:1!important;transform:none!important} .t::before{width:42px!important;transition:none} html{scroll-behavior:auto} .btn,.btn-gold,.card{transition:none} } @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;padding-top:40px;padding-bottom:40px} .fan{display:none} .pillars,.row2,.cards2,.cols{grid-template-columns:1fr} .partners{grid-template-columns:1fr} .trust{grid-template-columns:1fr 1fr} .band-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .order-grid{grid-template-columns:1fr} .koszyk{position:static} .f-grid{grid-template-columns:1fr} .shots{grid-template-columns:1fr} .nav-toggle{display:inline-block;margin-left:auto} .site-header nav{display:none;margin:0;width:100%} .site-header nav.open{display:block} .site-header nav ul{flex-direction:column;gap:0;padding:6px 0} .site-header nav a{font-size:1rem;padding:10px 6px} .bar{flex-wrap:wrap} .hdr-tools{margin-left:0} }