.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap'); /* SF-KIT:START */ 400;500;600;700&display=swap'); /* SpeechFlow – globalne style. Wgraj raz: Elementor > Ustawienia witryny > Własny CSS. */ /* ===== Warstwa Elementora: zeruje domyślne odstępy i style kitu ===== */:is(#sf,#sf-header,#sf-footer){background:var(--cream);color:var(--ink);font-family:var(--font);font-size:var(--fs-md);line-height:1.6;font-weight:300} :is(#sf,#sf-header,#sf-footer) .e-con{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--margin-top:0px;--margin-bottom:0px;--gap:0px;--row-gap:0px;--column-gap:0px;--min-height:0px;--content-width:100%} :is(#sf,#sf-header,#sf-footer) .elementor-widget{margin-block:0!important} :is(#sf,#sf-header,#sf-footer) .elementor-widget-container{margin:0;padding:0} :is(#sf,#sf-header,#sf-footer) .elementor-heading-title{margin:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;line-height:inherit;text-wrap:balance} :is(#sf,#sf-header,#sf-footer) .elementor-widget-text-editor{color:inherit;font:inherit;line-height:inherit} :is(#sf,#sf-header,#sf-footer) .elementor-widget-text-editor p{margin:0} :is(#sf,#sf-header,#sf-footer) .elementor-widget-text-editor p + p{margin-top:1.1em} :is(#sf,#sf-header,#sf-footer) .elementor-widget-text-editor ul{margin:0} /* ========================================================= SpeechFlow – strona główna Tokeny wyprowadzone z UI generatora SpeechStudio ========================================================= */:root{ color-scheme: light; /* kolory marki */ --cream:#FDF7F1; --paper:#FFFFFF; --ink:#0A0A0A; --ink-2:#3A3530; --muted:#737373; --line:#E5E5E5; --line-soft:#F0EAE4; --orange:#EA580C; /* CTA / akcent UI */ --orange-hover:#C2410C; --mascot:#FE9E50; /* ciało maskotki */ --peach:#FEC89B; /* kształty */ --peach-50:#FFEDD5; /* zaznaczone komórki */ --peach-25:#FFF6EC; --pink:#F8D9FC; --brown:#94521C; --beige:#EAD9D1; /* typografia */ --font:"Lexend", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif; --fs-xs:clamp(.75rem,.72rem + .12vw,.8125rem); --fs-sm:clamp(.875rem,.84rem + .15vw,.9375rem); --fs-md:clamp(1rem,.96rem + .2vw,1.0625rem); --fs-lg:clamp(1.125rem,1.05rem + .35vw,1.3125rem); --fs-xl:clamp(1.5rem,1.25rem + 1.1vw,2.125rem); --fs-2xl:clamp(2rem,1.45rem + 2.4vw,3.375rem); --fs-3xl:clamp(2.3rem,1.5rem + 3vw,3.9rem); /* promienie jak w aplikacji */ --r-sm:.5rem; /* przyciski, inputy */ --r-md:.875rem; --r-lg:1.25rem; /* karty szablonów */ --r-xl:1.75rem; /* panele */ --shadow-card:0 .0625rem .125rem rgba(60,30,10,.04),0 .75rem 2rem -.75rem rgba(60,30,10,.14); --shadow-float:0 1.5rem 3.5rem -1rem rgba(80,40,10,.22); --wrap:100%; --gutter:5vw; --section:clamp(4.5rem,3rem + 6vw,9rem); --ease:cubic-bezier(.22,.8,.24,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} body{ margin:0;background:var(--cream);color:var(--ink); font-family:var(--font);font-size:var(--fs-md);line-height:1.6;font-weight:300; -webkit-font-smoothing:antialiased;overflow-x:clip; } :is(#sf,#sf-header,#sf-footer) img{max-width:100%;display:block} :is(#sf,#sf-header,#sf-footer) h1,:is(#sf,#sf-header,#sf-footer) h2,:is(#sf,#sf-header,#sf-footer) h3,:is(#sf,#sf-header,#sf-footer) h4{margin:0;font-weight:600;line-height:1.1;letter-spacing:-.025em;text-wrap:balance} :is(#sf,#sf-header,#sf-footer) p{margin:0;text-wrap:pretty} :is(#sf,#sf-header,#sf-footer) strong,:is(#sf,#sf-header,#sf-footer) b{font-weight:500;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) a{color:inherit} :is(#sf,#sf-header,#sf-footer) :focus-visible{outline:.1875rem solid var(--orange);outline-offset:.1875rem;border-radius:.25rem} :is(#sf,#sf-header,#sf-footer) .wrap{width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} :is(#sf,#sf-header,#sf-footer) .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- przyciski ---------- */:is(#sf,#sf-header,#sf-footer) .btn{ --bg:var(--orange);--fg:#fff; display:inline-flex;align-items:center;justify-content:center;gap:.6em; font:500 var(--fs-md)/1 var(--font);color:var(--fg);background:var(--bg); padding:1em 1.5em;border-radius:var(--r-sm);border:.0625rem solid transparent; text-decoration:none;cursor:pointer;transition:background .2s,transform .2s var(--ease),box-shadow .2s; box-shadow:0 .5rem 1.25rem -.5rem rgba(234,88,12,.55); } :is(#sf,#sf-header,#sf-footer) .btn:hover{background:var(--orange-hover);transform:translateY(-.0625rem)} :is(#sf,#sf-header,#sf-footer) .btn:active{transform:translateY(.0625rem)} :is(#sf,#sf-header,#sf-footer) .btn svg{width:1.1em;height:1.1em;transition:transform .25s var(--ease)} :is(#sf,#sf-header,#sf-footer) .btn:hover svg{transform:translateX(.2em)} :is(#sf,#sf-header,#sf-footer) .btn--ghost{--bg:var(--paper);--fg:var(--ink);border-color:var(--line);box-shadow:none} :is(#sf,#sf-header,#sf-footer) .btn--ghost:hover{background:var(--paper);border-color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .btn--sm{font-size:var(--fs-sm);padding:.75em 1.1em} :is(#sf,#sf-header,#sf-footer) .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-size:var(--fs-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brown); } :is(#sf,#sf-header,#sf-footer) .eyebrow::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--mascot)} :is(#sf,#sf-header,#sf-footer) .lead{font-size:var(--fs-lg);color:var(--ink-2);line-height:1.55} :is(#sf,#sf-header,#sf-footer) .muted{color:var(--muted)} /* ---------- kształty marki ---------- */:is(#sf,#sf-header,#sf-footer) .shape{position:absolute;pointer-events:none;z-index:0} :is(#sf,#sf-header,#sf-footer) .shape svg{width:100%;height:auto;display:block} :is(#sf,#sf-header,#sf-footer) .shape--peach{color:var(--peach)} :is(#sf,#sf-header,#sf-footer) .shape--pink{color:var(--pink)} :is(#sf,#sf-header,#sf-footer) .shape--beige{color:var(--beige)} @keyframes spin{to{transform:rotate(360deg)}} @keyframes sway{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(5deg) translateY(-.6rem)}} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5rem)}} :is(#sf,#sf-header,#sf-footer) .spin-slow{animation:spin 60s linear infinite} :is(#sf,#sf-header,#sf-footer) .sway{animation:sway 9s ease-in-out infinite;transform-origin:50% 90%} /* ========================================================= NAV ========================================================= */:is(#sf,#sf-header,#sf-footer) .nav{ position:sticky;top:env(safe-area-inset-top,0px);z-index:50; background:color-mix(in srgb,var(--cream) 82%,transparent); backdrop-filter:blur(.875rem) saturate(1.2);-webkit-backdrop-filter:blur(.875rem) saturate(1.2); border-bottom:.0625rem solid transparent;transition:border-color .3s; } :is(#sf,#sf-header,#sf-footer) .nav.is-scrolled{border-bottom-color:var(--line-soft)} :is(#sf,#sf-header,#sf-footer) .nav__in{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem} :is(#sf,#sf-header,#sf-footer) .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto} :is(#sf,#sf-header,#sf-footer) .brand img{width:2.5rem;height:2.5rem;border-radius:.7rem;box-shadow:0 .25rem .75rem -.25rem rgba(80,40,10,.35)} :is(#sf,#sf-header,#sf-footer) .brand span{font-weight:600;font-size:1.25rem;letter-spacing:-.02em} :is(#sf,#sf-header,#sf-footer) .nav__links{display:flex;gap:.25rem;list-style:none;margin:0;padding:0} :is(#sf,#sf-header,#sf-footer) .nav__links a{display:block;padding:.55rem .85rem;border-radius:var(--r-sm);text-decoration:none;font-size:var(--fs-sm);font-weight:400;color:var(--ink-2);transition:background .2s} :is(#sf,#sf-header,#sf-footer) .nav__links a:hover{background:var(--peach-50);color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .nav__links a[aria-current]{color:var(--orange);font-weight:500} :is(#sf,#sf-header,#sf-footer) .nav__burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;border-radius:var(--r-sm)} :is(#sf,#sf-header,#sf-footer) .nav__burger span{display:block;width:1.4rem;height:.125rem;background:var(--ink);border-radius:1rem;margin:.3rem 0;transition:transform .3s var(--ease),opacity .2s} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .nav__links{ position:absolute;inset:100% 0 auto 0;flex-direction:column;padding:.75rem var(--gutter) 1.25rem; background:var(--cream);border-bottom:.0625rem solid var(--line-soft); display:none; } :is(#sf,#sf-header,#sf-footer) .nav.is-open .nav__links{display:flex} :is(#sf,#sf-header,#sf-footer) .nav__links a{font-size:var(--fs-lg);padding:.8rem .5rem} :is(#sf,#sf-header,#sf-footer) .nav__burger{display:block} :is(#sf,#sf-header,#sf-footer) .nav .btn{display:none} :is(#sf,#sf-header,#sf-footer) .nav.is-open .nav__burger span:nth-child(1){transform:translateY(.425rem) rotate(45deg)} :is(#sf,#sf-header,#sf-footer) .nav.is-open .nav__burger span:nth-child(2){opacity:0} :is(#sf,#sf-header,#sf-footer) .nav.is-open .nav__burger span:nth-child(3){transform:translateY(-.425rem) rotate(-45deg)} } /* ========================================================= HERO ========================================================= */:is(#sf,#sf-header,#sf-footer) .hero{position:relative;padding-block:clamp(2.5rem,1rem + 5vw,6rem) clamp(3rem,2rem + 4vw,6rem)} :is(#sf,#sf-header,#sf-footer) .hero__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center} :is(#sf,#sf-header,#sf-footer) .hero__copy{display:grid;gap:1.6rem;position:relative;z-index:2} :is(#sf,#sf-header,#sf-footer) .hero h1{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.04em;line-height:1.02} :is(#sf,#sf-header,#sf-footer) .hero h1 .hl{position:relative;white-space:nowrap;color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .hero h1 .hl svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.32em;color:var(--peach);z-index:-1} :is(#sf,#sf-header,#sf-footer) .hero h1 .hl path{stroke-dasharray:420;stroke-dashoffset:0;animation:draw 1.4s .5s var(--ease) both} @keyframes draw{from{stroke-dashoffset:420}} :is(#sf,#sf-header,#sf-footer) .hero__lead{font-size:var(--fs-lg);font-weight:400;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .hero__body{color:var(--ink-2);max-width:36rem} :is(#sf,#sf-header,#sf-footer) .hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:.4rem} :is(#sf,#sf-header,#sf-footer) .hero__trust{display:flex;align-items:center;gap:.75rem;font-size:var(--fs-sm);color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .hero__trust .dots{display:flex} :is(#sf,#sf-header,#sf-footer) .hero__trust .dots i{width:1.75rem;height:1.75rem;border-radius:50%;border:.125rem solid var(--cream);margin-left:-.45rem;display:grid;place-items:center;font-style:normal;font-size:.7rem;font-weight:600;color:var(--brown)} :is(#sf,#sf-header,#sf-footer) .hero__trust .dots i:first-child{margin-left:0} /* scena */:is(#sf,#sf-header,#sf-footer) .stage{position:relative;aspect-ratio:1/.92;width:100%;justify-self:end} :is(#sf,#sf-header,#sf-footer) .stage__panel{position:absolute;inset:6% 0 0 4%;border-radius:2.25rem;background:var(--peach-50);overflow:hidden} :is(#sf,#sf-header,#sf-footer) .stage__panel .shape--asterisk{width:62%;left:-14%;top:-10%} :is(#sf,#sf-header,#sf-footer) .stage__panel .shape--leaf{width:30%;left:-4%;bottom:6%} :is(#sf,#sf-header,#sf-footer) .stage__panel .shape--hand{width:24%;right:34%;top:6%} :is(#sf,#sf-header,#sf-footer) .stage__mascot{position:absolute;right:-3%;bottom:-.1%;width:56%;transform-origin:30% 100%} :is(#sf,#sf-header,#sf-footer) .stage__mascot img{width:100%;animation:bob 5s ease-in-out infinite} :is(#sf,#sf-header,#sf-footer) .phone{ position:absolute;left:10%;top:0;width:42%;aspect-ratio:590/1278; border-radius:2.1rem;background:#111;padding:.45rem;box-shadow:var(--shadow-float); transform:rotate(3deg);z-index:3;transition:transform .6s var(--ease); } :is(#sf,#sf-header,#sf-footer) .phone img{width:100%;height:100%;object-fit:cover;border-radius:1.7rem} :is(#sf,#sf-header,#sf-footer) .phone::after{content:"";position:absolute;top:1.1rem;left:50%;translate:-50% 0;width:28%;height:1.05rem;border-radius:1rem;background:#111} :is(#sf,#sf-header,#sf-footer) .sheet{ position:absolute;right:-2%;top:4%;width:36%;aspect-ratio:595/842;background:#fff;border-radius:.5rem; box-shadow:var(--shadow-float);transform:rotate(9deg);z-index:2;overflow:hidden;transition:transform .6s var(--ease); } :is(#sf,#sf-header,#sf-footer) .sheet img{width:100%;height:100%;object-fit:cover} :is(#sf,#sf-header,#sf-footer) .bubble{ position:absolute;z-index:4;left:-6%;top:58%;max-width:15rem; background:#fff;border-radius:var(--r-lg);padding:.9rem 1.1rem;font-size:var(--fs-sm);font-weight:400;line-height:1.4; box-shadow:var(--shadow-card);animation:bob 6s 1s ease-in-out infinite; } :is(#sf,#sf-header,#sf-footer) .bubble::after{content:"";position:absolute;left:2.2rem;bottom:-.55rem;width:1.1rem;height:1.1rem;background:#fff;transform:rotate(45deg);border-radius:.15rem} :is(#sf,#sf-header,#sf-footer) .bubble b{color:var(--orange);font-weight:600} :is(#sf,#sf-header,#sf-footer) .chip-float{ position:absolute;z-index:4;left:30%;bottom:4%; display:flex;align-items:center;gap:.55rem;background:#fff;border-radius:999px;padding:.55rem .95rem .55rem .55rem; box-shadow:var(--shadow-card);font-size:var(--fs-xs);font-weight:500;animation:bob 7s .4s ease-in-out infinite; } :is(#sf,#sf-header,#sf-footer) .chip-float i{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--orange);display:grid;place-items:center} :is(#sf,#sf-header,#sf-footer) .chip-float i svg{width:.9rem;height:.9rem;color:#fff} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .hero__grid{grid-template-columns:1fr} :is(#sf,#sf-header,#sf-footer) .stage{justify-self:center;max-width:30rem} } @media (max-width:30rem){:is(#sf,#sf-header,#sf-footer) .bubble{max-width:11rem;left:-2%;top:30%;font-size:var(--fs-xs)} } /* ========================================================= SEKCJE – wspólne ========================================================= */:is(#sf,#sf-header,#sf-footer) .section{position:relative;padding-block:var(--section)} :is(#sf,#sf-header,#sf-footer) .section__head{display:grid;gap:1.1rem;max-width:min(100%,56rem);margin-bottom:clamp(2.5rem,2rem + 2vw,4rem)} :is(#sf,#sf-header,#sf-footer) .section__head h2{font-size:var(--fs-2xl)} :is(#sf,#sf-header,#sf-footer) .section__head--center{margin-inline:auto;text-align:center;justify-items:center} /* ---------- Intro SpeechStudio ---------- */:is(#sf,#sf-header,#sf-footer) .intro__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:start} :is(#sf,#sf-header,#sf-footer) .intro__text{display:grid;gap:1.25rem;color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .intro__text p:first-child{font-size:var(--fs-lg);color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .values{display:grid;gap:1rem} :is(#sf,#sf-header,#sf-footer) .value{ position:relative;overflow:hidden;background:var(--paper);border-radius:var(--r-xl);padding:clamp(1.5rem,1.2rem + 1vw,2.25rem); display:grid;gap:.6rem;border:.0625rem solid var(--line-soft); } :is(#sf,#sf-header,#sf-footer) .value__num{font-size:clamp(2.75rem,2rem + 3vw,4.25rem);font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--orange);font-variant-numeric:tabular-nums} :is(#sf,#sf-header,#sf-footer) .value__num small{font-size:.35em;letter-spacing:0;font-weight:500;color:var(--ink);margin-left:.3em} :is(#sf,#sf-header,#sf-footer) .value h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em} :is(#sf,#sf-header,#sf-footer) .value p{font-size:var(--fs-sm);color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .value .shape{width:9rem;right:-2.5rem;top:-2.5rem;opacity:.9} :is(#sf,#sf-header,#sf-footer) .value--pink{background:var(--pink);border-color:transparent} :is(#sf,#sf-header,#sf-footer) .value--pink p{color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .value--pink .value__num{color:var(--ink)} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .intro__grid{grid-template-columns:1fr} } /* ========================================================= LAB – żywe demo ========================================================= */:is(#sf,#sf-header,#sf-footer) .lab{background:var(--paper);border-radius:clamp(1.5rem,1rem + 2vw,3rem);margin-inline:clamp(.5rem,.2rem + 1vw,1.5rem);overflow:hidden} :is(#sf,#sf-header,#sf-footer) .lab .section__head{max-width:48rem} :is(#sf,#sf-header,#sf-footer) .lab__words{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.4rem} :is(#sf,#sf-header,#sf-footer) .word-chip{ display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:var(--r-sm); background:var(--peach-50);color:var(--ink);font-weight:600;letter-spacing:.06em;font-size:var(--fs-md); transition:transform .35s var(--ease),opacity .35s; } :is(#sf,#sf-header,#sf-footer) .word-chip em{font-style:normal;font-size:1.15em;letter-spacing:0} :is(#sf,#sf-header,#sf-footer) .word-chip.is-out{transform:translateY(-.5rem) scale(.9);opacity:0} :is(#sf,#sf-header,#sf-footer) .lab__set{font-size:var(--fs-xs);color:var(--muted);margin-left:.25rem} :is(#sf,#sf-header,#sf-footer) .lab__ui{display:grid;grid-template-columns:17rem 1fr;gap:clamp(1.25rem,.8rem + 2vw,3rem);align-items:start} :is(#sf,#sf-header,#sf-footer) .tabs{display:grid;gap:.4rem;position:sticky;top:6rem} :is(#sf,#sf-header,#sf-footer) .tab{ display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;cursor:pointer; font:400 var(--fs-md)/1.2 var(--font);color:var(--ink-2); background:transparent;border:.0625rem solid transparent;border-radius:var(--r-md);padding:.7rem .8rem;transition:background .2s,border-color .2s,color .2s; } :is(#sf,#sf-header,#sf-footer) .tab:hover{background:var(--cream)} :is(#sf,#sf-header,#sf-footer) .tab[aria-selected="true"]{background:var(--cream);border-color:var(--line);color:var(--ink);font-weight:500} :is(#sf,#sf-header,#sf-footer) .tab__ico{flex:none;width:2.4rem;height:2.4rem;border-radius:.6rem;background:var(--peach-50);display:grid;place-items:center;color:var(--orange);transition:background .2s,color .2s} :is(#sf,#sf-header,#sf-footer) .tab[aria-selected="true"] .tab__ico{background:var(--orange);color:#fff} :is(#sf,#sf-header,#sf-footer) .tab__ico svg{width:1.25rem;height:1.25rem} :is(#sf,#sf-header,#sf-footer) .tabs__foot{margin-top:.8rem;display:grid;gap:.6rem} :is(#sf,#sf-header,#sf-footer) .reroll{ display:flex;align-items:center;justify-content:center;gap:.55rem;cursor:pointer; font:500 var(--fs-sm)/1 var(--font);color:var(--orange);background:#fff;border:.0625rem solid var(--line);border-radius:var(--r-sm);padding:.85rem 1rem; transition:border-color .2s,background .2s; } :is(#sf,#sf-header,#sf-footer) .reroll:hover{border-color:var(--orange);background:var(--peach-25)} :is(#sf,#sf-header,#sf-footer) .reroll svg{width:1.05rem;height:1.05rem;transition:transform .6s var(--ease)} :is(#sf,#sf-header,#sf-footer) .reroll.is-spinning svg{transform:rotate(-360deg)} /* arkusz A4 */:is(#sf,#sf-header,#sf-footer) .desk{position:relative;background:var(--cream);border-radius:var(--r-xl);padding:clamp(1rem,.5rem + 2.5vw,3rem);overflow:hidden;min-height:34rem;display:grid;place-items:center} :is(#sf,#sf-header,#sf-footer) .desk .shape--asterisk{width:15rem;left:-4rem;bottom:-4rem;opacity:.7} :is(#sf,#sf-header,#sf-footer) .desk .shape--leaf{width:9rem;right:-1.5rem;top:-1.5rem;opacity:.8} :is(#sf,#sf-header,#sf-footer) .a4{ position:relative;z-index:1;width:min(100%,33rem);aspect-ratio:210/262;background:#fff;border-radius:.375rem; box-shadow:var(--shadow-float);padding:clamp(1rem,.7rem + 1.4vw,2rem);display:grid;grid-template-rows:auto auto 1fr auto;gap:.9rem; } :is(#sf,#sf-header,#sf-footer) .a4__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;font-size:clamp(.6rem,.55rem + .25vw,.78rem);line-height:1.35} :is(#sf,#sf-header,#sf-footer) .a4__brand{display:flex;gap:.5rem;align-items:center} :is(#sf,#sf-header,#sf-footer) .a4__brand img{width:2.1em;height:2.1em;border-radius:.4em} :is(#sf,#sf-header,#sf-footer) .a4__brand b{display:block;font-size:1.3em;font-weight:600;letter-spacing:-.02em} :is(#sf,#sf-header,#sf-footer) .a4__meta{text-align:right;color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .a4__title{font-size:clamp(.72rem,.65rem + .35vw,.95rem);color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .a4__title b{font-weight:600;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .a4__body{display:grid;grid-template-columns:100%;place-items:center;min-height:0} :is(#sf,#sf-header,#sf-footer) .a4__foot{display:flex;justify-content:space-between;font-size:clamp(.55rem,.5rem + .2vw,.7rem);color:var(--muted);border-top:.0625rem solid var(--line-soft);padding-top:.5rem} /* komórki – jak w PDF z generatora */:is(#sf,#sf-header,#sf-footer) .cells{display:grid;gap:0} :is(#sf,#sf-header,#sf-footer) .cell{ --s:clamp(1.55rem,1.1rem + 1.8vw,2.35rem); width:var(--s);height:var(--s);display:grid;place-items:center;border:.0625rem solid #1a1a1a;margin:-.03125rem; font-size:calc(var(--s)*.5);font-weight:400;background:#fff;position:relative; animation:pop .45s var(--ease) both;animation-delay:calc(var(--i,0)*18ms); } :is(#sf,#sf-header,#sf-footer) .cell--empty{border-color:transparent;background:transparent} :is(#sf,#sf-header,#sf-footer) .cell--hl{background:var(--peach-50)} :is(#sf,#sf-header,#sf-footer) .cell--pic{border:0;font-size:calc(var(--s)*.62)} :is(#sf,#sf-header,#sf-footer) .cell sub{position:absolute;right:.12rem;bottom:0;font-size:.45em;line-height:1} @keyframes pop{from{transform:scale(.6);opacity:0}} /* wykreślanka */:is(#sf,#sf-header,#sf-footer) .ws{display:grid;gap:0;position:relative} :is(#sf,#sf-header,#sf-footer) .ws .cell{border-color:transparent;font-weight:400;color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .ws .cell.is-found{background:var(--peach);color:var(--ink);font-weight:600;transition:background .3s,color .3s} :is(#sf,#sf-header,#sf-footer) .ws .cell.is-found.edge-l{border-radius:999px 0 0 999px} :is(#sf,#sf-header,#sf-footer) .ws .cell.is-found.edge-r{border-radius:0 999px 999px 0} :is(#sf,#sf-header,#sf-footer) .ws .cell.is-found.edge-t{border-radius:999px 999px 0 0} :is(#sf,#sf-header,#sf-footer) .ws .cell.is-found.edge-b{border-radius:0 0 999px 999px} :is(#sf,#sf-header,#sf-footer) .legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;justify-content:center;font-size:clamp(.62rem,.55rem + .3vw,.82rem);margin-top:1rem;letter-spacing:.08em} :is(#sf,#sf-header,#sf-footer) .legend span.is-done{text-decoration:line-through;text-decoration-color:var(--orange);text-decoration-thickness:.12em;color:var(--muted)} /* memory */:is(#sf,#sf-header,#sf-footer) .mem{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.4rem,.3rem + .6vw,.9rem);width:100%;max-width:26rem} :is(#sf,#sf-header,#sf-footer) .card{perspective:50rem;aspect-ratio:3/4;cursor:pointer;background:none;border:0;padding:0} :is(#sf,#sf-header,#sf-footer) .card__in{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s var(--ease)} :is(#sf,#sf-header,#sf-footer) .card.is-flipped .card__in{transform:rotateY(180deg)} :is(#sf,#sf-header,#sf-footer) .card__face{position:absolute;inset:0;border-radius:.6rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;border:.0625rem solid #1a1a1a} :is(#sf,#sf-header,#sf-footer) .card__back{background:#fff;color:var(--mascot)} :is(#sf,#sf-header,#sf-footer) .card__back svg{width:62%;color:var(--mascot)} :is(#sf,#sf-header,#sf-footer) .card__front{background:#fff;transform:rotateY(180deg);font-weight:500;letter-spacing:.06em;font-size:clamp(.7rem,.55rem + .6vw,1.05rem)} :is(#sf,#sf-header,#sf-footer) .card__front .pic{font-size:clamp(1.8rem,1.2rem + 2vw,3rem)} :is(#sf,#sf-header,#sf-footer) .card.is-match .card__front{background:var(--peach-50);border-color:var(--orange)} /* zgubka */:is(#sf,#sf-header,#sf-footer) .zg{display:grid;gap:clamp(.8rem,.5rem + 1vw,1.4rem)} :is(#sf,#sf-header,#sf-footer) .zg__row{display:flex;align-items:center;gap:clamp(.6rem,.4rem + 1vw,1.2rem)} :is(#sf,#sf-header,#sf-footer) .zg__row .pic{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);width:2.2em;text-align:center} :is(#sf,#sf-header,#sf-footer) .zg .cell--gap{background:var(--peach-50)} :is(#sf,#sf-header,#sf-footer) .zg .cell--gap::after{content:"?";color:var(--orange);font-weight:600;animation:blink 1.6s ease-in-out infinite} :is(#sf,#sf-header,#sf-footer) .zg .cell--gap.is-solved::after{content:none} @keyframes blink{50%{opacity:.25}} :is(#sf,#sf-header,#sf-footer) .zg__letters{display:flex;gap:.4rem;justify-content:center;margin-top:.6rem} :is(#sf,#sf-header,#sf-footer) .zg__letters span{border:.0625rem dashed var(--mascot);border-radius:.4rem;padding:.25rem .6rem;font-weight:500;font-size:clamp(.7rem,.6rem + .4vw,.95rem)} /* znakozgranie */:is(#sf,#sf-header,#sf-footer) .zz{display:flex;gap:clamp(.6rem,.4rem + 1.4vw,1.6rem);flex-wrap:wrap;justify-content:center} :is(#sf,#sf-header,#sf-footer) .zz__disc{position:relative;width:clamp(8.5rem,6rem + 9vw,13rem);aspect-ratio:1;border-radius:50%;border:.09rem solid #1a1a1a;animation:pop .6s var(--ease) both} :is(#sf,#sf-header,#sf-footer) .zz__disc span{position:absolute;translate:-50% -50%;font-size:clamp(1.3rem,1rem + 1.2vw,2.1rem);line-height:1;transition:transform .4s var(--ease)} :is(#sf,#sf-header,#sf-footer) .zz__disc span.is-common{filter:drop-shadow(0 0 0 transparent)} :is(#sf,#sf-header,#sf-footer) .zz__disc span.is-common::after{content:"";position:absolute;inset:-.35em;border:.12rem solid var(--orange);border-radius:50%;animation:ring 1.8s ease-in-out infinite} @keyframes ring{50%{transform:scale(1.12);opacity:.5}} :is(#sf,#sf-header,#sf-footer) .zz__hint{text-align:center;font-size:clamp(.65rem,.6rem + .25vw,.85rem);color:var(--ink-2);margin-top:1rem} /* obrazki */:is(#sf,#sf-header,#sf-footer) .ob{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,.3rem + 1vw,1rem);width:100%} :is(#sf,#sf-header,#sf-footer) .ob__card{border:.0625rem solid #1a1a1a;border-radius:.6rem;display:grid;grid-template-rows:1fr auto;aspect-ratio:3/4;overflow:hidden;animation:pop .5s var(--ease) both;animation-delay:calc(var(--i,0)*90ms)} :is(#sf,#sf-header,#sf-footer) .ob__card .pic{display:grid;place-items:center;font-size:clamp(2rem,1.3rem + 3vw,4rem)} :is(#sf,#sf-header,#sf-footer) .ob__card .lbl{border-top:.0625rem solid #1a1a1a;padding:.45rem;text-align:center;font-weight:500;letter-spacing:.08em;font-size:clamp(.65rem,.55rem + .4vw,.95rem)} :is(#sf,#sf-header,#sf-footer) .ob__card .syl{display:flex;justify-content:center;gap:.25rem;padding-bottom:.4rem} :is(#sf,#sf-header,#sf-footer) .ob__card .syl i{width:.45rem;height:.45rem;border-radius:50%;background:var(--mascot)} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .lab__ui{grid-template-columns:1fr} :is(#sf,#sf-header,#sf-footer) .tabs{position:static;grid-template-columns:repeat(3,1fr);gap:.4rem} :is(#sf,#sf-header,#sf-footer) .tab{flex-direction:column;text-align:center;gap:.4rem;padding:.6rem .3rem;font-size:var(--fs-xs)} :is(#sf,#sf-header,#sf-footer) .tab__ico{width:2rem;height:2rem} :is(#sf,#sf-header,#sf-footer) .tabs__foot{grid-column:1/-1} :is(#sf,#sf-header,#sf-footer) .desk{min-height:0} } /* 5 słów */:is(#sf,#sf-header,#sf-footer) .haslo{display:flex;gap:.6rem;align-items:center;justify-content:center;margin-top:1.4rem;font-size:clamp(.65rem,.6rem + .3vw,.9rem)} :is(#sf,#sf-header,#sf-footer) .haslo__c{color:var(--ink);font-weight:600} :is(#sf,#sf-header,#sf-footer) .haslo__c.is-in{animation:pop .4s var(--ease) both} :is(#sf,#sf-header,#sf-footer) .cells--krz .cell{--s:clamp(1.35rem,1rem + 1.4vw,2.05rem)} :is(#sf,#sf-header,#sf-footer) .ws .cell{--s:clamp(1.35rem,1rem + 1.4vw,2.05rem)} :is(#sf,#sf-header,#sf-footer) .legend em{font-style:normal} :is(#sf,#sf-header,#sf-footer) .mem{grid-template-columns:repeat(5,1fr);max-width:28rem} :is(#sf,#sf-header,#sf-footer) .card__front{font-size:clamp(.62rem,.45rem + .55vw,.95rem);font-weight:500;letter-spacing:.03em} :is(#sf,#sf-header,#sf-footer) .card__front .pic{font-size:clamp(1.3rem,.9rem + 1.6vw,2.3rem)} :is(#sf,#sf-header,#sf-footer) .zg{gap:clamp(.5rem,.35rem + .7vw,1rem)} :is(#sf,#sf-header,#sf-footer) .zg .cell{--s:clamp(1.3rem,1rem + 1.2vw,1.95rem)} :is(#sf,#sf-header,#sf-footer) .zg .cell--wide{width:calc(var(--s)*1.6)} :is(#sf,#sf-header,#sf-footer) .zg .cell--gap.is-solved{color:var(--orange);font-weight:600} :is(#sf,#sf-header,#sf-footer) .zz__disc span{font-size:clamp(1.15rem,.9rem + 1vw,1.85rem)} :is(#sf,#sf-header,#sf-footer) .ob{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.5rem,.3rem + 1vw,1rem)} :is(#sf,#sf-header,#sf-footer) .ob__card{width:calc(33.333% - 1rem);min-width:5.5rem} /* zgubka – dwie karty */:is(#sf,#sf-header,#sf-footer) .zgc{display:flex;gap:clamp(.6rem,.4rem + 1.4vw,1.6rem);flex-wrap:wrap;justify-content:center} :is(#sf,#sf-header,#sf-footer) .zgc__card{position:relative;width:clamp(8rem,5.5rem + 8vw,12rem);aspect-ratio:3/4;border:.09rem solid #1a1a1a;border-radius:.8rem;background:#fff;animation:pop .6s var(--ease) both} :is(#sf,#sf-header,#sf-footer) .zgc__slot{position:absolute;translate:-50% -50%;font-size:clamp(1.3rem,1rem + 1.1vw,2rem);line-height:1} :is(#sf,#sf-header,#sf-footer) .zgc__slot i{display:block;font-style:normal} :is(#sf,#sf-header,#sf-footer) .zgc__slot.is-missing i{opacity:0;transition:opacity .5s} :is(#sf,#sf-header,#sf-footer) .zgc__slot.is-missing::after{content:"";position:absolute;inset:-.35em;border:.12rem dashed var(--orange);border-radius:50%;opacity:0;transition:opacity .4s} :is(#sf,#sf-header,#sf-footer) .zgc__slot.is-missing.is-shown i{opacity:.3} :is(#sf,#sf-header,#sf-footer) .zgc__slot.is-missing.is-shown::after{opacity:1;animation:ring 1.8s ease-in-out infinite} /* ========================================================= JAK TO DZIAŁA ========================================================= */:is(#sf,#sf-header,#sf-footer) .how__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,1rem + 4vw,6rem)} :is(#sf,#sf-header,#sf-footer) .steps{list-style:none;margin:0;padding:0;counter-reset:s} :is(#sf,#sf-header,#sf-footer) .step{ display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding-block:clamp(1.6rem,1rem + 3vw,3.5rem); border-top:.0625rem solid var(--line);cursor:pointer;opacity:.45;transition:opacity .4s; } :is(#sf,#sf-header,#sf-footer) .step:last-child{border-bottom:.0625rem solid var(--line)} :is(#sf,#sf-header,#sf-footer) .step.is-active{opacity:1} :is(#sf,#sf-header,#sf-footer) .step__n{ width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:var(--fs-sm); border:.0625rem solid var(--ink);transition:background .3s,color .3s,border-color .3s;font-variant-numeric:tabular-nums; } :is(#sf,#sf-header,#sf-footer) .step.is-active .step__n{background:var(--orange);border-color:var(--orange);color:#fff} :is(#sf,#sf-header,#sf-footer) .step h3{font-size:var(--fs-xl);margin-bottom:.5rem;letter-spacing:-.03em} :is(#sf,#sf-header,#sf-footer) .step p{color:var(--ink-2);max-width:30rem} :is(#sf,#sf-header,#sf-footer) .how__stage{position:sticky;top:calc(4.5rem + 2rem);height:min(38rem,calc(100vh - 8rem));align-self:start} :is(#sf,#sf-header,#sf-footer) .screen{ position:absolute;inset:0;border-radius:var(--r-xl);background:var(--peach-50);overflow:hidden; display:grid;place-items:center;padding:clamp(1rem,.5rem + 2vw,2.5rem); opacity:0;visibility:hidden;transform:translateY(1rem) scale(.98);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .5s; } :is(#sf,#sf-header,#sf-footer) .screen.is-active{opacity:1;visibility:visible;transform:none} :is(#sf,#sf-header,#sf-footer) .screen .shape--asterisk{width:55%;left:-15%;top:-15%} :is(#sf,#sf-header,#sf-footer) .screen .shape--leaf{width:30%;right:-5%;bottom:-5%} :is(#sf,#sf-header,#sf-footer) .ui{position:relative;z-index:1;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:clamp(1.1rem,.8rem + 1vw,1.75rem);width:min(100%,24rem);display:grid;gap:.75rem;font-size:var(--fs-sm)} :is(#sf,#sf-header,#sf-footer) .ui__brand{display:flex;gap:.7rem;align-items:center;justify-content:center;margin-bottom:.4rem} :is(#sf,#sf-header,#sf-footer) .ui__brand img{width:3rem;height:3rem;border-radius:.8rem;box-shadow:0 .3rem .8rem -.3rem rgba(80,40,10,.35)} :is(#sf,#sf-header,#sf-footer) .ui__brand b{display:block;font-size:1.3rem;font-weight:600;letter-spacing:-.02em;line-height:1.1} :is(#sf,#sf-header,#sf-footer) .ui__brand small{font-size:.8rem;color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .ui__btn{border:.0625rem solid var(--line);border-radius:var(--r-sm);padding:.7rem;text-align:center;font-weight:500;display:flex;justify-content:center;gap:.5rem;align-items:center} :is(#sf,#sf-header,#sf-footer) .ui__btn svg{width:1rem;height:1rem} :is(#sf,#sf-header,#sf-footer) .ui__btn--primary{background:var(--orange);border-color:var(--orange);color:#fff} :is(#sf,#sf-header,#sf-footer) .ui__or{display:flex;align-items:center;gap:.8rem;color:var(--ink);font-weight:500;font-size:var(--fs-xs)} :is(#sf,#sf-header,#sf-footer) .ui__or::before,:is(#sf,#sf-header,#sf-footer) .ui__or::after{content:"";flex:1;height:.0625rem;background:var(--line)} :is(#sf,#sf-header,#sf-footer) .ui__label{font-weight:500;font-size:var(--fs-xs)} :is(#sf,#sf-header,#sf-footer) .ui__input{border:.0625rem solid var(--line);border-radius:var(--r-sm);padding:.65rem .8rem;color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .ui__input .caret{display:inline-block;width:.0625rem;height:1em;background:var(--ink);vertical-align:-.15em;animation:blink 1s steps(1) infinite} :is(#sf,#sf-header,#sf-footer) .ui__link{color:var(--orange);font-weight:500;font-size:var(--fs-xs)} :is(#sf,#sf-header,#sf-footer) .tpl{display:grid;gap:.6rem;width:min(100%,24rem);position:relative;z-index:1} :is(#sf,#sf-header,#sf-footer) .tpl__item{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:.8rem;display:grid;grid-template-columns:4.2rem 1fr;gap:.9rem;align-items:center;transition:transform .4s var(--ease),box-shadow .4s} :is(#sf,#sf-header,#sf-footer) .tpl__item.is-picked{transform:scale(1.03);box-shadow:0 0 0 .125rem var(--orange),var(--shadow-float)} :is(#sf,#sf-header,#sf-footer) .tpl__item b{display:block;font-size:var(--fs-md);font-weight:600} :is(#sf,#sf-header,#sf-footer) .tpl__item span{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.35;display:block} :is(#sf,#sf-header,#sf-footer) .mini{display:grid;grid-template-columns:repeat(5,1fr);gap:.0625rem;background:#fff;border:.0625rem solid var(--line);border-radius:.45rem;padding:.25rem;font-size:.5rem;font-weight:500;text-align:center;color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .mini i{font-style:normal;padding:.05rem 0} :is(#sf,#sf-header,#sf-footer) .mini i.o{background:var(--peach);color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:.0625rem solid var(--line);border-radius:var(--r-sm);overflow:hidden;font-size:var(--fs-xs)} :is(#sf,#sf-header,#sf-footer) .seg span{padding:.55rem .3rem;text-align:center;border-left:.0625rem solid var(--line)} :is(#sf,#sf-header,#sf-footer) .seg span:first-child{border-left:0} :is(#sf,#sf-header,#sf-footer) .seg span.on{background:var(--orange);color:#fff;font-weight:500} :is(#sf,#sf-header,#sf-footer) .picks{display:flex;flex-wrap:wrap;gap:.4rem} :is(#sf,#sf-header,#sf-footer) .pick{display:inline-flex;align-items:center;gap:.4rem;border:.0625rem solid var(--line);border-radius:var(--r-sm);padding:.35rem .55rem;font-size:var(--fs-xs);font-weight:500;transition:opacity .3s,transform .3s var(--ease)} :is(#sf,#sf-header,#sf-footer) .pick svg{width:.8rem;height:.8rem;color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .pick.locked{background:var(--peach-50);border-color:var(--peach)} :is(#sf,#sf-header,#sf-footer) .pick.locked svg{color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .pick.swap{opacity:0;transform:translateY(-.3rem)} :is(#sf,#sf-header,#sf-footer) .look{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:min(100%,30rem);position:relative;z-index:1} :is(#sf,#sf-header,#sf-footer) .look .ui{width:100%} :is(#sf,#sf-header,#sf-footer) .look__preview{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-card);display:grid;place-items:center;padding:1rem;gap:.5rem} :is(#sf,#sf-header,#sf-footer) .look__card{border:.0625rem solid #1a1a1a;border-radius:.5rem;width:70%;aspect-ratio:3/4;display:grid;grid-template-rows:1fr auto;transition:all .6s var(--ease);overflow:hidden} :is(#sf,#sf-header,#sf-footer) .look__card .pic{display:grid;place-items:center;font-size:2.6rem;transition:font-size .6s var(--ease)} :is(#sf,#sf-header,#sf-footer) .look__card .lbl{border-top:.0625rem solid #1a1a1a;text-align:center;padding:.35rem;font-weight:500;letter-spacing:.06em;transition:all .6s var(--ease)} :is(#sf,#sf-header,#sf-footer) .look.alt .look__card{width:88%} :is(#sf,#sf-header,#sf-footer) .look.alt .look__card .lbl{font-family:"Segoe Print","Comic Sans MS",cursive;letter-spacing:0;font-size:1.15rem;text-transform:lowercase} :is(#sf,#sf-header,#sf-footer) .slider{height:.35rem;border-radius:1rem;background:var(--line);position:relative} :is(#sf,#sf-header,#sf-footer) .slider i{position:absolute;left:0;top:0;bottom:0;width:40%;border-radius:1rem;background:var(--orange);transition:width .6s var(--ease)} :is(#sf,#sf-header,#sf-footer) .slider i::after{content:"";position:absolute;right:-.5rem;top:50%;translate:0 -50%;width:1rem;height:1rem;border-radius:50%;background:#fff;border:.125rem solid var(--orange)} :is(#sf,#sf-header,#sf-footer) .look.alt .slider i{width:72%} :is(#sf,#sf-header,#sf-footer) .dl{position:relative;z-index:1;display:grid;justify-items:center;gap:1rem;width:100%} :is(#sf,#sf-header,#sf-footer) .dl__sheet{width:min(62%,15rem);aspect-ratio:595/842;border-radius:.4rem;overflow:hidden;box-shadow:var(--shadow-float);background:#fff;animation:print 3.2s var(--ease) infinite} :is(#sf,#sf-header,#sf-footer) .dl__sheet img{width:100%;height:100%;object-fit:cover} @keyframes print{0%{clip-path:inset(0 0 100% 0)}45%,85%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}} :is(#sf,#sf-header,#sf-footer) .dl__bar{display:flex;gap:.5rem;background:#fff;border-radius:var(--r-md);padding:.5rem;box-shadow:var(--shadow-card)} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .how__grid{grid-template-columns:1fr} :is(#sf,#sf-header,#sf-footer) .how__stage{position:sticky;top:4.75rem;height:clamp(18rem,52vh,26rem);z-index:2;order:-1} :is(#sf,#sf-header,#sf-footer) .step{padding-block:1.6rem;min-height:38vh;align-content:start} :is(#sf,#sf-header,#sf-footer) .look{grid-template-columns:1fr;width:min(100%,19rem)} :is(#sf,#sf-header,#sf-footer) .look__preview{display:none} } /* ========================================================= HISTORIA / DLA KOGO ========================================================= */:is(#sf,#sf-header,#sf-footer) .later__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center} :is(#sf,#sf-header,#sf-footer) .history{background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:clamp(1rem,.8rem + 1vw,1.6rem);display:grid;gap:.3rem;position:relative} :is(#sf,#sf-header,#sf-footer) .history__head{display:flex;justify-content:space-between;align-items:center;padding:.3rem .5rem .8rem;border-bottom:.0625rem solid var(--line-soft);margin-bottom:.3rem} :is(#sf,#sf-header,#sf-footer) .history__head b{font-weight:600;font-size:var(--fs-lg)} :is(#sf,#sf-header,#sf-footer) .history__head span{font-size:var(--fs-xs);color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .hrow{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.9rem;align-items:center;padding:.65rem .5rem;border-radius:var(--r-md);transition:background .2s} :is(#sf,#sf-header,#sf-footer) .hrow:hover{background:var(--cream)} :is(#sf,#sf-header,#sf-footer) .hrow__ico{width:2.6rem;height:2.6rem;border-radius:.6rem;background:var(--peach-50);display:grid;place-items:center;color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .hrow__ico svg{width:1.2rem;height:1.2rem} :is(#sf,#sf-header,#sf-footer) .hrow b{display:block;font-weight:500;font-size:var(--fs-sm)} :is(#sf,#sf-header,#sf-footer) .hrow small{color:var(--muted);font-size:var(--fs-xs)} :is(#sf,#sf-header,#sf-footer) .hrow__act{font-size:var(--fs-xs);font-weight:500;color:var(--orange);border:.0625rem solid var(--line);border-radius:var(--r-sm);padding:.4rem .7rem;background:#fff} :is(#sf,#sf-header,#sf-footer) .hrow.is-new{animation:slidein .7s var(--ease) both} @keyframes slidein{from{transform:translateY(-.8rem);opacity:0;background:var(--peach-50)}} :is(#sf,#sf-header,#sf-footer) .later__text{display:grid;gap:1.25rem} :is(#sf,#sf-header,#sf-footer) .later__text h2{font-size:var(--fs-2xl)} :is(#sf,#sf-header,#sf-footer) .audience{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem} :is(#sf,#sf-header,#sf-footer) .audience span{border:.0625rem solid var(--line);background:#fff;border-radius:999px;padding:.5rem 1rem;font-size:var(--fs-sm);font-weight:400} :is(#sf,#sf-header,#sf-footer) .audience span:first-child{background:var(--ink);color:#fff;border-color:var(--ink)} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .later__grid{grid-template-columns:1fr} :is(#sf,#sf-header,#sf-footer) .history{order:2} } /* manifest */:is(#sf,#sf-header,#sf-footer) .manifest{padding-block:clamp(3rem,2rem + 4vw,6rem);text-align:center;position:relative;overflow:hidden} :is(#sf,#sf-header,#sf-footer) .manifest p{font-size:var(--fs-xl);font-weight:400;letter-spacing:-.02em;line-height:1.35;max-width:52rem;margin-inline:auto;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .manifest p b{font-weight:600} :is(#sf,#sf-header,#sf-footer) .manifest .shape--asterisk{width:5rem;position:relative;display:block;margin:0 auto 1.5rem} /* ========================================================= LEAD MAGNET ========================================================= */:is(#sf,#sf-header,#sf-footer) .lead-box{ position:relative;overflow:hidden;border-radius:clamp(1.5rem,1rem + 2vw,3rem);background:var(--orange);color:#fff; display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,1rem + 3vw,4rem);padding:clamp(2rem,1.2rem + 4vw,5rem);align-items:center; } :is(#sf,#sf-header,#sf-footer) .lead-box h2{font-size:var(--fs-2xl);color:#fff} :is(#sf,#sf-header,#sf-footer) .lead-box p{color:rgba(255,255,255,.9);font-size:var(--fs-lg);max-width:34rem} :is(#sf,#sf-header,#sf-footer) .lead-box strong{color:#fff;font-weight:600} :is(#sf,#sf-header,#sf-footer) .lead-box .shape--asterisk{color:#F97316;width:28rem;right:-8rem;bottom:-12rem;opacity:.9} :is(#sf,#sf-header,#sf-footer) .lead-box__copy{display:grid;gap:1.25rem;position:relative;z-index:1} :is(#sf,#sf-header,#sf-footer) .form{display:grid;gap:.7rem;margin-top:.6rem;max-width:30rem} :is(#sf,#sf-header,#sf-footer) .form__row{display:flex;gap:.5rem;background:#fff;border-radius:var(--r-md);padding:.4rem} :is(#sf,#sf-header,#sf-footer) .form input[type=email]{flex:1;min-width:0;border:0;outline:0;font:400 var(--fs-md) var(--font);padding:.6rem .7rem;color:var(--ink);background:transparent} :is(#sf,#sf-header,#sf-footer) .form .btn{box-shadow:none;background:var(--ink)} :is(#sf,#sf-header,#sf-footer) .form .btn:hover{background:#2a2420} :is(#sf,#sf-header,#sf-footer) .form__consent{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-xs);color:rgba(255,255,255,.85);line-height:1.45} :is(#sf,#sf-header,#sf-footer) .form__consent input{margin-top:.15rem;accent-color:var(--ink);width:1rem;height:1rem;flex:none} :is(#sf,#sf-header,#sf-footer) .form__ok{display:flex;gap:.7rem;align-items:center;background:rgba(255,255,255,.14);border-radius:var(--r-md);padding:1rem 1.2rem;font-weight:500} :is(#sf,#sf-header,#sf-footer) .form__ok svg{width:1.4rem;height:1.4rem;flex:none} :is(#sf,#sf-header,#sf-footer) .fan{position:relative;height:clamp(16rem,12rem + 12vw,24rem);z-index:1} :is(#sf,#sf-header,#sf-footer) .fan__s{position:absolute;left:50%;top:50%;width:clamp(9rem,7rem + 6vw,13rem);aspect-ratio:595/842;background:#fff;border-radius:.4rem;box-shadow:0 1.5rem 3rem -1rem rgba(60,20,0,.45);overflow:hidden;transition:transform .7s var(--ease);display:grid;place-items:center} :is(#sf,#sf-header,#sf-footer) .fan__s img{width:100%;height:100%;object-fit:cover} :is(#sf,#sf-header,#sf-footer) .fan__s:nth-child(1){transform:translate(-95%,-48%) rotate(-12deg)} :is(#sf,#sf-header,#sf-footer) .fan__s:nth-child(2){transform:translate(-5%,-52%) rotate(10deg)} :is(#sf,#sf-header,#sf-footer) .fan__s:nth-child(3){transform:translate(-50%,-50%) rotate(-1deg);z-index:2} :is(#sf,#sf-header,#sf-footer) .lead-box:hover .fan__s:nth-child(1){transform:translate(-110%,-46%) rotate(-16deg)} :is(#sf,#sf-header,#sf-footer) .lead-box:hover .fan__s:nth-child(2){transform:translate(10%,-54%) rotate(14deg)} :is(#sf,#sf-header,#sf-footer) .fan__mini{padding:12%;width:100%;height:100%;display:grid;grid-template-rows:auto 1fr;gap:8%} :is(#sf,#sf-header,#sf-footer) .fan__mini b{font-size:.62rem;font-weight:600;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .fan__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;align-content:start} :is(#sf,#sf-header,#sf-footer) .fan__grid i{aspect-ratio:1;border:.03rem solid #eee;font-style:normal;font-size:.42rem;display:grid;place-items:center;color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .fan__grid i.o{background:var(--peach);color:var(--ink);font-weight:600} :is(#sf,#sf-header,#sf-footer) .fan__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;align-content:start} :is(#sf,#sf-header,#sf-footer) .fan__cards i{aspect-ratio:3/4;border:.04rem solid #1a1a1a;border-radius:.2rem;display:grid;place-items:center;font-style:normal;font-size:1rem} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .lead-box{grid-template-columns:1fr} } /* ========================================================= OPINIE ========================================================= */:is(#sf,#sf-header,#sf-footer) .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} :is(#sf,#sf-header,#sf-footer) .quote{margin:0;background:#fff;border-radius:var(--r-xl);padding:clamp(1.5rem,1.2rem + 1vw,2.2rem);display:grid;gap:1.4rem;align-content:space-between;border:.0625rem dashed var(--peach)} :is(#sf,#sf-header,#sf-footer) .quote blockquote{margin:0;font-size:var(--fs-lg);line-height:1.5;color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .quote blockquote::before{content:"„";display:block;font-size:3rem;line-height:.6;color:var(--mascot);font-weight:600;margin-bottom:.6rem} :is(#sf,#sf-header,#sf-footer) .quote figcaption{display:flex;gap:.8rem;align-items:center} :is(#sf,#sf-header,#sf-footer) .quote figcaption i{width:2.8rem;height:2.8rem;border-radius:50%;background:var(--peach-50);flex:none} :is(#sf,#sf-header,#sf-footer) .quote figcaption b{display:block;font-size:var(--fs-sm)} :is(#sf,#sf-header,#sf-footer) .quote figcaption small{color:var(--muted);font-size:var(--fs-xs)} :is(#sf,#sf-header,#sf-footer) .todo{display:inline-block;font-size:var(--fs-xs);font-weight:500;color:var(--orange);background:var(--peach-50);border-radius:.3rem;padding:.1rem .45rem;letter-spacing:.02em} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .quotes{grid-template-columns:1fr} } /* ========================================================= STOPKA ========================================================= */:is(#sf,#sf-header,#sf-footer) .footer{padding-block:clamp(3rem,2rem + 3vw,5rem) 2rem;border-top:.0625rem solid var(--line-soft);margin-top:var(--section)} :is(#sf,#sf-header,#sf-footer) .footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem} :is(#sf,#sf-header,#sf-footer) .footer h4{font-size:var(--fs-xs);font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:1rem} :is(#sf,#sf-header,#sf-footer) .footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:var(--fs-sm)} :is(#sf,#sf-header,#sf-footer) .footer a{text-decoration:none} :is(#sf,#sf-header,#sf-footer) .footer a:hover{color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .footer__about{display:grid;gap:1rem;font-size:var(--fs-sm);color:var(--ink-2);max-width:22rem} :is(#sf,#sf-header,#sf-footer) .eu{margin-top:3rem;border:.0625rem dashed var(--line);border-radius:var(--r-md);padding:1.2rem;text-align:center;font-size:var(--fs-xs);color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:2rem;font-size:var(--fs-xs);color:var(--muted)} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .footer__grid{grid-template-columns:1fr 1fr} :is(#sf,#sf-header,#sf-footer) .footer__about{grid-column:1/-1} } /* ---------- reveal (widoczne w spoczynku) ---------- */:is(#sf,#sf-header,#sf-footer) .rv{transform:translateY(1.25rem);transition:transform .9s var(--ease)} :is(#sf,#sf-header,#sf-footer) .rv.in{transform:none} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} :is(#sf,#sf-header,#sf-footer) .rv{transform:none} } /* ===== Klasy dla natywnych widgetów ===== */:is(#sf,#sf-header,#sf-footer) .eyebrow{display:flex} :is(#sf,#sf-header,#sf-footer) .sf-h1{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.04em;line-height:1.02} :is(#sf,#sf-header,#sf-footer) .sf-h1 .elementor-heading-title{position:relative;isolation:isolate} :is(#sf,#sf-header,#sf-footer) .sf-h2{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.03em;line-height:1.08} :is(#sf,#sf-header,#sf-footer) .sf-h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;line-height:1.2} :is(#sf,#sf-header,#sf-footer) .hl{position:relative;white-space:nowrap;color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.04em;height:.2em;border-radius:1em;background:var(--peach);z-index:-1;transform-origin:left;animation:grow 1.2s .4s var(--ease) both} @keyframes grow{from{transform:scaleX(0)}} :is(#sf,#sf-header,#sf-footer) .hero__lead{font-size:var(--fs-lg);font-weight:400} :is(#sf,#sf-header,#sf-footer) .hero__cta{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;align-items:center} :is(#sf,#sf-header,#sf-footer) .hero__cta > .elementor-widget{width:auto} :is(#sf,#sf-header,#sf-footer) .stage{margin-left:auto} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .stage{margin-inline:auto} } /* przyciski Elementora */:is(#sf,#sf-header,#sf-footer) .sf-btn .elementor-button{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; font:500 var(--fs-md)/1 var(--font);color:#fff;background:var(--orange);fill:#fff; padding:1em 1.5em;border-radius:var(--r-sm);border:.0625rem solid transparent; box-shadow:0 .5rem 1.25rem -.5rem rgba(234,88,12,.55);transition:background .2s,transform .2s var(--ease); } :is(#sf,#sf-header,#sf-footer) .sf-btn .elementor-button:hover,:is(#sf,#sf-header,#sf-footer) .sf-btn .elementor-button:focus{background:var(--orange-hover);color:#fff;transform:translateY(-.0625rem)} :is(#sf,#sf-header,#sf-footer) .sf-btn .elementor-button-content-wrapper{display:inline-flex;align-items:center;gap:.6em;flex-direction:row} :is(#sf,#sf-header,#sf-footer) .sf-btn .elementor-button-icon{order:2;display:inline-flex;transition:transform .25s var(--ease)} :is(#sf,#sf-header,#sf-footer) .sf-btn .elementor-button-icon svg{width:.95em;height:.95em;fill:currentColor} :is(#sf,#sf-header,#sf-footer) .sf-btn .elementor-button:hover .elementor-button-icon{transform:translateX(.2em)} :is(#sf,#sf-header,#sf-footer) .sf-btn--ghost .elementor-button{background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:none} :is(#sf,#sf-header,#sf-footer) .sf-btn--ghost .elementor-button:hover,:is(#sf,#sf-header,#sf-footer) .sf-btn--ghost .elementor-button:focus{background:var(--paper);color:var(--ink);border-color:var(--ink)} /* intro */:is(#sf,#sf-header,#sf-footer) .intro__text p:first-child{font-size:var(--fs-lg);color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .value{position:relative;overflow:hidden} :is(#sf,#sf-header,#sf-footer) .value:not(.value--pink){background-image:url(https://speechflow.org/wp-content/uploads/speechflow/asterisk-peach.svg);background-repeat:no-repeat;background-size:9rem auto;background-position:right -2.5rem top -2.5rem} :is(#sf,#sf-header,#sf-footer) .value .value__num{font-size:clamp(2.75rem,2rem + 3vw,4.25rem);font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .value--pink .value__num{color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .value .value__txt{font-size:var(--fs-sm);color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .value--pink .value__txt{color:var(--ink-2)} /* kroki – natywne kontenery */:is(#sf,#sf-header,#sf-footer) .steps{counter-reset:s;display:block} :is(#sf,#sf-header,#sf-footer) .step{counter-increment:s;display:flex;flex-direction:column;gap:.6rem;padding-left:calc(2.6rem + 1.25rem)} :is(#sf,#sf-header,#sf-footer) .step .sf-h3{position:relative} :is(#sf,#sf-header,#sf-footer) .step .sf-h3::before{ content:counter(s);position:absolute;left:calc(-2.6rem - 1.25rem);top:50%;translate:0 -50%; width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center; font:600 var(--fs-sm)/1 var(--font);letter-spacing:0;font-variant-numeric:tabular-nums; border:.0625rem solid var(--ink);color:var(--ink);background:transparent;transition:background .3s,color .3s,border-color .3s; } :is(#sf,#sf-header,#sf-footer) .step.is-active .sf-h3::before{background:var(--orange);border-color:var(--orange);color:#fff} :is(#sf,#sf-header,#sf-footer) .step .sf-h3{font-size:var(--fs-xl);letter-spacing:-.03em} :is(#sf,#sf-header,#sf-footer) .step .step__txt{color:var(--ink-2);max-width:30rem} :is(#sf,#sf-header,#sf-footer) .how__stage-wrap{position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + 6.5rem);height:min(38rem,calc(100vh - 8rem));align-self:start} :is(#sf,#sf-header,#sf-footer) .how__stage-wrap > .elementor-widget-container{height:100%} :is(#sf,#sf-header,#sf-footer) .how__stage{position:relative;top:auto;height:100%} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .how__stage-wrap{top:calc(var(--wp-admin--admin-bar--height,0px) + 4.75rem);height:clamp(18rem,52vh,26rem);z-index:2;order:-1} :is(#sf,#sf-header,#sf-footer) .how__stage{position:relative;top:auto;height:100%;order:0} } :is(#sf,#sf-header,#sf-footer) .tabs{top:calc(var(--wp-admin--admin-bar--height,0px) + 6rem)} /* później */:is(#sf,#sf-header,#sf-footer) .audience ul{list-style:none;padding:0;margin:.4rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem} :is(#sf,#sf-header,#sf-footer) .audience li{border:.0625rem solid var(--line);background:#fff;border-radius:999px;padding:.5rem 1rem;font-size:var(--fs-sm);font-weight:400} :is(#sf,#sf-header,#sf-footer) .audience li:first-child{background:var(--ink);color:#fff;border-color:var(--ink)} /* manifest */:is(#sf,#sf-header,#sf-footer) .manifest .wrap{display:grid;justify-items:center;padding-top:calc(4.6rem + 1.75rem);background:url(https://speechflow.org/wp-content/uploads/speechflow/asterisk-peach.svg) center top/5rem auto no-repeat} :is(#sf,#sf-header,#sf-footer) .manifest__text p{font-size:var(--fs-xl);font-weight:400;letter-spacing:-.02em;line-height:1.35;max-width:52rem;margin-inline:auto;color:var(--ink);text-align:center} /* lead magnet */:is(#sf,#sf-header,#sf-footer) .lead-box{background-image:url(https://speechflow.org/wp-content/uploads/speechflow/asterisk-orange.svg);background-repeat:no-repeat;background-size:28rem auto;background-position:right -8rem bottom -12rem} :is(#sf,#sf-header,#sf-footer) .lead-box .sf-h2{color:#fff} :is(#sf,#sf-header,#sf-footer) .lead-box__p{color:rgba(255,255,255,.9);font-size:var(--fs-lg);max-width:34rem} :is(#sf,#sf-header,#sf-footer) .lead-box__p strong{color:#fff;font-weight:600} /* opinie */:is(#sf,#sf-header,#sf-footer) .quote{display:grid;gap:1.4rem;align-content:space-between} :is(#sf,#sf-header,#sf-footer) .quote__text{font-size:var(--fs-lg);line-height:1.5;color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .quote__text::before{content:"„";display:block;font-size:3rem;line-height:.6;color:var(--mascot);font-weight:600;margin-bottom:.6rem} :is(#sf,#sf-header,#sf-footer) .quote__author{font-size:var(--fs-xs);color:var(--muted);line-height:1.4} :is(#sf,#sf-header,#sf-footer) .quote__author p{display:grid;grid-template-columns:2.8rem 1fr;column-gap:.8rem;align-items:center} :is(#sf,#sf-header,#sf-footer) .quote__author p::before{content:"";width:2.8rem;height:2.8rem;border-radius:50%;background:var(--peach-50);grid-row:1 / span 3} :is(#sf,#sf-header,#sf-footer) .quote__author strong{font-size:var(--fs-sm);color:var(--ink);font-weight:500} :is(#sf,#sf-header,#sf-footer) .quote__author br{display:none} :is(#sf,#sf-header,#sf-footer) .section--intro{padding-top:clamp(2rem,1rem + 3vw,4rem)} /* ===== SYSTEM ODSTĘPÓW ===== --section : pion między sekcjami --head-gap : nagłówek sekcji -> treść --stack : odstępy w kolumnie tekstu Wszystko liczone od 5vw marginesu bocznego. */:root{ --section:clamp(4rem,2.5rem + 5vw,7.5rem); --head-gap:clamp(2rem,1.4rem + 2vw,3.5rem); --stack:clamp(1rem,.85rem + .5vw,1.4rem); --col-gap:clamp(2rem,1rem + 4vw,5rem); --inset:clamp(1.25rem,.8rem + 2vw,2.5rem); } :is(#sf,#sf-header,#sf-footer) .section__head{margin-bottom:var(--head-gap);gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .hero__copy,:is(#sf,#sf-header,#sf-footer) .later__text,:is(#sf,#sf-header,#sf-footer) .lead-box__copy{gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .hero__grid,:is(#sf,#sf-header,#sf-footer) .intro__grid,:is(#sf,#sf-header,#sf-footer) .how__grid,:is(#sf,#sf-header,#sf-footer) .later__grid{gap:var(--col-gap)} :is(#sf,#sf-header,#sf-footer) .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} :is(#sf,#sf-header,#sf-footer) .intro__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} :is(#sf,#sf-header,#sf-footer) .how__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} :is(#sf,#sf-header,#sf-footer) .later__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .hero{padding-block:clamp(1rem,.5rem + 1.5vw,2.25rem) var(--section)} :is(#sf,#sf-header,#sf-footer) .section--intro{padding-top:var(--section)} :is(#sf,#sf-header,#sf-footer) .values{gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .value{padding:var(--inset);gap:.6rem} /* LAB – ramka wyrównana do linii 5vw: 2.5vw na zewnątrz + 2.5vw w środku */:is(#sf,#sf-header,#sf-footer) .lab{margin-inline:2.5vw;padding-block:var(--section)} :is(#sf,#sf-header,#sf-footer) .lab > .wrap{padding-inline:2.5vw} :is(#sf,#sf-header,#sf-footer) .lab__words{margin:0 0 var(--stack)} :is(#sf,#sf-header,#sf-footer) .lab__ui{grid-template-columns:minmax(12rem,17rem) minmax(0,1fr);gap:var(--col-gap)} :is(#sf,#sf-header,#sf-footer) .desk{padding:var(--inset)} /* KROKI */:is(#sf,#sf-header,#sf-footer) .step{padding-block:clamp(1.5rem,1rem + 2vw,2.75rem)} /* PÓŹNIEJ + MANIFEST – bez podwójnych przerw */:is(#sf,#sf-header,#sf-footer) .section--later{padding-top:var(--section);padding-bottom:0} :is(#sf,#sf-header,#sf-footer) .manifest{padding-block:var(--section)} :is(#sf,#sf-header,#sf-footer) .section--beta{padding-top:0;padding-bottom:var(--section)} :is(#sf,#sf-header,#sf-footer) .section--quotes{padding-top:0;padding-bottom:var(--section)} :is(#sf,#sf-header,#sf-footer) .quotes{gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .quote{padding:var(--inset)} /* LEAD BOX */:is(#sf,#sf-header,#sf-footer) .lead-box{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--col-gap);padding:clamp(1.75rem,1rem + 4vw,4.5rem)} :is(#sf,#sf-header,#sf-footer) .form__row{min-width:0} :is(#sf,#sf-header,#sf-footer) .form .btn{flex:none;white-space:nowrap} /* STOPKA */:is(#sf,#sf-header,#sf-footer) .footer{margin-top:0;padding-block:clamp(3rem,2rem + 3vw,4.5rem) 2rem} :is(#sf,#sf-header,#sf-footer) .footer__grid{gap:var(--col-gap) 2rem} :is(#sf,#sf-header,#sf-footer) .eu{margin-top:var(--head-gap)} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .hero__grid,:is(#sf,#sf-header,#sf-footer) .intro__grid,:is(#sf,#sf-header,#sf-footer) .how__grid,:is(#sf,#sf-header,#sf-footer) .later__grid,:is(#sf,#sf-header,#sf-footer) .lead-box{grid-template-columns:minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .lab__ui{grid-template-columns:minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .step{min-height:32vh} :is(#sf,#sf-header,#sf-footer) .hero__cta > .elementor-widget{width:100%} :is(#sf,#sf-header,#sf-footer) .hero__cta .elementor-button{width:100%} } @media (max-width:30rem){:is(#sf,#sf-header,#sf-footer) .lab{margin-inline:0;border-radius:1.5rem} :is(#sf,#sf-header,#sf-footer) .lab > .wrap{padding-inline:5vw} :is(#sf,#sf-header,#sf-footer) .hrow{grid-template-columns:2.4rem minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .hrow__act{display:none} :is(#sf,#sf-header,#sf-footer) .form__row{flex-wrap:wrap} :is(#sf,#sf-header,#sf-footer) .form .btn{width:100%} :is(#sf,#sf-header,#sf-footer) .form input[type=email]{width:100%} :is(#sf,#sf-header,#sf-footer) .fan{height:14rem} } /* ===== jawne kolumny (edytor Elementora dokłada do kontenerów własne elementy) ===== */@media (min-width:56.01rem){:is(#sf,#sf-header,#sf-footer) .hero__grid > .hero__copy{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .hero__grid > .hero__visual{grid-column:2;grid-row:1} :is(#sf,#sf-header,#sf-footer) .intro__grid > .intro__text{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .intro__grid > .values{grid-column:2;grid-row:1} :is(#sf,#sf-header,#sf-footer) .how__grid > .steps{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .how__grid > .how__stage-wrap{grid-column:2;grid-row:1} :is(#sf,#sf-header,#sf-footer) .later__grid > .history-wrap{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .later__grid > .later__text{grid-column:2;grid-row:1} :is(#sf,#sf-header,#sf-footer) .lead-box > .lead-box__copy{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .lead-box > .lead-box__fan{grid-column:2;grid-row:1} } :is(#sf,#sf-header,#sf-footer) .e-con > .elementor-element-overlay,:is(#sf,#sf-header,#sf-footer) .e-con > .elementor-editor-element-settings{position:absolute!important} /* ===== WIDEO – placeholdery (podmień na widget Wideo w tym samym kontenerze) ===== */:is(#sf,#sf-header,#sf-footer) .video-frame{margin-bottom:var(--head-gap);width:100%} :is(#sf,#sf-header,#sf-footer) .video-frame > .elementor-widget{width:100%} :is(#sf,#sf-header,#sf-footer) .video-frame .elementor-widget-video .elementor-wrapper,:is(#sf,#sf-header,#sf-footer) .testi .elementor-widget-video .elementor-wrapper{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-float)} :is(#sf,#sf-header,#sf-footer) .vph{ position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border-radius:var(--r-xl); background:linear-gradient(135deg,var(--peach-50) 0%,#FFE3C7 55%,var(--pink) 130%); display:grid;place-items:center;isolation:isolate;box-shadow:var(--shadow-float); } :is(#sf,#sf-header,#sf-footer) .vph .shape{z-index:-1} :is(#sf,#sf-header,#sf-footer) .vph__a{width:38%;left:-8%;top:-18%} :is(#sf,#sf-header,#sf-footer) .vph__b{width:20%;right:-3%;bottom:-6%} :is(#sf,#sf-header,#sf-footer) .vph__c{width:14%;right:18%;top:-6%} :is(#sf,#sf-header,#sf-footer) .vph__play{ width:clamp(4rem,3rem + 4vw,7rem);aspect-ratio:1;border-radius:50%;background:var(--orange);color:#fff; display:grid;place-items:center;box-shadow:0 1rem 2.5rem -.75rem rgba(234,88,12,.7);position:relative; } :is(#sf,#sf-header,#sf-footer) .vph__play::before{content:"";position:absolute;inset:0;border-radius:50%;border:.15rem solid var(--orange);animation:vring 2.2s ease-out infinite} @keyframes vring{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}} :is(#sf,#sf-header,#sf-footer) .vph__play svg{width:38%;height:38%;margin-left:8%} :is(#sf,#sf-header,#sf-footer) .vph__meta{position:absolute;left:var(--inset);bottom:var(--inset);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center} :is(#sf,#sf-header,#sf-footer) .vph__chip{background:#fff;border-radius:999px;padding:.45rem .9rem;font-size:var(--fs-sm);font-weight:500;box-shadow:var(--shadow-card);color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .vph__chip b{color:var(--orange);font-weight:600;font-variant-numeric:tabular-nums} :is(#sf,#sf-header,#sf-footer) .vph__tag{position:absolute;right:var(--inset);top:var(--inset);font-size:var(--fs-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--brown);background:rgba(255,255,255,.7);border:.0625rem dashed var(--brown);border-radius:.4rem;padding:.3rem .6rem} :is(#sf,#sf-header,#sf-footer) .vph--portrait{aspect-ratio:var(--testi-ratio,9/16);border-radius:var(--r-lg)} :is(#sf,#sf-header,#sf-footer) .vph--portrait .vph__play{width:clamp(3.2rem,2.6rem + 2vw,4.5rem)} :is(#sf,#sf-header,#sf-footer) .vph--portrait .vph__a{width:70%;left:-25%;top:-12%} :is(#sf,#sf-header,#sf-footer) .vph--portrait .vph__b{width:45%;right:-12%;bottom:-6%} /* ===== OPINIE WIDEO ===== */:is(#sf,#sf-header,#sf-footer) .testi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .testi__card{display:flex;flex-direction:column;gap:1rem} :is(#sf,#sf-header,#sf-footer) .testi__who{font-size:var(--fs-xs);color:var(--muted);line-height:1.45} :is(#sf,#sf-header,#sf-footer) .testi__who strong{display:block;font-size:var(--fs-md);color:var(--ink);font-weight:500} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .testi{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(72%,20rem);overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:-5vw;padding-inline:5vw;scroll-padding-inline:5vw;padding-bottom:1rem;scrollbar-width:none} :is(#sf,#sf-header,#sf-footer) .testi::-webkit-scrollbar{display:none} :is(#sf,#sf-header,#sf-footer) .testi__card{scroll-snap-align:start} } /* ===== reset przycisków i pól z motywu ===== */:is(#sf,#sf-header,#sf-footer) button,:is(#sf,#sf-header,#sf-footer) [type=button],:is(#sf,#sf-header,#sf-footer) [type=submit]{font-family:inherit;text-transform:none;letter-spacing:inherit;white-space:normal;user-select:auto;min-height:0;box-shadow:none} :is(#sf,#sf-header,#sf-footer) .card,:is(#sf,#sf-header,#sf-footer) .card:hover,:is(#sf,#sf-header,#sf-footer) .card:focus,:is(#sf,#sf-header,#sf-footer) .card:active{all:unset;box-sizing:border-box;display:block;cursor:pointer;aspect-ratio:3/4;perspective:50rem;color:var(--ink);-webkit-tap-highlight-color:transparent} :is(#sf,#sf-header,#sf-footer) .card:focus-visible{outline:.1875rem solid var(--orange);outline-offset:.1875rem;border-radius:.6rem} :is(#sf,#sf-header,#sf-footer) .card__front{color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .tab,:is(#sf,#sf-header,#sf-footer) .tab:focus{background:transparent;color:var(--ink-2);border:.0625rem solid transparent;border-radius:var(--r-md);padding:.7rem .8rem;font-weight:400} :is(#sf,#sf-header,#sf-footer) .tab:hover{background:var(--cream);color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .tab[aria-selected="true"],:is(#sf,#sf-header,#sf-footer) .tab[aria-selected="true"]:hover,:is(#sf,#sf-header,#sf-footer) .tab[aria-selected="true"]:focus{background:var(--cream);border-color:var(--line);color:var(--ink);font-weight:500} :is(#sf,#sf-header,#sf-footer) .reroll,:is(#sf,#sf-header,#sf-footer) .reroll:focus{background:#fff;color:var(--orange);border:.0625rem solid var(--line);border-radius:var(--r-sm);padding:.85rem 1rem} :is(#sf,#sf-header,#sf-footer) .reroll:hover{background:var(--peach-25);color:var(--orange);border-color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .nav__burger,:is(#sf,#sf-header,#sf-footer) .nav__burger:hover,:is(#sf,#sf-header,#sf-footer) .nav__burger:focus{background:none;border:0;padding:.5rem;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .form .btn,:is(#sf,#sf-header,#sf-footer) .form .btn:focus{background:var(--ink);color:#fff;border:0;border-radius:var(--r-sm);padding:.85em 1.25em} :is(#sf,#sf-header,#sf-footer) .form .btn:hover{background:#2a2420;color:#fff} :is(#sf,#sf-header,#sf-footer) .form input[type=email],:is(#sf,#sf-header,#sf-footer) .form input[type=email]:focus{border:0;border-radius:0;padding:.6rem .7rem;width:auto;background:transparent;box-shadow:none;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .form__consent{line-height:1.45;display:flex} :is(#sf,#sf-header,#sf-footer) a{text-decoration:none} :is(#sf,#sf-header,#sf-footer) .nav__links a{color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .nav__links a[aria-current]{color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .footer a{color:inherit} :is(#sf,#sf-header,#sf-footer) .section--later,:is(#sf,#sf-header,#sf-footer) .section--beta,:is(#sf,#sf-header,#sf-footer) .section--quotes{padding-top:0} :is(#sf,#sf-header,#sf-footer) .intro__text{display:block} :is(#sf,#sf-header,#sf-footer) .section__head{margin-inline:0} :is(#sf,#sf-header,#sf-footer) .value__txt p{color:inherit} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .history-wrap{order:2} } /* nawigacja przyklejona – sticky musi być na wrapperze widgetu */:is(#sf,#sf-header,#sf-footer) .sf-navwrap{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:50} :is(#sf,#sf-header,#sf-footer) .sf-navwrap .nav{position:relative;top:0} /* tytuły widgetów zawsze dziedziczą rozmiar z klasy wrappera (np. .sf-h2) */:is(#sf,#sf-header,#sf-footer) .section__head .elementor-heading-title,:is(#sf,#sf-header,#sf-footer) .lead-box .elementor-heading-title{font-size:inherit} /* ========================================================= KONTAKT ========================================================= */:is(#sf,#sf-header,#sf-footer) .ct-hero{padding-block:clamp(2.5rem,1.5rem + 4vw,5rem) var(--section)} :is(#sf,#sf-header,#sf-footer) .ct-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--col-gap);align-items:center} :is(#sf,#sf-header,#sf-footer) .ct-hero__copy{display:grid;gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .mailcard{position:relative;overflow:hidden;background:var(--orange);color:#fff;border-radius:var(--r-xl);padding:var(--inset);display:grid;gap:1.1rem; background-image:url(https://speechflow.org/wp-content/uploads/speechflow/asterisk-orange.svg);background-repeat:no-repeat;background-size:16rem auto;background-position:right -5rem bottom -6rem;box-shadow:var(--shadow-float)} :is(#sf,#sf-header,#sf-footer) .mailcard__label{font-size:var(--fs-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)} :is(#sf,#sf-header,#sf-footer) .mailcard__addr{font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:#fff;word-break:break-word;user-select:all} :is(#sf,#sf-header,#sf-footer) .mailcard__row{display:flex;flex-wrap:wrap;gap:.6rem} :is(#sf,#sf-header,#sf-footer) .mailcard button,:is(#sf,#sf-header,#sf-footer) .mailcard button:focus,:is(#sf,#sf-header,#sf-footer) .mailcard a.mailcard__btn{display:inline-flex;align-items:center;gap:.5rem;font:500 var(--fs-sm)/1 var(--font);background:#fff;color:var(--ink);border:0;border-radius:var(--r-sm);padding:.8rem 1rem;cursor:pointer;text-decoration:none} :is(#sf,#sf-header,#sf-footer) .mailcard button:hover,:is(#sf,#sf-header,#sf-footer) .mailcard a.mailcard__btn:hover{background:var(--cream);color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .mailcard a.mailcard__btn{background:rgba(255,255,255,.14);color:#fff} :is(#sf,#sf-header,#sf-footer) .mailcard a.mailcard__btn:hover{background:rgba(255,255,255,.24);color:#fff} :is(#sf,#sf-header,#sf-footer) .mailcard svg{width:1.05rem;height:1.05rem} :is(#sf,#sf-header,#sf-footer) .mailcard__social{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:1rem;border-top:.0625rem solid rgba(255,255,255,.25);font-size:var(--fs-sm)} :is(#sf,#sf-header,#sf-footer) .mailcard__social a{color:#fff;text-decoration:none;border:.0625rem solid rgba(255,255,255,.35);border-radius:999px;padding:.4rem .85rem} :is(#sf,#sf-header,#sf-footer) .mailcard__social a:hover{background:#fff;color:var(--orange)} /* wybór tematu + formularz */:is(#sf,#sf-header,#sf-footer) .ct-form__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--col-gap);align-items:start} :is(#sf,#sf-header,#sf-footer) .topics{display:grid;gap:.6rem} :is(#sf,#sf-header,#sf-footer) .topic__ico{width:3rem;height:3rem;border-radius:.8rem;background:var(--peach-50);display:grid;place-items:center;color:var(--orange);transition:background .2s,color .2s} :is(#sf,#sf-header,#sf-footer) .topic__ico svg{width:1.4rem;height:1.4rem} :is(#sf,#sf-header,#sf-footer) .topic__dot{width:1.4rem;height:1.4rem;border-radius:50%;border:.125rem solid var(--line);transition:all .2s} :is(#sf,#sf-header,#sf-footer) .topics__note{font-size:var(--fs-sm);color:var(--ink-2);margin-top:.6rem} :is(#sf,#sf-header,#sf-footer) .ct-form{background:#fff;border-radius:var(--r-xl);padding:var(--inset);box-shadow:var(--shadow-card);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + 6.5rem)} :is(#sf,#sf-header,#sf-footer) .ct-form__head{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.9rem;border-bottom:.0625rem solid var(--line-soft)} :is(#sf,#sf-header,#sf-footer) .ct-form__head b{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em} :is(#sf,#sf-header,#sf-footer) .ct-form__topic{font-size:var(--fs-xs);font-weight:500;background:var(--peach-50);color:var(--orange);border-radius:999px;padding:.35rem .8rem;transition:opacity .2s} :is(#sf,#sf-header,#sf-footer) .ct-form .cform__f[hidden]{display:none!important} :is(#sf,#sf-header,#sf-footer) .ct-form__extra{display:contents} /* dane */:is(#sf,#sf-header,#sf-footer) .ct-data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .ct-data__card{background:#fff;border-radius:var(--r-lg);padding:var(--inset);display:grid;gap:.5rem;align-content:start;border:.0625rem solid var(--line-soft)} :is(#sf,#sf-header,#sf-footer) .ct-data__card .sf-h3{font-size:var(--fs-md)} :is(#sf,#sf-header,#sf-footer) .ct-data__card .elementor-widget-text-editor p{font-size:var(--fs-sm);color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .section--ct-form,:is(#sf,#sf-header,#sf-footer) .section--ct-data{padding-top:0} @media (min-width:56.01rem){:is(#sf,#sf-header,#sf-footer) .ct-hero__grid > .ct-hero__copy{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .ct-hero__grid > .mailcard-wrap{grid-column:2;grid-row:1} :is(#sf,#sf-header,#sf-footer) .ct-form__grid > .topics-wrap{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .ct-form__grid > .ct-form-wrap{grid-column:2;grid-row:1} } @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .ct-hero__grid,:is(#sf,#sf-header,#sf-footer) .ct-form__grid{grid-template-columns:minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .ct-form{position:static} :is(#sf,#sf-header,#sf-footer) .ct-data{grid-template-columns:minmax(0,1fr)} } @media (max-width:40rem){:is(#sf,#sf-header,#sf-footer) .ct-form{grid-template-columns:minmax(0,1fr)} } :is(#sf,#sf-header,#sf-footer) .topics__note a{color:var(--orange);font-weight:500} :is(#sf,#sf-header,#sf-footer) .topics__note p{font-size:var(--fs-sm);color:var(--ink-2);margin-top:.6rem} /* ========================================================= NATYWNE WIDGETY ELEMENTORA ========================================================= *//* ---------- HEADER (Theme Builder, sticky natywne) ---------- */:is(#sf,#sf-header,#sf-footer) .site-header{flex-direction:row;align-items:center;gap:1.5rem;padding:.9rem 5vw;min-height:4.5rem; background:color-mix(in srgb,var(--cream) 86%,transparent);backdrop-filter:blur(.875rem) saturate(1.2);-webkit-backdrop-filter:blur(.875rem) saturate(1.2); border-bottom:.0625rem solid transparent;transition:border-color .3s,box-shadow .3s} :is(#sf,#sf-header,#sf-footer) .elementor-sticky--effects .site-header{border-bottom-color:var(--line-soft)} :is(#sf,#sf-header,#sf-footer) .site-header > .elementor-widget{width:auto} :is(#sf,#sf-header,#sf-footer) .site-brand{flex-direction:row;align-items:center;gap:.7rem;margin-right:auto;width:auto} :is(#sf,#sf-header,#sf-footer) .site-brand > .elementor-widget{width:auto;flex:none} :is(#sf,#sf-header,#sf-footer) .site-brand .elementor-widget-image{text-align:left} :is(#sf,#sf-header,#sf-footer) .site-brand .elementor-widget-image img{width:auto;height:2.6rem;max-width:none;border-radius:0;box-shadow:none;display:block} :is(#sf,#sf-header,#sf-footer) .site-brand .site-brand__name{font-size:1.25rem;font-weight:600;letter-spacing:-.02em} :is(#sf,#sf-header,#sf-footer) .site-brand .site-brand__name a{color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .site-header .elementor-nav-menu--main .elementor-item{font-size:var(--fs-sm);padding:.55rem .85rem;border-radius:var(--r-sm);transition:background .2s,color .2s} :is(#sf,#sf-header,#sf-footer) .site-header .elementor-nav-menu--main .elementor-item:hover{background:var(--peach-50)} :is(#sf,#sf-header,#sf-footer) .site-header .elementor-nav-menu--main .elementor-item.elementor-item-active{font-weight:500} :is(#sf,#sf-header,#sf-footer) .site-header .elementor-nav-menu--dropdown{border-bottom:.0625rem solid var(--line-soft);box-shadow:var(--shadow-card)} :is(#sf,#sf-header,#sf-footer) .site-header .elementor-nav-menu--dropdown .elementor-item{font-size:var(--fs-lg);padding:.9rem 5vw} :is(#sf,#sf-header,#sf-footer) .site-header .elementor-menu-toggle{background:transparent;border-radius:var(--r-sm)} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .site-header .site-cta{display:none} } /* ---------- STOPKA ---------- */:is(#sf,#sf-header,#sf-footer) .site-footer{padding-block:clamp(3rem,2rem + 3vw,4.5rem) 2rem;border-top:.0625rem solid var(--line-soft)} :is(#sf,#sf-header,#sf-footer) .site-footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--col-gap) 2rem} :is(#sf,#sf-header,#sf-footer) .site-footer__col{gap:1rem} :is(#sf,#sf-header,#sf-footer) .site-footer__h{font-size:var(--fs-xs);font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .site-footer .elementor-icon-list-items{display:grid;gap:.55rem} :is(#sf,#sf-header,#sf-footer) .site-footer .elementor-icon-list-item{padding:0!important;margin:0!important} :is(#sf,#sf-header,#sf-footer) .site-footer .elementor-icon-list-text{font-size:var(--fs-sm)} :is(#sf,#sf-header,#sf-footer) .site-footer .elementor-icon-list-item a:hover .elementor-icon-list-text{color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .site-footer__about p{font-size:var(--fs-sm);color:var(--ink-2);max-width:22rem} :is(#sf,#sf-header,#sf-footer) .site-footer__eu{margin-top:var(--head-gap);border:.0625rem dashed var(--line);border-radius:var(--r-md);padding:1.2rem;text-align:center} :is(#sf,#sf-header,#sf-footer) .site-footer__eu p{font-size:var(--fs-xs);color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .site-footer__bottom{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:2rem} :is(#sf,#sf-header,#sf-footer) .site-footer__bottom > .elementor-widget{width:auto} :is(#sf,#sf-header,#sf-footer) .site-footer__bottom p{font-size:var(--fs-xs);color:var(--muted)} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .site-footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .site-footer__about{grid-column:1 / -1} } /* ---------- FORMULARZ PRO ---------- */:is(#sf,#sf-header,#sf-footer) .sf-form .elementor-form-fields-wrapper{row-gap:0} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-group{margin-bottom:1rem} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-group > label,:is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-label{font:500 var(--fs-xs)/1.3 var(--font);color:var(--ink);margin-bottom:.4rem;padding:0} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-textual,:is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper),:is(#sf,#sf-header,#sf-footer) .sf-form select{ font:400 var(--fs-md)/1.3 var(--font);color:var(--ink);background:#fff;border:.0625rem solid var(--line);border-radius:var(--r-sm);padding:.75rem .85rem;min-height:0;box-shadow:none} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-textual:focus,:is(#sf,#sf-header,#sf-footer) .sf-form select:focus{border-color:var(--orange);box-shadow:0 0 0 .1875rem var(--peach-50);outline:0} :is(#sf,#sf-header,#sf-footer) .sf-form textarea.elementor-field{min-height:7rem;resize:vertical} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-select-wrapper::before{color:var(--ink);font-size:.8rem;right:.9rem} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-type-acceptance label{font:400 var(--fs-xs)/1.45 var(--font);color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-type-acceptance input{accent-color:var(--orange);width:1rem;height:1rem;margin:.15rem .5rem 0 0;vertical-align:top} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-option{display:inline-flex;align-items:flex-start} :is(#sf,#sf-header,#sf-footer) .sf-form .e-form__buttons{margin-top:.25rem} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-button[type=submit]{font:500 var(--fs-md)/1 var(--font);padding:1em 1.5em;border-radius:var(--r-sm);box-shadow:0 .5rem 1.25rem -.5rem rgba(234,88,12,.55);transition:background .2s,transform .2s var(--ease)} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-button[type=submit]:hover{transform:translateY(-.0625rem)} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-message{font:400 var(--fs-sm)/1.4 var(--font);margin-top:.8rem} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-message.elementor-message-success{color:var(--ink);background:var(--peach-50);border-radius:var(--r-md);padding:1rem} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-message::before{display:none} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-error .elementor-field-textual{border-color:#B42318} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-group .elementor-message.elementor-help-inline{font-size:var(--fs-xs);color:#B42318;margin-top:.3rem} /* radio jako pigułki */:is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-type-radio .elementor-field-subgroup{display:flex;flex-wrap:wrap;gap:.5rem} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-type-radio .elementor-field-option{position:relative;margin:0} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-type-radio input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-type-radio .elementor-field-option label{font:400 var(--fs-sm)/1 var(--font);color:var(--ink-2);background:#fff;border:.0625rem solid var(--line);border-radius:999px;padding:.7rem 1.05rem;cursor:pointer;transition:all .2s;margin:0} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-type-radio input:checked + label{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-type-radio input:focus-visible + label{outline:.1875rem solid var(--orange);outline-offset:.1875rem} /* formularz w kartach (szkolenia, kontakt) */:is(#sf,#sf-header,#sf-footer) .form-card{background:#fff;border-radius:var(--r-xl);padding:var(--inset);box-shadow:0 1.5rem 3rem -1rem rgba(60,20,0,.25);gap:1rem} :is(#sf,#sf-header,#sf-footer) .form-card__title{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;padding-bottom:.9rem;border-bottom:.0625rem solid var(--line-soft)} /* formularz na pomarańczowym (beta) */:is(#sf,#sf-header,#sf-footer) .sf-form--beta .elementor-field-textual{border-color:#fff} :is(#sf,#sf-header,#sf-footer) .sf-form--beta .elementor-field-type-acceptance label{color:rgba(255,255,255,.9)} :is(#sf,#sf-header,#sf-footer) .sf-form--beta .elementor-field-type-acceptance input{accent-color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .sf-form--beta .elementor-button[type=submit]{background:var(--ink)!important;box-shadow:none} :is(#sf,#sf-header,#sf-footer) .sf-form--beta .elementor-button[type=submit]:hover{background:#2a2420!important} :is(#sf,#sf-header,#sf-footer) .sf-form--beta .elementor-message{color:#fff} :is(#sf,#sf-header,#sf-footer) .sf-form--beta .elementor-message.elementor-message-success{color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .lead-box__form{max-width:30rem} /* ---------- ICON BOX: warunki flow, tematy kontaktu ---------- */:is(#sf,#sf-header,#sf-footer) .cond .elementor-icon-box-wrapper{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;text-align:left} :is(#sf,#sf-header,#sf-footer) .cond .elementor-icon-box-icon{margin:0!important} :is(#sf,#sf-header,#sf-footer) .cond .elementor-icon,:is(#sf,#sf-header,#sf-footer) .topic .elementor-icon{width:3rem;height:3rem;border-radius:.8rem;background:var(--peach-50);color:var(--orange);fill:var(--orange);display:grid!important;place-items:center;font-size:1.25rem;padding:0} :is(#sf,#sf-header,#sf-footer) .cond .elementor-icon svg,:is(#sf,#sf-header,#sf-footer) .topic .elementor-icon svg{width:1.3rem;height:1.3rem} :is(#sf,#sf-header,#sf-footer) .cond .elementor-icon-box-title{margin:0;font-size:var(--fs-lg);letter-spacing:-.015em;line-height:1.2} :is(#sf,#sf-header,#sf-footer) .cond .elementor-icon-box-description{margin:0} :is(#sf,#sf-header,#sf-footer) .topic{background:#fff;border:.0625rem solid var(--line-soft);border-radius:var(--r-lg);padding:1rem 1.1rem;cursor:pointer;transition:border-color .2s,box-shadow .3s,transform .3s var(--ease)} :is(#sf,#sf-header,#sf-footer) .topic:hover{border-color:var(--peach);transform:translateX(.2rem)} :is(#sf,#sf-header,#sf-footer) .topic.is-active{border-color:var(--orange);box-shadow:0 0 0 .0625rem var(--orange),var(--shadow-card)} :is(#sf,#sf-header,#sf-footer) .topic.is-active .elementor-icon{background:var(--orange);color:#fff;fill:#fff} :is(#sf,#sf-header,#sf-footer) .topic .elementor-icon-box-wrapper{display:flex;flex-direction:row;align-items:center;gap:1rem;text-align:left} :is(#sf,#sf-header,#sf-footer) .topic .elementor-icon-box-icon{margin:0!important;flex:none} :is(#sf,#sf-header,#sf-footer) .topic .elementor-icon-box-content{flex:1;min-width:0} :is(#sf,#sf-header,#sf-footer) .topic .elementor-icon-box-title{margin:0;font-size:var(--fs-md);line-height:1.25} :is(#sf,#sf-header,#sf-footer) .topic .elementor-icon-box-title a{color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .topic .elementor-icon-box-description{margin:.15rem 0 0;font-size:var(--fs-xs);line-height:1.4} :is(#sf,#sf-header,#sf-footer) .topics{gap:.6rem} /* ---------- LICZNIK ---------- */:is(#sf,#sf-header,#sf-footer) .person__stat{padding-block:1rem;border-block:.0625rem solid var(--line)} :is(#sf,#sf-header,#sf-footer) .person__stat .elementor-counter{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem} :is(#sf,#sf-header,#sf-footer) .person__stat .elementor-counter-number-wrapper{order:1;font-size:clamp(2.5rem,1.8rem + 3vw,4rem);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums} :is(#sf,#sf-header,#sf-footer) .person__stat .elementor-counter-title{order:2;font-size:var(--fs-sm);color:var(--ink-2);max-width:18rem;line-height:1.4;text-align:left} /* ---------- drobne natywne ---------- */:is(#sf,#sf-header,#sf-footer) .group-note p{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);font-weight:500;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .group-note p::before{content:"";flex:none;width:4.4rem;height:.55rem;background:radial-gradient(circle,var(--orange) 45%,transparent 52%) 0 0/.73rem .55rem repeat-x} :is(#sf,#sf-header,#sf-footer) .course__top{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem} :is(#sf,#sf-header,#sf-footer) .course__top > .elementor-widget{width:auto} :is(#sf,#sf-header,#sf-footer) .course__hours .elementor-heading-title{display:inline-flex;align-items:baseline;gap:.3rem;background:var(--peach-50);border-radius:999px;padding:.35rem .8rem;font-size:var(--fs-xs);font-weight:400;color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .course__hours b{font-size:var(--fs-md);font-weight:600;color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .peer__badge .elementor-heading-title{display:inline-flex;gap:.4rem;background:#fff;border-radius:999px;padding:.5rem 1rem;font-size:var(--fs-sm);font-weight:500;box-shadow:var(--shadow-card)} :is(#sf,#sf-header,#sf-footer) .peer__badge b{color:var(--orange);font-weight:600} :is(#sf,#sf-header,#sf-footer) .origin__clock{flex-direction:row;align-items:center;gap:1rem;background:var(--cream);border-radius:var(--r-lg);padding:1rem 1.2rem} :is(#sf,#sf-header,#sf-footer) .origin__clock > .elementor-widget{width:auto} :is(#sf,#sf-header,#sf-footer) .origin__clock > .elementor-widget-text-editor{flex:1} :is(#sf,#sf-header,#sf-footer) .contact__mail .elementor-icon-list-item{background:rgba(255,255,255,.14);border-radius:var(--r-md);padding:.8rem 1rem!important} :is(#sf,#sf-header,#sf-footer) .contact__mail .elementor-icon-list-text{font-size:var(--fs-md);font-weight:500} /* karta maila w kontakcie */:is(#sf,#sf-header,#sf-footer) .mailcard{gap:1.1rem} :is(#sf,#sf-header,#sf-footer) .mailcard__label{font-size:var(--fs-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase} :is(#sf,#sf-header,#sf-footer) .mailcard__addr{font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;word-break:break-word} :is(#sf,#sf-header,#sf-footer) .mailcard__row{flex-direction:row;flex-wrap:wrap;gap:.6rem} :is(#sf,#sf-header,#sf-footer) .mailcard__row > .elementor-widget{width:auto} :is(#sf,#sf-header,#sf-footer) .mailcard .elementor-social-icons-wrapper{padding-top:1rem;border-top:.0625rem solid rgba(255,255,255,.25);display:flex;gap:.5rem} :is(#sf,#sf-header,#sf-footer) .mailcard .elementor-social-icon{width:2.6rem;height:2.6rem;font-size:1rem;padding:0;display:grid;place-items:center} :is(#sf,#sf-header,#sf-footer) .mailcard .elementor-social-icon:hover{background:#fff!important} :is(#sf,#sf-header,#sf-footer) .mailcard .elementor-social-icon:hover svg{fill:var(--orange)} :is(#sf,#sf-header,#sf-footer) .sf-btn--glass .elementor-button{background:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:none} :is(#sf,#sf-header,#sf-footer) .sf-btn--glass .elementor-button:hover{background:rgba(255,255,255,.24)!important} /* listy ikon – niezależnie od motywu */:is(#sf,#sf-header,#sf-footer) .elementor-icon-list-items{list-style:none;margin:0;padding:0} :is(#sf,#sf-header,#sf-footer) .elementor-icon-list-item > a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none} :is(#sf,#sf-header,#sf-footer) .elementor-icon-list-icon svg{width:1em;height:1em;fill:currentColor} :is(#sf,#sf-header,#sf-footer) .elementor-icon-list-icon i{font-size:1em} /* ---------- głos testerki ---------- */:is(#sf,#sf-header,#sf-footer) .section--voice{padding-block:0} :is(#sf,#sf-header,#sf-footer) .voice{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--col-gap);align-items:center;border-radius:clamp(1.5rem,1rem + 2vw,3rem);padding:clamp(1.75rem,1rem + 4vw,4.5rem);background-color:var(--peach-50); background-image:url(https://speechflow.org/wp-content/uploads/speechflow/asterisk-peach.svg);background-repeat:no-repeat;background-size:14rem auto;background-position:left -4rem bottom -6rem} :is(#sf,#sf-header,#sf-footer) .voice__claim{gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .voice__title{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);font-weight:600;letter-spacing:-.035em;line-height:1.08} :is(#sf,#sf-header,#sf-footer) .voice__title strong{color:var(--orange);font-weight:600} :is(#sf,#sf-header,#sf-footer) .voice__sub p{font-size:var(--fs-lg);color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .voice__quote{background-color:#fff;border-radius:var(--r-xl);padding:var(--inset);gap:1rem;box-shadow:var(--shadow-card);position:relative} :is(#sf,#sf-header,#sf-footer) .voice__text p{font-size:var(--fs-lg);line-height:1.5;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .voice__text p::before{content:"„";display:block;font-size:4rem;line-height:.5;color:var(--mascot);font-weight:600;margin-bottom:.9rem} :is(#sf,#sf-header,#sf-footer) .voice__who p{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} @media (min-width:56.01rem){:is(#sf,#sf-header,#sf-footer) .voice > .voice__claim{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .voice > .voice__quote{grid-column:2;grid-row:1} } @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .voice{grid-template-columns:minmax(0,1fr)} } /* ---------- SpeechLab (O nas, Szkolenia) ---------- */:is(#sf,#sf-header,#sf-footer) .section--speechlab{padding-top:0;padding-bottom:var(--section)} :is(#sf,#sf-header,#sf-footer) .speechlab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--col-gap);align-items:end;border-radius:var(--r-xl);padding:clamp(1.75rem,1rem + 3vw,3.5rem);background-color:var(--peach-50); background-image:url(https://speechflow.org/wp-content/uploads/speechflow/asterisk-peach.svg);background-repeat:no-repeat;background-size:16rem auto;background-position:right -4rem top -5rem} :is(#sf,#sf-header,#sf-footer) .speechlab__copy{gap:var(--stack);max-width:46rem} :is(#sf,#sf-header,#sf-footer) .speechlab__side{align-items:flex-start} :is(#sf,#sf-header,#sf-footer) .speechlab__side > .elementor-widget{width:auto} @media (min-width:56.01rem){:is(#sf,#sf-header,#sf-footer) .speechlab > .speechlab__copy{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .speechlab > .speechlab__side{grid-column:2;grid-row:1} } @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .speechlab{grid-template-columns:minmax(0,1fr)} } /* ---------- kontakt: stały rozmiar formularza ---------- *//* pola „Placówka” i „Liczba osób” nie znikają z układu – rezerwują miejsce, więc karta i przycisk nie skaczą */:is(#sf,#sf-header,#sf-footer) .sf-form .is-off{display:flex!important;visibility:hidden;opacity:0;pointer-events:none} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-group-placowka,:is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-group-liczba{transition:opacity .25s,visibility .25s} /* aktywna pigułka bez zmiany grubości – żeby nie przeskakiwały w inną linię */:is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-type-radio input:checked + label{font-weight:400} /* ---------- HEADER – mobile kompaktowy ---------- */@media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .site-header{padding:.5rem 5vw;min-height:3.6rem;gap:.75rem} :is(#sf,#sf-header,#sf-footer) .site-brand .elementor-widget-image img{height:2.1rem} :is(#sf,#sf-header,#sf-footer) .site-brand .site-brand__name{font-size:1.1rem} } :is(#sf,#sf-header,#sf-footer) .elementor-sticky__spacer .site-header{visibility:hidden} /* ---------- JAK TO DZIAŁA – mobile od nowa ---------- Podgląd na górze (stała wysokość), pod nim karty kroków przewijane w bok, nawigacja 1–5 ze strzałkami. */:is(#sf,#sf-header,#sf-footer) .how__nav{display:none} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .how__grid{gap:1rem} :is(#sf,#sf-header,#sf-footer) .how__stage-wrap{position:relative;top:auto;height:auto;order:-1;z-index:auto} :is(#sf,#sf-header,#sf-footer) .how__stage{height:auto;display:grid;gap:.75rem} :is(#sf,#sf-header,#sf-footer) .how__stage .screen{position:relative;inset:auto;grid-area:1 / 1;height:clamp(19rem,60vw + 6rem,25rem);border-radius:var(--r-lg)} :is(#sf,#sf-header,#sf-footer) .how__stage .screen:not(.is-active){pointer-events:none} :is(#sf,#sf-header,#sf-footer) .how__nav{display:flex;align-items:center;justify-content:center;gap:.4rem;grid-row:2} :is(#sf,#sf-header,#sf-footer) .how__nav button,:is(#sf,#sf-header,#sf-footer) .how__nav button:focus{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;font:500 var(--fs-sm)/1 var(--font);color:var(--ink-2);-webkit-tap-highlight-color:transparent} :is(#sf,#sf-header,#sf-footer) .how__dots{display:flex;gap:.35rem} :is(#sf,#sf-header,#sf-footer) .how__dots button,:is(#sf,#sf-header,#sf-footer) .how__dots button:focus{width:2.2rem;height:2.2rem;border-radius:50%;border:.0625rem solid var(--line);background:#fff;transition:background .2s,color .2s,border-color .2s} :is(#sf,#sf-header,#sf-footer) .how__dots button.is-active{background:var(--orange);border-color:var(--orange);color:#fff} :is(#sf,#sf-header,#sf-footer) .how__arrow,:is(#sf,#sf-header,#sf-footer) .how__arrow:focus{width:2.2rem;height:2.2rem;font-size:1.4rem;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .how__nav button:focus-visible{outline:.1875rem solid var(--orange);outline-offset:.125rem} :is(#sf,#sf-header,#sf-footer) .steps{display:grid!important;grid-auto-flow:column;grid-auto-columns:86%;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:-5vw;padding:0 5vw .25rem;scroll-padding-inline:5vw;scrollbar-width:none;overscroll-behavior-x:contain} :is(#sf,#sf-header,#sf-footer) .steps::-webkit-scrollbar{display:none} :is(#sf,#sf-header,#sf-footer) .step{scroll-snap-align:start;min-height:0;opacity:1;background:#fff;border:.0625rem solid var(--line-soft)!important;border-radius:var(--r-lg); padding:1.25rem 1.1rem 1.25rem calc(2.6rem + 1.25rem + 1.1rem)!important;transition:border-color .3s,box-shadow .3s} :is(#sf,#sf-header,#sf-footer) .step.is-active{border-color:var(--orange)!important;box-shadow:0 0 0 .0625rem var(--orange)} :is(#sf,#sf-header,#sf-footer) .step .sf-h3{font-size:var(--fs-lg)} :is(#sf,#sf-header,#sf-footer) .step .step__txt p{font-size:var(--fs-sm)} } /* kotwice nie chowają się pod przyklejonym headerem */:is(#sf,#sf-header,#sf-footer) [id]{scroll-margin-top:5.5rem} /* ---------- STOPKA – blok Funduszy Europejskich ---------- */:is(#sf,#sf-header,#sf-footer) .site-footer__eu{margin-top:var(--head-gap);border:0;border-top:.0625rem solid var(--line-soft);padding:var(--head-gap) 0 0;text-align:left; display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--col-gap);align-items:start} :is(#sf,#sf-header,#sf-footer) .site-footer__eu-left{gap:1rem} :is(#sf,#sf-header,#sf-footer) .site-footer__eu-left .elementor-widget-image{text-align:left} :is(#sf,#sf-header,#sf-footer) .site-footer__eu-left img{width:min(100%,30rem);height:auto;background:#fff;border-radius:var(--r-sm);padding:.5rem .75rem} :is(#sf,#sf-header,#sf-footer) .site-footer__eu-right{gap:.9rem} :is(#sf,#sf-header,#sf-footer) .site-footer__eu-right p{font-size:var(--fs-xs);line-height:1.55;color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .site-footer__eu-right a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--peach);text-underline-offset:.2em} :is(#sf,#sf-header,#sf-footer) .site-footer__eu-right a:hover{color:var(--orange)} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .site-footer__eu{grid-template-columns:minmax(0,1fr)} } /* ---------- STRONA PROJEKTU UE ---------- */:is(#sf,#sf-header,#sf-footer) .eu-page{padding-block:clamp(1.5rem,1rem + 2vw,3rem) var(--section)} :is(#sf,#sf-header,#sf-footer) .eu-page .wrap{gap:var(--head-gap)} :is(#sf,#sf-header,#sf-footer) .eu-title{font-size:clamp(1.6rem,1.1rem + 2vw,2.8rem);font-weight:600;letter-spacing:-.03em;line-height:1.12;max-width:60rem} :is(#sf,#sf-header,#sf-footer) .eu-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .eu-card{background-color:#fff;border-radius:var(--r-lg);padding:var(--inset);gap:.7rem;border:.0625rem solid var(--line-soft)} :is(#sf,#sf-header,#sf-footer) .eu-card--wide{grid-column:1 / -1} :is(#sf,#sf-header,#sf-footer) .eu-card__h{font-size:var(--fs-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--brown)} :is(#sf,#sf-header,#sf-footer) .eu-card .elementor-widget-text-editor p{font-size:var(--fs-md);color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .eu-card .elementor-icon-list-items{display:grid;gap:.6rem} :is(#sf,#sf-header,#sf-footer) .eu-card .elementor-icon-list-text{font-size:var(--fs-md);color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .eu-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .eu-value{background-color:var(--peach-50);border-radius:var(--r-lg);padding:var(--inset);gap:.4rem} :is(#sf,#sf-header,#sf-footer) .eu-value__num{font-size:clamp(1.6rem,1.1rem + 2vw,2.6rem);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums} :is(#sf,#sf-header,#sf-footer) .eu-value__label{font-size:var(--fs-sm);color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .eu-logos{align-items:center} :is(#sf,#sf-header,#sf-footer) .eu-logos img{width:min(100%,32rem);height:auto;background:#fff;border-radius:var(--r-md);padding:.75rem 1rem} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .eu-sections,:is(#sf,#sf-header,#sf-footer) .eu-values{grid-template-columns:minmax(0,1fr)} } @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .steps{grid-auto-columns:84%} :is(#sf,#sf-header,#sf-footer) .step{padding:1.25rem!important} :is(#sf,#sf-header,#sf-footer) .step .sf-h3::before{position:static;translate:none;display:grid;margin-bottom:.75rem;width:2.2rem;height:2.2rem} } :is(#sf,#sf-header,#sf-footer) .site-footer .site-brand,:is(#sf,#sf-header,#sf-footer) .eu-logos,:is(#sf,#sf-header,#sf-footer) .eu-logos .elementor-widget-image{margin-inline:0;text-align:left} /* menu w jednej linii, przycisk bez łamania */:is(#sf,#sf-header,#sf-footer) .site-header .elementor-nav-menu--main .elementor-nav-menu{flex-wrap:nowrap} :is(#sf,#sf-header,#sf-footer) .site-header .elementor-nav-menu--main .elementor-item{white-space:nowrap} :is(#sf,#sf-header,#sf-footer) .site-header .site-nav{flex:1 1 auto;min-width:0} :is(#sf,#sf-header,#sf-footer) .site-header .site-cta .elementor-button{white-space:nowrap} :is(#sf,#sf-header,#sf-footer) .site-footer .site-brand .elementor-widget-image img{height:2.4rem} /* ---------- HEADER – pełna szerokość, płynne rozmiary ---------- */:is(#sf,#sf-header,#sf-footer) #sf-header,:is(#sf,#sf-header,#sf-footer) #sf-header .site-header,:is(#sf,#sf-header,#sf-footer) .elementor-location-header #sf-header{width:100%!important;max-width:100%!important;margin-inline:0!important} :is(#sf,#sf-header,#sf-footer) .site-header{padding:clamp(.5rem,.3rem + .6vw,1rem) 5vw;min-height:clamp(3.6rem,3rem + 1.6vw,5rem);gap:clamp(.75rem,.4rem + 1.4vw,2rem)} :is(#sf,#sf-header,#sf-footer) .site-brand .elementor-widget-image img{height:clamp(2.1rem,1.7rem + 1vw,2.9rem)} :is(#sf,#sf-header,#sf-footer) .site-header .elementor-nav-menu--main .elementor-item{font-size:clamp(.875rem,.8rem + .25vw,1.0625rem);padding:.5em clamp(.5rem,.3rem + .5vw,1rem)} :is(#sf,#sf-header,#sf-footer) .site-header .site-cta .elementor-button{font-size:clamp(.875rem,.8rem + .25vw,1.0625rem);padding:.85em 1.3em} :is(#sf,#sf-header,#sf-footer) .site-header .site-nav .elementor-nav-menu--main .elementor-nav-menu{justify-content:flex-end} /* ===== MOBILE – runda poprawek ===== */@media (max-width:56rem){/* header: logo skrajnie w lewo, burger skrajnie w prawo */:is(#sf,#sf-header,#sf-footer) .site-header{justify-content:space-between} :is(#sf,#sf-header,#sf-footer) .site-header .site-brand{margin-right:0} :is(#sf,#sf-header,#sf-footer) .site-header .site-nav{flex:0 0 auto;margin-left:auto;min-width:0} :is(#sf,#sf-header,#sf-footer) .site-header .elementor-widget-nav-menu .elementor-widget-container{display:flex;justify-content:flex-end} :is(#sf,#sf-header,#sf-footer) .site-header .elementor-menu-toggle{margin:0;padding:.4rem} /* kroki: podgląd dopasowany do treści – nic nie jest przycięte, nic nie wystaje spod spodu */:is(#sf,#sf-header,#sf-footer) .how__stage .screen{height:auto;min-height:0;padding:clamp(.9rem,.5rem + 2vw,1.5rem);align-items:start} :is(#sf,#sf-header,#sf-footer) .how__stage .screen:not(.is-active){position:absolute;inset:0;height:100%;overflow:hidden} :is(#sf,#sf-header,#sf-footer) .how__stage .screen.is-active{position:relative} :is(#sf,#sf-header,#sf-footer) .how__stage{position:relative} :is(#sf,#sf-header,#sf-footer) .screen .ui{padding:1rem;gap:.6rem;font-size:var(--fs-xs)} :is(#sf,#sf-header,#sf-footer) .screen .ui__brand img{width:2.4rem;height:2.4rem} :is(#sf,#sf-header,#sf-footer) .screen .ui__brand b{font-size:1.1rem} :is(#sf,#sf-header,#sf-footer) .screen .ui__btn{padding:.55rem} :is(#sf,#sf-header,#sf-footer) .screen .tpl__item{padding:.6rem} :is(#sf,#sf-header,#sf-footer) .screen .dl__sheet{width:min(52%,11rem)} :is(#sf,#sf-header,#sf-footer) .screen .dl__bar{flex-wrap:wrap;justify-content:center} :is(#sf,#sf-header,#sf-footer) .screen .look{width:100%} /* opinie: jedna karta na ekran, przewijanie w bok, bez przycinania */:is(#sf,#sf-header,#sf-footer) .testi{grid-auto-columns:100%;padding-block:.5rem 1rem;align-items:start} :is(#sf,#sf-header,#sf-footer) .testi__card{min-width:0} :is(#sf,#sf-header,#sf-footer) .testi .vph--portrait{aspect-ratio:4/5} } :is(#sf,#sf-header,#sf-footer) .portrait-frame .person__img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--shadow-float);display:block} /* ---------- stopka: social ---------- */:is(#sf,#sf-header,#sf-footer) .site-footer__social .elementor-social-icons-wrapper{display:flex;gap:.5rem;margin-top:.5rem} :is(#sf,#sf-header,#sf-footer) .site-footer__social .elementor-social-icon{width:2.4rem;height:2.4rem;font-size:.95rem;display:grid;place-items:center;background:#fff!important;border:.0625rem solid var(--line);transition:background .2s,border-color .2s} :is(#sf,#sf-header,#sf-footer) .site-footer__social .elementor-social-icon svg{fill:var(--ink)} :is(#sf,#sf-header,#sf-footer) .site-footer__social .elementor-social-icon i{color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .site-footer__social .elementor-social-icon:hover{background:var(--orange)!important;border-color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .site-footer__social .elementor-social-icon:hover svg{fill:#fff} :is(#sf,#sf-header,#sf-footer) .site-footer__social .elementor-social-icon:hover i{color:#fff} :is(#sf,#sf-header,#sf-footer) .sf-form .elementor-field-type-acceptance a{color:var(--orange);text-decoration:underline;text-underline-offset:.15em} :is(#sf,#sf-header,#sf-footer) .sf-form--beta .elementor-field-type-acceptance a{color:#fff} /* ---------- opinie mobile: twarda wysokość karty, bez pionowego scrolla wewnątrz ---------- */@media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .section--quotes .testi{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:100%!important;grid-auto-rows:max-content!important; height:auto!important;max-height:none!important;min-height:0!important;overflow-x:auto!important;overflow-y:hidden!important} :is(#sf,#sf-header,#sf-footer) .section--quotes .testi > .testi__card{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;width:100%!important;max-width:100%!important} :is(#sf,#sf-header,#sf-footer) .section--quotes .testi__card > .elementor-widget{width:100%!important;height:auto!important} :is(#sf,#sf-header,#sf-footer) .section--quotes .testi__card .elementor-widget-container{height:auto!important} :is(#sf,#sf-header,#sf-footer) .section--quotes .vph--portrait{aspect-ratio:auto!important;height:calc(90vw * 1.15)!important;max-height:30rem;width:100%!important} } /* ========================================================= O NAS ========================================================= */:is(#sf,#sf-header,#sf-footer) .about-hero{padding-block:clamp(2.5rem,1.5rem + 4vw,5rem) var(--section)} :is(#sf,#sf-header,#sf-footer) .about-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--col-gap);align-items:center} :is(#sf,#sf-header,#sf-footer) .about-hero__copy{display:grid;gap:var(--stack)} /* --- wizualizacja flow --- */:is(#sf,#sf-header,#sf-footer) .flowviz{position:relative;background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:var(--inset);display:grid;gap:1.1rem;overflow:hidden} :is(#sf,#sf-header,#sf-footer) .flowviz__plot{position:relative;width:100%;aspect-ratio:1/0.82} :is(#sf,#sf-header,#sf-footer) .flowviz svg{width:100%;height:100%;display:block;overflow:visible} :is(#sf,#sf-header,#sf-footer) .flowviz .zone-hard{fill:var(--pink)} :is(#sf,#sf-header,#sf-footer) .flowviz .zone-easy{fill:var(--beige);opacity:.7} :is(#sf,#sf-header,#sf-footer) .flowviz .zone-flow{fill:var(--peach-50)} :is(#sf,#sf-header,#sf-footer) .flowviz .channel-edge{stroke:var(--peach);stroke-width:1.5;fill:none;stroke-dasharray:4 5} :is(#sf,#sf-header,#sf-footer) .flowviz .axis{stroke:var(--ink);stroke-width:1.5;fill:none} :is(#sf,#sf-header,#sf-footer) .flowviz .axis-label{font:500 11px var(--font);fill:var(--ink-2);letter-spacing:.08em;text-transform:uppercase} :is(#sf,#sf-header,#sf-footer) .flowviz .zone-label{font:600 15px var(--font);fill:var(--ink);letter-spacing:-.01em} :is(#sf,#sf-header,#sf-footer) .flowviz .zone-label--flow{fill:var(--orange);font-size:19px} :is(#sf,#sf-header,#sf-footer) .flowviz .trail{fill:none;stroke:var(--mascot);stroke-width:2;stroke-linecap:round;opacity:.55} :is(#sf,#sf-header,#sf-footer) .flowviz .dot-halo{fill:var(--orange);opacity:.18;transition:r .3s} :is(#sf,#sf-header,#sf-footer) .flowviz .dot{fill:var(--orange);stroke:#fff;stroke-width:3} :is(#sf,#sf-header,#sf-footer) .flowviz__state{display:flex;align-items:center;gap:.8rem;min-height:3.2rem} :is(#sf,#sf-header,#sf-footer) .flowviz__pill{flex:none;font-weight:600;font-size:var(--fs-sm);padding:.45rem .9rem;border-radius:999px;background:var(--peach-50);color:var(--orange);transition:background .3s,color .3s} :is(#sf,#sf-header,#sf-footer) .flowviz__pill[data-s="hard"]{background:var(--pink);color:#8B2F8F} :is(#sf,#sf-header,#sf-footer) .flowviz__pill[data-s="easy"]{background:var(--beige);color:var(--brown)} :is(#sf,#sf-header,#sf-footer) .flowviz__msg{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.4} :is(#sf,#sf-header,#sf-footer) .flowviz__ctrl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 1.5rem} :is(#sf,#sf-header,#sf-footer) .flowviz__ctrl label{display:grid;gap:.45rem;font-size:var(--fs-xs);font-weight:500;color:var(--ink);line-height:1.2} :is(#sf,#sf-header,#sf-footer) .flowviz__ctrl label span{display:flex;justify-content:space-between} :is(#sf,#sf-header,#sf-footer) .flowviz__ctrl output{color:var(--orange);font-variant-numeric:tabular-nums} :is(#sf,#sf-header,#sf-footer) .flowviz input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:.375rem;border-radius:1rem;background:var(--line);border:0;padding:0;margin:.3rem 0;accent-color:var(--orange);cursor:pointer} :is(#sf,#sf-header,#sf-footer) .flowviz input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;border:.1875rem solid var(--orange);box-shadow:0 .25rem .6rem -.2rem rgba(234,88,12,.6)} :is(#sf,#sf-header,#sf-footer) .flowviz input[type=range]::-moz-range-thumb{width:1rem;height:1rem;border-radius:50%;background:#fff;border:.1875rem solid var(--orange)} :is(#sf,#sf-header,#sf-footer) .flowviz__hint{font-size:var(--fs-xs);color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .flowviz .shape{width:8rem;right:-2.5rem;top:-2.5rem;opacity:.9} /* --- warunki flow --- */:is(#sf,#sf-header,#sf-footer) .flow-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--col-gap);align-items:end;margin-bottom:var(--head-gap)} :is(#sf,#sf-header,#sf-footer) .flow-intro__text p{font-size:var(--fs-lg);color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .conditions__lead{font-size:var(--fs-sm);color:var(--muted);margin-bottom:1rem} :is(#sf,#sf-header,#sf-footer) .conditions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .cond{background:#fff;border-radius:var(--r-lg);padding:var(--inset);display:grid;gap:1.2rem;align-content:space-between;min-height:12rem;border:.0625rem solid var(--line-soft);transition:transform .4s var(--ease),box-shadow .4s} :is(#sf,#sf-header,#sf-footer) .cond:hover{transform:translateY(-.25rem);box-shadow:var(--shadow-card)} :is(#sf,#sf-header,#sf-footer) .cond__ico{width:3rem;height:3rem;border-radius:.8rem;background:var(--peach-50);display:grid;place-items:center;color:var(--orange)} :is(#sf,#sf-header,#sf-footer) .cond__ico svg{width:1.5rem;height:1.5rem} :is(#sf,#sf-header,#sf-footer) .cond h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.015em;line-height:1.2;margin:0} :is(#sf,#sf-header,#sf-footer) .flow-outro{margin-top:var(--head-gap)} :is(#sf,#sf-header,#sf-footer) .flow-outro p{font-size:var(--fs-xl);font-weight:400;letter-spacing:-.02em;line-height:1.3;color:var(--ink);max-width:40rem} :is(#sf,#sf-header,#sf-footer) .flow-outro p strong{color:var(--orange);font-weight:600} /* --- geneza --- */:is(#sf,#sf-header,#sf-footer) .origin{background:#fff;border-radius:clamp(1.5rem,1rem + 2vw,3rem);margin-inline:2.5vw;padding-block:var(--section)} :is(#sf,#sf-header,#sf-footer) .origin > .wrap{padding-inline:2.5vw} :is(#sf,#sf-header,#sf-footer) .origin__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--col-gap);align-items:start} :is(#sf,#sf-header,#sf-footer) .origin__big p{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.035em;line-height:1.1;color:var(--ink);text-wrap:balance} :is(#sf,#sf-header,#sf-footer) .origin__big strong{color:var(--orange);font-weight:600} :is(#sf,#sf-header,#sf-footer) .origin__side{display:grid;gap:var(--stack);padding-top:.6rem} :is(#sf,#sf-header,#sf-footer) .origin__side p{font-size:var(--fs-lg);color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .origin__clock{display:flex;align-items:center;gap:1rem;background:var(--cream);border-radius:var(--r-lg);padding:1rem 1.2rem} :is(#sf,#sf-header,#sf-footer) .origin__clock svg{width:3rem;height:3rem;flex:none} :is(#sf,#sf-header,#sf-footer) .origin__clock .hand{transform-origin:24px 24px;animation:spin 6s linear infinite} :is(#sf,#sf-header,#sf-footer) .origin__clock .hand--h{animation-duration:72s} :is(#sf,#sf-header,#sf-footer) .origin__clock p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.4} /* --- zespół --- */:is(#sf,#sf-header,#sf-footer) .team-head{max-width:min(100%,56rem)} :is(#sf,#sf-header,#sf-footer) .person{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--col-gap);align-items:start} :is(#sf,#sf-header,#sf-footer) .person + .person{margin-top:var(--section)} :is(#sf,#sf-header,#sf-footer) .person--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} :is(#sf,#sf-header,#sf-footer) .person__photo{position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + 6.5rem)} :is(#sf,#sf-header,#sf-footer) .person__body{display:grid;gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .person__name{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.035em;line-height:1.05} :is(#sf,#sf-header,#sf-footer) .person__role{font-size:var(--fs-md);color:var(--brown);font-weight:400;line-height:1.45;max-width:40rem} :is(#sf,#sf-header,#sf-footer) .person__bio p{color:var(--ink-2);max-width:40rem} :is(#sf,#sf-header,#sf-footer) .person__bio p:first-child{font-size:var(--fs-lg);color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .chips ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem} :is(#sf,#sf-header,#sf-footer) .chips li{background:var(--peach-50);color:var(--ink);border-radius:999px;padding:.45rem .95rem;font-size:var(--fs-sm);font-weight:400} :is(#sf,#sf-header,#sf-footer) .chips li:first-child{background:var(--orange);color:#fff} /* portret – placeholder */:is(#sf,#sf-header,#sf-footer) .pph{position:relative;overflow:hidden;width:100%;aspect-ratio:4/5;border-radius:var(--r-xl);background:linear-gradient(160deg,var(--peach-50),#FFE0C2 60%,var(--pink) 140%);display:grid;place-items:center;isolation:isolate;box-shadow:var(--shadow-float)} :is(#sf,#sf-header,#sf-footer) .pph .shape{z-index:-1} :is(#sf,#sf-header,#sf-footer) .pph__a{width:75%;left:-22%;top:-14%} :is(#sf,#sf-header,#sf-footer) .pph__b{width:45%;right:-10%;bottom:-8%} :is(#sf,#sf-header,#sf-footer) .pph__ini{font-size:clamp(3rem,2rem + 5vw,7rem);font-weight:600;letter-spacing:-.06em;color:#fff;text-shadow:0 .5rem 2rem rgba(234,88,12,.35)} :is(#sf,#sf-header,#sf-footer) .portrait-frame > .elementor-widget{width:100%} :is(#sf,#sf-header,#sf-footer) .portrait-frame .elementor-widget-image img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--shadow-float)} /* --- CTA --- */:is(#sf,#sf-header,#sf-footer) .next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .next__card{border-radius:var(--r-xl);padding:clamp(1.75rem,1rem + 3vw,3.5rem);display:grid;gap:var(--stack);align-content:start;min-height:18rem} :is(#sf,#sf-header,#sf-footer) .next__card--orange{background-image:url(https://speechflow.org/wp-content/uploads/speechflow/asterisk-orange.svg);background-repeat:no-repeat;background-size:18rem auto;background-position:right -5rem bottom -7rem} :is(#sf,#sf-header,#sf-footer) .next__card--pink{background-image:url(https://speechflow.org/wp-content/uploads/speechflow/asterisk-peach.svg);background-repeat:no-repeat;background-size:14rem auto;background-position:right -4rem top -4rem} :is(#sf,#sf-header,#sf-footer) .next__card .sf-h2{font-size:var(--fs-xl)} :is(#sf,#sf-header,#sf-footer) .next__card--orange .elementor-widget-text-editor p{color:rgba(255,255,255,.9)} :is(#sf,#sf-header,#sf-footer) .next__card .sf-btn{margin-top:.5rem} :is(#sf,#sf-header,#sf-footer) .sf-btn--dark .elementor-button{background:var(--ink);box-shadow:none} :is(#sf,#sf-header,#sf-footer) .sf-btn--dark .elementor-button:hover,:is(#sf,#sf-header,#sf-footer) .sf-btn--dark .elementor-button:focus{background:#2a2420} :is(#sf,#sf-header,#sf-footer) .sf-btn--light .elementor-button{background:#fff;color:var(--ink);box-shadow:none} :is(#sf,#sf-header,#sf-footer) .sf-btn--light .elementor-button:hover,:is(#sf,#sf-header,#sf-footer) .sf-btn--light .elementor-button:focus{background:var(--cream);color:var(--ink)} @media (min-width:56.01rem){:is(#sf,#sf-header,#sf-footer) .about-hero__grid > .about-hero__copy{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .about-hero__grid > .flowviz-wrap{grid-column:2;grid-row:1} :is(#sf,#sf-header,#sf-footer) .person > .portrait-frame{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .person > .person__body{grid-column:2;grid-row:1} :is(#sf,#sf-header,#sf-footer) .person--flip > .portrait-frame{grid-column:2;grid-row:1} :is(#sf,#sf-header,#sf-footer) .person--flip > .person__body{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .origin__grid > .origin__big{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .origin__grid > .origin__side{grid-column:2;grid-row:1} } @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .about-hero__grid,:is(#sf,#sf-header,#sf-footer) .flow-intro,:is(#sf,#sf-header,#sf-footer) .origin__grid,:is(#sf,#sf-header,#sf-footer) .person,:is(#sf,#sf-header,#sf-footer) .person--flip,:is(#sf,#sf-header,#sf-footer) .next{grid-template-columns:minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .conditions{grid-template-columns:repeat(2,minmax(0,1fr))} :is(#sf,#sf-header,#sf-footer) .person__photo{position:static} :is(#sf,#sf-header,#sf-footer) .portrait-frame{max-width:26rem} :is(#sf,#sf-header,#sf-footer) .cond{min-height:0} } @media (max-width:30rem){:is(#sf,#sf-header,#sf-footer) .conditions{grid-template-columns:minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .origin{margin-inline:0;border-radius:1.5rem} :is(#sf,#sf-header,#sf-footer) .origin > .wrap{padding-inline:5vw} :is(#sf,#sf-header,#sf-footer) .flowviz__ctrl{grid-template-columns:minmax(0,1fr)} } :is(#sf,#sf-header,#sf-footer) .flow-intro .section__head{margin-bottom:0} :is(#sf,#sf-header,#sf-footer) .eyebrow--light{color:#fff} :is(#sf,#sf-header,#sf-footer) .eyebrow--light::before{background:#fff} :is(#sf,#sf-header,#sf-footer) .cond__title{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.015em;line-height:1.2} :is(#sf,#sf-header,#sf-footer) .cond > .elementor-widget{width:100%} :is(#sf,#sf-header,#sf-footer) .next__card--orange{background-color:var(--orange);color:#fff} :is(#sf,#sf-header,#sf-footer) .next__card--pink{background-color:var(--pink)} :is(#sf,#sf-header,#sf-footer) .origin{background-color:#fff} :is(#sf,#sf-header,#sf-footer) .section--flow,:is(#sf,#sf-header,#sf-footer) .section--next{padding-top:0} /* ========================================================= SZKOLENIA ========================================================= */:is(#sf,#sf-header,#sf-footer) .tr-hero{padding-block:clamp(2.5rem,1.5rem + 4vw,5rem) var(--section)} :is(#sf,#sf-header,#sf-footer) .tr-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--col-gap);align-items:center} :is(#sf,#sf-header,#sf-footer) .tr-hero__copy{display:grid;gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .tr-hero__cta{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;align-items:center} :is(#sf,#sf-header,#sf-footer) .tr-hero__cta > .elementor-widget{width:auto} :is(#sf,#sf-header,#sf-footer) .group-note{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);font-weight:500;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .group-note__dots{display:flex;gap:.2rem} :is(#sf,#sf-header,#sf-footer) .group-note__dots i{width:.55rem;height:.55rem;border-radius:50%;background:var(--orange);animation:pop .4s var(--ease) both;animation-delay:calc(var(--i)*90ms)} /* plan w godzinach */:is(#sf,#sf-header,#sf-footer) .plan{background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:var(--inset);display:grid;gap:1rem;position:relative;overflow:hidden} :is(#sf,#sf-header,#sf-footer) .plan__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.9rem;border-bottom:.0625rem solid var(--line-soft)} :is(#sf,#sf-header,#sf-footer) .plan__head b{font-weight:600;font-size:var(--fs-lg);letter-spacing:-.01em} :is(#sf,#sf-header,#sf-footer) .plan__head span{font-size:var(--fs-xs);color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .plan__rows{display:grid;gap:.35rem;list-style:none;margin:0;padding:0} :is(#sf,#sf-header,#sf-footer) .plan__row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1rem;align-items:center;padding:.55rem .6rem;border-radius:var(--r-md);text-decoration:none;color:var(--ink);transition:background .2s} :is(#sf,#sf-header,#sf-footer) .plan__row:hover,:is(#sf,#sf-header,#sf-footer) .plan__row:focus-visible{background:var(--cream);color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .plan__name{font-size:var(--fs-sm);font-weight:400;line-height:1.3} :is(#sf,#sf-header,#sf-footer) .plan__bar{position:relative;height:1.6rem;border-radius:.4rem;background:var(--cream);overflow:hidden} :is(#sf,#sf-header,#sf-footer) .plan__bar i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:.4rem;background:var(--orange);transform-origin:left;animation:barin 1.1s var(--ease) both;animation-delay:calc(var(--i)*110ms + .2s)} :is(#sf,#sf-header,#sf-footer) .plan__bar i.is-soft{background:var(--mascot)} :is(#sf,#sf-header,#sf-footer) .plan__bar i.is-free{background:var(--pink)} :is(#sf,#sf-header,#sf-footer) .plan__bar em{position:absolute;right:.5rem;top:50%;translate:0 -50%;font-style:normal;font-size:var(--fs-xs);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} @keyframes barin{from{transform:scaleX(0)}} :is(#sf,#sf-header,#sf-footer) .plan__scale{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1rem;padding-inline:.6rem;font-size:var(--fs-xs);color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .plan__scale span:last-child{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums} /* filtr + katalog */:is(#sf,#sf-header,#sf-footer) .catalog-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--stack);margin-bottom:var(--head-gap)} :is(#sf,#sf-header,#sf-footer) .catalog-head .section__head{margin-bottom:0} :is(#sf,#sf-header,#sf-footer) .filters{display:flex;flex-wrap:wrap;gap:.5rem} :is(#sf,#sf-header,#sf-footer) .filters button,:is(#sf,#sf-header,#sf-footer) .filters button:focus{font:400 var(--fs-sm)/1 var(--font);color:var(--ink-2);background:#fff;border:.0625rem solid var(--line);border-radius:999px;padding:.65rem 1.05rem;cursor:pointer;transition:all .2s} :is(#sf,#sf-header,#sf-footer) .filters button:hover{border-color:var(--ink);background:#fff;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .filters button[aria-pressed="true"],:is(#sf,#sf-header,#sf-footer) .filters button[aria-pressed="true"]:hover{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500} :is(#sf,#sf-header,#sf-footer) .filters button span{color:var(--muted);margin-left:.3rem;font-variant-numeric:tabular-nums} :is(#sf,#sf-header,#sf-footer) .filters button[aria-pressed="true"] span{color:rgba(255,255,255,.6)} :is(#sf,#sf-header,#sf-footer) .courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--stack);align-items:stretch} :is(#sf,#sf-header,#sf-footer) .course{background:#fff;border-radius:var(--r-xl);padding:var(--inset);display:flex;flex-direction:column;gap:1rem;border:.0625rem solid var(--line-soft);transition:transform .4s var(--ease),box-shadow .4s,opacity .3s;scroll-margin-top:7rem} :is(#sf,#sf-header,#sf-footer) .course:hover{box-shadow:var(--shadow-card)} :is(#sf,#sf-header,#sf-footer) .course.is-hidden{display:none!important} :is(#sf,#sf-header,#sf-footer) .course.is-flash{animation:flash 1.4s var(--ease)} @keyframes flash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 .1875rem var(--orange),var(--shadow-card)}} :is(#sf,#sf-header,#sf-footer) .course > .elementor-widget{width:100%} :is(#sf,#sf-header,#sf-footer) .course__top{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap} :is(#sf,#sf-header,#sf-footer) .course__cat{font-size:var(--fs-xs);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--brown)} :is(#sf,#sf-header,#sf-footer) .course__hours{display:inline-flex;align-items:baseline;gap:.3rem;background:var(--peach-50);border-radius:999px;padding:.35rem .8rem;font-size:var(--fs-xs);color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .course__hours b{font-size:var(--fs-md);font-weight:600;color:var(--orange);font-variant-numeric:tabular-nums} :is(#sf,#sf-header,#sf-footer) .course__title{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.03em;line-height:1.1} :is(#sf,#sf-header,#sf-footer) .course__hook p{font-size:var(--fs-md);font-weight:400;color:var(--ink);line-height:1.45} :is(#sf,#sf-header,#sf-footer) .course__desc p{font-size:var(--fs-sm);color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .course__meta{margin-top:auto} :is(#sf,#sf-header,#sf-footer) .course__meta ul{list-style:none;margin:0;padding:1rem 0 0;border-top:.0625rem solid var(--line-soft);display:grid;gap:.45rem;font-size:var(--fs-sm)} :is(#sf,#sf-header,#sf-footer) .course__meta li{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.8rem;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .course__meta li strong{font-weight:400;color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .course .sf-btn .elementor-button{width:100%} /* superwizja */:is(#sf,#sf-header,#sf-footer) .peer{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--col-gap);align-items:center;border-radius:var(--r-xl);padding:clamp(1.75rem,1rem + 3vw,3.5rem);margin-top:var(--stack);background-color:var(--pink);scroll-margin-top:7rem; background-image:url(https://speechflow.org/wp-content/uploads/speechflow/asterisk-peach.svg);background-repeat:no-repeat;background-size:16rem auto;background-position:right -4rem bottom -5rem} :is(#sf,#sf-header,#sf-footer) .peer__copy{display:grid;gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .peer__side{display:grid;gap:1rem;justify-items:start} :is(#sf,#sf-header,#sf-footer) .peer__badge{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border-radius:999px;padding:.5rem 1rem;font-size:var(--fs-sm);font-weight:500;box-shadow:var(--shadow-card)} :is(#sf,#sf-header,#sf-footer) .peer__badge b{color:var(--orange);font-weight:600} :is(#sf,#sf-header,#sf-footer) .peer__meta ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:var(--fs-sm)} :is(#sf,#sf-header,#sf-footer) .peer__meta li strong{font-weight:400;color:var(--ink-2);margin-right:.4rem} /* dla kogo */:is(#sf,#sf-header,#sf-footer) .who__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--col-gap);align-items:start} :is(#sf,#sf-header,#sf-footer) .checklist ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem} :is(#sf,#sf-header,#sf-footer) .checklist li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.8rem;align-items:start;background:#fff;border-radius:var(--r-lg);padding:1rem 1.1rem;font-size:var(--fs-md);font-weight:400;color:var(--ink);line-height:1.35;border:.0625rem solid var(--line-soft)} :is(#sf,#sf-header,#sf-footer) .checklist li::before{content:"";width:2rem;height:2rem;border-radius:50%;background:var(--peach-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23EA580C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/1.1rem no-repeat} /* kontakt */:is(#sf,#sf-header,#sf-footer) .contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--col-gap);align-items:start;border-radius:clamp(1.5rem,1rem + 2vw,3rem);padding:clamp(1.75rem,1rem + 4vw,4.5rem);background-color:var(--orange);color:#fff;scroll-margin-top:6rem; background-image:url(https://speechflow.org/wp-content/uploads/speechflow/asterisk-orange.svg);background-repeat:no-repeat;background-size:26rem auto;background-position:left -8rem bottom -11rem} :is(#sf,#sf-header,#sf-footer) .contact__copy{display:grid;gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .contact__copy .elementor-widget-text-editor p{color:rgba(255,255,255,.92)} :is(#sf,#sf-header,#sf-footer) .contact__mail{display:inline-flex;gap:.6rem;align-items:center;font-size:var(--fs-md);font-weight:500;color:#fff;background:rgba(255,255,255,.14);border-radius:var(--r-md);padding:.8rem 1rem} :is(#sf,#sf-header,#sf-footer) .contact__mail svg{width:1.2rem;height:1.2rem} :is(#sf,#sf-header,#sf-footer) .cform{background:#fff;color:var(--ink);border-radius:var(--r-xl);padding:var(--inset);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;box-shadow:0 1.5rem 3rem -1rem rgba(60,20,0,.35)} :is(#sf,#sf-header,#sf-footer) .cform__f{display:grid;gap:.4rem;font-size:var(--fs-xs);font-weight:500;color:var(--ink)} :is(#sf,#sf-header,#sf-footer) .cform__f--full{grid-column:1 / -1} :is(#sf,#sf-header,#sf-footer) .cform input,:is(#sf,#sf-header,#sf-footer) .cform select,:is(#sf,#sf-header,#sf-footer) .cform textarea,:is(#sf,#sf-header,#sf-footer) .cform input:focus,:is(#sf,#sf-header,#sf-footer) .cform select:focus,:is(#sf,#sf-header,#sf-footer) .cform textarea:focus{ font:400 var(--fs-md) var(--font);color:var(--ink);background:#fff;border:.0625rem solid var(--line);border-radius:var(--r-sm);padding:.75rem .85rem;width:100%;box-shadow:none;outline:0;min-height:0;line-height:1.3} :is(#sf,#sf-header,#sf-footer) .cform input:focus,:is(#sf,#sf-header,#sf-footer) .cform select:focus,:is(#sf,#sf-header,#sf-footer) .cform textarea:focus{border-color:var(--orange);box-shadow:0 0 0 .1875rem var(--peach-50)} :is(#sf,#sf-header,#sf-footer) .cform textarea{min-height:7rem;resize:vertical} :is(#sf,#sf-header,#sf-footer) .cform select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:1rem;padding-right:2.4rem} :is(#sf,#sf-header,#sf-footer) .stepper{display:grid;grid-template-columns:2.8rem minmax(0,1fr) 2.8rem;border:.0625rem solid var(--line);border-radius:var(--r-sm);overflow:hidden} :is(#sf,#sf-header,#sf-footer) .stepper button,:is(#sf,#sf-header,#sf-footer) .stepper button:focus,:is(#sf,#sf-header,#sf-footer) .stepper button:hover{background:var(--cream);color:var(--ink);border:0;border-radius:0;padding:0;font:500 1.2rem/1 var(--font);cursor:pointer} :is(#sf,#sf-header,#sf-footer) .stepper button:hover{background:var(--peach-50)} :is(#sf,#sf-header,#sf-footer) .stepper input,:is(#sf,#sf-header,#sf-footer) .stepper input:focus{border:0;border-radius:0;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;box-shadow:none} :is(#sf,#sf-header,#sf-footer) .stepper input::-webkit-outer-spin-button,:is(#sf,#sf-header,#sf-footer) .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} :is(#sf,#sf-header,#sf-footer) .cform__people{display:flex;flex-wrap:wrap;gap:.2rem;min-height:.7rem;margin-top:.2rem} :is(#sf,#sf-header,#sf-footer) .cform__people i{width:.6rem;height:.6rem;border-radius:50%;background:var(--orange)} :is(#sf,#sf-header,#sf-footer) .cform__hint{font-weight:400;color:var(--muted)} :is(#sf,#sf-header,#sf-footer) .cform__hint.is-err{color:#B42318} :is(#sf,#sf-header,#sf-footer) .cform__consent{grid-column:1 / -1;display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-xs);font-weight:400;color:var(--ink-2);line-height:1.45} :is(#sf,#sf-header,#sf-footer) .cform__consent input{width:1rem;height:1rem;flex:none;margin-top:.15rem;accent-color:var(--orange);padding:0} :is(#sf,#sf-header,#sf-footer) .cform__submit{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between} :is(#sf,#sf-header,#sf-footer) .cform__submit button,:is(#sf,#sf-header,#sf-footer) .cform__submit button:focus{font:500 var(--fs-md)/1 var(--font);background:var(--orange);color:#fff;border:0;border-radius:var(--r-sm);padding:1em 1.5em;cursor:pointer;box-shadow:0 .5rem 1.25rem -.5rem rgba(234,88,12,.55)} :is(#sf,#sf-header,#sf-footer) .cform__submit button:hover{background:var(--orange-hover);color:#fff} :is(#sf,#sf-header,#sf-footer) .cform__msg{font-size:var(--fs-sm);color:var(--ink-2)} :is(#sf,#sf-header,#sf-footer) .cform__ok{grid-column:1 / -1;display:flex;gap:.8rem;align-items:center;font-weight:500;color:var(--ink);padding:1rem;border-radius:var(--r-md);background:var(--peach-50)} :is(#sf,#sf-header,#sf-footer) .cform__ok svg{width:1.6rem;height:1.6rem;color:var(--orange);flex:none} @media (min-width:56.01rem){:is(#sf,#sf-header,#sf-footer) .tr-hero__grid > .tr-hero__copy{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .tr-hero__grid > .plan-wrap{grid-column:2;grid-row:1} :is(#sf,#sf-header,#sf-footer) .who__grid > .who__head{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .who__grid > .checklist{grid-column:2;grid-row:1} :is(#sf,#sf-header,#sf-footer) .contact > .contact__copy{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .contact > .cform-wrap{grid-column:2;grid-row:1} :is(#sf,#sf-header,#sf-footer) .peer > .peer__copy{grid-column:1;grid-row:1} :is(#sf,#sf-header,#sf-footer) .peer > .peer__side{grid-column:2;grid-row:1} } @media (max-width:75rem){:is(#sf,#sf-header,#sf-footer) .courses{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .tr-hero__grid,:is(#sf,#sf-header,#sf-footer) .who__grid,:is(#sf,#sf-header,#sf-footer) .contact,:is(#sf,#sf-header,#sf-footer) .peer{grid-template-columns:minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .tr-hero__cta > .elementor-widget{width:100%} :is(#sf,#sf-header,#sf-footer) .tr-hero__cta .elementor-button{width:100%} } @media (max-width:40rem){:is(#sf,#sf-header,#sf-footer) .courses,:is(#sf,#sf-header,#sf-footer) .checklist ul{grid-template-columns:minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .cform{grid-template-columns:minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .plan__row,:is(#sf,#sf-header,#sf-footer) .plan__scale{grid-template-columns:minmax(0,1fr)} :is(#sf,#sf-header,#sf-footer) .plan__row{gap:.4rem} :is(#sf,#sf-header,#sf-footer) .plan__scale span:first-child{display:none} :is(#sf,#sf-header,#sf-footer) .contact{padding:1.25rem} } /* poprawki rytmu i drobiazgi */:is(#sf,#sf-header,#sf-footer) .section--catalog,:is(#sf,#sf-header,#sf-footer) .section--who,:is(#sf,#sf-header,#sf-footer) .section--contact{padding-top:0} :is(#sf,#sf-header,#sf-footer) .catalog-head{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:var(--stack)} :is(#sf,#sf-header,#sf-footer) .catalog-head > *{margin-inline:0} :is(#sf,#sf-header,#sf-footer) .catalog-head .sf-h2{font-size:var(--fs-xl)} @media (max-width:56rem){:is(#sf,#sf-header,#sf-footer) .catalog-head{grid-template-columns:minmax(0,1fr)} } :is(#sf,#sf-header,#sf-footer) .contact__copy strong,:is(#sf,#sf-header,#sf-footer) .contact__copy b{color:#fff} :is(#sf,#sf-header,#sf-footer) .cform__f{align-content:start} :is(#sf,#sf-header,#sf-footer) .plan__head{flex-wrap:wrap} body{background:#FDF7F1} /* strony prawne (treść klasyczna, bez Elementora) */ body:not(.elementor-page) .site-main,body:not(.elementor-page) main#content{font-family:"Lexend",system-ui,sans-serif;color:#3A3530;font-weight:300;line-height:1.65;padding:clamp(2rem,1rem+3vw,4rem) 5vw clamp(4rem,2.5rem+5vw,7.5rem);max-width:none} body:not(.elementor-page) .site-main > *,body:not(.elementor-page) main#content > *{max-width:50rem} body:not(.elementor-page) .site-main h1,body:not(.elementor-page) main#content h1{font-size:clamp(2rem,1.45rem+2.4vw,3.375rem);font-weight:600;letter-spacing:-.03em;line-height:1.08;color:#0A0A0A;margin:0 0 1.5rem} body:not(.elementor-page) .site-main h2,body:not(.elementor-page) main#content h2{font-size:clamp(1.25rem,1.1rem+.6vw,1.6rem);font-weight:600;letter-spacing:-.02em;color:#0A0A0A;margin:2.2rem 0 .8rem} body:not(.elementor-page) .site-main h3,body:not(.elementor-page) main#content h3{font-size:1.1rem;font-weight:600;color:#0A0A0A;margin:1.6rem 0 .5rem} body:not(.elementor-page) .site-main p,body:not(.elementor-page) .site-main li{font-size:1rem} body:not(.elementor-page) .site-main a{color:#EA580C} body:not(.elementor-page) .site-main ol,body:not(.elementor-page) .site-main ul{padding-left:1.4rem} body:not(.elementor-page) .site-main li{margin-bottom:.4rem} #sf,#sf-header,#sf-footer,#sf-header > .e-con,#sf-footer > .e-con,.elementor-location-header,.elementor-location-footer,.elementor-location-header > .elementor,.elementor-location-footer > .elementor{--width:100%;--content-width:100%;width:100%!important;max-width:100%!important;margin-inline:0!important} #sf > .e-con-inner,#sf-header .e-con-inner,#sf-footer .e-con-inner{max-width:100%!important;width:100%!important;padding-inline:0!important} #sf.e-con,#sf-header.e-con,#sf-footer.e-con{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--gap:0px;--row-gap:0px;--column-gap:0px;--min-height:0px;padding:0} /* SF-KIT:END *//* End custom CSS */