/* ============================================================
   LegacyApp - Homepage (faithful rebuild of "Homepage v2 (photos)")
   ------------------------------------------------------------
   Builds ONLY on the foundation. Load order:

       <link rel="stylesheet" href="tokens.css">
       <link rel="stylesheet" href="foundation.css">
       <link rel="stylesheet" href="home.css">   <-- this file

   Rules:
   - only .home- prefixed classes (hero, store buttons, the
     avatar row, the native-details FAQ and the mobile sticky CTA),
   - no foundation styles repeated - header, footer, buttons,
     cards come from .la-*; section bodies reuse the original
     inline markup (its var(--token) names already match tokens.css),
   - same class names at every width; differences are media
     queries only, at the foundation breakpoints 920 and 760 px.
   ============================================================ */

/* ---------- Editorial heading + eyebrow helpers ---------- */
.home-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--gray-500);}
.home-eyebrow::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--orange-500);}
.home-h2{font-family:var(--font-serif);font-weight:700;font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-0.01em;color:var(--gray-900);margin:18px 0 0;text-wrap:balance;}

/* ============================================================
   HERO
   ============================================================ */
.home-hero{padding:clamp(48px,6vw,88px) clamp(20px,5vw,48px) clamp(56px,7vw,96px);background:radial-gradient(125% 90% at 50% 0%, #0A63CC 0%, #0057B7 42%, #013E80 100%);}
.home-hero__grid{max-width:1200px;margin:0 auto;display:grid;gap:clamp(36px,5vw,72px);grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));align-items:center;}
.home-hero__badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.12);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;color:#fff;}
.home-hero__title{margin:26px 0 0;font-family:var(--font-serif);font-weight:700;font-size:clamp(33px,4.6vw,58px);line-height:1.06;letter-spacing:-0.015em;color:#fff;text-wrap:balance;}
.home-hero__lead{margin:30px 0 0;max-width:34em;font-size:clamp(16px,1.35vw,19px);line-height:1.62;color:rgba(255,255,255,0.85);}

/* Store buttons */
.home-stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px;}
.home-store{display:inline-flex;align-items:center;justify-content:center;gap:11px;flex:1 1 230px;background:#fff;color:var(--gray-900);padding:13px 17px;border-radius:13px;}
.home-store:hover{opacity:0.9;color:var(--gray-900);}
.home-store__txt{display:flex;flex-direction:column;line-height:1.2;text-align:left;}
.home-store__small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:0.06em;opacity:0.8;}
.home-store__big{display:block;font-size:16px;font-weight:600;}

/* Oficjalne badge sklepów (App Store / Google Play) */
.home-badge-link{display:inline-flex;}
.home-badge{height:48px;width:auto;display:block;}

/* Kolumna przyklejona w układzie dwukolumnowym (na mobile robi się statyczna) */
.home-stickycol{position:sticky;top:96px;}

/* Avatar social-proof row */
.home-proof{display:flex;align-items:center;gap:14px;margin-top:48px;}
.home-avatars{display:flex;align-items:center;}
.home-avatars img{width:38px;height:38px;border-radius:999px;border:2.5px solid #fff;object-fit:cover;box-shadow:var(--shadow-xs);}
.home-avatars img + img{margin-left:-12px;}
.home-proof__text{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,0.82);}
.home-proof__text strong{color:#fff;}

/* Trust row */
.home-trust{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:34px;font-size:12px;color:rgba(255,255,255,0.82);white-space:nowrap;}
.home-trust span{display:inline-flex;align-items:center;gap:7px;}

/* ============================================================
   SECTION SHELLS  (reused across the page)
   ============================================================ */
.home-section{padding:clamp(56px,8vw,108px) clamp(20px,5vw,48px);}
.home-section--border{border-top:1px solid var(--color-border);}
.home-section--gray{background:var(--gray-50);}
.home-section--brand{background:linear-gradient(180deg,#0057B7,#014B98);color:#fff;}
.home-wrap{max-width:1200px;margin:0 auto;}
.home-head{max-width:640px;}

/* ============================================================
   FAQ - native <details>/<summary>
   ============================================================ */
.home-faq{display:grid;gap:clamp(36px,5vw,72px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start;}
.home-faq__aside{position:sticky;top:96px;}
.home-faq__item{border-bottom:1px solid var(--color-border);}
.home-faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 2px;cursor:pointer;list-style:none;font-size:16.5px;font-weight:600;color:var(--color-fg);}
.home-faq__q::-webkit-details-marker{display:none;}
.home-faq__q::after{content:"";flex-shrink:0;width:20px;height:20px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center/20px no-repeat;transition:transform .25s var(--ease-out);}
.home-faq__item[open] .home-faq__q{color:var(--blue-600);}
.home-faq__item[open] .home-faq__q::after{transform:rotate(180deg);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");}
.home-faq__a{margin:0;padding:0 2px 22px;font-size:15px;line-height:1.62;color:var(--gray-600);max-width:54ch;}
.home-faq__more{margin:clamp(28px,3.5vw,40px) 0 0;font-size:15.5px;color:var(--gray-600);}

/* ============================================================
   MOBILE STICKY CTA  (shown < 760px only)
   ============================================================ */
.home-sticky{display:none;}
.home-sticky__spacer{display:none;}

/* ============================================================
   RESPONSIVE - same classes, media-query differences
   (920 and 760 px, matching the foundation)
   ============================================================ */
@media (max-width:759px){
  .home-hero__title{font-size:clamp(31px,8vw,40px);}
  .home-trust{white-space:normal;}

  /* Przyklejone kolumny przestają się kleić, gdy układ składa się w pion */
  .home-faq__aside,.home-stickycol{position:static;top:auto;}
  /* Awatary i tekst dowodu społecznego układają się w pion, bez nachodzenia */
  .home-proof{flex-direction:column;align-items:flex-start;gap:12px;}
  .home-badge{height:44px;}

  .home-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--color-border);box-shadow:0 -4px 18px rgba(1,64,138,0.10);padding:10px 16px calc(10px + env(safe-area-inset-bottom));align-items:center;gap:12px;}
  .home-sticky__spacer{display:block;height:76px;}
  .home-sticky__info{flex:1;min-width:0;}
  .home-sticky__title{font-size:14px;font-weight:700;color:var(--gray-900);line-height:1.2;}
  .home-sticky__sub{font-size:11.5px;color:var(--gray-500);}
  .home-sticky__btn{display:inline-flex;align-items:center;gap:7px;background:var(--blue-500);color:#fff;font-size:14.5px;font-weight:600;padding:12px 20px;border-radius:12px;white-space:nowrap;}
}

/* Kody QR do pobrania (sekcja download): desktop pokazuje, mobile chowa (zostają przyciski) */
.home-qr{display:flex;justify-content:center;gap:24px;margin-top:30px;}
.home-qr__item{margin:0;}
.home-qr__item img{width:128px;height:128px;display:block;background:#fff;border-radius:14px;padding:8px;}
.home-qr__item figcaption{margin-top:8px;font-size:12px;font-weight:600;color:rgba(255,255,255,0.85);}
@media (max-width:759px){ .home-qr{display:none;} }

/* ===== Moved from inline styles ===== */

/* HERO: badges row + phone mock */
.home-hero__badges{display:flex;flex-wrap:wrap;gap:8px;}
.home-hero__phonewrap{position:relative;display:flex;justify-content:flex-end;margin-right:clamp(-44px,-2.4vw,0px);}
.home-phone{position:relative;width:min(360px,84vw);}
.home-phone__frame{position:relative;aspect-ratio:9/19;background:#0B1220;border:11px solid #0B1220;border-radius:44px;box-shadow:0 44px 90px -34px rgba(0,15,45,.75),0 16px 38px -22px rgba(0,0,0,.45);overflow:hidden;}
.home-phone__screen{position:absolute;inset:0;border-radius:33px;overflow:hidden;background:#0B1220;display:flex;flex-direction:column;}
.home-phone__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:2;}
.home-phone__bar{background:linear-gradient(180deg,#0057B7,#014B98);color:#fff;padding:34px 16px 14px;display:flex;align-items:center;justify-content:space-between;}
.home-phone__brand{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-0.01em;}
.home-phone__bell{position:relative;display:inline-flex;}
.home-phone__belldot{position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:999px;background:var(--orange-500);border:1.5px solid #014B98;}
.home-phone__body{flex:1;padding:14px;display:flex;flex-direction:column;gap:11px;overflow:hidden;}
.home-phone__label{font-size:10.5px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray-400);}
.home-phone__card{background:#fff;border-radius:14px;padding:13px;box-shadow:var(--shadow-xs);}
.home-phone__cardhead{display:flex;align-items:center;gap:9px;}
.home-phone__icon{width:30px;height:30px;border-radius:9px;background:var(--blue-50);color:var(--blue-500);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.home-phone__cardtitle{font-size:13.5px;font-weight:600;color:var(--gray-900);line-height:1.2;}
.home-phone__cardtitle2{font-size:13.5px;font-weight:600;color:var(--gray-900);}
.home-phone__cardmeta{display:flex;align-items:center;gap:6px;margin-top:9px;color:var(--gray-400);font-size:11px;}
.home-phone__thumbs{display:flex;align-items:center;gap:6px;margin-top:11px;}
.home-phone__thumb{width:38px;height:38px;border-radius:8px;background:var(--gray-100);}
.home-phone__count{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:11px;font-weight:600;color:var(--gray-500);}
.home-phone__foot{padding:12px 14px;background:#F5F6F8;}
.home-phone__cta{background:var(--blue-500);color:#fff;text-align:center;font-size:13.5px;font-weight:600;padding:12px;border-radius:12px;}

/* USEFUL TODAY */
.home-today__row{display:flex;flex-wrap:wrap;gap:clamp(36px,5vw,72px);align-items:center;}
.home-today__col{flex:1 1 400px;min-width:0;}
.home-today__lead{margin:22px 0 0;max-width:32em;font-size:clamp(15px,1.25vw,18px);line-height:1.62;color:var(--gray-600);}
.home-today__list{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.home-today__li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--gray-900);}
.home-today__check{margin-top:1px;width:22px;height:22px;border-radius:999px;background:var(--blue-500);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.home-today__media{position:relative;flex:1 1 300px;min-width:0;}
.home-today__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;box-shadow:var(--shadow-lg);}
.home-today__card{position:absolute;left:16px;right:16px;bottom:16px;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:12px 14px;display:flex;align-items:center;gap:11px;}
.home-today__cardicon{width:38px;height:38px;border-radius:10px;background:var(--blue-50);color:var(--blue-500);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.home-today__cardtext{flex:1;line-height:1.25;}
.home-today__cardtitle{display:block;font-size:13.5px;font-weight:600;color:var(--gray-900);}
.home-today__cardmeta{display:block;font-size:12px;color:var(--gray-500);margin-top:2px;}
.home-today__synced{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--green-500);}

/* WOULD THEY FIND IT */
.home-find__grid{display:grid;gap:clamp(36px,5vw,72px);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:start;}
.home-find__title{font-size:clamp(28px,3.6vw,46px);}
.home-find__lead{margin:22px 0 0;max-width:30em;font-size:clamp(15px,1.25vw,18px);line-height:1.62;color:var(--gray-600);}
.home-find__card{background:#fff;border:1px solid var(--color-border);border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden;}
.home-find__row{display:flex;align-items:flex-start;gap:16px;padding:22px 22px;border-bottom:1px solid var(--color-border);}
.home-find__row--last{display:flex;align-items:flex-start;gap:16px;padding:22px 22px;}
.home-find__icon{width:46px;height:46px;border-radius:12px;background:var(--blue-50);color:var(--blue-500);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.home-find__itemtitle{margin:2px 0 0;font-size:17px;font-weight:600;color:var(--gray-900);}
.home-find__itemdesc{margin:5px 0 0;font-size:14.5px;line-height:1.55;color:var(--gray-600);}

/* HOW IT WORKS */
.home-how__grid{margin-top:clamp(36px,4vw,60px);display:grid;gap:clamp(28px,3.5vw,48px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));}
.home-how__num{font-family:var(--font-serif);font-weight:700;font-size:56px;line-height:1;color:var(--blue-100);}
.home-how__rule{height:2px;width:44px;background:var(--orange-500);margin:14px 0 0;}
.home-how__steptitle{margin:18px 0 0;font-size:20px;font-weight:700;color:var(--gray-900);}
.home-how__stepdesc{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--gray-600);}

/* REAL EXAMPLE (brand band) */
.home-quote__pad{padding:clamp(64px,9vw,128px) clamp(20px,5vw,48px);}
.home-quote__row{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,64px);align-items:center;}
.home-quote__media{position:relative;flex:1 1 300px;min-width:0;}
.home-quote__img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:20px;box-shadow:0 20px 56px rgba(0,0,0,0.32);}
.home-quote__col{flex:1 1 380px;min-width:0;}
.home-quote__eyebrow{font-size:12.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.7);}
.home-quote__text{margin:18px 0 0;font-family:var(--font-serif);font-weight:600;font-size:clamp(22px,2.4vw,34px);line-height:1.34;letter-spacing:-0.005em;color:#fff;text-wrap:pretty;}

/* SECURITY */
.home-security__grid{margin-top:clamp(36px,4vw,56px);display:grid;gap:clamp(28px,3vw,44px);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));}
.home-security__icon{width:44px;height:44px;border-radius:12px;background:var(--blue-50);color:var(--blue-500);display:flex;align-items:center;justify-content:center;}
.home-security__itemtitle{margin:16px 0 0;font-size:16.5px;font-weight:700;color:var(--gray-900);}
.home-security__itemdesc{margin:8px 0 0;font-size:14px;line-height:1.58;color:var(--gray-600);}

/* TESTIMONIALS */
.home-testi__grid{margin-top:clamp(32px,4vw,52px);display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));}
.home-testi__card{background:#fff;border:1px solid var(--color-border);border-radius:16px;padding:24px;display:flex;flex-direction:column;}
.home-testi__mark{font-family:var(--font-serif);font-weight:700;font-size:40px;line-height:0.6;color:var(--orange-500);height:22px;}
.home-testi__quote{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--gray-900);flex:1;}
.home-testi__author{margin-top:20px;display:flex;align-items:center;gap:11px;}
.home-testi__avatar{width:40px;height:40px;border-radius:999px;flex-shrink:0;background-color:var(--gray-100);background-size:cover;background-position:center;}
.home-testi__avatar--julia{background-image:url('/redesign/img/stock/avatar-julia.jpg');}
.home-testi__avatar--david{background-image:url('/redesign/img/stock/avatar-david.jpg');}
.home-testi__avatar--maria{background-image:url('/redesign/img/stock/avatar-maria.jpg');}
.home-testi__avatar--tomek{background-image:url('/redesign/img/stock/avatar-tomek.jpg');}
.home-testi__name{font-size:14px;font-weight:700;color:var(--gray-900);}
.home-testi__role{font-size:12.5px;color:var(--gray-500);margin-top:1px;}

/* FAQ */
.home-faq__title{font-size:clamp(28px,3.4vw,42px);line-height:1.1;}
.home-faq__morelink{font-weight:600;color:var(--blue-500);}

/* RESOURCES */
.home-res__grid{margin-top:clamp(32px,4vw,48px);display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
.home-res__card{display:block;background:#fff;border:1px solid var(--color-border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);}
.home-res__cover{aspect-ratio:16/10;background:repeating-linear-gradient(135deg,var(--gray-100),var(--gray-100) 14px,var(--gray-50) 14px,var(--gray-50) 28px);display:flex;align-items:center;justify-content:center;color:var(--gray-300);border-bottom:1px solid var(--color-border);}
.home-res__coverimg{width:100%;height:100%;object-fit:cover;display:block;}
.home-res__body{padding:24px;}
.home-res__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;}
.home-res__type{background:var(--blue-50);color:var(--blue-500);font-weight:600;border-radius:999px;padding:4px 10px;}
.home-res__cat{color:var(--gray-500);}
.home-res__title{margin:14px 0 0;font-size:18px;font-weight:700;letter-spacing:-0.01em;line-height:1.3;color:var(--gray-900);}
.home-res__excerpt{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--gray-600);}
.home-res__meta{margin-top:16px;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--gray-500);}
.home-res__footer{margin-top:32px;display:flex;justify-content:flex-end;}
.home-res__seeall{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--blue-500);}

/* FINAL CTA */
.home-cta__pad{padding:clamp(56px,8vw,104px) clamp(20px,5vw,48px) clamp(64px,8vw,112px);}
.home-cta__box{max-width:1100px;margin:0 auto;background:linear-gradient(180deg,#0057B7,#013E80);border-radius:28px;box-shadow:var(--shadow-lg);padding:clamp(48px,7vw,88px) clamp(28px,5vw,64px);text-align:center;color:#fff;}
.home-cta__logo{height:30px;width:auto;display:block;margin:0 auto;}
.home-cta__title{margin:22px auto 0;max-width:18ch;font-family:var(--font-serif);font-weight:700;font-size:clamp(28px,3.6vw,48px);line-height:1.1;letter-spacing:-0.01em;color:#fff;text-wrap:balance;}
.home-cta__lead{margin:18px auto 0;max-width:42ch;font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:rgba(255,255,255,0.85);}
.home-cta__badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px;}