/* NOLARO v4: kompozycje produktowe (UI + kolo ze zdjeciem + plywajace ikony), styl bed-booking.com */
.cmp{position:relative;aspect-ratio:4/3;width:100%;max-width:560px;margin:0 auto;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:11px;color:var(--ink)}
.cmp>*{position:absolute}
.cmp .blob{border-radius:50%;background:var(--p-s);z-index:0}
.cmp .circ{border-radius:50%;overflow:hidden;box-shadow:var(--sh2);z-index:1;background:var(--bg2)}
.cmp .circ img{width:100%;height:100%;object-fit:cover;display:block}
/* okno aplikacji */
.cmp .win{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px rgba(20,24,29,.16);overflow:hidden;z-index:2}
.cmp .win .tb{height:30px;background:#FAFAF8;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 10px;font-size:9.5px;font-weight:700;color:var(--mute)}
.cmp .win .tb i{width:7px;height:7px;border-radius:50%;background:#E4E7EA;display:inline-block}
.cmp .win .tb .r{margin-left:auto;display:flex;gap:4px}
.cmp .win .tb .r span{padding:2px 7px;border-radius:4px;background:#fff;border:1px solid var(--line);font-weight:700;color:var(--ink2)}
.cmp .win .tb .r span.on{background:var(--p);color:#fff;border-color:var(--p)}
.cmp .side{position:absolute;left:0;top:30px;bottom:0;width:26px;background:#FAFAF8;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:9px;padding-top:10px}
.cmp .side i{width:12px;height:12px;border-radius:3px;background:#D3D7DC;display:block}
.cmp .side i.on{background:var(--p)}
.cmp .grid{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}
.cmp .gr{display:grid;grid-template-columns:var(--rw,88px) repeat(var(--d,9),1fr);position:relative}
.cmp .gr>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:26px;font-size:8.5px}
.cmp .grid .h{background:#FAFAF8;text-align:center;padding:4px 0;color:var(--mute);font-weight:700;line-height:1.1}
.cmp .grid .h b{display:block;font-size:10px;color:var(--ink)}
.cmp .grid .h.td b{color:var(--p)}
.cmp .grid .rm{padding:0 7px;display:flex;align-items:center;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.cmp .grid .rm small{margin-left:auto;color:var(--mute);font-weight:500}
.cmp .grid .we{background:#FAFAF8}
.cmp .bar{position:absolute;top:5px;height:16px;color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;padding:0 7px;white-space:nowrap;overflow:hidden;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);z-index:1}
.cmp .bar.a{background:var(--p)}.cmp .bar.b{background:#1A4FA0}.cmp .bar.c{background:#DB2777}.cmp .bar.d{background:#1E8E5A}.cmp .bar.e{background:#E0A43A;color:#3b2a05}.cmp .bar.x{background:#9AA3AD}
.cmp .bar .lg{width:11px;height:11px;border-radius:3px;background:#fff;color:#1A4FA0;font-size:7px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;margin-right:4px;flex:none}
.cmp .bar.c .lg{color:#DB2777}
/* telefon */
.cmp .phone{width:190px;height:390px;background:#fff;border-radius:30px;border:6px solid #1B1F23;box-shadow:0 30px 70px rgba(20,24,29,.28);overflow:hidden;z-index:3}
.cmp .phone::before{content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);width:60px;height:14px;border-radius:8px;background:#1B1F23;z-index:5}
.cmp .phone .scr{position:absolute;inset:0;padding:30px 10px 0;display:flex;flex-direction:column}
.cmp .phone .ph-h{font-weight:800;font-size:11px;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cmp .phone .ph-h small{font-weight:600;color:var(--mute)}
.cmp .phone .days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
.cmp .phone .days div{text-align:center;font-size:7.5px;color:var(--mute);font-weight:700;line-height:1.1}
.cmp .phone .days div b{display:block;font-size:9px;color:var(--ink)}
.cmp .phone .days div.td b{color:var(--p)}
.cmp .phone .prow{display:grid;grid-template-columns:44px repeat(7,1fr);border-top:1px solid var(--line);min-height:30px;position:relative;align-items:center}
.cmp .phone .prow>span{font-size:8px;font-weight:700;color:var(--ink2);padding-left:2px;white-space:nowrap;overflow:hidden}
.cmp .phone .prow>span small{display:block;color:var(--mute);font-weight:500;font-size:7px}
.cmp .phone .prow .bar{top:7px}
.cmp .phone .tabs{margin-top:auto;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 0 10px;font-size:7px;color:var(--mute);font-weight:600}
.cmp .phone .tabs span{display:flex;flex-direction:column;align-items:center;gap:2px}
.cmp .phone .tabs .ms{font-size:14px}
.cmp .phone .tabs span.on{color:var(--p)}
/* karty UI */
.cmp .card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(20,24,29,.16);padding:14px;z-index:2;font-size:10px}
.cmp .card .t{font-size:11.5px;font-weight:800;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.cmp .card .t small{font-weight:600;color:var(--mute);font-size:9px}
.cmp .card .f{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.cmp .card .f label{font-size:8px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.cmp .card .f div{border:1px solid var(--line2);border-radius:7px;padding:6px 8px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.cmp .card .f div .ms{font-size:14px;color:var(--mute)}
.cmp .card .f div.on{border-color:var(--p);background:var(--p-s)}
.cmp .card .row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.cmp .card .row:last-child{border:0}
.cmp .card .row b{font-weight:700}
.cmp .card .row small{display:block;color:var(--mute);font-size:8.5px}
.cmp .card .sw{width:26px;height:15px;border-radius:999px;background:#D3D7DC;position:relative;flex:none}
.cmp .card .sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff}
.cmp .card .sw.on{background:var(--p)}.cmp .card .sw.on::after{left:13px}
.cmp .card .btn2{background:var(--p);color:#fff;font-weight:800;text-align:center;padding:8px;border-radius:8px;margin-top:8px;font-size:10px}
.cmp .card .pay{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0}
.cmp .card .pay span{border:1px solid var(--line2);border-radius:6px;text-align:center;padding:5px 0;font-weight:800;font-size:8.5px}
.cmp .card .pay span.on{border-color:var(--p);background:var(--p-s);color:var(--p-d)}
.cmp .card .pin{display:flex;gap:4px;justify-content:center;margin:8px 0}
.cmp .card .pin span{width:26px;height:32px;border:2px solid var(--p);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--p-d)}
.cmp .card .chart{display:flex;align-items:flex-end;gap:4px;height:70px;margin:6px 0}
.cmp .card .chart i{flex:1;background:var(--p-l);border-radius:2px 2px 0 0}
.cmp .card .chart i.hi{background:var(--p)}
.cmp .card .line{height:70px;margin:6px 0}
.cmp .card .kv{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cmp .card .kv div{background:var(--bg2);border-radius:8px;padding:7px 8px}
.cmp .card .kv small{display:block;font-size:7.5px;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.cmp .card .kv b{font-size:13px}
.cmp .card .kv em{font-style:normal;font-size:8px;color:var(--ok);font-weight:700;margin-left:3px}
.cmp .card .pgrid{display:grid;grid-template-columns:70px repeat(6,1fr);gap:3px;font-size:8.5px}
.cmp .card .pgrid div{text-align:center;padding:5px 0;border:1px solid var(--line);border-radius:4px;font-weight:700}
.cmp .card .pgrid div.h{border:0;color:var(--mute);font-weight:700}
.cmp .card .pgrid div.we{background:#F3F4F6}
.cmp .card .pgrid div.l{text-align:left;border:0;font-weight:700;padding-left:2px;white-space:nowrap;overflow:hidden}
/* plywajace ikony i pigulki */
.cmp .bdg{width:50px;height:50px;border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(20,24,29,.16);display:flex;align-items:center;justify-content:center;z-index:4;font-weight:900;font-size:16px;animation:fl2 7s ease-in-out infinite}
.cmp .bdg.booking{background:#1A4FA0;color:#fff;font-size:20px}
.cmp .bdg.airbnb{background:#FF385C;color:#fff}
.cmp .bdg.google{background:#fff}
.cmp .bdg.blik{background:#1B1F23;color:#fff;font-size:11px;letter-spacing:.02em}
.cmp .bdg.stripe{background:#635BFF;color:#fff;font-size:14px}
.cmp .bdg.lock{background:var(--p);color:#fff}
.cmp .bdg .ms{font-size:26px}
.cmp .bdg.d2{animation-delay:-2s}.cmp .bdg.d4{animation-delay:-4s}
@keyframes fl2{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.cmp .bdg{animation:none}}
.cmp .pill{background:#fff;border-radius:999px;box-shadow:0 12px 30px rgba(20,24,29,.16);padding:8px 12px;font-size:10px;font-weight:700;display:flex;align-items:center;gap:6px;z-index:4;white-space:nowrap}
.cmp .pill .ms{font-size:16px;color:var(--ok)}
.cmp .pill.p .ms{color:var(--p)}
.cmp .pill b{color:var(--ok)}
.hero-cmp{max-width:640px;aspect-ratio:5/4}
@media (max-width:640px){.cmp{font-size:10px}.cmp .phone{width:150px;height:310px}.cmp .win{max-width:100%}}
.google-g{font-weight:900;font-size:20px;background:linear-gradient(90deg,#4285F4 0 25%,#EA4335 25% 50%,#FBBC05 50% 75%,#34A853 75%);-webkit-background-clip:text;background-clip:text;color:transparent}

.cmp.flow{aspect-ratio:auto;padding:28px 0 24px;max-width:600px}
.cmp.flow .live{position:relative;z-index:2}
.cmp.flow .blob,.cmp.flow .circ,.cmp.flow .bdg{position:absolute}

.cmp .gr>.bar{min-height:0;border:0;height:16px}

/* Dla kogo: chipy nawigacji po segmentach */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips .btn.sm{gap:.4rem;background:#fff}
.chips .btn.sm .ms{color:var(--p)}
.pain .txt ul li{display:flex;gap:.55rem;align-items:flex-start}
.pain .txt ul li .ms{color:var(--p);font-size:20px;flex:none;margin-top:1px}