
/* ============================================================
   FIGURA — design tokens
   ============================================================ */
:root{
  /* Colors */
  --color-void:#000000;
  --color-paper:#ffffff;
  --color-ash:#8f8f8f;
  --color-charcoal:#1f1f1f;
  --color-graphite:#333333;
  --color-bone:#f0f0f0;
  --color-mist-gradient:#d4eaef;
  --gradient-mist-gradient:linear-gradient(90deg,rgb(212,234,239) 0%,rgb(199,219,220) 25%,rgb(228,232,228) 50%,rgb(160,197,239) 75%,rgb(216,217,196) 87.5%,rgb(242,204,202) 100%);
  --color-fog-gradient:#b3d5df;
  --gradient-fog-gradient:linear-gradient(90deg,rgb(179,213,223) 0%,rgb(179,211,225) 25%,rgb(204,224,229) 50%,rgb(215,233,237) 75%,rgb(202,221,225) 100%);

  /* Typography — families */
  --font-inter:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-geist-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  /* Typography — scale */
  --text-caption:10px;   --leading-caption:1.2;    --tracking-caption:0.4px;
  --text-body:15px;      --leading-body:1.5;
  --text-body-lg:18px;   --leading-body-lg:1.43;
  --text-subheading:22px;--leading-subheading:1.38;--tracking-subheading:-0.22px;
  --text-heading:32px;   --leading-heading:1.36;   --tracking-heading:-0.64px;
  --text-display:36px;   --leading-display:1.22;   --tracking-display:-1.08px;

  /* Typography — weights */
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;

  /* Spacing */
  --spacing-4:4px;   --spacing-8:8px;   --spacing-12:12px; --spacing-16:16px;
  --spacing-20:20px; --spacing-24:24px; --spacing-40:40px; --spacing-56:56px;
  --spacing-64:64px; --spacing-72:72px; --spacing-80:80px; --spacing-96:96px;
  --spacing-128:128px;

  /* Layout */
  --page-max-width:1200px;
  --section-gap:96px;
  --card-padding:24px;
  --element-gap:8px;

  /* Radius */
  --radius-small:8px;
  --radius-cards:32px;
  --radius-icons:40px;
  --radius-buttons:56px;
  --radius-extralarge:200px;

  /* Surfaces */
  --surface-void-canvas:#000000;
  --surface-charcoal-panel:#1f1f1f;
  --surface-graphite-nest:#333333;
  --surface-bone-stage:#f0f0f0;
  --surface-paper-procenium:#ffffff;
}


/* ============================================================
   Tryb jasny — odwrócona drabina powierzchni
   ============================================================ */
:root[data-theme="light"]{
  --color-void:#ffffff;
  --color-paper:#0a0a0a;
  --color-ash:#6e6e6e;
  --color-charcoal:#f4f4f4;
  --color-graphite:#dcdcdc;
  --color-bone:#1f1f1f;
  --surface-void-canvas:#ffffff;
  --surface-charcoal-panel:#f4f4f4;
  --surface-graphite-nest:#ebebeb;
  --surface-bone-stage:#1f1f1f;
  --surface-paper-procenium:#0a0a0a;
}
:root[data-theme="light"] .brand .glyph{color:var(--color-paper)}
:root[data-theme="light"] .logo-strip .lg svg [stroke]{stroke:#0a0a0a}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea{color:var(--color-paper)}
:root[data-theme="light"] .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e6e' stroke-width='1.4' fill='none'/%3E%3C/svg%3E")}
:root[data-theme="light"] .field select option{background:#ebebeb;color:#0a0a0a}
:root[data-theme="light"] .pro-head .t-caption,
:root[data-theme="light"] .pro-head p,
:root[data-theme="light"] .pro-foot .t-caption,
:root[data-theme="light"] .post figcaption{color:#a8a8a8}
:root[data-theme="light"] .plan.featured .t-caption,
:root[data-theme="light"] .plan.featured .desc,
:root[data-theme="light"] .plan.featured .price span,
:root[data-theme="light"] .plan.featured .addon,
:root[data-theme="light"] .plan.featured .fine{color:#a8a8a8}
:root[data-theme="light"] .plan.featured li{color:#f0f0f0}
:root[data-theme="light"] .plan.featured ul{border-top-color:rgba(255,255,255,.16)}
:root[data-theme="light"] .plan.featured .disclose{border-top-color:rgba(255,255,255,.16)}
:root[data-theme="light"] .xc-tile,
:root[data-theme="light"] .tc-tile{background:#101114;border-color:#2a2b2f}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--surface-void-canvas);
  color:var(--color-paper);
  font-family:var(--font-inter);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  font-weight:var(--font-weight-regular);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--color-paper);color:var(--color-void)}
h1,h2,h3,h4,p{margin:0}

.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-40)}

/* Type utilities — locked to the scale */
.t-display{font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display);font-weight:var(--font-weight-regular)}
.t-heading{font-size:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);font-weight:var(--font-weight-medium)}
.t-subheading{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);font-weight:var(--font-weight-semibold)}
.t-body-lg{font-size:var(--text-body-lg);line-height:var(--leading-body-lg)}
.t-body{font-size:var(--text-body);line-height:var(--leading-body)}
.t-caption{
  font-family:var(--font-geist-mono);
  font-size:var(--text-caption);
  line-height:var(--leading-caption);
  letter-spacing:var(--tracking-caption);
  font-weight:var(--font-weight-semibold);
  text-transform:uppercase;
  color:var(--color-ash);
}
.t-mono{
  font-family:var(--font-geist-mono);
  font-size:12px;line-height:1.33;letter-spacing:.02em;
  font-weight:var(--font-weight-medium);
  color:var(--color-ash);
}
.muted{color:var(--color-ash)}

/* Hairline divider — a short tick, not a rule */
.tick{display:inline-block;width:8px;height:1px;background:var(--color-graphite);flex:none}
.rule{height:1px;background:var(--color-graphite);border:0;margin:0}

/* ============================================================
   Buttons — pills only, hover = opacity
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--spacing-8);
  border-radius:var(--radius-buttons);
  padding:var(--spacing-12) var(--spacing-24);
  font-family:var(--font-inter);
  font-size:var(--text-body);
  line-height:1.07;
  letter-spacing:0;
  border:1px solid transparent;
  cursor:pointer;
  transition:opacity .25s ease;
}
.btn:hover{opacity:.7}
.btn-primary{background:var(--color-paper);color:var(--color-void);font-weight:var(--font-weight-semibold)}
.btn-ghost{background:transparent;border-color:var(--color-paper);color:var(--color-paper);font-weight:var(--font-weight-medium)}
.btn-dark{background:var(--color-void);color:var(--color-paper);font-weight:var(--font-weight-semibold)}
.btn-outline-dark{background:transparent;border-color:var(--color-void);color:var(--color-void);font-weight:var(--font-weight-medium)}

/* ============================================================
   Navigation — 64px bar
   ============================================================ */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--color-void)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--spacing-64)}
.brand{display:flex;align-items:center;gap:var(--spacing-8);font-size:14px;font-weight:var(--font-weight-semibold);letter-spacing:-.01em}
.brand .glyph{flex:none;display:block}
.nav-links{display:flex;align-items:center;gap:var(--spacing-16)}
.nav-links a{font-size:14px;font-weight:var(--font-weight-medium);color:var(--color-paper);transition:opacity .25s ease}
.nav-links a:hover{opacity:.7}
.burger{display:none;width:32px;height:32px;background:none;border:0;padding:0;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;transition:opacity .25s ease}
.burger:hover{opacity:.7}
.burger span{display:block;width:18px;height:1px;background:var(--color-paper);transition:transform .25s ease,opacity .25s ease}
.burger.open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-3px) rotate(-45deg)}
.mnav{display:none;position:fixed;top:var(--spacing-64);left:0;right:0;z-index:99;background:var(--color-void);padding:var(--spacing-16) var(--spacing-40) var(--spacing-40)}
.mnav.show{display:block}
.mnav a{display:block;padding:var(--spacing-12) 0;font-size:var(--text-body-lg);border-bottom:1px solid var(--color-graphite)}

/* ============================================================
   Sections — 96px rhythm
   ============================================================ */
main{padding-bottom:var(--spacing-96)}
section{padding-top:var(--spacing-96)}
.sec-label{display:block;margin-bottom:var(--spacing-24)}
.sec-head{max-width:720px;margin-bottom:var(--spacing-56)}
.sec-head h2{margin-bottom:var(--spacing-16)}
.sec-head p{color:var(--color-ash);max-width:56ch}

/* ---------- Hero ---------- */
.hero{padding-top:calc(var(--spacing-64) + var(--spacing-96))}
.hero h1{max-width:720px}
.hero .sub{max-width:720px;margin-top:var(--spacing-24);color:var(--color-ash)}
.hero .actions{display:flex;gap:var(--spacing-12);margin-top:var(--spacing-40);flex-wrap:wrap}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--spacing-40);margin-top:var(--spacing-80);flex-wrap:wrap}
.logo-strip{display:flex;align-items:center;gap:var(--spacing-40);flex-wrap:wrap}
.logo-strip .lg{display:flex;align-items:center;gap:var(--spacing-8);font-size:14px;font-weight:var(--font-weight-semibold);letter-spacing:-.01em;color:var(--color-paper);opacity:.55;transition:opacity .25s ease}
.logo-strip .lg:hover{opacity:1}
.logo-strip .lg svg{flex:none}

/* ---------- Paper proscenium ---------- */
.proscenium{
  background:var(--surface-paper-procenium);
  color:var(--color-void);
  border-radius:var(--radius-cards);
  padding:var(--spacing-40);
}
.pro-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-24);flex-wrap:wrap;margin-bottom:var(--spacing-40)}
.pro-head .t-caption{color:var(--color-graphite)}
.pro-head h2{max-width:20ch}
.pro-head p{color:var(--color-graphite);max-width:44ch;margin-top:var(--spacing-8)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-20);align-items:start}
.post{margin:0}
.post img{width:100%;height:auto;border-radius:var(--radius-small);display:block}
.post figcaption{color:var(--color-graphite);margin-top:var(--spacing-12);display:block}
.pro-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-24);margin-top:var(--spacing-40);padding-top:var(--spacing-24);border-top:1px solid rgba(0,0,0,.12);flex-wrap:wrap}
.pro-foot .t-caption{color:var(--color-graphite)}

/* ---------- Usługi ---------- */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-40)}
.cols-4{grid-template-columns:repeat(4,1fr);gap:var(--spacing-24)}
.col{border-top:1px solid var(--color-graphite);padding-top:var(--spacing-24)}
.col h3{margin:var(--spacing-24) 0 var(--spacing-12)}
.col p{color:var(--color-ash)}
.col ul{list-style:none;padding:0;margin:var(--spacing-24) 0 0;display:flex;flex-direction:column;gap:var(--spacing-8)}
.col li{font-size:var(--text-body);line-height:var(--leading-body);display:flex;gap:var(--spacing-12);align-items:baseline}
.col li .tick{transform:translateY(-4px)}

/* ---------- Wideo ---------- */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-20);align-items:start}
.reel{margin:0}
.reel-frame{position:relative;border-radius:var(--radius-small);overflow:hidden;background:var(--surface-charcoal-panel);aspect-ratio:9/16}
.reel-frame video{width:100%;height:100%;object-fit:cover;display:block;background:var(--surface-charcoal-panel)}
.reel-play{
  position:absolute;inset:0;margin:auto;width:64px;height:64px;
  border-radius:50%;border:1px solid var(--color-paper);
  background:rgba(0,0,0,.35);backdrop-filter:blur(6px);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:opacity .25s ease;padding:0 0 0 4px;
}
.reel-play svg path{fill:#ffffff}
.reel-play:hover{opacity:.7}
.reel-frame.playing .reel-play{display:none}
.reel figcaption{margin-top:var(--spacing-12);display:flex;flex-direction:column;gap:var(--spacing-4)}
.reel-title{font-size:var(--text-body);line-height:var(--leading-body);font-weight:var(--font-weight-medium)}
@media (max-width:1024px){ .reels{grid-template-columns:repeat(3,1fr);gap:var(--spacing-12)} }
@media (max-width:720px){ .reels{grid-template-columns:1fr 1fr;gap:var(--spacing-12)} }

/* ---------- Projekty ---------- */
.projects{display:flex;flex-direction:column;gap:var(--spacing-96)}
.project{border-top:1px solid var(--color-graphite);padding-top:var(--spacing-24)}
.p-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-40);margin-bottom:var(--spacing-40);align-items:start}
.p-head h3{margin-top:var(--spacing-16)}
.p-head p{color:var(--color-ash)}
.p-tags{display:block;margin-top:var(--spacing-16)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-20);align-items:start}
.shots.tall{grid-template-columns:repeat(2,1fr);max-width:600px}
.shot{margin:0}
.shot img{width:100%;height:auto;border-radius:var(--radius-small);display:block}
.shot figcaption{margin-top:var(--spacing-12);display:block}

/* ---------- Trader Coach tiles ---------- */
.tc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-20)}
.tc-tile{
  aspect-ratio:4/5;border-radius:var(--radius-small);
  background:var(--surface-charcoal-panel);
  border:1px solid var(--color-graphite);
  padding:var(--spacing-20);display:flex;flex-direction:column;gap:var(--spacing-16);
  overflow:hidden;
}
.tc-top{display:flex;justify-content:space-between;align-items:center}
.tc-brand{font-family:var(--font-geist-mono);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;color:var(--color-paper);font-weight:var(--font-weight-semibold)}
.tc-pl{font-family:var(--font-geist-mono);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-ash)}
.tc-kv{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:var(--spacing-8)}
.tc-kv i{display:block;border-radius:var(--radius-small);background:var(--surface-graphite-nest)}
.tc-kv i.hot{background:var(--gradient-fog-gradient)}
.tc-card{flex:1;border-radius:var(--radius-small);background:var(--gradient-mist-gradient);position:relative;display:flex;align-items:flex-end;padding:var(--spacing-12)}
.tc-card .kv-chip{font-family:var(--font-geist-mono);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;color:var(--color-void);background:rgba(255,255,255,.72);border-radius:var(--radius-buttons);padding:4px 8px}
.tc-fmt{display:flex;gap:var(--spacing-8);justify-content:center}
.tc-fmt b{width:28px;height:28px;border-radius:var(--radius-small);border:1px solid var(--color-graphite);display:flex;align-items:center;justify-content:center;font-family:var(--font-geist-mono);font-size:var(--text-caption);color:var(--color-ash);font-weight:var(--font-weight-medium)}
.tc-fmt b.on{background:var(--color-paper);color:var(--color-void);border-color:var(--color-paper)}
.tc-search{border:1px solid var(--color-graphite);border-radius:var(--radius-buttons);padding:var(--spacing-8) var(--spacing-12);display:flex;align-items:center;gap:var(--spacing-8)}
.tc-search span{font-family:var(--font-geist-mono);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-ash)}
.tc-chips{display:flex;flex-wrap:wrap;gap:var(--spacing-8);align-content:flex-start;flex:1}
.tc-chips em{font-style:normal;font-family:var(--font-geist-mono);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;color:var(--color-bone);border:1px solid var(--color-graphite);border-radius:var(--radius-buttons);padding:6px 10px;height:fit-content}
.tc-chips em.on{background:var(--color-paper);color:var(--color-void);border-color:var(--color-paper)}
.tc-cap{margin-top:auto}
.tc-link{display:flex;align-items:center;gap:var(--spacing-16);margin-top:var(--spacing-24);flex-wrap:wrap}
@media (max-width:720px){
  .tc-grid{grid-template-columns:1fr 1fr;gap:var(--spacing-12)}
  .tc-grid .tc-tile:nth-child(3){display:none}
}

/* ---------- exacc tiles ---------- */
.xc-tile{background:#101114}
.xc-mark{display:inline-flex;align-items:center;gap:6px}
.xc-mark i{width:9px;height:9px;border-radius:2px;background:#f07b1d;display:inline-block}
.xc-glow{flex:1;border-radius:var(--radius-small);background:radial-gradient(ellipse at 50% 60%,rgba(240,123,29,.42),rgba(240,123,29,.08) 55%,transparent 75%),#0a0b0d;display:flex;align-items:center;justify-content:center}
.xc-word{font-family:var(--font-inter);font-weight:var(--font-weight-bold);font-size:var(--text-heading);letter-spacing:var(--tracking-heading);color:#f07b1d}
.xc-glass{flex:1;border-radius:var(--radius-small);background:linear-gradient(150deg,#191b1f,#0a0b0d);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--spacing-8);padding:var(--spacing-12)}
.xc-line{display:block;height:8px;border-radius:var(--radius-buttons);background:rgba(255,255,255,.28);width:80%}
.xc-line.short{width:52%}
.xc-cta{font-family:var(--font-geist-mono);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:#f07b1d;border:1px solid rgba(240,123,29,.5);border-radius:var(--radius-buttons);padding:4px 10px;width:fit-content;margin-top:var(--spacing-8)}
.xc-eps{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--spacing-8);align-content:center}
.xc-eps b{aspect-ratio:1;border-radius:var(--radius-small);border:1px solid var(--color-graphite);display:flex;align-items:center;justify-content:center;font-family:var(--font-geist-mono);font-size:var(--text-caption);color:var(--color-ash);font-weight:var(--font-weight-medium)}
.xc-eps b.on{background:#f07b1d;color:#0a0b0d;border-color:#f07b1d}

.lang-btn{
  border:1px solid var(--color-graphite);background:transparent;color:var(--color-ash);
  font-family:var(--font-geist-mono);font-size:12px;letter-spacing:.04em;
  border-radius:var(--radius-buttons);padding:6px 14px;cursor:pointer;transition:opacity .25s ease,color .25s ease;
}
.lang-btn:hover{opacity:.7;color:var(--color-paper)}
.theme-btn{min-width:38px}

/* ---------- Lightbox ---------- */
.post,.shot{cursor:zoom-in}
.gal-open{margin-top:var(--spacing-24)}
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  background:var(--color-void);
  overflow-y:auto;padding:var(--spacing-96) var(--spacing-40) var(--spacing-64);
}
.lightbox.show{display:block}
.lb-bar{
  position:fixed;top:0;left:0;right:0;z-index:201;
  display:flex;justify-content:space-between;align-items:center;
  height:var(--spacing-64);padding:0 var(--spacing-40);
  background:rgba(0,0,0,.9);
}
.lb-close{
  display:inline-flex;align-items:center;gap:var(--spacing-8);
  border:1px solid var(--color-paper);border-radius:var(--radius-buttons);
  background:transparent;color:var(--color-paper);cursor:pointer;
  font-family:var(--font-inter);font-size:14px;font-weight:var(--font-weight-medium);
  padding:var(--spacing-8) var(--spacing-20);
  transition:opacity .25s ease;
}
.lb-close:hover{opacity:.7}
.lb-grid{
  max-width:var(--page-max-width);margin:0 auto;
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--spacing-20);
  align-items:start;
}
.lb-grid figure{margin:0;min-width:0;grid-column:span 2}
.lb-grid img{width:100%;height:auto;object-fit:cover;border-radius:var(--radius-small);display:block}
.lb-grid figure.a-45 img{aspect-ratio:4/5}
.lb-grid figure.a-sq img{aspect-ratio:1/1}
.lb-grid figure.a-tall img{aspect-ratio:9/16}
.lb-grid figure.a-wide{grid-column:span 3}
.lb-grid figure.a-wide img{aspect-ratio:auto;object-fit:contain;background:var(--surface-charcoal-panel)}
.lb-grid figcaption{margin-top:var(--spacing-12);display:block;overflow-wrap:anywhere}
.lb-intro{max-width:var(--page-max-width);margin:0 auto var(--spacing-40)}
.lb-intro p{color:var(--color-ash);max-width:56ch;margin-top:var(--spacing-8)}
@media (max-width:720px){
  .lightbox{padding:var(--spacing-80) var(--spacing-20) var(--spacing-40)}
  .lb-bar{padding:0 var(--spacing-20)}
  .lb-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-12)}
  .lb-grid figure{grid-column:span 1}
  .lb-grid figure.a-wide{grid-column:span 2}
}

/* ---------- Statement ---------- */
.statement{padding-top:var(--spacing-128);text-align:center}
.statement .inner{max-width:720px;margin:0 auto}
.statement .t-caption{display:block;margin-bottom:var(--spacing-24)}
.statement h2{font-weight:var(--font-weight-regular)}
.statement .sig{margin-top:var(--spacing-56);display:inline-block;font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:opacity .25s ease}
.statement .sig:hover{opacity:.7}

/* ---------- Proces ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-40)}
.step{border-top:1px solid var(--color-graphite);padding-top:var(--spacing-24)}
.step h3{margin:var(--spacing-24) 0 var(--spacing-12)}
.step p{color:var(--color-ash)}

/* ---------- Cennik ---------- */
.jump{display:flex;gap:var(--spacing-8);flex-wrap:wrap;margin-bottom:var(--spacing-56)}
.jump a{
  border:1px solid var(--color-graphite);border-radius:var(--radius-buttons);
  padding:var(--spacing-8) var(--spacing-20);
  font-size:14px;font-weight:var(--font-weight-medium);
  transition:opacity .25s ease,border-color .25s ease;
}
.jump a:hover{opacity:.7;border-color:var(--color-paper)}

.track + .track{margin-top:var(--spacing-96)}
.track-head{
  border-top:1px solid var(--color-graphite);
  padding-top:var(--spacing-24);margin-bottom:var(--spacing-40);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-40);align-items:start;
}
.track-head .t-caption{display:block;margin-bottom:var(--spacing-16)}
.track-head p{color:var(--color-ash)}
.track-head .price-from{margin-top:var(--spacing-12);display:block}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-20);align-items:start}
.plan{
  background:var(--surface-charcoal-panel);
  border-radius:var(--radius-cards);
  padding:var(--spacing-24);
}
.plan.featured{background:var(--surface-paper-procenium);color:var(--color-void)}
.plan summary{list-style:none;cursor:pointer;display:block;transition:opacity .25s ease}
.plan summary::-webkit-details-marker{display:none}
.plan summary:hover{opacity:.7}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-8);min-height:20px}
.plan.featured .t-caption{color:var(--color-graphite)}
.badge{
  font-family:var(--font-geist-mono);font-size:var(--text-caption);
  letter-spacing:var(--tracking-caption);font-weight:var(--font-weight-semibold);
  text-transform:uppercase;
  background:var(--color-void);color:var(--color-paper);
  border-radius:var(--radius-buttons);padding:4px 8px;
}
.plan h3{margin:var(--spacing-20) 0 var(--spacing-8)}
.plan .desc{color:var(--color-ash);min-height:68px}
.plan.featured .desc{color:var(--color-graphite)}
.plan .price{font-size:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);font-weight:var(--font-weight-semibold);margin-top:var(--spacing-20)}
.plan .price span{font-size:var(--text-body);font-weight:var(--font-weight-regular);letter-spacing:0;color:var(--color-ash);margin-left:var(--spacing-8)}
.plan.featured .price span{color:var(--color-graphite)}
.plan .addon{display:block;margin-top:var(--spacing-8);min-height:24px}
.plan.featured .addon{color:var(--color-graphite)}
.disclose{
  display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-8);
  margin-top:var(--spacing-20);padding-top:var(--spacing-16);
  border-top:1px solid var(--color-graphite);
}
.plan.featured .disclose{border-top-color:rgba(0,0,0,.12)}
.disclose .lbl{font-size:14px;font-weight:var(--font-weight-medium)}
.disclose .pm{position:relative;width:12px;height:12px;flex:none}
.disclose .pm::before,.disclose .pm::after{content:'';position:absolute;background:var(--color-paper);transition:transform .25s ease,opacity .25s ease}
.plan.featured .disclose .pm::before,.plan.featured .disclose .pm::after{background:var(--color-void)}
.disclose .pm::before{left:0;top:5.5px;width:12px;height:1px}
.disclose .pm::after{top:0;left:5.5px;width:1px;height:12px}
.plan[open] .disclose .pm::after{transform:scaleY(0)}
.plan[open] .disclose .lbl .close-lbl{display:inline}
.plan[open] .disclose .lbl .open-lbl{display:none}
.disclose .lbl .close-lbl{display:none}
.plan ul{list-style:none;padding:var(--spacing-20) 0 0;margin:0 0 var(--spacing-20);display:flex;flex-direction:column;gap:var(--spacing-8)}
.plan li{display:flex;gap:var(--spacing-12);align-items:baseline}
.plan li .tick{transform:translateY(-4px)}
.plan.featured li .tick{background:var(--color-void)}
.plan .fine{display:block;padding-bottom:var(--spacing-20);color:var(--color-ash)}
.plan.featured .fine{color:var(--color-graphite)}
.plan .btn{width:100%}

/* Strefy dojazdu */
.zones{margin-top:var(--spacing-56);border-top:1px solid var(--color-graphite)}
.zones .zhead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--spacing-24);padding-top:var(--spacing-24);flex-wrap:wrap}
.zones .zhead p{color:var(--color-ash);max-width:46ch}
.zrows{margin-top:var(--spacing-24)}
.zrow{
  display:grid;grid-template-columns:80px 1fr 220px;
  gap:var(--spacing-24);align-items:baseline;
  padding:var(--spacing-16) 0;border-bottom:1px solid var(--color-graphite);
}
.zrow .zval{text-align:right;font-size:var(--text-body);color:var(--color-paper)}
.note{margin-top:var(--spacing-24);text-align:center;display:block}

/* ---------- O nas ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-80)}
.about .body p{color:var(--color-ash);margin-top:var(--spacing-16)}
.about .body p strong{color:var(--color-paper);font-weight:var(--font-weight-medium)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-24);margin-top:var(--spacing-40);border-top:1px solid var(--color-graphite);padding-top:var(--spacing-24)}
.facts .v{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);font-weight:var(--font-weight-semibold);display:block;margin-bottom:var(--spacing-8)}

/* ---------- Kontakt ---------- */
.contact{
  background:var(--surface-charcoal-panel);
  border-radius:var(--radius-cards);
  padding:var(--spacing-40);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-80);
}
.contact h2{margin-bottom:var(--spacing-16)}
.contact .lead{color:var(--color-ash);max-width:40ch}
.cinfo{margin-top:var(--spacing-40);display:flex;flex-direction:column;gap:var(--spacing-20)}
.cinfo .t-caption{display:block;margin-bottom:var(--spacing-4)}
.cinfo a{font-size:var(--text-body-lg);line-height:var(--leading-body-lg);transition:opacity .25s ease}
.cinfo a:hover{opacity:.7}
.cinfo .val{font-size:var(--text-body-lg);line-height:var(--leading-body-lg)}
form{display:flex;flex-direction:column;gap:var(--spacing-16)}
.field label{display:block;margin-bottom:var(--spacing-8)}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--surface-graphite-nest);
  border:1px solid var(--surface-graphite-nest);
  border-radius:var(--radius-small);
  padding:var(--spacing-12) var(--spacing-16);
  color:var(--color-paper);
  font-family:var(--font-inter);font-size:var(--text-body);line-height:var(--leading-body);
  transition:border-color .25s ease;
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-paper)}
.field input::placeholder,.field textarea::placeholder{color:var(--color-ash)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238f8f8f' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-16) center}
.field select option{background:#333333;color:#ffffff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{display:none;border-top:1px solid var(--color-graphite);padding-top:var(--spacing-16);color:var(--color-ash)}
.sent.show{display:block}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--color-graphite);padding:var(--spacing-56) 0 var(--spacing-40)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--spacing-40);padding-bottom:var(--spacing-56)}
.fgrid .about-line{color:var(--color-ash);max-width:34ch;margin-top:var(--spacing-16)}
.fcol h4{margin-bottom:var(--spacing-16)}
.fcol a{display:block;padding:var(--spacing-4) 0;transition:opacity .25s ease}
.fcol a:hover{opacity:.7}
.manifesto{text-align:center;padding-bottom:var(--spacing-56)}
.manifesto a{font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:opacity .25s ease}
.manifesto a:hover{opacity:.7}
.fbot{display:flex;justify-content:space-between;gap:var(--spacing-20);padding-top:var(--spacing-24);border-top:1px solid var(--color-graphite);flex-wrap:wrap}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .cols,.cols-4{grid-template-columns:1fr 1fr;gap:var(--spacing-40)}
  .steps{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:var(--spacing-40)}
  .contact{grid-template-columns:1fr;gap:var(--spacing-56)}
  .p-head{grid-template-columns:1fr;gap:var(--spacing-16)}
  .fgrid{grid-template-columns:1fr 1fr}
  .zrow{grid-template-columns:64px 1fr 180px}
  .track-head{grid-template-columns:1fr;gap:var(--spacing-16)}
}
@media (max-width:720px){
  :root{
    --text-display:28px;  --tracking-display:-0.84px;
    --text-heading:24px;  --tracking-heading:-0.48px;
    --text-subheading:20px;
    --section-gap:64px;
  }
  .wrap{padding:0 var(--spacing-20)}
  .mnav{padding:var(--spacing-16) var(--spacing-20) var(--spacing-40)}
  section{padding-top:var(--spacing-64)}
  main{padding-bottom:var(--spacing-64)}
  .hero{padding-top:calc(var(--spacing-64) + var(--spacing-64))}
  .nav-links{display:none}
  .burger{display:flex}
  .statement{padding-top:var(--spacing-80)}
  .cols,.cols-4,.steps{grid-template-columns:1fr;gap:var(--spacing-40)}
  .proscenium{padding:var(--spacing-24)}
  .contact{padding:var(--spacing-24)}
  .posts{
    display:flex;gap:var(--spacing-12);
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(var(--spacing-24) * -1);padding:0 var(--spacing-24);
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .posts::-webkit-scrollbar{display:none}
  .post{flex:none;width:196px;scroll-snap-align:center}
  .projects{gap:var(--spacing-64)}
  .shots{grid-template-columns:1fr 1fr;gap:var(--spacing-12)}
  .shots.tall{max-width:none}
  .fgrid{grid-template-columns:1fr;gap:var(--spacing-40)}
  .facts{grid-template-columns:1fr;gap:var(--spacing-16)}
  .jump a{flex:1 1 100%;text-align:center}
  .zrow{grid-template-columns:1fr;gap:var(--spacing-4)}
  .zrow .zval{text-align:left}
  .plan .desc{min-height:0}
  .hero-foot{margin-top:var(--spacing-56)}
  .logo-strip{gap:var(--spacing-24)}
}
