/* ============ Fonts ============ */
@font-face{font-family:'General Sans';src:url('fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-600.woff2') format('woff2');font-weight:600;font-display:swap}
/* ============ Tokens ============ */
:root{
--cream:#FFFFFF;
--panel:#F4F4F2;
--card:#FFFFFF;
--ink:#152219;
--muted:#54635A;
--forest:#1E4A38;
--forest-deep:#143427;
--mint:#DFF2E3;
--mint-line:#BCE0C6;
--line:rgba(21,34,25,.12);
--sky:#BFE0F8;
--lav:#D9CBF2;
--peach:#FFD9C0;
--leaf:#C7ECD2;
--radius-xl:40px;
--radius-lg:28px;
--radius-md:20px;
--shadow-soft:0 24px 60px rgba(21,34,25,.10);
--shadow-card:0 10px 30px rgba(21,34,25,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
font-family:'Switzer',system-ui,sans-serif;
overflow-x:clip;
background:var(--cream);
color:var(--ink);
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
/* height:auto jest tu OBOWIAZKOWE, nie kosmetyczne. Kazde ![]()
na landingu ma
atrybuty width/height (slusznie: rezerwuja miejsce i nie skacze uklad). Te
atrybuty dzialaja jak style prezentacyjne, wiec bez height:auto przegladarka
trzyma wysokosc z atrybutu, a szerokosc zwezaja reguly CSS. Zdjecie hero
1280x1024 renderowalo sie jako 460x1024, czyli bylo sciśniete do 36 procent
szerokosci i rozciagniete. Elementy, ktore chca wlasnej wysokosci, ustawiaja
ja jawnie w CSS razem z object-fit i wygrywaja specyficznoscia. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:6px}
.skip-link{
position:absolute;left:16px;top:-60px;z-index:100;
background:var(--forest);color:#fff;padding:10px 18px;border-radius:999px;
text-decoration:none;font-weight:500;transition:top .2s;
}
.skip-link:focus{top:12px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
section{padding-block:clamp(72px,9vw,124px)}
/* ============ Typography ============ */
h1,h2,h3{font-family:'General Sans',sans-serif;color:var(--ink)}
h1{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:600;line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(2rem,4.2vw,3.35rem);font-weight:600;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
h3{font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
.kicker{
display:inline-flex;align-items:center;gap:8px;
font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--forest);margin-bottom:18px;
}
.kicker::before{content:"";width:22px;height:1.5px;background:var(--forest);opacity:.5}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:56ch}
.center{text-align:center}
.center .lead{margin-inline:auto}
.center .kicker::before{display:none}
/* ============ Buttons ============ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
height:52px;padding:0 28px;border-radius:999px;border:none;cursor:pointer;
font-family:'Switzer',sans-serif;font-size:1rem;font-weight:500;text-decoration:none;
white-space:nowrap;
transition:background-color .2s,transform .2s,box-shadow .2s;
}
.btn-primary{background:var(--forest);color:#fff}
.btn-primary:hover{background:var(--forest-deep);transform:translateY(-1px)}
.btn-glow{position:relative;box-shadow:0 0 0 3px rgba(191,224,248,.0)}
@property --ga{syntax:'';initial-value:140deg;inherits:false}
.btn-glow::after{
content:"";position:absolute;inset:-5px;border-radius:999px;z-index:-1;
background:conic-gradient(from var(--ga),var(--sky),var(--leaf),var(--peach),var(--lav),var(--sky));
filter:blur(7px);opacity:.85;
}
.btn-secondary{background:var(--mint);color:var(--forest-deep)}
.btn-secondary:hover{background:#D2ECD8}
.btn-ghost{background:transparent;color:var(--ink);padding:0 18px}
.btn-ghost:hover{background:rgba(21,34,25,.06)}
.btn-light{background:#fff;color:var(--forest-deep)}
.btn-light:hover{background:var(--mint)}
.arrow-link{
display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--forest-deep);
text-decoration:none;border-bottom:1px solid transparent;
}
.arrow-link:hover{border-color:var(--forest-deep)}
.arrow-link svg{transition:transform .2s}
.arrow-link:hover svg{transform:translateX(4px)}
/* ============ Announcement bar ============ */
.announce{
background:var(--mint);border-bottom:1px solid var(--mint-line);
padding:10px 24px;text-align:center;font-size:.92rem;
}
.announce a{color:var(--forest-deep);font-weight:500}
.announce .tag{
display:inline-block;background:#fff;color:var(--forest);border:1px solid var(--mint-line);
border-radius:999px;padding:1px 10px;font-size:.72rem;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;margin-right:10px;vertical-align:1px;
}
/* ============ Header ============ */
.site-header{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s;
}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 24px rgba(21,34,25,.06)}
.nav-row{display:flex;align-items:center;gap:32px;height:76px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:34px;height:34px;border-radius:10px}
.brand span{font-family:'General Sans',sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
.main-nav{margin-inline:auto}
.main-nav ul{display:flex;gap:6px;list-style:none}
.main-nav a{
display:block;padding:9px 15px;border-radius:999px;text-decoration:none;
font-size:.98rem;font-weight:500;color:var(--ink);
}
.main-nav a:hover{background:rgba(21,34,25,.06)}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-cta .btn{height:44px;padding:0 22px;font-size:.95rem}
.menu-toggle{
display:none;background:none;border:1px solid var(--line);border-radius:12px;
width:44px;height:44px;cursor:pointer;color:var(--ink);
align-items:center;justify-content:center;
}
/* Prog nawigacji jest WYZSZY niz prog reszty ukladu i to jest swiadome.
Siatki strony (hero, kafle, stopka) lamia sie na 920 px i tam jest im dobrze.
Pasek z pelnymi etykietami potrzebuje jednak 992 px, wiec miedzy 921 a 999 px
uklad byl juz desktopowy, a menu sie nie miescilo. Do dzis maskowalo to
lamanie etykiet w srodku wyrazu; po jego zabraniu wychodzil poziomy scroll.
Nawigacja przechodzi wiec na hamburgera do 999 px, niezaleznie od siatek. */
@media (max-width:999px){
.main-nav{
display:none;position:absolute;top:76px;left:0;right:0;margin:0;
background:var(--cream);border-bottom:1px solid var(--line);padding:12px 24px 20px;
}
.main-nav.open{display:block}
.main-nav ul{flex-direction:column;gap:2px}
.menu-toggle{display:inline-flex}
.nav-cta .btn-ghost{display:none}
}
/* ============ Hero ============ */
.hero{padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}}
.hero .lead{margin-top:26px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-note{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem;color:var(--muted);list-style:none}
.hero-note li{display:inline-flex;align-items:center;gap:8px}
.hero-note svg{color:var(--forest)}
.hero-visual{
position:relative;border-radius:var(--radius-xl);
padding:clamp(18px,2.6vw,34px);
}
.hv-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0}
.hv-clip::before{
content:"";position:absolute;top:0;bottom:0;left:0;width:200%;
background:linear-gradient(90deg,#BFE0F8,#C7ECD2 14%,#F6ECC8 30%,#F5CFE4 46%,#CFC9F2 60%,#F5CFE4 74%,#F6ECC8 86%,#C7ECD2 94%,#BFE0F8);
background-size:50% 100%;background-repeat:repeat-x;
animation:heroslide 16s linear infinite;
will-change:transform;
}
.hero-visual::before{
content:"";position:absolute;inset:-8px;z-index:-1;
border-radius:calc(var(--radius-xl) + 8px);
background:linear-gradient(90deg,#BFE0F8,#C7ECD2 14%,#F6ECC8 30%,#F5CFE4 46%,#CFC9F2 60%,#F5CFE4 74%,#F6ECC8 86%,#C7ECD2 94%,#BFE0F8);
background-size:100% 100%;
filter:blur(22px);opacity:.5;transition:opacity .4s;
}
.hero-visual:hover::before{opacity:.85}
.hero-shot{
position:relative;z-index:1;
width:100%;display:block;border-radius:18px;box-shadow:0 28px 60px rgba(21,34,25,.20);
transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.hero-visual:hover .hero-shot{transform:translateY(-6px)}
@keyframes heroslide{to{transform:translateX(-50%)}}
.hero-card{
position:relative;border-radius:var(--radius-lg);overflow:hidden;
border:4px solid #fff;box-shadow:var(--shadow-card);
}
.hero-card img{width:100%;height:clamp(360px,44vw,520px);object-fit:cover}
.hero-card .veil{
position:absolute;inset:0;
background:
radial-gradient(80% 65% at 50% 42%,rgba(255,255,255,.24),transparent 70%),
linear-gradient(145deg,rgba(191,224,248,.55),rgba(217,203,242,.38) 34%,rgba(255,217,192,.34) 66%,rgba(199,236,210,.5));
}
.hero-card .caption{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:14px;text-align:center;color:#fff;
}
.hero-card .caption strong{
font-family:'General Sans',sans-serif;font-size:clamp(1.8rem,3.4vw,2.7rem);
font-weight:600;letter-spacing:-.02em;text-shadow:0 3px 24px rgba(21,34,25,.45);
}
.hero-card .play{
display:inline-flex;align-items:center;gap:9px;
background:rgba(255,255,255,.92);color:var(--forest-deep);
border-radius:999px;padding:9px 18px;font-size:.9rem;font-weight:600;text-decoration:none;
}
.hero-card .play:hover{background:#fff}
/* ============ Logo marquee ============ */
.logos{padding-block:8px 64px}
.logos p{
text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted);margin-bottom:26px;
}
.marquee{overflow:hidden;position:relative;
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:64px;width:max-content;animation:scroll 36s linear infinite;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
/* aria-hidden siedzi na duplikatach logotypow, nie na torze: przy jednym
torze stara regula nie trafiala w nic i po wylaczeniu animacji kazda marka
pokazywala sie dwa razy. */
.marquee-track img[aria-hidden]{display:none}
}
.marquee-track img{height:30px;width:auto;filter:grayscale(1) opacity(.55);transition:filter .2s}
.marquee-track img:hover{filter:none}
/* ============ Platform bento ============ */
.platform-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,52px)}
@media (max-width:920px){.platform-head{grid-template-columns:1fr}}
.pill-kicker{
display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:var(--forest-deep);
border-radius:999px;padding:9px 18px;font-size:.88rem;font-weight:600;text-decoration:none;
margin-bottom:22px;transition:background .2s;
}
.pill-kicker:hover{background:#D2ECD8}
.platform-intro p{margin-bottom:16px}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{
position:relative;display:flex;flex-direction:column;border-radius:var(--radius-lg);
padding:30px 30px 0;overflow:hidden;
transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.tile:hover{transform:translateY(-5px);box-shadow:0 28px 56px rgba(21,34,25,.12)}
.tile:hover .shot{transform:translateY(-10px)}
.tile:hover .tile-arrow{transform:translateX(4px)}
.t-mint:hover .tile-arrow{background:#8FD3B8}
.t-lime:hover .tile-arrow{background:#CBD46E}
.t-pink:hover .tile-arrow{background:#EC93C4}
.t-peach:hover .tile-arrow{background:#F5B75F}
.t-green:hover .tile-arrow{background:#97D67B}
.tile.span2{grid-column:span 2}
@media (max-width:1080px){.bento{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.bento{grid-template-columns:1fr}.tile.span2{grid-column:auto}}
.t-mint{background:#DCF3EA;color:#14382C}
.t-lime{background:#F0F3DC;color:#55621B}
.t-pink{background:#FBE3F1;color:#A62368}
.t-peach{background:#FFEEDA;color:#A0500F}
.t-green{background:#E1F4DB;color:#27703A}
.tile-top{display:flex;align-items:center;gap:12px}
.tile-top h3{display:flex;align-items:center;gap:10px;font-size:clamp(1.25rem,1.9vw,1.55rem);color:inherit}
.tile-arrow{
margin-left:auto;flex:none;width:42px;height:42px;border-radius:999px;
display:inline-flex;align-items:center;justify-content:center;color:inherit;
transition:transform .3s cubic-bezier(.22,.61,.36,1),background-color .3s;
}
.tile-arrow:hover{transform:translateX(3px)}
.t-mint .tile-arrow{background:#B9E7D4}
.t-lime .tile-arrow{background:#DFE6A0}
.t-pink .tile-arrow{background:#F6BEDD}
.t-peach .tile-arrow{background:#FBD49E}
.t-green .tile-arrow{background:#BEE8AB}
.tile-desc{margin-top:14px;margin-bottom:24px;font-size:1rem;line-height:1.5;color:inherit;max-width:64ch}
.tile-desc strong{font-weight:600}
.tile-desc span{opacity:.85}
.shot{
margin-top:auto;background:#fff;border-radius:18px 18px 0 0;
border:1px solid rgba(21,34,25,.05);border-bottom:none;
box-shadow:0 1px 2px rgba(21,34,25,.05),0 18px 40px rgba(21,34,25,.10);
padding:20px 20px 18px;color:var(--ink);
font-size:.82rem;line-height:1.4;
transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.shot h4{font-family:'General Sans',sans-serif;font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.shot-sub{color:var(--muted);font-size:.75rem;margin-top:2px}
.duo{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
@media (max-width:680px){.duo{grid-template-columns:1fr}}
.fpills{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.fpill{border:none;background:#F3F3F1;border-radius:999px;padding:5px 12px;font-weight:500;color:#5C5C56}
.fpill.on{background:var(--forest);border-color:var(--forest);color:#fff;font-weight:600}
.srow{display:flex;align-items:center;gap:11px;border:1px solid rgba(21,34,25,.07);border-radius:13px;padding:10px 12px;margin-top:9px;background:#fff;box-shadow:0 1px 2px rgba(21,34,25,.04)}
.srow img{width:38px;height:38px;border-radius:10px;object-fit:cover}
.srow .grow{flex:1;min-width:0}
.srow .nm{font-weight:600}
.srow .sub{color:var(--muted);font-size:.75rem}
.dot{flex:none;width:8px;height:8px;border-radius:999px}
.dot-amber{background:#D98A18}
.dot-green{background:#3E9E5B}
.dot-blue{background:#4A90D9}
.mini-btn{flex:none;background:var(--forest);color:#fff;border-radius:999px;padding:7px 15px;font-weight:600;font-size:.78rem;box-shadow:0 2px 6px rgba(20,52,39,.25)}
.side-panel{border:1px solid rgba(21,34,25,.07);border-radius:14px;padding:14px;background:#FDFDFC}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(21,34,25,.06)}
.kv .v{font-weight:600;display:inline-flex;gap:8px;align-items:center}
.total{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-weight:600}
.toggle{flex:none;width:38px;height:22px;border-radius:999px;background:var(--forest);position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.toggle::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.toggle.off{background:#D8D8D3}
.toggle.off::after{right:auto;left:3px}
.tips{display:flex;gap:6px;margin-top:10px}
.tip{flex:1;text-align:center;border:1px solid var(--line);border-radius:999px;padding:6px 0;font-weight:600;color:var(--muted)}
.tip.on{background:var(--forest);border-color:var(--forest);color:#fff}
.pay-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.pay-row img{height:15px;width:auto}
.chip-ai{
display:inline-flex;align-items:center;gap:6px;background:#F5EEFC;border:1px solid #E2D3F5;
color:#6D3FA8;border-radius:999px;padding:4px 11px;font-size:.68rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;
}
.chip-up{background:#DFF2E3;color:#1D6B33;border-radius:7px;padding:2px 7px;font-size:.72rem;font-weight:700}
.slabel{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.band{margin-top:8px;position:relative;height:10px;border-radius:999px;background:linear-gradient(90deg,#E4F4DC,#5FB44A)}
.band::after{
content:"";position:absolute;top:50%;left:68%;width:18px;height:18px;border-radius:999px;
background:#fff;border:3px solid var(--forest);transform:translateY(-50%);
}
.shot-note{margin-top:10px;font-size:.75rem;color:var(--muted)}
/* Lattice-style mock devices */
.skel{display:inline-block;height:8px;border-radius:4px;background:#F0F0EE;vertical-align:middle}
.av{width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:#fff;flex:none;letter-spacing:.02em}
.av-a{background:#6FA983}.av-b{background:#C98A5B}.av-c{background:#8E7BB5}.av-plus{background:#EEEEEC;color:var(--muted)}
img.av{object-fit:cover;background:#EEEEEC}
.av-stack{display:inline-flex;align-items:center}
.av-stack .av{margin-left:-9px;border:2px solid #fff}
.av-stack .av:first-child{margin-left:0}
.chart-chip{width:28px;height:28px;border-radius:9px;background:#DFF2E3;color:#1D6B33;display:inline-flex;align-items:center;justify-content:center;flex:none}
.child{margin-left:24px;position:relative}
.child::before{content:"";position:absolute;left:-15px;top:-12px;height:32px;width:12px;border-left:1.5px solid #E2E2DE;border-bottom:1.5px solid #E2E2DE;border-bottom-left-radius:9px}
.shot-stack{box-shadow:14px 14px 0 -6px rgba(255,255,255,.65),0 14px 34px rgba(21,34,25,.12)}
.q-label{font-size:.68rem;color:var(--muted);text-align:center}
.shot .qh{font-family:'General Sans',sans-serif;font-size:.98rem;font-weight:600;text-align:center;margin-top:6px}
.star-row{display:flex;gap:6px;justify-content:center;margin-top:12px}
.star-pick{width:44px;height:40px;border:none;background:#F5F5F3;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:#E5B33C}
.star-pick.on{background:var(--forest);color:#fff;box-shadow:0 6px 14px rgba(30,74,56,.35)}
.textarea-skel{border:1px solid rgba(21,34,25,.1);background:#FBFBFA;border-radius:10px;padding:11px;margin-top:12px;display:grid;gap:7px}
.row-end{display:flex;justify-content:flex-end;margin-top:10px}
.mini-google{display:flex;align-items:center;gap:9px;border:1px solid rgba(21,34,25,.07);background:#FBFBFA;border-radius:12px;padding:8px 12px;margin-top:12px;font-size:.78rem}
.g-stars{color:#E9A23B;letter-spacing:2px}
.add-link{margin-left:auto;font-size:.73rem;font-weight:600;color:var(--forest-deep);background:#F3F3F1;border-radius:999px;padding:5px 12px}
.shot-h{display:flex;align-items:center;gap:8px}
.kv .k{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.soon{background:rgba(255,255,255,.7);border:1px solid rgba(21,34,25,.18);color:inherit;border-radius:999px;padding:3px 11px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;flex:none}
.rec{display:flex;align-items:center;gap:10px;margin-top:10px}
.play-ic{width:32px;height:32px;border-radius:999px;background:var(--forest);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:0 2px 6px rgba(20,52,39,.3)}
.rec-t{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.wave{display:flex;align-items:flex-end;gap:3px;height:30px;flex:1}
.wave i{flex:1;border-radius:2px;background:#E4E4E0;height:28%}
.wave i.p{background:#4FA341}
.drag{flex:none;color:#D2D2CC}
.hlbox{border:1.5px solid #F4CD9C;background:#FFFAF2;border-radius:15px;padding:3px 3px 10px;margin-top:9px}
.hlbox .srow{border:none;box-shadow:none;background:transparent;margin-top:0}
.hlbox .chip-ai{margin-left:12px}
.oitem{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid rgba(21,34,25,.06)}
.oitem img{width:28px;height:28px;border-radius:8px;object-fit:cover}
.oitem .v{margin-left:auto;font-weight:600}
.spark{display:flex;align-items:flex-end;gap:5px;height:36px;margin-top:8px}
.spark i{flex:1;border-radius:3px 3px 1px 1px;background:#E6EBC8}
.spark i.hi{background:var(--forest)}
.wave i:nth-child(2n){height:55%}
.wave i:nth-child(3n){height:78%}
.wave i:nth-child(5n){height:40%}
.wave i:nth-child(7n){height:92%}
.wave i:nth-child(11n){height:64%}
/* ============ AI section ============ */
.ai-panel{position:relative;border-radius:var(--radius-xl);overflow:hidden;padding:clamp(28px,5vw,64px)}
.ai-panel::before{
content:"";position:absolute;inset:-35%;
background:
radial-gradient(44% 44% at 22% 26%,#C7ECD2 0%,transparent 72%),
radial-gradient(42% 46% at 78% 22%,#BFE0F8 0%,transparent 72%),
radial-gradient(48% 48% at 74% 78%,#FFD9C0 0%,transparent 72%),
radial-gradient(44% 44% at 26% 82%,#D9CBF2 0%,transparent 72%),
#EFF4EE;
animation:drift 22s ease-in-out infinite alternate;
}
.ai-panel>*{position:relative}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
@media (max-width:920px){.split{grid-template-columns:1fr}}
.ai .lead{margin-top:20px}
.ai-points{margin:28px 0 0;list-style:none;display:grid;gap:14px;max-width:52ch}
.ai-points li{display:flex;gap:12px;color:var(--muted)}
.ai-points svg{flex:none;margin-top:4px;color:var(--forest)}
.ai-visual{position:relative}
.ai-frame{border-radius:var(--radius-lg)}
.chat{background:#fff;border-radius:18px;padding:22px;display:grid;gap:14px;box-shadow:0 24px 50px rgba(21,34,25,.16)}
.chat-row{display:flex;gap:12px;align-items:flex-start}
.chat-ico{
flex:none;width:38px;height:38px;border-radius:12px;background:var(--mint);
display:flex;align-items:center;justify-content:center;color:var(--forest);
}
.chat-bubble{background:#F6F6F4;border:1px solid var(--line);border-radius:14px;padding:12px 15px;font-size:.94rem}
.chat-bubble strong{font-weight:600}
.chat-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.chat-item img{width:46px;height:46px;border-radius:10px;object-fit:cover}
.chat-item .nm{font-weight:600;font-size:.93rem}
.chat-item .pr{font-size:.86rem;color:var(--muted)}
.chat-item .add{
margin-left:auto;background:var(--forest);color:#fff;border:none;border-radius:999px;
padding:7px 16px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;
}
.chat-item .add:hover{background:var(--forest-deep)}
.ai-chip{
position:absolute;right:-12px;bottom:-44px;background:#fff;border:1px solid var(--line);
border-radius:16px;padding:12px 18px;box-shadow:var(--shadow-card);text-align:center;
}
.ai-chip strong{font-family:'General Sans',sans-serif;font-size:1.5rem;color:var(--forest)}
.ai-chip span{display:block;font-size:.78rem;color:var(--muted)}
@media (max-width:920px){.ai-chip{position:static;margin-top:14px;display:inline-block}}
/* ============ Moments (przy stoliku) ============ */
.moment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1080px){.moment-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.moment-grid{grid-template-columns:1fr}}
.moment{
background:var(--card);border:1px solid rgba(21,34,25,.06);border-radius:22px;
padding:10px 10px 22px;display:flex;flex-direction:column;
box-shadow:0 1px 2px rgba(21,34,25,.04);
transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.moment:hover{transform:translateY(-5px);box-shadow:0 24px 48px rgba(21,34,25,.10)}
.moment-art{border-radius:15px;overflow:hidden;aspect-ratio:1.04}
.moment-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.moment:hover .moment-art img{transform:scale(1.05)}
.moment-body{padding:18px 12px 0}
.moment-body h3{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:1.08rem}
.m-arrow{
flex:none;width:34px;height:34px;border-radius:999px;background:#F1F1EF;color:var(--ink);
display:inline-flex;align-items:center;justify-content:center;
transition:background-color .25s,color .25s,transform .3s cubic-bezier(.22,.61,.36,1);
}
.m-arrow.accent{background:var(--forest);color:#fff}
.moment:hover .m-arrow{background:var(--forest);color:#fff;transform:translateX(3px)}
.moment-body p{font-size:.93rem;color:var(--muted);margin-top:9px}
/* ============ Stories (karuzela a la Lattice) ============ */
.stories-head{margin-bottom:clamp(28px,4vw,44px)}
.carousel{
display:grid;grid-auto-flow:column;
grid-auto-columns:min(880px,88vw);gap:20px;
width:100vw;margin-left:calc(50% - 50vw);
padding:8px calc((100vw - min(880px,88vw))/2);
overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}
.tcard{
scroll-snap-align:center;border-radius:26px;
padding:clamp(24px,3.4vw,44px);
display:flex;flex-direction:column;gap:22px;
}
.tc-mint{background:#DCF2EE}
.tc-lav{background:#E6E3F6}
.twho{display:flex;align-items:center;gap:16px}
.tava{position:relative;flex:none}
.tava img,.tini{width:64px;height:64px;border-radius:20px;object-fit:cover;display:block}
.tini{display:flex;align-items:center;justify-content:center;font-family:'General Sans',sans-serif;font-weight:600;font-size:1.25rem;color:#fff}
.tini-a{background:#8E7BB5}
.tini-b{background:#C98A5B}
.tbadge{
position:absolute;right:-7px;bottom:-7px;width:27px;height:27px;border-radius:999px;
border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;
font-size:.5rem;font-weight:700;color:#fff;letter-spacing:.02em;
}
.tb-green{background:var(--forest)}
.tb-pink{background:#D64B9A}
.tb-blue{background:#4A90D9}
.tb-amber{background:#D98A18}
.twho strong{display:block;font-size:1.02rem}
.twho .sub{font-size:.85rem;color:var(--muted)}
.tbody{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(20px,3vw,40px)}
.tbody blockquote{font-size:1.06rem;line-height:1.65;color:var(--ink)}
.tstat{
border-left:1px solid rgba(21,34,25,.12);padding-left:clamp(20px,3vw,40px);
display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
.tstat strong{font-family:'General Sans',sans-serif;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:600;line-height:1;letter-spacing:-.02em}
.tstat .cap{font-size:.92rem;color:var(--muted)}
.tread{
display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;
padding:11px 20px;font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:none;
margin-top:12px;box-shadow:0 2px 8px rgba(21,34,25,.08);
transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s;
}
.tread:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(21,34,25,.12)}
.tread svg{transition:transform .2s}
.tread:hover svg{transform:translateX(3px)}
@media (max-width:760px){
.tbody{grid-template-columns:1fr}
.tstat{border-left:none;padding-left:0;border-top:1px solid rgba(21,34,25,.12);padding-top:18px}
}
.tdots{display:flex;justify-content:center;gap:8px;margin-top:28px}
/* Kolor kropki ustawiamy wylacznie longhandem background-color. Skrot
"background" zerowalby background-clip do border-box, a na telefonie kropka
stoi na 44 px paddingu i tlo rozlaloby sie na cale pole dotyku. */
.tdot{
width:8px;height:8px;border-radius:999px;border:none;background-color:#DBDBD6;cursor:pointer;padding:0;
transition:width .3s cubic-bezier(.22,.61,.36,1),min-width .3s cubic-bezier(.22,.61,.36,1),background-color .3s;
}
.tdot:hover{background-color:#C4C4BE}
.tdot.on{width:34px;background-color:#9CD9A8}
@media (prefers-reduced-motion:reduce){.tdot{transition:none}}
/* ============ Integrations ============ */
.integ-panel{position:relative;border-radius:var(--radius-xl);overflow:hidden;padding:clamp(36px,6vw,72px) clamp(20px,4vw,48px)}
.integ-panel::before{
content:"";position:absolute;inset:-35%;
background:
radial-gradient(42% 42% at 25% 30%,#BFE0F8 0%,transparent 72%),
radial-gradient(40% 44% at 76% 24%,#FFD9C0 0%,transparent 72%),
radial-gradient(48% 48% at 72% 76%,#D9CBF2 0%,transparent 72%),
radial-gradient(44% 44% at 28% 80%,#C7ECD2 0%,transparent 72%),
#EAF2EC;
animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{
0%{transform:rotate(0deg) scale(1.02)}
100%{transform:rotate(10deg) scale(1.2)}
}
.integ-panel>*{position:relative}
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:740px;margin-inline:auto;list-style:none}
@media (max-width:560px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
.logo-tile{
background:rgba(255,255,255,.93);border-radius:var(--radius-md);
height:96px;display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 26px rgba(21,34,25,.10);
animation:bob 6s ease-in-out infinite;
}
.logo-tile:nth-child(2){animation-delay:-1s}
.logo-tile:nth-child(3){animation-delay:-2s}
.logo-tile:nth-child(4){animation-delay:-3s}
.logo-tile:nth-child(5){animation-delay:-4s}
.logo-tile:nth-child(6){animation-delay:-5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.logo-tile img{max-height:34px;max-width:70%;width:auto;object-fit:contain}
/* ============ Resources ============ */
.h2-s{font-size:clamp(1.6rem,2.6vw,2.05rem)}
.res-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.res-head .pill-kicker{margin-bottom:0}
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(24px,3vw,40px)}
@media (max-width:1080px){.res-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.res-grid{grid-template-columns:1fr}}
.res-card{
background:#fff;border:1px solid rgba(21,34,25,.08);border-radius:17px;padding:6px;
text-decoration:none;display:flex;flex-direction:column;
transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.res-card:hover{
transform:perspective(1200px) rotateX(1.5deg) translateY(-4px);
box-shadow:0 24px 48px rgba(21,34,25,.12);
}
.res-art{display:block;aspect-ratio:2/1;border-radius:12px;overflow:hidden}
.res-art img{width:100%;height:100%;object-fit:cover;display:block}
.res-card>div{padding:10px 12px 12px}
.res-card h3{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:1.04rem}
.res-card h3 svg{flex:none;color:var(--forest);transition:transform .25s}
.res-card:hover h3 svg{transform:translateX(3px)}
.res-card p{font-size:.9rem;color:var(--muted);margin-top:7px}
/* ============ Rating + CTA ============ */
.finale{padding-bottom:clamp(80px,10vw,140px)}
.rating{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:clamp(48px,6vw,72px)}
.stars{display:flex;gap:4px;color:#E9A23B}
.rating p{font-size:.95rem;color:var(--muted)}
.cta-panel{
position:relative;overflow:hidden;text-align:center;
background:var(--forest);border-radius:var(--radius-xl);
padding:clamp(56px,8vw,104px) 24px;color:#fff;
}
.cta-panel::before{
content:"";position:absolute;inset:-40%;
background:
radial-gradient(40% 45% at 18% 20%,rgba(191,224,248,.35),transparent 70%),
radial-gradient(38% 42% at 85% 25%,rgba(255,217,192,.28),transparent 70%),
radial-gradient(46% 50% at 55% 95%,rgba(199,236,210,.3),transparent 70%);
}
.cta-panel>*{position:relative}
.cta-panel h2{color:#fff;font-size:clamp(2.2rem,5vw,4rem)}
.cta-panel p{color:rgba(255,255,255,.82);font-size:1.15rem;margin:18px auto 34px;max-width:44ch}
.cta-panel .hero-ctas{justify-content:center;margin-top:0}
/* ============ Footer ============ */
.site-footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 32px}
.footer-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:32px}
@media (max-width:920px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-brand p{font-size:.92rem;color:var(--muted);margin-top:14px;max-width:30ch}
.footer-col h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.footer-col ul{list-style:none;margin-top:16px;display:grid;gap:10px}
.footer-col a{text-decoration:none;font-size:.95rem;color:var(--ink)}
.footer-col a:hover{color:var(--forest);text-decoration:underline}
.footer-bottom{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
border-top:1px solid var(--line);margin-top:clamp(36px,5vw,56px);padding-top:24px;
font-size:.88rem;color:var(--muted);
}
.footer-bottom a{color:var(--muted)}
/* ============ Reveal ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.tile.reveal,.moment.reveal{
transition:opacity .6s ease,transform .38s cubic-bezier(.22,.61,.36,1),box-shadow .38s cubic-bezier(.22,.61,.36,1);
}
.moment:hover h3{color:var(--forest-deep)}
@media (prefers-reduced-motion:reduce){
.reveal,.tile.reveal,.moment.reveal{opacity:1;transform:none;transition:none}
.integ-panel::before,.ai-panel::before,.hv-clip::before,.logo-tile{animation:none}
.hero-visual:hover .hero-shot{transform:none}
.moment:hover,.moment:hover .moment-art img,.moment:hover .m-arrow,.res-card:hover,.tile-arrow:hover,
.tile:hover,.tile:hover .shot,.tile:hover .tile-arrow{transform:none}
}
/* ============ Navbar dropdown ============ */
[id]{scroll-margin-top:96px}
.has-drop{position:relative}
.nav-drop-btn{
display:flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;border:none;
background:none;font:inherit;font-size:.98rem;font-weight:500;color:var(--ink);cursor:pointer;
/* Etykieta w pasku nigdy nie lamie sie w srodku. Bez tego "Dlaczego Lokamo"
rozpadalo sie na dwie linie na KAZDEJ szerokosci desktopu, bo przycisk
jest elementem flex i kurczyl sie do najwezszego slowa, zamiast wymusic
szerokosc na rodzicu. Wysokosc paska rosla wtedy o 25 px i naglowek
wygladal na zepsuty. */
white-space:nowrap;
}
.nav-drop-btn:hover{background:rgba(21,34,25,.06)}
/* Rodzenstwo w pasku tez nie kurczy sie ponizej wlasnej tresci: inaczej
nowrap tylko przenosi problem na sasiada, ktory zaczyna wystawac. */
.has-drop,.main-nav>ul>li{flex:0 0 auto}
.nav-drop-btn svg{transition:transform .2s}
.has-drop.open .nav-drop-btn svg{transform:rotate(180deg)}
.drop-panel{
position:absolute;top:calc(100% + 10px);left:0;min-width:340px;z-index:60;
background:#fff;border:1px solid rgba(21,34,25,.08);border-radius:18px;
box-shadow:0 24px 60px rgba(21,34,25,.14);padding:10px;display:none;
}
.has-drop.open .drop-panel{display:block}
@media (min-width:1000px){
.has-drop:focus-within .drop-panel{display:block}
}
.drop-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.main-nav .drop-item,.drop-item{display:flex;gap:14px;align-items:center;padding:12px;border-radius:14px;text-decoration:none}
.main-nav .drop-item:hover,.drop-item:hover{background:#F4F4F2}
.drop-ico{
flex:none;width:44px;height:44px;border-radius:13px;background:var(--mint);color:var(--forest);
display:inline-flex;align-items:center;justify-content:center;
}
.drop-ico svg{width:21px;height:21px}
.drop-item strong{display:block;font-size:1.04rem;font-weight:600;line-height:1.25;color:var(--ink)}
.drop-item small{display:block;font-size:.88rem;line-height:1.35;color:var(--muted);margin-top:2px}
.soon-mini{
display:inline-block;margin-left:8px;background:var(--mint);color:var(--forest-deep);
border-radius:999px;padding:2px 9px;font-size:.64rem;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;vertical-align:2px;
}
.main-nav a[aria-current="page"]{background:rgba(21,34,25,.07)}
@media (max-width:999px){
/* Accordion, not a wall: flattening every panel open made the phone
menu 1925px tall. Panels stay closed until their row is tapped
(the .has-drop.open rule above does the opening). */
.has-drop .drop-panel{position:static;box-shadow:none;border:none;padding:0 0 8px 8px;min-width:0}
.nav-drop-btn{width:100%;justify-content:space-between;min-height:44px}
.nav-drop-btn svg{display:inline-block;transition:transform .2s}
.has-drop.open .nav-drop-btn svg{transform:rotate(180deg)}
/* Titles are enough on a phone; the descriptions belong to the desktop panel. */
.main-nav .drop-item{padding:8px 12px;gap:10px}
.main-nav .drop-item small{display:none}
.main-nav .drop-item strong{font-size:.98rem}
.drop-ico{width:32px;height:32px;border-radius:10px}
.drop-ico svg{width:17px;height:17px}
.drop-label{margin-top:10px}
/* A long menu must scroll inside itself, not push the page.
Odejmujemy dokladnie wysokosc naglowka, pod ktorym panel sie zaczyna:
do 920 px jest to 76 px (na 60 px panel wychodzil 16 px pod ekran). */
.main-nav.open{max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
/* The panels carry per-menu column ratios as inline styles, which outrank
a plain rule; on a phone every panel is a single column. */
.drop-cols{grid-template-columns:1fr!important;gap:0!important}
}
/* ============ Podstrony ============ */
.page-hero{padding:clamp(48px,7vw,88px) 0 clamp(20px,3vw,40px)}
.page-hero h1{font-size:clamp(2.5rem,5.4vw,4.1rem)}
.page-hero .lead{margin-top:20px}
.page-hero.center h1{max-width:20ch;margin-inline:auto}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(28px,4vw,48px)}
@media (max-width:920px){.plans{grid-template-columns:1fr;max-width:480px;margin-inline:auto}}
.plan{
background:#fff;border:1px solid rgba(21,34,25,.1);border-radius:24px;
padding:30px;display:flex;flex-direction:column;gap:18px;position:relative;
transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.plan:hover{transform:translateY(-5px);box-shadow:0 24px 48px rgba(21,34,25,.10)}
.plan.hot{border:2px solid var(--forest);box-shadow:0 20px 44px rgba(21,34,25,.10)}
.hot-badge{
position:absolute;top:-13px;left:50%;transform:translateX(-50%);
background:var(--forest);color:#fff;border-radius:999px;padding:4px 14px;
font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.plan h3{font-size:1.2rem}
.plan .pdesc{font-size:.92rem;color:var(--muted);margin-top:-10px}
.plan .price{font-family:'General Sans',sans-serif;font-size:2.3rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.plan .price small{display:block;font-family:'Switzer',sans-serif;font-size:.9rem;color:var(--muted);font-weight:400;letter-spacing:0;margin-top:4px}
.plan ul{list-style:none;display:grid;gap:10px;font-size:.94rem;color:var(--muted)}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li svg{flex:none;margin-top:4px;color:var(--forest)}
.plan .btn{margin-top:auto;justify-content:center}
.plans-note{text-align:center;font-size:.85rem;color:var(--muted);margin-top:18px}
.faq{max-width:760px;margin:clamp(40px,6vw,72px) auto 0}
.faq h2{text-align:center;margin-bottom:clamp(20px,3vw,36px)}
.faq details{border-bottom:1px solid rgba(21,34,25,.1)}
.faq summary{
cursor:pointer;font-weight:600;padding:18px 0;list-style:none;
display:flex;justify-content:space-between;gap:12px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--forest-deep)}
.faq .fx{transition:transform .25s;flex:none;color:var(--forest)}
.faq details[open] .fx{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 18px;max-width:62ch}
.cmp-wrap{overflow-x:auto;margin-top:clamp(28px,4vw,48px)}
.cmp{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid rgba(21,34,25,.1);border-radius:20px;overflow:hidden}
.cmp th,.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid rgba(21,34,25,.07);font-size:.95rem}
.cmp thead th{background:#F4F4F2;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid rgba(21,34,25,.1)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp tbody th{font-weight:600;font-size:.95rem}
.cmp .yes{color:var(--forest-deep);font-weight:500}
.cmp .no{color:var(--muted)}
.cmp td svg{vertical-align:-2px;margin-right:6px}
.pillars3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,4vw,48px)}
@media (max-width:920px){.pillars3{grid-template-columns:1fr}}
.pillar3{background:#fff;border:1px solid rgba(21,34,25,.08);border-radius:22px;padding:28px}
.pillar3 .drop-ico{width:44px;height:44px;border-radius:13px;margin-bottom:16px}
.pillar3 h3{font-size:1.12rem}
.pillar3 p{font-size:.94rem;color:var(--muted);margin-top:8px}
.stats-band{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,4vw,48px)}
@media (max-width:680px){.stats-band{grid-template-columns:1fr}}
.stat-tile{background:#fff;border:1px solid rgba(21,34,25,.08);border-radius:20px;padding:28px;text-align:center}
.stat-tile strong{display:block;font-family:'General Sans',sans-serif;font-size:clamp(2rem,4vw,2.8rem);font-weight:600;letter-spacing:-.02em}
.stat-tile span{color:var(--muted);font-size:.92rem}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(28px,4vw,48px)}
@media (max-width:920px){.tgrid{grid-template-columns:1fr}}
.tgrid .tcard{scroll-snap-align:unset}
.tgrid .tbody{grid-template-columns:1fr}
.tgrid .tstat{border-left:none;padding-left:0;border-top:1px solid rgba(21,34,25,.12);padding-top:18px}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,4vw,48px)}
@media (max-width:680px){.photo-strip{grid-template-columns:1fr}}
.photo-strip img{width:100%;height:260px;object-fit:cover;border-radius:20px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(24px,3vw,40px)}
@media (max-width:920px){.demo-grid{grid-template-columns:1fr}}
.demo-points{list-style:none;display:grid;gap:14px;margin-top:26px;color:var(--muted)}
.demo-points li{display:flex;gap:12px}
.demo-points svg{flex:none;margin-top:4px;color:var(--forest)}
.demo-logos{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:34px}
.demo-logos img{height:24px;width:auto;filter:grayscale(1) opacity(.55)}
.form-card{
background:#fff;border:1px solid rgba(21,34,25,.08);border-radius:24px;
padding:clamp(24px,3vw,40px);box-shadow:0 24px 60px rgba(21,34,25,.08);
}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-size:.88rem;font-weight:600}
.field input,.field select,.field textarea{
font:inherit;padding:12px 14px;border:1px solid rgba(21,34,25,.16);border-radius:12px;background:#fff;width:100%;
}
.field textarea{min-height:96px;resize:vertical}
.form-note{font-size:.84rem;color:var(--muted);margin-top:14px;text-align:center}
/* Wynik wyslania formularza. Kolor nie jest jedynym nosnikiem informacji:
tresc komunikatu mowi to samo, a region jest aria-live (P1-08). */
.form-status{font-size:.88rem;margin-top:12px;text-align:center;min-height:1.2em;color:var(--muted)}
.form-status.is-ok{color:#1c6b43;font-weight:600}
.form-status.is-error{color:#a3282d;font-weight:600}
.field-consent{margin-top:4px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.45;color:var(--muted);cursor:pointer}
.consent input{margin-top:3px;width:16px;height:16px;flex:0 0 auto}
.consent a{color:inherit;text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ============ Mega menu ============ */
.drop-label{font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 12px 8px}
.drop-panel.mega{left:-16px;width:min(780px,calc(100vw - 48px));padding:14px}
.drop-cols{display:grid;grid-template-columns:1.15fr 1fr .95fr;gap:4px 12px}
.drop-promo{
background:
radial-gradient(120% 120% at 20% 15%,#C7ECD2 0%,transparent 60%),
radial-gradient(120% 120% at 85% 20%,#BFE0F8 0%,transparent 60%),
radial-gradient(130% 130% at 75% 90%,#FFD9C0 0%,transparent 60%),
radial-gradient(120% 120% at 15% 85%,#D9CBF2 0%,transparent 60%),
#EFF4EE;
border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px;align-self:stretch;
}
.drop-promo strong{font-size:.95rem;color:var(--ink)}
.drop-promo p{font-size:.8rem;color:#3E4C44;flex:1;line-height:1.5}
.drop-promo .arrow-link{font-size:.85rem}
@media (max-width:920px){
.drop-panel.mega{width:auto;padding:0 0 8px 8px}
.drop-cols{grid-template-columns:1fr;gap:0}
.drop-promo{display:none}
.drop-label{padding-left:0}
}
/* ============ Mega menu v2 (kolumny, dividery, featured) ============ */
.drop-cols>div{padding:0 18px}
.drop-cols>div:first-child{padding-left:4px}
.drop-cols>div+div{border-left:1px solid rgba(21,34,25,.08)}
.drop-panel .di-blue{background:#DCEFF8;color:#2A6FA8}
.drop-panel .di-green{background:var(--mint);color:var(--forest)}
.drop-panel .di-pink{background:#FBE3EF;color:#C0257A}
.drop-panel .di-lime{background:#EEF2D8;color:#6B7A1E}
.drop-panel .di-purple{background:#EFE9FA;color:#6D3FA8}
.drop-panel .di-amber{background:#FFEEDA;color:#A05010}
.drop-sub{border-left:1.5px solid #E4E4DE;margin:2px 0 8px 33px;padding-left:8px;display:grid}
.main-nav .drop-sub a{display:block;padding:7px 12px;font-size:.94rem;color:var(--ink);text-decoration:none;border-radius:9px}
.drop-sub a:hover{background:#F4F4F2}
.drop-feat{display:block;text-decoration:none;max-width:250px}
.drop-feat .fimg{position:relative;border-radius:12px;overflow:hidden}
.drop-feat img{width:100%;height:140px;object-fit:cover;display:block}
.feat-chip{
position:absolute;top:10px;left:10px;background:rgba(255,255,255,.88);color:var(--ink);
border-radius:999px;padding:3px 10px;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.drop-feat strong{display:block;margin-top:10px;font-size:.93rem;line-height:1.4;color:var(--ink)}
.drop-feat:hover strong{color:var(--forest-deep)}
.drop-promo-mini{
margin-top:10px;border-radius:12px;padding:14px;
background:
radial-gradient(120% 120% at 20% 15%,#C7ECD2 0%,transparent 60%),
radial-gradient(120% 120% at 85% 20%,#BFE0F8 0%,transparent 60%),
radial-gradient(130% 130% at 70% 95%,#FFD9C0 0%,transparent 60%),#EFF4EE;
}
.drop-promo-mini strong{font-size:.88rem;color:var(--ink)}
.drop-promo-mini p{font-size:.76rem;color:#3E4C44;margin:4px 0 10px;line-height:1.45}
.promo-mock{background:#fff;border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:8px;box-shadow:0 6px 16px rgba(21,34,25,.1)}
.promo-mock .pm-av{width:20px;height:20px;border-radius:999px;background:var(--forest);color:#fff;font-size:.55rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.promo-mock span{font-size:.74rem;font-weight:600;color:var(--ink)}
.has-drop.open .nav-drop-btn{background:rgba(21,34,25,.06)}
@media (max-width:920px){
.drop-cols>div{padding:0}
.drop-cols>div+div{border-left:none}
.drop-feat,.drop-promo-mini{display:none}
.drop-sub{margin-left:22px}
}
/* ============ Strony produktowe ============ */
.p-visual{border-radius:var(--radius-xl);padding:clamp(18px,3vw,36px);display:flex;align-items:center;justify-content:center;min-height:340px}
.p-visual img{border-radius:18px;box-shadow:0 24px 50px rgba(21,34,25,.16);max-height:460px;width:auto;max-width:100%}
.p-visual .p-ico{color:var(--forest);opacity:.85}
.frows{display:grid;gap:clamp(16px,2vw,24px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(20px,3vw,36px)}
@media (max-width:920px){.frow{grid-template-columns:1fr}}
.frow.flip .fr-vis{order:-1}
@media (max-width:920px){.frow.flip .fr-vis{order:0}}
.fr-vis{border-radius:26px;overflow:hidden}
.fr-vis img{width:100%;height:min(420px,56vw);object-fit:cover;display:block}
.fr-copy h2{font-size:clamp(1.7rem,3vw,2.35rem)}
.fr-copy p{color:var(--muted);margin-top:14px;max-width:52ch}
.fr-copy ul{list-style:none;display:grid;gap:12px;margin-top:20px;color:var(--muted)}
.fr-copy li{display:flex;gap:10px}
.fr-copy li svg{flex:none;margin-top:4px;color:var(--forest)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(22px,3vw,36px)}
@media (max-width:920px){.rel-grid{grid-template-columns:1fr}}
.rel-card{
background:#fff;border:1px solid rgba(21,34,25,.08);border-radius:18px;padding:18px;
display:flex;gap:12px;align-items:flex-start;text-decoration:none;
transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s;
}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.rel-card strong{display:block;font-size:.98rem;color:var(--ink)}
.rel-card small{font-size:.83rem;color:var(--muted)}
.quote-solo{max-width:860px;margin-inline:auto}
.anim-off,.anim-off::before,.anim-off::after,
.anim-off .logo-tile,.anim-off .hv-clip::before{animation-play-state:paused!important}
/* ============================================================
PHONES (<=640px)
The desktop scale reaches phones through clamp() floors that
were tuned for laptops: h1 stayed at 38px, sections kept 72px
of padding and flattened menu links were 19px tall. This layer
compresses the scale, tightens the rhythm and lifts every tap
target to a thumb-friendly size. Desktop is untouched.
============================================================ */
@media (max-width:640px){
html{scroll-padding-top:74px}
body{font-size:16px;line-height:1.55}
.wrap{padding:0 20px}
/* type scale */
h1{font-size:clamp(1.95rem,8.2vw,2.6rem);line-height:1.08;letter-spacing:-.03em}
h2{font-size:clamp(1.55rem,6.4vw,2rem);line-height:1.12;letter-spacing:-.025em}
.h2-s{font-size:clamp(1.35rem,5.4vw,1.7rem)}
h3{font-size:1.05rem}
.lead{font-size:1.03rem;line-height:1.55}
.kicker{font-size:.68rem;letter-spacing:.15em;margin-bottom:12px}
/* vertical rhythm: the home page ran 16 screens tall */
section{padding-block:52px}
.hero{padding-block:28px 40px}
.hero-grid{gap:28px}
.hero .lead{margin-top:16px}
.hero-ctas{gap:10px;margin-top:22px}
.hero-note{margin-top:18px;gap:8px 16px;font-size:.88rem}
.platform-head,.section-head{gap:16px}
.bento,.moment-grid,.res-grid,.duo,.frow,.pillars3,.tgrid{gap:14px}
/* header: 76px of sticky chrome is a lot on a 844px screen */
.nav-row{height:60px;gap:12px}
.brand img{width:30px;height:30px}
.brand span{font-size:1.15rem}
.brand{min-height:44px}
.nav-cta .btn{height:40px;padding:0 16px;font-size:.9rem}
.menu-toggle{width:44px;height:44px}
.announce{padding:8px 16px;font-size:.8rem;line-height:1.4}
.announce .tag{margin-right:7px;font-size:.66rem}
.announce .arrow-only{display:none}
/* CTAs read better full width than as orphaned pills */
.hero-ctas .btn,.final-ctas .btn{width:100%;justify-content:center}
}
/* Tap targets: telefon i tablet tak samo. 44 px to regula kciuka i nie ma tu
wyjatkow dla "gestych" kontrolek: kropki karuzeli i podlinki w rozwinietym
menu tez dostaja pelne pole dotyku. */
@media (max-width:920px){
/* .main-nav ma tu top:76px (regula bazowa) az do 640 px, bo dopiero tam
.nav-row schodzi z 76 na 60. Wczesniejsza wersja ustawiala 60 px juz od
920 i wsuwala panel pod krawedz naglowka. */
.main-nav a{min-height:44px;display:flex;align-items:center;padding:10px 14px}
.main-nav .drop-item{min-height:44px;padding-block:10px}
/* Podlinki mega menu ("Zamowienia przy stoliku" i sasiedzi) mialy 40 px.
Na telefonie to jedyna droga do tych stron produktowych, bo poza menu
nic do nich nie prowadzi, wiec chybiony dotyk kosztuje cala wizyte. */
.main-nav .drop-sub a{min-height:44px;display:flex;align-items:center}
.arrow-link{min-height:44px}
.tile-arrow{width:40px;height:40px}
/* Kropka zostaje wizualnie mala (8 px), ale pole dotyku ma pelne 44 px:
padding powieksza obszar klikalny, a background-clip:content-box trzyma
widoczne tlo przy samej tresci. Bez tego kropki rosnalyby na ekranie. */
.tdots{gap:2px;margin-top:12px}
.tdot{
height:44px;min-width:44px;padding:18px;background-clip:content-box;
display:inline-block;
}
/* 70 = 34 px widocznej pigulki + 2 x 18 px paddingu. */
.tdot.on{min-width:70px}
/* Cala stopka, nie sama siatka kolumn: link "lokamo.menu" w pasku dolnym
siedzial na 18 px, bo regula 44 px zaczynala sie dopiero od 640 px. */
.site-footer a{min-height:44px;display:inline-flex;align-items:center}
/* Link marki w naglowku i w stopce mial 35 px az do 640 px, a to na tablecie
glowna droga powrotu na strone glowna. */
.brand{min-height:44px}
.announce a{min-height:44px;display:inline-flex;align-items:center;gap:6px}
.pill-kicker{min-height:44px}
}
/* Height trims: the phone build ran 15 screens tall, mostly from
square art, a five-tile bento and a five-column footer stacked
into one. Same content, less thumb mileage. */
@media (max-width:640px){
.moment-art{aspect-ratio:1.35}
.moment{padding:8px 8px 16px}
.moment-body{padding:14px 8px 0}
.tile{padding:20px 18px}
.tile-shot,.tile .shot{margin-top:14px}
.footer-grid{grid-template-columns:1fr 1fr;gap:22px}
.footer-grid > *:first-child{grid-column:1 / -1}
.site-footer{padding-block:36px 24px}
.logos{padding-block:6px 40px}
.finale{padding-block:0 56px}
}
/* Final phone polish: labels that fell under 11px, the 640px comparison
table that forced most of itself off screen, and the footer address
that was an 18px tap target. */
@media (max-width:640px){
.kicker{font-size:.72rem}
.cmp{min-width:0}
.cmp th,.cmp td{padding:11px 12px;font-size:.86rem}
.cmp thead th{font-size:.66rem;letter-spacing:.06em}
.cmp tbody th{font-size:.86rem}
.site-footer a{min-height:44px;display:inline-flex;align-items:center}
.site-footer .f-brand a,.site-footer address a{min-height:36px}
/* Same inline-style story as the menu panels: a two column ratio set on
the element itself outranks the breakpoint, so text was breaking every
two words. One column on phones, full stop. */
.pillars3{grid-template-columns:1fr!important}
}
/* Narrow phones (iPhone SE / mini): the comparison table was still a few
pixels over, so it lost its scroll-free fit. */
@media (max-width:380px){
.cmp th,.cmp td{padding:10px 8px;font-size:.82rem}
}
/* P1-04: POSbistro nie ma adaptera, wiec kafel mowi to wprost. Etykieta jest
tekstem, nie kolorem: informacja nie moze zalezec od widzenia barw. */
.logo-tile-soon{position:relative}
.logo-tile-soon .tile-soon{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
font-size:.68rem;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.logo-tile-soon img{opacity:.55}
/* ---------------------------------------------------------------------------
Kroki "jak to dziala" (opinie.lokamo.pl)
Dodane 2026-08-28 dla strony produktu Opinie. Osobny wzorzec od .pillar3, bo
tu numer jest trescia, a nie ozdoba: prowadzi wzrok w kolejnosci 01, 02, 03.
Blok jest DOPISANY na koncu arkusza i niczego nie nadpisuje, wiec pozostale
strony landingu sa nietkniete.
--------------------------------------------------------------------------- */
.kroki{
list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
margin-top:clamp(28px,4vw,48px);padding:0;counter-reset:krok;
}
@media (max-width:920px){.kroki{grid-template-columns:1fr}}
.krok{
background:#fff;border:1px solid rgba(21,34,25,.08);border-radius:22px;padding:28px;
display:flex;flex-direction:column;gap:8px;
}
.krok-nr{
font-size:.78rem;font-weight:700;letter-spacing:.16em;color:var(--forest);
display:inline-flex;align-items:center;gap:8px;
}
.krok-nr::after{content:"";flex:1;height:1.5px;background:var(--forest);opacity:.18}
.krok h3{font-size:1.12rem;margin-top:4px}
.krok p{font-size:.94rem;color:var(--muted)}
/* ---------------------------------------------------------------------------
Landing produktu Opinie (opinie.lokamo.pl)
Dodane 2026-08-29. Blok dopisany na koncu, niczego nie nadpisuje.
--------------------------------------------------------------------------- */
/* Dwie karty cennika zamiast trzech. Wczesniej siedzialo to w stylu inline na
elemencie i przez to WYGRYWALO z zapytaniem medialnym `.plans`, wiec na
telefonie zostawaly dwie kolumny po 600 px i cala strona jechala w bok. */
.plans.plans-2{grid-template-columns:repeat(2,1fr);max-width:860px;margin-inline:auto}
@media (max-width:920px){.plans.plans-2{grid-template-columns:1fr;max-width:480px}}
/* Zdjecie, ktore da sie powiekszyc. Kursor i delikatne uniesienie mowia, ze to
jest klikalne; bez tego nikt nie zgadnie. */
.zoomable{cursor:zoom-in;transition:transform .25s ease,box-shadow .25s ease}
.zoomable:hover{transform:translateY(-2px)}
.lupa{
position:fixed;inset:0;z-index:80;border:0;padding:0;margin:0;width:100%;height:100%;
background:rgba(12,18,14,.82);display:flex;align-items:center;justify-content:center;
cursor:zoom-out;
}
.lupa img{max-width:min(1400px,94vw);max-height:92vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lupa-zamknij{
position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:999px;
border:0;background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;cursor:pointer;
}
.lupa-zamknij:hover{background:rgba(255,255,255,.24)}
/* Kalkulator naklejek na landingu. Liczby licza sie tym samym modulem, co
panel i faktura, wiec strona sprzedazowa nie moze sklamac o cenie. */
.kalk{
background:#fff;border:1px solid rgba(21,34,25,.1);border-radius:24px;
padding:clamp(22px,3vw,32px);margin-top:clamp(28px,4vw,44px);
display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,36px);align-items:start;
}
@media (max-width:820px){.kalk{grid-template-columns:1fr}}
.kalk h3{font-size:1.05rem;margin-bottom:6px}
.kalk-formaty{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin:14px 0 22px}
.kalk-format{
border:1px solid rgba(21,34,25,.12);border-radius:14px;padding:12px 14px;background:#fff;
text-align:left;cursor:pointer;font:inherit;color:inherit;transition:border-color .2s,box-shadow .2s;
}
.kalk-format:hover{border-color:rgba(21,34,25,.28)}
.kalk-format[aria-pressed="true"]{border-color:var(--forest);box-shadow:0 0 0 1px var(--forest)}
.kalk-format strong{display:block;font-size:.95rem}
.kalk-format span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.kalk-suwak{width:100%;accent-color:var(--forest)}
.kalk-naklad{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kalk-naklad b{font-size:1.6rem}
.kalk-wynik{background:#F4F4F2;border-radius:18px;padding:22px}
.kalk-wynik dl{display:grid;gap:10px;margin:0}
.kalk-row{display:flex;justify-content:space-between;gap:12px;font-size:.92rem}
.kalk-row dt{color:var(--muted)}
.kalk-row dd{margin:0;font-variant-numeric:tabular-nums}
.kalk-suma{border-top:1px solid rgba(21,34,25,.12);margin-top:14px;padding-top:14px;display:flex;justify-content:space-between;align-items:baseline}
.kalk-suma b{font-size:1.5rem}
.kalk-nota{font-size:.8rem;color:var(--muted);margin-top:12px}
/* ---------------------------------------------------------------------------
Ruch platny z Meta Ads: telefon, cele dotykowe, pierwszy ekran
Wiekszosc tego ruchu to telefon w przegladarce wbudowanej w aplikacje
Facebooka albo Instagrama, czesto na slabym LTE. Ta warstwa dotyka telefonu
i tabletu, desktop zostaje bez zmian.
--------------------------------------------------------------------------- */
/* Numer w naglowku, nie tylko w stopce: na telefonie polaczenie jest
najkrotsza droga od reklamy do rozmowy. */
.nav-tel{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:44px;padding:0 14px;border-radius:999px;
color:var(--forest-deep);text-decoration:none;font-weight:500;font-size:.95rem;
white-space:nowrap;transition:background-color .2s;
}
.nav-tel:hover{background:rgba(21,34,25,.06)}
.nav-tel svg{flex:0 0 auto}
.footer-tel{margin-top:14px}
.footer-tel a{
display:inline-flex;align-items:center;gap:8px;min-height:44px;
color:var(--ink);text-decoration:none;font-weight:600;font-size:1.05rem;
}
.footer-tel a:hover{color:var(--forest);text-decoration:underline}
/* Numer w naglowku ma sens tam, gdzie sie miesci. Pomiar w przegladarce
(iframe 1120 do 1440 px) pokazal poziomy scroll jeszcze przy 1160 px, wiec
wczesniejszy prog 1120 byl policzony za nisko: liczyl szerokosc etykiet bez
uwzglednienia, ze zadna z nich nie moze sie zlamac. Pasek z numerem i bez
lamania potrzebuje 1232 px, wiec w pasie 921 do 1239 px numer zostaje w
stopce, a w naglowku wraca od 1240 px. Prog jest ZMIERZONY, nie oszacowany. */
@media (min-width:1000px) and (max-width:1239px){
.nav-tel{display:none}
}
/* Pas 921 do 1099 px: uklad jest juz desktopowy (przelacznik na hamburgera
siedzi na 920 px i steruje takze siatkami na calej stronie, wiec nie ma go
jak ruszyc bez przebudowy landingu), ale pasek z pelnymi etykietami sie tam
nie miesci. Do dzis maskowalo to lamanie etykiet w srodku wyrazu: naglowek
rosl o linie i wygladal na zepsuty, za to nic nie wystawalo. Po zabraniu
lamania problem stal sie widoczny jako poziomy scroll przy 1024 px, czyli na
iPadzie w poziomie. Zamiast tego zwezamy sam pasek: mniejsze odstepy i
drobniejsza etykieta. 1083 px tresci schodzi ponizej 1024. */
@media (min-width:1000px) and (max-width:1099px){
.nav-drop-btn,.main-nav>ul>li>a{padding-left:9px;padding-right:9px;font-size:.92rem}
.nav-drop-btn{gap:4px}
}
@media (max-width:999px){
/* Miedzy 641 a 999 px naglowek ma wciaz 76 px wysokosci, wiec panel menu
musi zaczynac sie nizej niz na telefonie. Powtarzamy wartosc bazowa
jawnie, zeby nikt nie zszedl tu do 60 px razem z wersja telefonowa. */
.main-nav{top:76px}
/* 40 px to za malo na kciuk: przycisk demo jest glownym celem calej strony. */
.nav-cta .btn{min-height:44px}
.tile-arrow{width:44px;height:44px}
/* Cel dotykowy ma miec 44 px takze w poziomie, nie tylko w pionie. */
.site-footer .footer-grid a{min-width:44px}
/* Spisy tresci na stronach prawnych sa raz ol, raz ul, wiec regula musi
lapac oba. Wczesniej trafiala tylko w ol, ktorego nie ma na zadnej. */
.legal-toc ol,.legal-toc ul{gap:2px}
.legal-toc a{display:inline-flex;align-items:center;min-height:44px}
/* Kwadrat 16 px przy zgodzie byl nie do trafienia palcem.
Bez align-items: etykieta zgody ma cztery linie, wiec wysrodkowanie
odrywalo kwadrat od pierwszej linii i stawialo go w polowie akapitu. */
.consent{min-height:44px;padding-block:6px}
.consent input{width:24px;height:24px;margin-top:0}
}
@media (max-width:640px){
/* Pasek "Nowosc" zabieral 77 px pierwszego ekranu i dokladal czwarte CTA nad
zagieciem. Ruch z reklamy ma zobaczyc jedna obietnice i jeden przycisk;
ta sama tresc zostaje w menu pod "Platforma". */
.announce{display:none}
html{scroll-padding-top:64px}
/* Naglowek na 360 px: numer zostaje ikona, sama cyfra idzie do nazwy linku. */
.nav-cta{gap:4px}
.nav-cta .btn{height:44px;padding:0 14px;font-size:.95rem}
.nav-tel{padding:0 10px;min-width:44px}
.nav-tel-num{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.main-nav{top:60px}
/* Na telefonie naglowek ma 60 px, wiec tyle odejmujemy od wysokosci ekranu. */
.main-nav.open{max-height:calc(100dvh - 60px)}
/* Tresc ponizej 15 px odpada na telefonie w slonecu. Naglowki kolumn tabeli
zostaja mniejsze celowo: to etykiety, a kazdy dolozony piksel przesuwa
tabele dalej w poziomy scroll. */
.cmp th,.cmp td{font-size:.95rem}
.cmp tbody th{font-size:.95rem}
.cmp thead th{font-size:.8rem}
.hero-note{font-size:.95rem}
.plans-note{font-size:.95rem}
.form-note,.consent{font-size:.94rem}
.kalk-nota,.kalk-format span{font-size:.9rem}
}
/* Waskie telefony (iPhone SE / mini): tabela porownawcza miesci sie bez
poziomego scrolla dopiero przy mniejszym stopniu pisma. */
@media (max-width:340px){
.cmp th,.cmp td{font-size:.86rem;padding:10px 8px}
.cmp thead th{font-size:.72rem}
}
/* Najwezsze telefony (320-380 px, iPhone SE pierwszej generacji, Galaxy Fold
po zlozeniu). Dwie rzeczy rozpychaly tam strone poza ekran:
1) .btn ma white-space:nowrap, wiec dluga etykieta ("Zapisz sie na
powiadomienie") byla szersza niz caly ekran,
2) w naglowku nie mieszcily sie naraz marka, numer, przycisk i hamburger.
Slowo "Lokamo" znika, znak marki zostaje: link do strony glownej ma wlasna
etykiete aria, wiec nazwa linku sie nie zmienia. */
@media (max-width:340px){
.btn{white-space:normal;text-align:center;height:auto;min-height:52px;padding-block:11px;line-height:1.25}
.nav-cta .btn{padding-inline:12px}
.brand span{display:none}
/* Po ukryciu slowa "Lokamo" z linku zostaje sam znak o szerokosci 30 px.
Wysokosc miala juz 44, brakowalo drugiego wymiaru pola dotyku. */
.brand{min-width:44px;justify-content:center}
}
/* Tresc, ktora po poprzednich poprawkach wciaz siedziala pod 15 px: opisy
kafli "Zobacz tez", stopka, etykiety pol formularza i podpisy przy cytatach.
Mockupy produktu (udawany panel, udawany rachunek) zostaja male celowo: to
rysunek interfejsu, nie tekst do czytania. Etykiety w rodzaju .kicker i
naglowkow kolumn tabeli tez, bo to podpisy, nie zdania. */
@media (max-width:640px){
.rel-card small{font-size:.95rem}
.twho .sub{font-size:.95rem}
.footer-brand p,.footer-bottom p,.footer-bottom a{font-size:.95rem}
.field label{font-size:.95rem}
.stat-tile span{font-size:.95rem}
.moment-body p{font-size:.95rem}
.res-card p{font-size:.95rem}
.tstat .cap,.tread{font-size:.95rem}
}
/* Ostatnie miejsca, w ktorych tresc na telefonie siedziala pod 15 px. Zdania
do czytania ida w gore, etykiety zostaja male: to dwie rozne role tekstu.
.kicker i .drop-label to nadal etykiety, ale 11,5 px na telefonie w sloncu
nie daje sie przeczytac nikomu, wiec dostaja srodek miedzy jednym a drugim. */
@media (max-width:640px){
.plan .pdesc{font-size:.95rem}
.kicker{font-size:.8rem}
.drop-label{font-size:.8rem}
}
/* ---------------------------------------------------------------------------
Domiar po pomiarze na zywo (375 px, Chrome mobile emulation)
Poprzednia warstwa podniosla akapity, ale pod 15 px zostaly jeszcze cztery
rodzaje tekstu, ktory gosc naprawde czyta: naglowek kolumny w stopce, zdanie
nad pasem logotypow, podpis przy cenie i link-pigulka. Wszystkie ida na
.95rem (15,2 px).
--------------------------------------------------------------------------- */
@media (max-width:640px){
/* "Platforma", "Zasoby", "Firma": to naglowki nawigacji, nie ozdoba. */
.footer-col h3{font-size:.95rem;letter-spacing:.08em}
/* Cale zdanie: "Dziala z systemami, ktore juz masz". */
.logos p{font-size:.95rem;letter-spacing:.08em}
/* Podpis pod cena ("miesiecznie, netto") decyduje o odczytaniu ceny. */
.plan .price small{font-size:.95rem}
/* .pill-kicker to link, a nie etykieta: musi sie dac przeczytac i trafic. */
.pill-kicker{font-size:.95rem}
/* Nadtytul nad H1 nazywa dzial serwisu. Przy 15,2 px odstep miedzy literami
schodzi z .18em na .1em, inaczej dluzszy nadtytul lamie sie na dwie linie. */
.kicker{font-size:.95rem;letter-spacing:.1em}
}
/* Pigulki statusu ("Wkrotce", "Najczesciej wybierany"). Zostaja ponizej 15 px
swiadomie: to znaczki przy naglowku, ktory mowi to samo slowami, a nie tekst
do czytania. Ale 10,2 px nie da sie odczytac nawet z bliska, wiec dolna
granica to 12,8 px. */
@media (max-width:640px){
.soon,.soon-mini,.tile-soon,.hot-badge{font-size:.8rem;letter-spacing:.04em}
/* Sam .tile-soon nie wygrywal: badawcza regula wyzej to .logo-tile-soon
.tile-soon (0,2,0), wiec przy jednej klasie kafel POSbistro na stronie
glownej zostawal na 10,88 px mimo tej warstwy. Media query nie podnosi
specyficznosci, trzeba powtorzyc selektor rodzica. */
.logo-tile-soon .tile-soon{font-size:.8rem;letter-spacing:.04em}
}
/* --- Klastry tresci: okruszki, sekcje, powiazane rozwiazania ------------- */
.okruszki{padding:18px 0 0}
.okruszki ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0;padding:0;font-size:.86rem}
.okruszki li{display:flex;align-items:center;gap:10px;color:var(--muted,#6b7280)}
.okruszki li+li::before{content:"/";color:var(--line,#d8dde5)}
.okruszki a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.okruszki a:hover{border-bottom-color:currentColor}
.okruszki a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}
.okruszki [aria-current="page"]{color:var(--ink,#101828);font-weight:500}
.klaster-hero{padding:clamp(28px,4vw,52px) 0 clamp(8px,1.5vw,18px)}
.klaster-hero h1{max-width:20ch}
.klaster-hero .lead{max-width:62ch}
.klaster-sekcja{padding:clamp(18px,2.6vw,34px) 0}
.klaster-sekcja p{max-width:70ch}
.klaster-sekcja h3{margin-top:1.4em}
.pow-sekcja{padding:clamp(30px,4vw,56px) 0;border-top:1px solid var(--line,#e6e9ef)}
.pow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(16px,2vw,26px)}
@media (max-width:900px){.pow-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pow-grid{grid-template-columns:1fr}}
.pow-karta{display:flex;flex-direction:column;gap:6px;padding:18px 20px;min-height:44px;
border:1px solid var(--line,#e6e9ef);border-radius:14px;text-decoration:none;color:inherit;
background:var(--card,#fff);transition:border-color .18s ease,transform .18s ease}
.pow-karta:hover{border-color:var(--brand,#1f6f4a);transform:translateY(-2px)}
.pow-karta:focus-visible{outline:2px solid var(--brand,#1f6f4a);outline-offset:3px}
.pow-karta strong{font-size:1.02rem}
.pow-karta span{color:var(--muted,#6b7280);font-size:.92rem}
.pow-obok{margin-top:18px;color:var(--muted,#6b7280);font-size:.94rem}
.pow-obok a{color:inherit}
@media (prefers-reduced-motion:reduce){.pow-karta{transition:none}.pow-karta:hover{transform:none}}