/* Layout mobilny — port "Mobile Landing.dc.html" z Claude Design.
Projekt mobilny to osobny układ, nie samo zwężenie desktopu: hero ma zdjęcie
u góry z gradientem i treść przy dolnej krawędzi, USP idzie w wiersze z numerem
z boku, produkt i porównanie układają się w kolumnę, a przyciski są pełnej
szerokości z celem dotykowym >= 44 px.
Reguły są w @media, więc jeden URL obsługuje oba układy — bez sniffowania
user-agenta i bez drugiego kompletu HTML-a. !important jest konieczne, bo
wartości bazowe siedzą w atrybutach style (tak wychodzą z Claude Design). */
@keyframes tgUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes tgWipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tgHint { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(5px); opacity: .9; } }
/* Elementy istniejące tylko w projekcie mobilnym. */
.tg-hero-veil, .tg-hero-scroll, .tg-icon-arrow { display: none; }
@media (max-width: 767px) {
/* ── NAV ───────────────────────────────────────────────────────────── */
.tg-nav { padding: 10px 16px !important; }
.tg-nav > div { flex-wrap: nowrap !important; gap: 10px !important; }
.tg-nav-ship { display: none !important; }
.tg-nav a[href="#top"] { min-height: 44px; gap: 8px !important; }
.tg-nav a[href="#top"] > svg { width: 22px; height: 20px; }
.tg-nav a[href="#top"] > span { font-size: 14px !important; }
.tg-nav-cta { min-height: 44px; padding: 0 16px !important; font-size: 12px !important; letter-spacing: .04em !important; gap: 7px !important; }
/* ── PRELOADER ─────────────────────────────────────────────────────── */
[data-preloader] { animation-duration: .5s !important; animation-delay: 1.6s !important; }
[data-preloader] > span:nth-child(1),
[data-preloader] > span:nth-child(2) { width: 130px !important; height: 130px !important; animation-duration: .8s !important; }
[data-preloader] > span:nth-child(2) { animation-delay: .4s !important; }
[data-preloader] > svg:nth-child(3) { width: 170px !important; height: 170px !important; }
[data-preloader] > svg:nth-child(3) circle:last-of-type { animation-duration: 1.55s !important; }
[data-preloader] > svg:nth-child(4) { width: 76px !important; height: 69px !important; animation-duration: 1.55s !important; }
[data-preloader] > span:nth-child(5) { display: none !important; }
/* ── HERO ──────────────────────────────────────────────────────────── */
.tg-hero { min-height: calc(100svh - 65px) !important; flex-direction: column; justify-content: flex-end !important; align-items: stretch !important; padding: 20px 16px 24px !important; }
.tg-hero-mark { display: none !important; }
/* position: static, zeby .tg-hero-media liczylo swoje 58% wzgledem sekcji, a nie siatki. */
.tg-hero-grid { display: block !important; position: static !important; gap: 0 !important; }
.tg-hero-media { position: absolute !important; top: 0; left: 0; z-index: 0; width: 100%; height: 58%; min-height: 0 !important; align-self: auto !important; animation: none !important; }
.tg-hero-media img { object-position: 45% 35% !important; clip-path: polygon(0 0, 100% 0, 100% 84%, 44% 100%, 0 92%) !important; transform: none !important; animation: tgWipe .9s cubic-bezier(.2,.85,.2,1) 1.7s both !important; }
.tg-hero-veil { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 58%; background: linear-gradient(to bottom, rgba(10,10,10,.1), rgba(10,10,10,.92)); pointer-events: none; }
.tg-hero-copy { position: relative; z-index: 2; gap: 16px !important; }
.tg-hero-badge { font-size: 9px !important; letter-spacing: .22em !important; padding: 7px 10px !important; gap: 7px !important; border-color: rgba(255,255,255,.4) !important; color: rgba(255,255,255,.85) !important; animation: tgUp .55s cubic-bezier(.2,.85,.2,1) 1.75s both !important; }
.tg-hero-badge > svg { width: 10px; height: 9px; }
.tg-hero-h1 { font-size: 12.4vw !important; line-height: .88 !important; letter-spacing: -.05em !important; }
.tg-hero-h1 > span { padding: .16em 0 .1em !important; margin: -.16em 0 -.1em !important; }
.tg-hero-h1 > span > span { animation-duration: .85s !important; }
.tg-hero-h1 > span:nth-child(1) > span { animation-delay: 1.8s !important; }
.tg-hero-h1 > span:nth-child(2) > span { animation-delay: 1.9s !important; }
.tg-hero-h1 > span:nth-child(3) > span { animation-delay: 2s !important; }
.tg-hero-lead { max-width: none !important; font-size: 15px !important; line-height: 1.5 !important; color: rgba(255,255,255,.75) !important; animation: tgUp .6s cubic-bezier(.2,.85,.2,1) 2.15s both !important; }
/* Przyciski stają się bezpośrednimi dziećmi kolumny, żeby wziąć jej gap 16px. */
.tg-hero-actions { display: contents !important; }
.tg-hero-cta { min-height: 56px; justify-content: center !important; padding: 0 !important; font-size: 15px !important; letter-spacing: .04em !important; box-shadow: none !important; animation: tgUp .6s cubic-bezier(.2,.85,.2,1) 2.28s both !important; }
.tg-hero-cta .tg-icon-cart { display: none; }
.tg-hero-cta .tg-icon-arrow { display: block; order: 2; } /* w projekcie mobilnym strzalka stoi za napisem */
.tg-hero-alt { min-height: 48px; justify-content: center !important; padding: 0 !important; font-size: 13px !important; letter-spacing: .04em !important; border: 2px solid rgba(255,255,255,.45) !important; animation: tgUp .6s cubic-bezier(.2,.85,.2,1) 2.38s both !important; }
.tg-hero-scroll { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); animation: tgHint 2.4s ease-in-out 2.7s infinite; }
/* ── EDIT Z SIŁOWNI ────────────────────────────────────────────────── */
.tg-gym { padding: 0 !important; }
.tg-gym-frame { height: auto !important; aspect-ratio: 4 / 5; }
.tg-gym-overlay { padding: 16px !important; background: linear-gradient(to top, rgba(10,10,10,.88) 0%, rgba(10,10,10,.22) 46%, rgba(10,10,10,0) 78%) !important; }
.tg-gym-overlay > div:first-child > span { font-size: 9px !important; letter-spacing: .2em !important; padding: 7px 10px !important; gap: 7px !important; }
.tg-gym-overlay > div:first-child > span > svg { width: 11px; height: 11px; }
.tg-gym-title { max-width: none !important; font-size: 27px !important; line-height: .96 !important; letter-spacing: -.04em !important; text-shadow: none !important; }
.tg-gym-vid { display: none !important; }
/* ── TICKER ────────────────────────────────────────────────────────── */
.tg-ticker { padding: 10px 0 !important; border-top-width: 2px !important; border-bottom-width: 2px !important; }
.tg-ticker-track { font-size: 18px !important; animation-duration: 18s !important; }
.tg-ticker-track > span { padding-right: 18px !important; }
/* ── USP ───────────────────────────────────────────────────────────── */
.tg-usp { padding: 34px 16px !important; }
.tg-usp > div { gap: 22px !important; }
.tg-usp h2 { max-width: none !important; font-size: 30px !important; line-height: .94 !important; letter-spacing: -.042em !important; }
.tg-usp-row { display: grid !important; grid-template-columns: auto 1fr !important; align-items: start !important; column-gap: 14px !important; row-gap: 6px !important; padding: 18px 0 !important; }
.tg-usp-num { grid-row: 1 / span 2; font-size: 36px !important; line-height: .78 !important; letter-spacing: -.05em !important; -webkit-text-stroke-width: 1.6px !important; }
.tg-usp-title { grid-column: 2; font-size: 19px !important; line-height: 1 !important; letter-spacing: -.03em !important; }
.tg-usp-text { grid-column: 2; font-size: 14px !important; line-height: 1.5 !important; }
/* ── PRODUKT ───────────────────────────────────────────────────────── */
.tg-prod { padding: 34px 16px !important; }
.tg-prod > div { display: flex !important; flex-direction: column; gap: 18px !important; }
.tg-prod-media img { height: auto !important; aspect-ratio: 1 / 1; padding: 14px !important; }
.tg-prod-badge { display: none !important; }
.tg-prod-copy { gap: 18px !important; }
.tg-prod-copy > span:first-child { font-size: 9px !important; letter-spacing: .22em !important; }
.tg-prod-copy h2 { font-size: 28px !important; line-height: .94 !important; letter-spacing: -.042em !important; }
.tg-prod-copy p { max-width: none !important; font-size: 15px !important; line-height: 1.5 !important; }
.tg-prod-copy > div:last-child { flex-direction: column-reverse; align-items: stretch !important; gap: 18px !important; }
.tg-prod-copy > div:last-child > span { gap: 10px !important; }
.tg-prod-copy > div:last-child > span > span { width: 34px !important; height: 34px !important; }
.tg-prod-copy .tg-cta-pink { min-height: 56px; justify-content: center !important; padding: 0 !important; font-size: 15px !important; letter-spacing: .04em !important; box-shadow: none !important; }
/* ── PORÓWNANIE ────────────────────────────────────────────────────── */
.tg-vs { padding: 34px 16px !important; }
.tg-vs > div { gap: 16px !important; }
.tg-vs h2 { max-width: none !important; font-size: 30px !important; line-height: .94 !important; letter-spacing: -.042em !important; }
.tg-vs-grid { display: flex !important; flex-direction: column; gap: 16px !important; }
.tg-vs-grid > div { padding: 20px 18px !important; gap: 12px !important; }
.tg-vs-grid > div:first-child { clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%) !important; }
.tg-vs-grid > div:last-child { clip-path: none !important; }
.tg-vs-grid > div > span:nth-child(1) { font-size: 9px !important; letter-spacing: .2em !important; }
.tg-vs-grid > div > span:nth-child(2) { font-size: 27px !important; line-height: .95 !important; letter-spacing: -.04em !important; }
.tg-vs-grid > div > span:nth-child(2) > span { font-size: 14px !important; }
.tg-vs-grid > div > div { gap: 12px !important; }
.tg-vs-grid > div > div > span { font-size: 14px !important; gap: 9px !important; }
.tg-vs-grid > div > div > span > svg { width: 16px; height: 16px; }
.tg-vs > div > p:last-child { font-size: 9px !important; letter-spacing: .14em !important; }
/* ── OPINIE ────────────────────────────────────────────────────────── */
.tg-rev { padding: 34px 0 34px 16px !important; }
.tg-rev > svg { display: none !important; }
.tg-rev > div { gap: 16px !important; }
.tg-rev h2 { padding-right: 16px; font-size: 30px !important; line-height: .94 !important; letter-spacing: -.042em !important; }
.tg-rev-hint { display: none !important; }
.tg-rev-scroll { gap: 12px !important; margin-right: 0 !important; padding: 2px 16px 14px 0 !important; }
.tg-review { flex: 0 0 80vw !important; padding: 20px 18px !important; gap: 14px !important; }
.tg-review blockquote { font-size: 19px !important; line-height: 1.15 !important; }
.tg-review figcaption { font-size: 9px !important; }
/* ── FAQ ───────────────────────────────────────────────────────────── */
.tg-faq { padding: 34px 16px !important; }
.tg-faq > div { gap: 18px !important; }
.tg-faq h2 { font-size: 30px !important; line-height: .94 !important; letter-spacing: -.042em !important; }
.tg-faq-btn { min-height: 60px; padding: 16px 0 !important; font-size: 17px !important; gap: 12px !important; }
.tg-faq-btn > svg { width: 22px; height: 22px; }
.tg-faq p { max-width: none !important; padding: 0 0 18px !important; font-size: 15px !important; }
/* ── CTA + STOPKA ──────────────────────────────────────────────────── */
.tg-cta { padding: 36px 16px 34px !important; }
.tg-cta > div { gap: 18px !important; }
.tg-cta-h { max-width: none !important; font-size: 34px !important; line-height: .9 !important; letter-spacing: -.045em !important; }
.tg-cta > div > div { align-items: stretch !important; gap: 18px !important; }
.tg-cta-btn { min-height: 56px; justify-content: center !important; padding: 0 !important; font-size: 15px !important; letter-spacing: .04em !important; box-shadow: none !important; }
.tg-cta-trust { flex-wrap: wrap; gap: 12px !important; font-size: 9px !important; letter-spacing: .16em !important; }
.tg-cta-trust > span { gap: 6px !important; }
.tg-cta-trust svg { width: 14px; height: 14px; }
.tg-foot { flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; padding-top: 18px !important; }
.tg-foot > div:first-child { gap: 9px !important; }
.tg-foot > div:first-child > svg { width: 26px; height: 23px; }
.tg-foot > div:first-child > span { font-size: 15px !important; }
.tg-foot > div:last-child { gap: 0 !important; font-size: 9px !important; }
.tg-foot > div:last-child > a { display: none !important; }
}