/* Priorytetowe filmy TikTok w hero — pionowe kadry 9:16. */
.tiktok-panel { align-self: center; }
.tiktok-panel > h2 { font-size: clamp(1.35rem, 2.4vw, 2rem); margin: -7px 0 19px; letter-spacing: -.04em; }
.tiktok-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tiktok-card { position: relative; aspect-ratio: 9 / 16; overflow: hidden; padding: 0; border: 1px solid rgba(216,176,82,.35); background: #171717; color: #fff; text-align: left; cursor: pointer; box-shadow: 0 25px 65px rgba(0,0,0,.35); }
.tiktok-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s; }
.tiktok-card:hover img { transform: scale(1.05); }
.tiktok-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72), transparent 55%); }
.tiktok-card .play { width: 53px; height: 53px; font-size: .82rem; }
.tiktok-card small { position: absolute; z-index: 1; bottom: 14px; left: 14px; font-size: .57rem; letter-spacing: .1em; font-weight: bold; }
.tiktok-card:first-child { transform: none; }
.social-banner { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 22px 28px; display: flex; align-items: center; justify-content: center; gap: 28px; border-block: 1px solid var(--line); }
.social-banner p { margin: 0; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.social-banner a { color: var(--gold); font-size: .85rem; font-weight: bold; text-decoration: none; }
.contact-form { width: min(100%, 680px); margin: 35px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
.contact-form input, .contact-form textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px; background: rgba(255,255,255,.04); color: #fff; font: inherit; }
.contact-form textarea { grid-column: 1 / -1; min-height: 115px; resize: vertical; }
.contact-form button { justify-self: center; grid-column: 1 / -1; border: 0; cursor: pointer; }
.video-modal { max-height: calc(100dvh - 24px); overflow: auto; }
.video-modal video { display: block; width: 100%; height: min(70dvh, 650px); max-height: none; object-fit: contain; background: #000; }
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
main { width: 100%; max-width: 100%; overflow-x: clip; }
@media (max-width: 760px) { .tiktok-panel { width: 100%; } .tiktok-grid { width: 84%; margin-left: auto; } .social-banner { align-items: flex-start; flex-direction: column; gap: 12px; } .contact-form { grid-template-columns: 1fr; } .contact-form textarea, .contact-form button { grid-column: auto; } }
@media (max-width: 760px) { .section, .hero, footer, .social-banner { width: calc(100% - 32px); } .video-modal { width: calc(100% - 16px); padding: 22px 10px 10px; } .video-modal video { height: min(72dvh, 620px); } .tiktok-grid { width: 100%; } }

/* Portfolio: dziesięć wybranych kart i pełna galeria. */
.portfolio .section-head > p { margin-bottom: 14px; }
.portfolio-subtitle { max-width: 590px; margin: 22px 0 0; color: var(--muted); font-size: 1rem; }
.portfolio .portfolio-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.portfolio .project { min-height: 280px; border-radius: 15px; border: 1px solid rgba(212,175,55,.13); }
.portfolio .project:hover { border-color: #d4af37; box-shadow: 0 16px 44px rgba(0,0,0,.32), 0 0 24px rgba(212,175,55,.1); }
.portfolio .project:nth-child(n+11) { display: none; }
.portfolio .project span { left: 15px; bottom: 57px; font-size: .56rem; }
.portfolio .project h3 { left: 15px; bottom: 22px; font-size: 1rem; }
.portfolio .project i { left: 15px; font-size: .67rem; }
.all-portfolio-button { display: flex; align-items: center; gap: 27px; margin: 48px auto 0; padding: 15px 22px; border: 1px solid #d4af37; border-radius: 100px; background: transparent; color: #f8f6f1; font: inherit; font-size: .85rem; font-weight: bold; cursor: pointer; transition: .25s ease; }
.all-portfolio-button:hover { transform: translateY(-3px); background: #d4af37; color: #15120b; box-shadow: 0 10px 30px rgba(212,175,55,.2); }
.portfolio-lightbox { width: min(1420px, calc(100% - 34px)); height: min(840px, calc(100dvh - 34px)); padding: 0; border: 1px solid rgba(212,175,55,.35); background: #0b0b0b; color: #f8f6f1; overflow: hidden; }
.portfolio-lightbox::backdrop { background: rgba(0,0,0,.9); backdrop-filter: blur(5px); }
.portfolio-lightbox-shell { height: 100%; display: grid; grid-template-columns: 255px 1fr; }
.portfolio-lightbox-close { position: absolute; top: 14px; right: 18px; z-index: 4; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; font-size: 1.85rem; line-height: 1; cursor: pointer; }
.portfolio-lightbox-list { padding: 20px 12px; border-right: 1px solid var(--line); overflow: auto; display: grid; align-content: start; gap: 8px; }
.portfolio-lightbox-thumb { height: 86px; padding: 0; position: relative; overflow: hidden; border: 1px solid transparent; border-radius: 8px; background: #151515; color: #fff; text-align: left; cursor: pointer; }
.portfolio-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: .25s; }
.portfolio-lightbox-thumb span { position: absolute; inset: auto 9px 7px; font-size: .67rem; font-weight: bold; }
.portfolio-lightbox-thumb.active { border-color: #d4af37; }
.portfolio-lightbox-thumb.active img, .portfolio-lightbox-thumb:hover img { opacity: .95; transform: scale(1.04); }
.portfolio-lightbox-view { min-width: 0; padding: 38px 72px 28px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.portfolio-lightbox-view > .eyebrow { margin: 0 0 10px; }
.portfolio-lightbox-image { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #050505; border-radius: 10px; animation: portfolioFade .28s ease; }
.portfolio-lightbox-details { padding-top: 17px; }.portfolio-lightbox-category { margin: 0 0 3px; color: #d4af37; text-transform: uppercase; font-size: .66rem; letter-spacing: .13em; }.portfolio-lightbox-details h2 { margin: 0; font-size: clamp(1.45rem,2.5vw,2.45rem); }.portfolio-lightbox-description { margin: 7px 0 0; color: #aaa49a; font-size: .88rem; }
.portfolio-lightbox-controls { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 14px; }.portfolio-lightbox-controls button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #fff; font-size: 1.15rem; cursor: pointer; }.portfolio-lightbox-controls button:hover { border-color: #d4af37; color: #d4af37; }.portfolio-lightbox-count { color: #aaa49a; font-size: .75rem; min-width: 44px; text-align: center; }
@keyframes portfolioFade { from { opacity: .2; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) { .portfolio .portfolio-grid { grid-template-columns: repeat(2, 1fr); }.portfolio-lightbox-view { padding: 35px 42px 24px; }.portfolio-lightbox-shell { grid-template-columns: 190px 1fr; } }
@media (max-width: 760px) { .portfolio .portfolio-grid { grid-template-columns: 1fr; }.portfolio .project { min-height: 350px; }.portfolio-lightbox { width: 100%; height: 100dvh; border: 0; }.portfolio-lightbox-shell { grid-template-columns: 1fr; grid-template-rows: 128px 1fr; }.portfolio-lightbox-list { grid-template-columns: repeat(10, 82px); grid-auto-flow: column; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); padding: 13px 52px 13px 13px; }.portfolio-lightbox-thumb { height: 100px; }.portfolio-lightbox-view { padding: 22px 14px 14px; }.portfolio-lightbox-image { max-height: 52dvh; }.portfolio-lightbox-details { padding-top: 11px; }.portfolio-lightbox-description { display: none; }.portfolio-lightbox-close { top: 9px; right: 10px; }.portfolio-lightbox-controls { margin-top: 8px; } }

/* Nowa, czysta sekcja portfolio — bez wcześniejszych projektów i grafik. */
.portfolio { display: none; }
.portfolio-clean { display: grid; min-height: min(660px, 75vh); place-items: center; text-align: center; background: radial-gradient(circle at 50% 45%, rgba(212,175,55,.11), transparent 46%), #090909; border-block: 1px solid rgba(212,175,55,.2); }
.portfolio-clean-inner { max-width: 720px; padding: 80px 24px; }.portfolio-clean h2 { margin: 0; }.portfolio-clean-inner > p:not(.eyebrow) { max-width: 610px; margin: 25px auto 0; color: var(--muted); font-size: 1.06rem; }.portfolio-clean-button { display: inline-flex; align-items: center; gap: 30px; margin-top: 36px; padding: 16px 22px; border: 1px solid #d4af37; border-radius: 100px; background: #d4af37; color: #15120b; font: inherit; font-size: .9rem; font-weight: bold; cursor: pointer; transition: transform .25s, box-shadow .25s; }.portfolio-clean-button:hover { transform: translateY(-4px); box-shadow: 0 13px 38px rgba(212,175,55,.25); }
.clean-portfolio-dialog { width: min(1340px, calc(100% - 36px)); max-height: calc(100dvh - 36px); padding: 42px; border: 1px solid rgba(212,175,55,.45); background: #090909; color: #f8f6f1; overflow: auto; }.clean-portfolio-dialog::backdrop { background: rgba(0,0,0,.92); backdrop-filter: blur(5px); }.clean-portfolio-close { position: fixed; right: max(24px,calc((100vw - 1280px)/2)); top: 24px; z-index: 3; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: #121212; color: #fff; font-size: 1.9rem; cursor: pointer; }.clean-portfolio-head { max-width: 700px; margin: 0 auto 42px; text-align: center; }.clean-portfolio-head h2 { margin: 0; }.clean-portfolio-head > p:not(.eyebrow) { margin: 15px 0 0; color: var(--muted); }.clean-portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }.clean-project { padding: 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: linear-gradient(145deg, #121212, #0d0d0d); transition: transform .28s, border-color .28s, box-shadow .28s; }.clean-project:hover { transform: translateY(-6px); border-color: #d4af37; box-shadow: 0 17px 38px rgba(0,0,0,.35); }.clean-project-thumb { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px dashed rgba(212,175,55,.45); border-radius: 9px; background: repeating-linear-gradient(135deg, rgba(212,175,55,.025) 0 10px, transparent 10px 20px); color: #d4af37; font-size: 1.3rem; letter-spacing: .12em; }.clean-project p { margin: 17px 0 4px; color: #d4af37; text-transform: uppercase; letter-spacing: .13em; font-size: .62rem; }.clean-project h3 { margin: 0; font-size: 1.15rem; }.clean-project small { display: block; margin-top: 7px; color: var(--muted); }
@media (max-width: 760px) { .portfolio-clean { min-height: 560px; }.clean-portfolio-dialog { width: 100%; max-height: 100dvh; min-height: 100dvh; padding: 74px 16px 25px; border: 0; }.clean-portfolio-close { position: absolute; top: 16px; right: 16px; }.clean-portfolio-grid { grid-template-columns: 1fr; }.clean-portfolio-head { margin-bottom: 28px; } }