/* Landing (platform.onboarding.landing) — transplant markupu i klas 1:1 z web/home.php
   (poza wybranymi kolizjami nazw klas z resztą onboardingu — patrz komentarze niżej).
   Kolor marki (--accent), logo, dane ($plans z bazy) i routing bez zmian.
   .nav-links/.lk (środkowa nawigacja topbara) są we wspólnym onboarding.css, nie tu —
   komponent <x-onboarding.nav-links> jest używany na wielu widokach, nie tylko landing. */

/* ---------- Hero (2 kolumny, jak web/ .hero) ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:72px var(--pad) 48px;max-width:var(--shell);margin:0 auto}
.hero-col{display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:58px;line-height:1.04;letter-spacing:-.035em;text-align:left}
.hero h1 em{font-style:normal;color:var(--accent-d)}
/* Web nigdy nie centruje hero na mobile (zawsze zostaje do lewej) i przyciski (.cta-pair,
   tu .cta-row) NIGDY się nie łamią/rozciągają na pełną szerokość, nawet na wąskich
   ekranach (zmierzone live na referencji przy 390px — zawsze row, naturalna szerokość) —
   tylko kolapsuje układ do 1 kolumny i skaluje typografię w 3 progach (1024/860/520).
   To odróżnia .hero (home) od .hero-actions z web/lib/offer_render.php
   offer_hero_split()/offer_hero_center(), które NA DESKTOP wygląda tak samo, ale na
   mobile faktycznie się łamie — patrz .hero-actions w onboarding-offer.css
   (no-commission.blade.php), inna klasa, inna strona. */
@media(max-width:1024px){.hero h1{font-size:48px}}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:36px;padding:40px var(--pad) 36px}.hero h1{font-size:38px}}
@media(max-width:520px){.hero h1{font-size:32px}}
.hero-sub{font-size:18px;line-height:1.6;color:var(--muted-2);max-width:480px}
@media(max-width:860px){.hero-sub{font-size:16px}}
.hero-proof{display:flex;align-items:center;gap:16px;padding-top:6px}
.avatars{display:flex;flex:0 0 auto}
.avatars img{width:38px;height:38px;border-radius:999px;border:2px solid var(--bg);object-fit:cover}
.avatars img+img{margin-left:-12px}
.proof-txt{font-size:13px;line-height:1.4;color:var(--muted-2)}
.stars{color:var(--accent-d);font-weight:700}
.hero-art{position:relative}
.hero-art::before{content:"";position:absolute;inset:-24px;background:radial-gradient(circle at 60% 40%,var(--accent-bg),transparent 65%);filter:blur(10px)}
.hero-art img{position:relative;width:100%;height:auto;border-radius:16px;filter:drop-shadow(0 30px 50px rgba(27,27,31,.22))}
.hero .note{font-size:13px;color:var(--muted)}

/* .chips/.chip — we wspólnym onboarding.css, nie tu — używane też przez
   /online-menu-website. */

/* .marquee/.eyebrow — we wspólnym onboarding.css, nie tu — używane też przez /pricing. */

/* ---------- Menu z AI ---------- */
/* .ai-card/.ai-col/.badge-new/.ai-lede/.ai-list/.ai-item — we wspólnym onboarding.css,
   nie tu — .ai-card/.ai-lede używane też przez /online-ordering (band-stats zamiast
   .ai-list/.demo), .ai-list/.ai-item przez /online-menu-website (band z abonamentem).
   .demo/.demo-card niżej zostają tu — specyficzne dla mockupu importu menu z AI na
   landing, nieużywane nigdzie indziej. */

.demo{position:relative}
.demo-card{background:#fff;border-radius:16px;padding:22px;min-height:340px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
    border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:14px;overflow:hidden}
@media(max-width:520px){.demo-card{min-height:320px;padding:16px}}
.demo-head{display:flex;align-items:center;gap:8px}
.demo-dot{width:10px;height:10px;border-radius:999px;background:var(--accent);flex:0 0 auto}
.demo-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14px;color:var(--ink)}
.demo-step{margin-left:auto;font-size:11px;font-weight:700;color:var(--accent-d);background:var(--accent-bg);padding:4px 9px;border-radius:999px}
.demo-body{flex:1;display:none;flex-direction:column;gap:14px;min-height:0}
.demo-body[data-active="true"]{display:flex}
.drop{flex:1;border:2px dashed #e2c98a;border-radius:14px;background:#FCF7EC;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px}
.drop-ico{width:52px;height:52px;border-radius:999px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:24px;font-weight:800;animation:fdpulse 1.6s ease-in-out infinite}
.drop-t{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:16px;color:var(--ink)}
.drop-s{font-size:13px;color:var(--muted-2)}
.drop-btns{display:flex;gap:10px}
.drop-btns span{flex:1;text-align:center;font-size:13px;font-weight:700;color:var(--ink);padding:11px;border-radius:10px}
.drop-btns span:first-child{background:var(--accent)}
.drop-btns span:last-child{background:#f0f0f2}
.scan{flex:1;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fffdf8}
.scan-menu{padding:18px 20px;display:flex;flex-direction:column;gap:11px;height:100%;filter:grayscale(.12)}
.scan-menu h4{text-align:center;font-size:15px;letter-spacing:.14em;color:var(--ink);text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:2px}
.scan-row{display:flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--ink-2)}
.scan-row .em{font-size:14px;transform:translateY(1px)}
.scan-row .nm{font-weight:600;white-space:nowrap}
.scan-row .dots{flex:1;border-bottom:1px dotted #c9c9cd;transform:translateY(-3px)}
.scan-row .pr{font-weight:700;white-space:nowrap}
.scan-line{position:absolute;left:0;right:0;top:0;height:56px;background:linear-gradient(180deg,rgba(255,164,27,0),var(--accent-bg));border-bottom:2px solid var(--accent);box-shadow:0 0 18px var(--accent-bg);animation:fdscan 1.8s linear infinite}
.scan-tag{position:absolute;left:12px;bottom:12px;font-size:12px;font-weight:700;color:#fff;background:rgba(27,27,31,.8);padding:6px 11px;border-radius:999px}
.proc{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.spinner{width:46px;height:46px;border-radius:999px;border:4px solid #f0f0f2;border-top-color:var(--accent);animation:fdspin .8s linear infinite}
.proc-t{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:16px;color:var(--ink);text-align:center}
.dots3{display:flex;gap:6px}
.dots3 i{width:8px;height:8px;border-radius:999px;background:var(--accent);animation:fdpulse 1s ease-in-out infinite}
.dots3 i:nth-child(2){animation-delay:.2s}
.dots3 i:nth-child(3){animation-delay:.4s}
.done{flex:1;display:flex;flex-direction:column;gap:8px}
.done-row{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:9px 12px;animation:fdrise .45s ease both}
.done-row .ic{width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}
.done-row .nm{flex:1;font-weight:600;font-size:13.5px;color:var(--ink)}
.done-row .pr{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13.5px;color:var(--accent-d)}
.done-row .ok{color:var(--ok);font-weight:800;flex:0 0 auto}
.done-add{margin-top:auto;border:none;font-weight:700;font-size:14px;color:var(--ink);background:var(--accent);padding:12px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 22px -12px rgba(255,164,27,1);animation:fdrise .45s ease both;animation-delay:.8s}
@keyframes fdscan{0%{transform:translateY(-100%)}100%{transform:translateY(400%)}}
@keyframes fdspin{to{transform:rotate(360deg)}}
@keyframes fdrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fdpulse{0%,100%{opacity:.35}50%{opacity:1}}

.section--tight{padding:20px var(--pad) 60px}
@media(max-width:860px){.section--tight{padding:20px var(--pad) 48px}}
.section h2{font-size:36px;font-weight:700;letter-spacing:-.03em;text-align:center}
.section .s2{text-align:center;color:var(--muted-2);font-size:16px;margin:12px 0 40px;line-height:1.6}
.head{text-align:center;max-width:640px;margin:0 auto 40px;display:flex;flex-direction:column;gap:12px}
.h2{font-size:36px}
.lede{font-size:16px;color:var(--muted-2);line-height:1.6}

/* .feat-grid/.feat-card/.ic, .seg-grid/.seg, .grid4/.step*, .review* — we wspólnym
   onboarding.css, nie tu — używane też przez /pricing i /no-commission. */

/* .pays/.pays-row — we wspólnym onboarding.css, nie tu — używane też przez
   /online-ordering.
   .faq/.faq-item/.faq-q — we wspólnym onboarding.css (używane też przez /no-commission).
   .ctaband/.cta-row/.cta-textlink/.btn-lg/.btn-dark — we wspólnym onboarding.css, nie tu —
   używane też przez /pricing.
   Stopka (<x-onboarding.site-footer>) — analogicznie we wspólnym onboarding.css, nie tu —
   komponent jest używany na wielu widokach, nie tylko landing.
   Formularz leadowy (<x-onboarding.lead-form>) i .contact-grid — analogicznie w
   onboarding.css, bo używa ich też /contact. */