:root {
  --bg: #F4EEE4;
  --bg-rgb: 244, 238, 228;
  --text: #1E1A17;
  --text-dim: rgba(30, 26, 23, .84);
  --line: rgba(30, 26, 23, .16);
  --accent: #A04A2E;
  --accent-soft: rgba(160, 74, 46, .14);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: var(--bg); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.accent { color: var(--accent); }
.italic { font-style: italic; text-transform: none !important; }

/* ---------- ziarno ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; place-content: center; gap: 22px; justify-items: center; transition: opacity .9s ease, visibility .9s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-mark { font-family: var(--display); font-style: italic; font-size: 44px; }
.loader-track { width: 180px; height: 1px; background: var(--line); overflow: hidden; }
.loader-track i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }

/* ---------- nawigacja ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; padding: 20px var(--gutter); background: linear-gradient(to bottom, rgba(var(--bg-rgb), .85), rgba(var(--bg-rgb), 0)); }
.nav-mark { font-family: var(--display); font-size: 22px; letter-spacing: .02em; }
.nav-mark em { color: var(--accent); }
.nav nav { display: flex; gap: clamp(14px, 3vw, 36px); align-items: center; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.nav a { transition: color .2s; }
.nav a:hover { color: var(--accent); }
.nav-cta { padding: 9px 16px; border: 1px solid var(--text); border-radius: 999px; }

/* ---------- sceny przypiete ---------- */
.scene { position: relative; height: var(--h, 400vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
canvas.seq { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: transform; transform-origin: 50% 50%; }
.veil { position: absolute; pointer-events: none; }
.veil-bottom { left: 0; right: 0; bottom: 0; height: 44%; background: linear-gradient(to top, var(--bg) 6%, rgba(var(--bg-rgb), 0)); }
.veil-bottom.tall { height: 66%; }
.veil-left { top: 0; bottom: 0; left: 0; width: 62%; background: linear-gradient(to right, rgba(var(--bg-rgb), .94) 22%, rgba(var(--bg-rgb), 0)); }
.veil-left.wide { width: 68%; }
[data-range] { opacity: 0; will-change: opacity, transform; }

/* ---------- hero ---------- */
.hero-copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 6vh, 64px); will-change: transform; }
.name { font-family: var(--display); font-weight: 600; line-height: .86; font-size: clamp(60px, 15vw, 260px); letter-spacing: -.02em; display: flex; flex-direction: column; }
.name .row { display: block; white-space: nowrap; }
.name .row + .row { align-self: flex-end; color: var(--accent); }
.name .ch { display: inline-block; opacity: 0; transform: translate3d(0, .2em, 0); letter-spacing: .4em; filter: blur(10px); }
.is-ready .name .ch { animation: trackIn 1.3s cubic-bezier(.2, .7, .1, 1) forwards; animation-delay: calc(var(--i) * 60ms + 150ms); }
@keyframes trackIn { to { opacity: 1; transform: none; letter-spacing: 0; filter: blur(0); } }
.sub { margin-top: 18px; max-width: 30ch; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.45; color: var(--text-dim); opacity: 0; transition: opacity 1s ease 1.3s; }
.is-ready .sub { opacity: 1; }

.statement { position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; max-width: min(660px, 52vw); }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.big { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 5.6vw, 96px); line-height: .98; letter-spacing: -.02em; }
.big span { display: block; }
.big .accent { font-style: italic; }
.statement .small { margin-top: 24px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; color: var(--text-dim); max-width: 46ch; }

.stats { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 7vh, 72px); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 3vw, 40px); border-top: 1px solid var(--line); padding-top: 22px; }
.stat b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(48px, 6vw, 100px); line-height: .95; font-variant-numeric: tabular-nums; }
.stat:first-child b { color: var(--accent); }
.stat span { display: block; margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--text-dim); max-width: 22ch; }

/* ---------- pakiety ---------- */
.section-tag { position: absolute; top: clamp(84px, 13vh, 130px); left: var(--gutter); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.pillar { position: absolute; left: var(--gutter); top: 50%; translate: 0 -46%; max-width: min(620px, 56vw); }
.pillar h2 { font-family: var(--display); font-weight: 600; font-style: italic; font-size: clamp(60px, 9vw, 156px); line-height: .9; letter-spacing: -.02em; margin: 10px 0 22px; }
.pillar .p-meta { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pillar > p:last-child { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55; color: var(--text-dim); max-width: 42ch; }

/* ---------- kierunki ---------- */
.work-title { position: absolute; top: clamp(84px, 13vh, 130px); left: var(--gutter); font-family: var(--display); font-weight: 600; font-size: clamp(52px, 8vw, 136px); line-height: .92; letter-spacing: -.02em; color: var(--bg); text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.work-title .accent { color: var(--bg); }
.cards { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 6vh, 64px); display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); align-items: end; perspective: 900px; }
.card { position: relative; display: block; padding: 26px 24px 28px; border: 1px solid var(--line); background: rgba(var(--bg-rgb), .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform-style: preserve-3d; transition: border-color .35s, box-shadow .35s, background .35s; }
.card:nth-child(1) { min-height: 250px; }
.card:nth-child(2) { min-height: 220px; }
.card:nth-child(3) { min-height: 190px; }
.card .c-tag { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.card h3 { font-family: var(--display); font-weight: 600; font-style: italic; font-size: clamp(28px, 2.5vw, 40px); line-height: 1; margin: 14px 0 12px; transition: transform .45s cubic-bezier(.2, .7, .1, 1); }
.card p { font-size: 14.5px; line-height: 1.5; color: var(--text-dim); }
.card::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .1, 1); }
.card:hover { border-color: rgba(160, 74, 46, .5); background: rgba(var(--bg-rgb), .92); box-shadow: 0 30px 60px -30px rgba(160, 74, 46, .45); }
.card:hover::after { transform: scaleX(1); }
.card:hover h3 { transform: translateX(6px); }

/* ---------- finale ---------- */
.finale { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.finale-bg { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 60%, var(--accent-soft), transparent 70%), var(--bg); }
.finale-inner { position: relative; padding: 18vh var(--gutter) 10vh; text-align: center; opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .1, 1); }
.finale-inner.in { opacity: 1; transform: none; }
.cta-title { font-family: var(--display); font-weight: 600; font-size: clamp(52px, 9vw, 160px); line-height: .94; letter-spacing: -.02em; }
.cta-title span { display: block; }
.buttons { margin-top: 44px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; height: 58px; padding: 0 30px; font-size: 15px; font-weight: 600; letter-spacing: .04em; border-radius: 999px; transition: transform .3s cubic-bezier(.2, .7, .1, 1), background .3s, color .3s, border-color .3s; }
.btn.primary { background: var(--accent); color: var(--bg); }
.btn.primary:hover { transform: translateY(-3px); background: var(--text); }
.btn.ghost { border: 1px solid rgba(30, 26, 23, .35); }
.btn.ghost:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--accent); }
.footer { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 26px var(--gutter); border-top: 1px solid var(--line); font-size: 13px; color: var(--text-dim); }
.footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer a:hover { color: var(--accent); }

/* ---------- telefon ---------- */
@media (max-width: 720px) {
  .nav nav a:not(.nav-cta) { display: none; }
  .nav-mark { font-size: 18px; }
  .veil-left, .veil-left.wide { width: 100%; background: linear-gradient(to right, rgba(var(--bg-rgb), .9), rgba(var(--bg-rgb), .55)); }
  .name .row + .row { align-self: flex-start; }
  .statement, .pillar { max-width: none; right: var(--gutter); }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .stat b { font-size: 52px; }
  .cards { grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 16px 18px 18px; }
  .card:nth-child(n) { min-height: 0; }
  .card h3 { font-size: 24px; margin: 8px 0 6px; }
  .card p { font-size: 13px; }
  .work-title { font-size: 46px; top: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .name .ch { opacity: 1; transform: none; letter-spacing: 0; filter: none; }
  .is-ready .name .ch { animation: none; }
}

/* orbita: powiekszenie rosnie w dol, glowa zostaje w kadrze */
#hero canvas.seq { transform-origin: 50% 8%; }