/* Swiftech-Art — Realizacje */
:root {
  --portfolio-line: rgba(119,136,164,.23);
  --portfolio-muted: #687486;
  --portfolio-panel: rgba(255,255,255,.70);
  --portfolio-shadow: 0 28px 80px rgba(25,49,88,.10);
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.portfolio-ambient { position: fixed; inset: 0; pointer-events: none; z-index: -2; background: radial-gradient(circle at 82% 12%, rgba(43,104,238,.12), transparent 34%), radial-gradient(circle at 8% 38%, rgba(43,104,238,.055), transparent 26%); }
.portfolio-header { background: rgba(255,255,255,.72); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(220,227,238,.58); }
.portfolio-header .nav-wrap { min-height: 48px; }
.portfolio-header .main-nav a.active { color: var(--blue); }
.portfolio-header .main-nav a.active::after { transform: scaleX(1); }

.portfolio-hero { padding: 168px 0 0; min-height: 720px; display: flex; flex-direction: column; justify-content: space-between; }
.portfolio-hero-inner { padding-bottom: 92px; }
.portfolio-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.portfolio-kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.portfolio-kicker.light { color: #dce8ff; }
.portfolio-hero h1 { margin: 34px 0 52px; max-width: 1120px; font-size: clamp(64px, 9.2vw, 142px); line-height: .86; letter-spacing: -.07em; font-weight: 800; }
.portfolio-hero h1 span { color: var(--blue); }
.portfolio-hero-bottom { max-width: 1120px; margin-left: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 80px; align-items: end; }
.portfolio-hero-bottom p { max-width: 690px; margin: 0; color: var(--portfolio-muted); font-size: clamp(18px, 2vw, 25px); line-height: 1.55; }
.portfolio-scroll-link { display: inline-flex; align-items: center; gap: 18px; font-weight: 800; white-space: nowrap; }
.portfolio-scroll-link span { color: var(--blue); font-size: 21px; }
.portfolio-ticker {
  overflow: hidden;
  border-top: 1px solid var(--portfolio-line);
  border-bottom: 1px solid var(--portfolio-line);
  padding: 17px 0;
}
.portfolio-ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: portfolioTicker 28s linear infinite;
}
.portfolio-ticker-group {
  flex: 0 0 100vw;
  min-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  padding: 0 34px;
  box-sizing: border-box;
}
.portfolio-ticker span { font-size: 12px; font-weight: 800; letter-spacing: .16em; white-space: nowrap; }
.portfolio-ticker i { color: var(--blue); font-style: normal; flex: 0 0 auto; }
@keyframes portfolioTicker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .portfolio-ticker-track { animation: none; transform: none; }
  .portfolio-ticker-group:nth-child(2) { display: none; }
}
@media (max-width: 760px) {
  .portfolio-ticker-track { animation-duration: 22s; }
  .portfolio-ticker-group {
    flex-basis: 820px;
    min-width: 820px;
    justify-content: flex-start;
    gap: 22px;
    padding: 0 24px;
  }
}

.portfolio-list { padding: 120px 0 150px; }
.portfolio-project { padding: 42px 0 110px; border-top: 1px solid var(--portfolio-line); }
.project-topline { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 38px; color: var(--portfolio-muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.project-topline span:first-child { color: var(--blue); }
.project-title-row { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 80px; align-items: end; margin-bottom: 48px; }
.project-label { display: inline-block; margin-bottom: 13px; color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-project h2 { margin: 0; font-size: clamp(42px, 5.3vw, 78px); line-height: .98; letter-spacing: -.045em; }
.project-title-row > p, .portfolio-project-half > p, .commerce-copy > p, .dental-copy > p { margin: 0; color: var(--portfolio-muted); font-size: 17px; line-height: 1.72; }
.project-visual { display: block; overflow: hidden; border-radius: 26px; background: #0c1119; box-shadow: var(--portfolio-shadow); position: relative; isolation: isolate; }
.project-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 65%, rgba(255,255,255,.13)); opacity: 0; transition: .45s ease; }
.project-visual:hover::after { opacity: 1; }
.project-visual img { width: 100%; display: block; transition: transform .65s cubic-bezier(.2,.65,.25,1); }
.project-visual:hover img { transform: scale(1.016); }
.browser-ui { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: #f4f6f9; border-bottom: 1px solid #e4e8ee; color: #8490a2; position: relative; z-index: 2; }
.browser-ui i { width: 9px; height: 9px; border-radius: 50%; background: #ff7c73; }
.browser-ui i:nth-child(2){background:#f7c95c}.browser-ui i:nth-child(3){background:#72ca83}
.browser-ui b { margin-left: auto; margin-right: auto; font-size: 11px; font-weight: 650; letter-spacing: .03em; transform: translateX(-20px); }
.project-footer-row { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 28px; }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.project-tags span { padding: 9px 13px; border: 1px solid var(--portfolio-line); border-radius: 999px; color: var(--portfolio-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.portfolio-project .project-open {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 17px;
  border: 1px solid var(--portfolio-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transform: none;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}
.portfolio-project .project-open span { color: var(--blue); font-size: 18px; line-height: 1; transition: transform .22s ease; }
.portfolio-project .project-open:hover {
  background: rgba(11,99,246,.07);
  border-color: rgba(11,99,246,.32);
  color: var(--ink);
  transform: translateY(-2px);
}
.portfolio-project .project-open:hover span { transform: translate(2px,-2px); }


.portfolio-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.portfolio-project-half { padding-bottom: 100px; }
.portfolio-project-half .project-visual { border-radius: 20px; margin-bottom: 34px; }
.portfolio-project-half .project-visual img { aspect-ratio: 1.32 / 1; object-fit: cover; object-position: top center; }
.portfolio-project-half h2 { font-size: clamp(36px, 4.2vw, 59px); margin: 0 0 23px; }
.portfolio-project-half > p { max-width: 570px; }
.portfolio-project-offset { margin-top: 130px; }

.portfolio-project-commerce { padding-top: 54px; }
.commerce-grid { display: grid; grid-template-columns: minmax(310px,.82fr) minmax(0,1.18fr); gap: 80px; align-items: center; }
.commerce-copy h2, .dental-copy h2 { margin: 0 0 28px; font-size: clamp(40px, 4.35vw, 62px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.commerce-copy .project-tags, .dental-copy .project-tags { margin-top: 30px; }
.project-open-large { margin-top: 35px; }
.commerce-stage { display: block; padding: clamp(24px,4vw,58px); border-radius: 34px; background: linear-gradient(145deg,#d8eedc,#edf6e8 55%,#cde6c9); overflow: hidden; box-shadow: var(--portfolio-shadow); }
.commerce-window { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 28px 60px rgba(44,86,57,.16); color: #16221a; transform: rotate(1.2deg); transition: transform .5s ease; }
.commerce-stage:hover .commerce-window { transform: rotate(0) translateY(-3px); }
.commerce-window-top { display:flex; align-items:center; gap:22px; padding:18px 22px; border-bottom:1px solid #e8eee8; font-size:11px; }
.commerce-window-top b { margin-right:auto; font-size:18px; color:#2e7941; }
.commerce-window-top span { color:#5f6c62; }
.commerce-window-top em { font-style:normal; }
.commerce-product { display:grid; grid-template-columns: .92fr 1.08fr; min-height: 420px; }
.commerce-product-image { background:#eef4e9; overflow:hidden; }
.commerce-product-image img { width:100%; height:100%; object-fit:cover; }
.commerce-product-copy { padding:48px 38px; display:flex; flex-direction:column; justify-content:center; }
.commerce-product-copy small { color:#4a8b58; font-weight:800; letter-spacing:.12em; }
.commerce-product-copy strong { margin:17px 0; font-size:clamp(28px,3vw,47px); line-height:1.02; letter-spacing:-.04em; }
.commerce-product-copy p { color:#667169; line-height:1.55; }
.commerce-product-copy span { margin-top:20px; color:#2e7941; font-weight:800; }

.portfolio-project-dental { padding-top: 70px; }
.dental-layout { display: grid; grid-template-columns: minmax(430px,.95fr) minmax(0,1.05fr); gap: 64px; align-items: center; }
.dental-visual { border-radius: 26px; }
.dental-visual img { aspect-ratio: 1.75/1; object-fit: cover; object-position: top center; }

.portfolio-approach { padding: 120px 0; border-top: 1px solid var(--portfolio-line); background: rgba(54,90,150,.035); }
.approach-grid { display: grid; grid-template-columns: minmax(390px,.9fr) minmax(0,1.1fr); gap: 86px; align-items: start; }
.approach-grid h2 { margin: 30px 0 0; max-width: 560px; font-size: clamp(46px, 4.8vw, 68px); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.approach-list { border-top: 1px solid var(--portfolio-line); }
.approach-list > div { display: grid; grid-template-columns: 58px 1fr; gap: 24px; padding: 27px 0; border-bottom: 1px solid var(--portfolio-line); }
.approach-list span { color: var(--blue); font-size: 12px; font-weight: 850; }
.approach-list p { margin: 0; color: var(--portfolio-muted); font-size: 18px; line-height: 1.62; }
.approach-list strong { color: var(--ink); }

.portfolio-cta { padding: 100px 0 120px; }
.portfolio-cta-shell { position: relative; overflow: hidden; padding: clamp(42px, 7vw, 92px); border-radius: 34px; background: #1757d8; color: #fff; text-align: center; }
.portfolio-cta-shell::before { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(255,255,255,.14); border-radius:50%; right:-170px; top:-280px; box-shadow:0 0 0 70px rgba(255,255,255,.035),0 0 0 140px rgba(255,255,255,.025); }
.portfolio-cta-shell h2 { position:relative; margin:25px auto 22px; max-width:900px; font-size:clamp(48px,6.5vw,92px); line-height:.94; letter-spacing:-.055em; }
.portfolio-cta-shell p { position:relative; max-width:670px; margin:0 auto 34px; color:#d8e5ff; font-size:18px; line-height:1.6; }
.portfolio-cta-shell .button { position:relative; }
.portfolio-footer { padding-top: 20px; }

.reveal-item { opacity: 0; transform: translateY(26px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal-item.is-visible { opacity: 1; transform: none; }

html[data-theme="dark"] {
  --portfolio-line: rgba(85,104,132,.38);
  --portfolio-muted: #9aa9bb;
  --portfolio-panel: rgba(12,18,27,.72);
  --portfolio-shadow: 0 28px 80px rgba(0,0,0,.28);
}
html[data-theme="dark"] .portfolio-header { background: rgba(8,13,20,.78); border-color: rgba(45,61,83,.68); }
html[data-theme="dark"] .portfolio-ambient { background: radial-gradient(circle at 82% 12%, rgba(47,106,234,.18), transparent 34%), radial-gradient(circle at 8% 38%, rgba(47,106,234,.08), transparent 26%); }
html[data-theme="dark"] .browser-ui { background:#171e28; border-color:#283443; color:#8190a4; }
html[data-theme="dark"] .portfolio-approach { background:rgba(18,29,45,.35); }
html[data-theme="dark"] .approach-list strong { color:#eef4fb; }
html[data-theme="dark"] .portfolio-project .project-open { color:#d9e7f8; background:transparent; border-color:#2a3a50; }
html[data-theme="dark"] .portfolio-project .project-open:hover { color:#eef4fb; background:rgba(47,106,234,.12); border-color:rgba(89,139,245,.46); }

/* Large editorial headlines should read as phrases, not one word per line. */
.dental-copy h2 br, .approach-grid h2 br { display:none; }

@media (max-width: 980px) {
  .portfolio-hero { min-height: 620px; padding-top: 140px; }
  .portfolio-hero-bottom, .project-title-row, .commerce-grid, .dental-layout, .approach-grid { grid-template-columns: 1fr; gap: 34px; }
  .portfolio-hero-bottom { margin-left: 0; }
  .portfolio-pair { gap: 28px; }
  .portfolio-project-offset { margin-top: 70px; }
  .commerce-copy { order: 1; }
  .commerce-stage { order: 2; }
  .approach-grid { gap: 55px; }
}
@media (max-width: 760px) {
  .portfolio-hero { min-height: auto; padding-top: 125px; }
  .portfolio-hero-inner { padding-bottom: 60px; }
  .portfolio-hero h1 { margin: 30px 0 38px; font-size: clamp(58px, 18vw, 92px); }
  .portfolio-hero-bottom { gap: 28px; }
  .portfolio-hero-bottom p { font-size: 18px; }
  .portfolio-list { padding: 80px 0 100px; }
  .portfolio-project { padding: 32px 0 78px; }
  .project-title-row { margin-bottom: 34px; }
  .portfolio-project h2 { font-size: clamp(38px, 11vw, 56px); }
  .portfolio-pair { grid-template-columns: 1fr; }
  .portfolio-project-offset { margin-top: 0; }
  .project-footer-row { align-items: flex-end; }
  .project-tags { max-width: 75%; }
  .browser-ui b { display:none; }
  .commerce-stage { padding: 18px; border-radius: 22px; }
  .commerce-window-top span { display:none; }
  .commerce-product { grid-template-columns: 1fr; min-height: 0; }
  .commerce-product-image { height: 290px; }
  .commerce-product-copy { padding: 30px 25px; }
  .dental-copy h2, .commerce-copy h2 { font-size: clamp(38px, 10vw, 54px); }
  .dental-visual img { aspect-ratio: 1.25 / 1; }
  .portfolio-approach { padding: 85px 0; }
  .approach-list > div { grid-template-columns: 38px 1fr; gap: 12px; }
  .portfolio-cta { padding: 70px 0 90px; }
  .portfolio-cta-shell { border-radius: 24px; }
}
@media (max-width: 480px) {
  .portfolio-hero h1 { font-size: 54px; }
  .portfolio-kicker { font-size: 10px; }
  .project-topline { margin-bottom: 26px; }
  .project-footer-row { flex-direction: column; align-items: flex-start; }
  .project-tags { max-width: none; }
  .project-visual { border-radius: 18px; }
  .browser-ui { height: 35px; }
  .portfolio-project-half .project-visual img { aspect-ratio: 1.05/1; }
  .commerce-product-image { height: 230px; }
}