<!– =====================================================================
FlowFlex — Landing STOMATOLOGIA — WKLEJKA DO WORDPRESS
Wklej CALOSC ponizej do jednego bloku "Niestandardowy HTML" (Gutenberg)
na pelnoszerokiej stronie z wylaczonym naglowkiem/stopka Kadence (per-page).
Fonty ladowane przez @import na gorze
@import url(’https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,340;9..144,440;9..144,540&family=Hanken+Grotesk:wght@400;500;600;700&display=swap’);
/* ============================================================
FlowFlex — Stomatologia — Landing „Spokój Premium”
Wszystkie style scoped pod .landing — bezpieczne do wklejenia
jako blok HTML w WordPressie bez wycieku na resztę strony.
Tokeny (kolory, fonty, promienie) przeniesione 1:1 z:
branze/stomatologia/demo-strona/index.html
============================================================ */
.landing{
/* Kolory marki — zrodlo prawdy: brand/kolory-marki.css (2026-08-10).
Stare nazwy zostaja jako aliasy, zeby nie przepisywac osmiu sekcji regul. */
–ff-tlo:#F8F0E3; –ff-karta:#FFF9EF; –ff-piasek:#EADCC8;
–ff-zielen:#244634; –ff-zielen-2:#2E523E; –ff-zloto:#C99C4F;
–ff-tekst:#26342C; –ff-szalwia:#4C6956; –ff-szalwia-ciemna:#2F4D3B;
–ff-zloto-ciemne:#A87829; –ff-biel:#FFFFFF; –ff-na-zieleni-2:#EFE0C9;
–ff-tlo-rgb:248,240,227; –ff-zielen-rgb:36,70,52; –ff-szampan-rgb:226,207,181;
–porcelain:var(–ff-tlo); –linen:var(–ff-karta); –mist:var(–ff-piasek);
–sage:var(–ff-szalwia); –sage-deep:var(–ff-szalwia-ciemna); –pine:var(–ff-zielen);
–brass:var(–ff-zloto); –brass-deep:var(–ff-zloto-ciemne);
–ink-soft:var(–ff-tekst);
–max:1120px;
background:var(–porcelain); color:var(–pine);
font-family:’Hanken Grotesk’,system-ui,sans-serif;
font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
.landing *{box-sizing:border-box}
.landing h1,.landing h2,.landing h3{
font-family:’Fraunces’,Georgia,serif; font-weight:440; line-height:1.1; letter-spacing:-.01em;
margin:0;
}
.landing p{margin:0}
.landing a{color:inherit; text-decoration:none}
.landing ul{list-style:none; margin:0; padding:0}
.landing img{max-width:100%; display:block}
.landing .wrap{max-width:var(–max); margin:0 auto; padding:0 20px}
.landing .eyebrow{
font-size:.72rem; text-transform:uppercase; letter-spacing:.2em;
font-weight:600; color:var(–sage-deep);
}
.landing .btn{
display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
font-weight:600; font-size:1rem; letter-spacing:.01em;
background:var(–brass); color:var(–ff-biel); padding:1rem 1.8rem;
border-radius:999px; border:none; cursor:pointer;
transition:background .25s ease, transform .25s ease;
min-height:48px;
}
.landing .btn:hover{background:var(–brass-deep); transform:translateY(-1px)}
.landing .btn-ghost{background:transparent; color:var(–pine); padding:.9rem .4rem; min-height:auto}
.landing .btn-ghost:hover{color:var(–sage-deep); background:transparent; transform:none}
.landing .btn-quiet{
display:inline-flex; align-items:center; gap:.4rem;
color:var(–sage-deep); font-weight:600; font-size:.98rem;
border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.landing .btn-quiet:hover{border-color:var(–sage-deep)}
/* ———- topbar ———- */
.landing .topbar{
position:sticky; top:0; z-index:30;
background:rgba(var(–ff-tlo-rgb),.86); backdrop-filter:blur(10px);
border-bottom:1px solid var(–mist);
}
.landing .topbar .nav{
display:flex; align-items:center; justify-content:space-between;
padding:14px 20px; max-width:var(–max); margin:0 auto; gap:12px;
}
.landing .brand{font-family:’Fraunces’; font-size:1.25rem; font-weight:540; letter-spacing:.02em; white-space:nowrap}
.landing .brand span{color:var(–sage-deep)}
.landing .topbar .btn{padding:.65rem 1.1rem; font-size:.88rem; min-height:40px}
/* ———- hero ———- */
.landing .hero{position:relative; padding:56px 0 48px; overflow:hidden}
.landing .halo{
position:absolute; inset:-30% 0 auto 50%; transform:translateX(-50%);
width:min(760px,130vw); height:640px; z-index:0; pointer-events:none;
background:radial-gradient(closest-side, rgba(var(–ff-szampan-rgb),.42), rgba(var(–ff-szampan-rgb),0) 70%);
animation:landing-breathe 11s ease-in-out infinite;
}
@keyframes landing-breathe{0%,100%{transform:translateX(-50%) scale(1); opacity:.9}50%{transform:translateX(-50%) scale(1.08); opacity:1}}
.landing .hero-inner{position:relative; z-index:1; max-width:640px}
.landing .hero h1{font-size:clamp(2.1rem,8vw,3.6rem); margin:.6rem 0 0}
.landing .hero .lede{font-size:1.1rem; color:var(–ink-soft); max-width:38ch; margin:1.2rem 0 1.9rem}
.landing .hero-cta{display:flex; flex-direction:column; align-items:flex-start; gap:1rem}
.landing .hero-cta .btn{width:100%; max-width:360px}
.landing .hero-cta .btn-quiet{font-size:1rem}
/* ———- section shell ———- */
.landing section{padding:52px 0}
.landing .sec-head{max-width:620px; margin-bottom:32px}
.landing .sec-head h2{font-size:clamp(1.7rem,6vw,2.5rem)}
.landing .sec-head p{color:var(–ink-soft); margin-top:.8rem}
/* ———- pain ———- */
.landing .pain{background:var(–porcelain)}
.landing .pain-cards{display:grid; gap:16px}
.landing .pain-card{
background:var(–linen); border:1px solid var(–mist); border-radius:20px;
padding:24px; display:flex; flex-direction:column; gap:.5rem;
}
.landing .pain-card .tag{
font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
color:var(–brass-deep);
}
.landing .pain-card h3{font-family:’Fraunces’; font-size:1.2rem; font-weight:440}
.landing .pain-card p{color:var(–ink-soft); font-size:.98rem}
.landing .pain-close{
margin-top:28px; font-family:’Fraunces’; font-size:1.2rem; font-weight:440;
color:var(–pine); max-width:46ch; line-height:1.5;
}
/* ———- dream ———- */
.landing .dream{
background:linear-gradient(180deg,var(–linen),var(–porcelain));
}
.landing .dream-inner{
max-width:640px; text-align:left;
}
.landing .dream .eyebrow{color:var(–sage-deep)}
.landing .dream p.big{
font-family:’Fraunces’,Georgia,serif; font-weight:440; font-size:clamp(1.35rem,4.6vw,1.85rem);
line-height:1.5; color:var(–pine); margin-top:.7rem;
}
/* ———- engine ———- */
.landing .engine{background:var(–porcelain)}
.landing .engine-list{display:grid; gap:16px; margin-bottom:28px}
.landing .engine-item{
display:flex; gap:16px; align-items:flex-start;
background:var(–linen); border:1px solid var(–mist); border-radius:20px; padding:22px;
}
.landing .engine-item .no{
font-family:’Fraunces’; font-size:1.4rem; color:var(–sage-deep); min-width:2rem; flex:0 0 auto;
}
.landing .engine-item h3{font-size:1.1rem; margin-bottom:.3rem; font-weight:600; font-family:’Hanken Grotesk’}
.landing .engine-item p{color:var(–ink-soft); font-size:.96rem}
.landing .engine-diff{
background:var(–pine); color:var(–porcelain); border-radius:20px; padding:26px 22px;
font-family:’Fraunces’; font-size:clamp(1.05rem,4vw,1.3rem); line-height:1.55; text-align:left;
}
.landing .engine-diff b{color:var(–ff-biel)}
/* ———- proof ———- */
.landing .proof{background:var(–porcelain)}
.landing .proof-anchors{display:grid; gap:14px; margin-bottom:36px}
.landing .anchor{
background:var(–linen); border:1px solid var(–mist); border-radius:20px; padding:24px;
}
.landing .anchor .big{
font-family:’Fraunces’,Georgia,serif; font-size:clamp(1.5rem,6vw,2rem); color:var(–brass-deep); line-height:1.15;
}
.landing .anchor .lab{color:var(–ink-soft); margin-top:.6rem; font-size:.98rem}
.landing .phones{display:grid; gap:24px; margin-bottom:36px}
.landing .phone-frame{
background:var(–pine); border-radius:34px; padding:12px; max-width:230px; margin:0 auto;
box-shadow:0 20px 40px -18px rgba(var(–ff-zielen-rgb),.45);
}
.landing .phone-frame .screen{
background:var(–linen); border-radius:24px; overflow:hidden; aspect-ratio:9/19.5;
display:flex; align-items:center; justify-content:center;
}
.landing .phone-frame .screen img{width:100%; height:100%; object-fit:cover}
.landing .phone-cap{
text-align:center; margin-top:.7rem; font-size:.85rem; color:var(–ink-soft); max-width:230px; margin-left:auto; margin-right:auto;
}
.landing .demo-block{
background:var(–pine); border-radius:24px; padding:36px 24px; text-align:center;
}
.landing .demo-block p.lead{
font-family:’Fraunces’,Georgia,serif; font-size:clamp(1.3rem,5vw,1.7rem); color:var(–ff-biel); line-height:1.4; margin-bottom:1.4rem;
}
.landing .demo-block .btn{background:var(–brass)}
.landing .demo-block .btn:hover{background:var(–brass-deep)}
/* ———- flow (model kroków) ———- */
.landing .flow{background:var(–porcelain)}
.landing .flow-steps{display:grid; gap:16px; margin-bottom:20px}
.landing .flow-step{
display:flex; gap:16px; align-items:flex-start;
background:var(–linen); border:1px solid var(–mist); border-radius:20px; padding:22px;
}
.landing .flow-step .fno{
width:2.2rem; height:2.2rem; border-radius:50%; background:var(–sage); color:var(–ff-biel);
display:flex; align-items:center; justify-content:center; font-family:’Fraunces’; font-size:1.05rem;
flex:0 0 auto;
}
.landing .flow-step h3{font-size:1.1rem; font-family:’Hanken Grotesk’; font-weight:600; margin-bottom:.25rem}
.landing .flow-step p{color:var(–ink-soft); font-size:.96rem}
.landing .flow-caption{color:var(–sage-deep); font-weight:600; font-size:.98rem; max-width:44ch}
/* ———- why ———- */
.landing .why{
background:var(–pine); color:var(–porcelain);
}
.landing .why .eyebrow{color:var(–sage)}
.landing .why h2{color:var(–ff-biel)}
.landing .why-text{
font-family:’Fraunces’,Georgia,serif; font-size:clamp(1.2rem,4.4vw,1.5rem); line-height:1.6; color:var(–ff-na-zieleni-2); max-width:52ch;
}
.landing .why-text b{color:var(–ff-biel)}
/* ———- cta-final ———- */
.landing .cta-final{
background:var(–porcelain); text-align:center; padding:60px 0 56px; scroll-margin-top:70px;
}
.landing .cta-final h2{font-size:clamp(1.8rem,6.5vw,2.6rem); max-width:18ch; margin:0 auto}
.landing .cta-final p{
color:var(–ink-soft); max-width:42ch; margin:1.2rem auto 2rem; font-size:1.02rem;
}
.landing .cta-final .btn{margin:0 auto; max-width:320px; width:100%}
/* ———- footer ———- */
.landing .foot{
padding:36px 0 44px; border-top:1px solid var(–mist); color:var(–ink-soft); font-size:.9rem;
}
.landing .foot .foot-inner{
display:flex; flex-direction:column; gap:18px;
}
.landing .foot .brand{font-size:1.05rem}
.landing .foot .foot-link{color:var(–sage-deep); font-weight:600}
/* ———- mock phone screens (proof) — żywe makiety w ramkach ———- */
.landing .screen .mock{
width:100%; height:100%; overflow:hidden; display:flex; flex-direction:column;
text-align:left; background:var(–porcelain); color:var(–pine); font-size:11px; line-height:1.4;
}
.landing .mock .m-bar{background:var(–linen); border-bottom:1px solid var(–mist); padding:10px 12px}
.landing .mock .m-bar .t{font-family:’Fraunces’; font-weight:540; font-size:13px}
.landing .mock .m-bar .s{font-size:9px; color:var(–ink-soft); letter-spacing:.04em; text-transform:uppercase}
.landing .mock .m-body{flex:1; padding:12px; display:flex; flex-direction:column; gap:9px; min-height:0}
.landing .mock .eyb{font-size:8.5px; text-transform:uppercase; letter-spacing:.14em; color:var(–sage-deep); font-weight:600}
.landing .mock–rez .opts{display:flex; flex-wrap:wrap; gap:6px}
.landing .mock–rez .opt{font-size:10px; padding:5px 9px; border-radius:999px; border:1px solid var(–mist); background:var(–linen)}
.landing .mock–rez .opt.sel{background:var(–brass); color:var(–ff-biel); border-color:var(–brass)}
.landing .mock–rez .slots{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.landing .mock–rez .slot{font-size:10px; padding:6px; text-align:center; border-radius:8px; border:1px solid var(–mist); background:var(–linen)}
.landing .mock–rez .slot.sel{border-color:var(–sage); background:var(–mist); color:var(–sage-deep); font-weight:600}
.landing .mock–rez .cta{margin-top:auto; background:var(–brass); color:var(–ff-biel); text-align:center; padding:9px; border-radius:999px; font-size:11px; font-weight:600}
.landing .mock–sms .bub{background:var(–linen); border:1px solid var(–mist); border-radius:12px 12px 12px 4px; padding:9px 10px; font-size:10.5px; box-shadow:0 6px 14px -12px rgba(var(–ff-zielen-rgb),.5)}
.landing .mock–sms .bub .lnk{color:var(–sage-deep); font-weight:600}
.landing .mock–sms .bub .tm{display:block; margin-top:5px; font-size:8.5px; color:var(–ink-soft)}
.landing .mock–sms .m-tag{margin-top:auto; align-self:center; font-size:8.5px; color:var(–ink-soft); background:var(–mist); padding:5px 10px; border-radius:999px}
.landing .mock–sms .m-tag b{color:var(–sage-deep)}
.landing .mock–rap{background:linear-gradient(180deg,var(–linen),var(–porcelain))}
.landing .mock–rap .m-body{justify-content:center}
.landing .mock–rap h4{font-family:’Fraunces’; font-weight:440; font-size:15px; line-height:1.12; margin:4px 0 10px}
.landing .mock–rap .rl{display:flex; gap:8px; align-items:flex-start; background:var(–linen); border:1px solid var(–mist); border-radius:10px; padding:8px 9px; font-size:10px}
.landing .mock–rap .rl .dot{width:6px; height:6px; border-radius:50%; margin-top:5px; flex:0 0 auto}
.landing .mock–rap .rl b{font-family:’Fraunces’; font-weight:540}
.landing .mock–rap .d1{background:var(–sage)} .landing .mock–rap .d2{background:var(–brass)} .landing .mock–rap .d3{background:var(–sage-deep)}
/* ============================================================
Media queries — mobile-first: base styles above target 375px.
From 560px / 720px / 960px we open up to multi-column layouts.
============================================================ */
@media(min-width:560px){
.landing .phones{grid-template-columns:repeat(3,1fr)}
.landing .hero-cta{flex-direction:row; align-items:center; flex-wrap:wrap}
.landing .hero-cta .btn{width:auto}
}
@media(min-width:720px){
.landing .pain-cards{grid-template-columns:repeat(3,1fr)}
.landing .engine-list{grid-template-columns:repeat(2,1fr)}
.landing .flow-steps{grid-template-columns:repeat(3,1fr)}
.landing .proof-anchors{grid-template-columns:repeat(2,1fr)}
.landing .hero{padding:96px 0 72px}
.landing section{padding:80px 0}
.landing .cta-final{padding:88px 0 72px}
}
@media(min-width:960px){
.landing .flow-step{flex-direction:column}
.landing .flow-step .fno{margin-bottom:.4rem}
.landing .foot .foot-inner{flex-direction:row; align-items:center; justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
.landing .halo{animation:none}
}
FlowFlex dla gabinetów stomatologicznych
Lata studiów, żeby leczyć ludzi. Nie żeby pilnować kalendarza.
Bądź dentystą, nie recepcjonistką. Rejestrację, przypomnienia i obecność pacjentów prowadzimy za Ciebie — Ty leczysz.
Codzienność gabinetu
Znasz to?
Telefon
Umawianie w środku zabiegu
Telefon dzwoni w trakcie zabiegu — i musisz wybierać między pacjentem na fotelu a pacjentem na linii. Umawianie, przekładanie, przypominanie.
Pusty fotel
Puste okienka w grafiku
Pacjent nie przyszedł i nie uprzedził. Godzina, którą mógł zająć ktoś inny, znika bezpowrotnie.
Druga rola
Recepcja, której nie uczą na studiach
Druga praca, której studia nie obejmują — a i tak wykonujesz ją codziennie, zamiast w pełni skupić się na leczeniu.
To nie znak, że źle prowadzisz gabinet. To znak, że rejestracja zjada czas, który należy się pacjentom.
Wyobraź sobie inaczej
Pacjent umawia się w 30 sekund z telefonu, o każdej porze. Nieodebrane telefony same wracają SMS-em z linkiem do rezerwacji. Puste okienka się domykają. A Ty jesteś przy fotelu, nie przy słuchawce.
Rozwiązanie
To nie strona. To Silnik, który prowadzimy za Ciebie.
01
Jeden kalendarz, jedna rezerwacja
Rezerwacja z telefonu w 30 sekund — bez dzwonienia, bez czekania na odpowiedź.
02
Żaden telefon nie przepada
Nieodebrany telefon sam wraca do pacjenta SMS-em z linkiem do rezerwacji. Nikt nie przepada między jednym a drugim zabiegiem.
03
Właściwi pacjenci na właściwe zabiegi
Zabiegi, na których Ci zależy, są wyeksponowane — dopasowane do Twojego gabinetu, nie z szablonu.
04
Raport po ludzku
Trzy zdania podsumowania miesiąca — nie dashboard, który trzeba umieć czytać.
To nie program, który obsługujesz sam. To nie agencja od ruchu i raportów. Całą pętlę bierzemy na siebie.
Dowód
Policz, ile realnie odzyskujesz.
Kilkadziesiąt tysięcy złotych rocznie
Tyle potrafią kosztować puste okienka w przeciętnym gabinecie. Tyle wraca, gdy grafik się domyka.
Godziny, nie tylko złotówki
Policz nie tylko złotówki — policz godziny na słuchawce zamiast przy fotelu.
Wybierz zabieg
Przegląd
Higienizacja
Implant — konsultacja
Wybierz termin
jutro 9:40
jutro 11:20
pt 14:00
pt 16:30
Rezerwuję — 30 s
Rezerwacja w 30 sekund
Potwierdzamy wizytę: przegląd, jutro 9:40. Przełóż jednym kliknięciem: sereno.pl/wizyta12:04
Przypomnienie: wizyta jutro o 9:40. Do zobaczenia w Sereno.jutro 8:00
Automat FlowFlex — zero telefonu
Potwierdzenie i przypomnienie SMS
Raport po ludzku
Twój lipiec w 3 zdaniach
24 nowych pacjentów umówionych w tym miesiącu.
Puste okienka spadły z 20% do 8%.
~200 telefonów mniej — czas wrócił do fotela.
Raport po ludzku
Nie opowiemy Ci spokoju. Wejdź i poczuj.
Otwórz żywe demo →Jak pracujemy
Model Flow — krok po kroku
1
Fundament
Silnik: rezerwacja online i odzyskiwanie nieodebranych telefonów. To wdrażamy pierwsze — i od razu widać to w grafiku.
2
Widoczność
Porządna, aktywnie prowadzona Wizytówka Google — żeby nowi pacjenci z okolicy Cię znajdowali.
3
Sprzedaż i skala
Powroty pacjentów i opinie — budujemy stały ruch, nie jednorazowy skok.
Zaczynasz od jednego kroku. Widzisz zwrot z odzyskanych wizyt, zanim dołożysz kolejny.
Dlaczego FlowFlex
Prowadzimy, a nie sprzedajemy stronę.
Nie znikamy po oddaniu projektu — to my prowadzimy Silnik. Rozmawiasz bezpośrednio z człowiekiem, nie przez formularz. Każdy gabinet dostaje własny system, nie szablon. 20 lat w IT to wiarygodność — ale sedno w tym, że prowadzimy, a nie sprzedajemy stronę.
Umów spokojną, bezpłatną rozmowę
15 minut. Policzymy razem Twoje puste okienka — zobaczysz, ile realnie odzyskasz. Bez zobowiązań.
Zadzwoń — 792 023 811