/* ============================== FONTS =============================== */
@font-face{ font-family:"Geist"; font-weight:400; font-display:swap; src:url("fonts/Geist-Regular.woff2") format("woff2"); }
@font-face{ font-family:"Geist"; font-weight:500; font-display:swap; src:url("fonts/Geist-Medium.woff2") format("woff2"); }
@font-face{ font-family:"Geist Mono"; font-weight:400; font-display:swap; src:url("fonts/GeistMono-Regular.woff2") format("woff2"); }
@font-face{ font-family:"Geist Mono"; font-weight:500; font-display:swap; src:url("fonts/GeistMono-Medium.woff2") format("woff2"); }

/* ============================== TOKENS ============================== */
:root{
  --bg:#0A0C0A;
  --surface:#0F1310;
  --surface-2:#141A15;
  --text:#EDEBE2;
  --muted:#8B948C;
  --accent:#9BE6AE;
  --line:rgba(237,235,226,0.14);
  --line-soft:rgba(237,235,226,0.06);

  --font-ui:"Geist","Instrument Sans",system-ui,sans-serif;
  --font-mono:"Geist Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --rail:0px;
  --gutter:24px;
  --margin:clamp(20px,4vw,64px);
  --page:1400px;
  --inset:max(var(--margin), calc((100% - var(--page)) / 2));
  --ease:cubic-bezier(.2,.7,.25,1);
  --t-fast:180ms;
  --t-mid:280ms;
  --t-slow:420ms;
}
@media (min-width:1200px){ :root{ --rail:72px; } }

/* ============================== RESET =============================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; overflow-x:clip; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
dl,dt,dd{ margin:0; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ============================== BASE ================================ */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  padding-left:var(--rail);
  overflow-x:clip;
}
::selection{ background:var(--accent); color:var(--bg); }
html{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--line); }
::-webkit-scrollbar-track{ background:transparent; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.skip{ position:absolute; left:-999px; top:8px; z-index:100; font:500 11px/1.3 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; padding:12px 16px; background:var(--bg); border:1px solid var(--line); }
.skip:focus{ left:calc(var(--rail) + 16px); }

/* ============================== TYPE ================================ */
.display-xl{ font-size:clamp(46px,6.4vw,104px); font-weight:500; line-height:1.08; letter-spacing:-.035em; }
.display-l { font-size:clamp(38px,6vw,82px);    font-weight:500; line-height:1.06; letter-spacing:-.03em; }
.display-m { font-size:clamp(30px,4vw,52px);    font-weight:500; line-height:1.06; letter-spacing:-.025em; }
.display-s { font-size:clamp(34px,3.4vw,48px);                     font-weight:500; line-height:1;   letter-spacing:-.02em; }
.h-mid     { font-size:clamp(26px,3vw,38px);    font-weight:500; line-height:1.1; letter-spacing:-.02em; }
.lead      { font-size:clamp(20px,1.5vw,22px);  line-height:1.5; letter-spacing:-.01em; }
.mono-label{ font:500 11px/1.3 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.mono-data { font:400 14px/1.4 var(--font-mono); letter-spacing:.02em; }

p + p{ margin-top:1em; }

/* ============================== LAYOUT ============================== */
.sheet{ position:relative; padding-inline:var(--inset); }
.sheet-head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--gutter);
  border-top:1px solid var(--line); padding-top:10px;
  font:500 11px/1.3 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.sh-rule{ display:block; height:1px; background:var(--line-soft); }
.sheet-head .sh-name,.sheet-head .sh-num{ transition:color 400ms var(--ease); }
.sheet.is-target .sheet-head .sh-name,.sheet.is-target .sheet-head .sh-num{ color:var(--text); }
.hero-topline{ display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:var(--gutter); font:500 11px/1.3 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* linia wymiarowa z grotami na końcach */
.dim{ display:flex; align-items:center; gap:14px; font:400 13px/1.4 var(--font-mono); letter-spacing:.02em; }
.dim-bar{ position:relative; flex:1; height:1px; background:var(--text); }
.dim-bar::before,.dim-bar::after{ content:""; position:absolute; top:0; width:7px; height:7px; border-top:1px solid var(--text); }
.dim-bar::before{ left:0; border-left:1px solid var(--text); transform-origin:0 0; transform:rotate(-45deg); }
.dim-bar::after{ right:0; border-right:1px solid var(--text); transform-origin:100% 0; transform:rotate(45deg); }


/* CTA: kreska + etykieta mono, kreska wydłuża się w hover */
.btn{
  display:inline-flex; align-items:center; gap:16px; min-height:44px;
  font:500 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
}
.btn::before{ content:""; width:32px; height:1px; background:var(--text); transition:width var(--t-mid) var(--ease); }
.btn:hover::before{ width:64px; }
.btn-box{
  display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 32px;
  border:1px solid var(--text); font:500 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-box:hover{ background:var(--text); color:var(--bg); }
.btn-box--sm{ min-height:40px; padding:0 16px; border-color:var(--line); color:var(--text); }
.btn-box--sm:hover{ border-color:var(--text); }
.link{
  position:relative; display:inline-flex; align-items:center; min-height:44px;
  font:500 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
}
.link::after{ content:""; position:absolute; left:0; bottom:10px; height:1px; width:100%; background:var(--text); transform:scaleX(.35); transform-origin:left; transition:transform var(--t-mid) var(--ease); }
.link:hover::after{ transform:scaleX(1); }

/* znaczniki cięcia w rogach okna */
.crop{ position:fixed; z-index:90; width:14px; height:14px; pointer-events:none; }
.crop::before,.crop::after{ content:""; position:absolute; background:var(--line); }
.crop::before{ width:14px; height:1px; }
.crop::after{ width:1px; height:14px; }
.crop--tl{ top:0; left:0; }  .crop--tl::before{ top:14px; left:0; } .crop--tl::after{ left:14px; top:0; }
.crop--tr{ top:0; right:0; } .crop--tr::before{ top:14px; right:0; } .crop--tr::after{ right:14px; top:0; }
.crop--bl{ bottom:0; left:0; }  .crop--bl::before{ bottom:14px; left:0; } .crop--bl::after{ left:14px; bottom:0; }
.crop--br{ bottom:0; right:0; } .crop--br::before{ bottom:14px; right:0; } .crop--br::after{ right:14px; bottom:0; }


/* ============================== RAIL ================================ */
.rail{ display:none; }
@media (min-width:1200px){
  .rail{
    display:flex; flex-direction:column; align-items:center; gap:28px;
    position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:80;
    padding:96px 0 40px; border-right:1px solid var(--line); pointer-events:none;
  }
  .rail-num{ font:400 28px/1 var(--font-mono); letter-spacing:-.02em; color:var(--accent); transition:opacity 520ms var(--ease); }
  .rail-name{ writing-mode:vertical-rl; font:500 11px/1 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); transition:opacity 520ms var(--ease); }
  .rail.is-switching .rail-num,.rail.is-switching .rail-name{ opacity:0; }
  .rail-progress{ position:relative; flex:1; width:1px; background:var(--line); margin-top:8px; }
  .rail-progress i{ position:absolute; left:0; top:0; width:100%; height:100%; background:var(--text); transform:scaleY(0); transform-origin:top; transition:transform 120ms linear; }
}

/* ============================== HEADER ============================== */
.site-header{
  position:sticky; top:0; z-index:70; height:88px;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--inset); background:transparent;
}
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); opacity:0; transition:opacity var(--t-mid) var(--ease); }
.site-header.is-scrolled::after{ opacity:1; }
.site-header.is-scrolled{ background:var(--bg); }
.brand{ display:flex; align-items:center; gap:14px; min-height:44px; }
.brand-logo{ height:76px; width:76px; object-fit:contain; flex-shrink:0; }
.brand-name{ display:grid; gap:7px; color:var(--text); }
.brand-name strong{ font:500 20px/1 var(--font-ui); letter-spacing:-.025em; }
.brand-name > span{ font:400 9px/1.3 var(--font-mono); letter-spacing:.12em; color:var(--muted); }
.header-right{ display:flex; align-items:center; gap:clamp(14px,1.6vw,24px); }
.site-nav{ display:flex; gap:clamp(12px,1.3vw,22px); }
.site-nav a{ position:relative; font:500 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; min-height:44px; display:inline-flex; align-items:center; color:var(--text); }
.site-nav a::after{ content:""; position:absolute; left:0; bottom:12px; height:1px; width:100%; background:var(--text); transform:scaleX(0); transform-origin:left; transition:transform var(--t-mid) var(--ease); }
.site-nav a:hover::after,.site-nav a:focus-visible::after{ transform:scaleX(1); }
.menu-btn{ display:none; font:500 11px/1 var(--font-mono); letter-spacing:.14em; min-height:44px; min-width:44px; }

/* ============================== HERO ================================ */
.hero{
  min-height:calc(100svh - 88px);
  display:grid; grid-template-rows:auto 1fr;
  padding-top:24px; padding-bottom:40px;
}
.hero-main{ position:relative; z-index:1; align-self:end; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vh,36px); padding-top:4vh; }
.hero-main h1{ max-width:100%; }
.hero-foot{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:var(--gutter); }
.hero::before{ /* siatka techniczna w tle */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(237,235,226,.025) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(237,235,226,.025) 0 1px, transparent 1px 48px);
}
.hero::after{ /* ziarno, ledwo widoczne */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-body{ padding-top:0; min-width:0; }
.hero-foot > *{ min-width:0; }
.hero-lead{ max-width:460px; color:var(--muted); }
.hero-cta{ display:flex; gap:32px; align-items:center; flex-wrap:wrap; margin-top:clamp(20px,3vh,36px); }
.hero-cta .btn-box{ min-width:200px; }
.hero-plate{ display:flex; justify-content:flex-end; }

/* ============================== DRAWING ============================= */
.hero{ --drw-h:min(30vw, 480px, calc(100svh - 400px)); --h1-w:calc(8.4 * clamp(46px, 6.4vw, 104px)); }
.hero-drawing{
  position:absolute; pointer-events:none;
  top:64px; right:calc(var(--inset) - 5vw);
  width:min(calc(var(--drw-h) * var(--img-w) / var(--img-h)), calc(100% - 2 * var(--inset) - var(--h1-w) - 24px + 5vw));
  aspect-ratio:var(--img-w) / var(--img-h);
}
.hero-main h1{ white-space:nowrap; }
.hero-img{ display:block; width:100%; height:auto; aspect-ratio:var(--img-w) / var(--img-h); object-fit:contain; mix-blend-mode:screen; opacity:.92; will-change:transform; transition:transform var(--t-slow) var(--ease); }
.hero-img.is-inverted{ filter:invert(1) hue-rotate(180deg); }
.js .hero-drawing:not(.is-in) .hero-img{ opacity:0; transform:translateY(14px); }
.hero-drawing.is-in .hero-img{ transition:opacity 480ms var(--ease), transform 480ms var(--ease); }
.drw-t{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; fill:var(--text); stroke:none; }
@keyframes led{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.led{ animation:led 4s ease-in-out infinite; }

/* tabliczka POZ1 */
.plate{
  position:relative; display:grid; grid-template-columns:1fr;
  border:1px solid var(--text); padding:22px 22px 18px 20px;
  font-family:var(--font-mono); background:var(--bg);
}
.plate-grid{ display:grid; gap:7px 0; }
.plate-row{ display:grid; grid-template-columns:110px 1fr; align-items:baseline; gap:20px; }
.plate-row dt{ font:500 10px/1.3 var(--font-mono); letter-spacing:.14em; color:var(--muted); }
.plate-row dd{ font:400 14px/1.3 var(--font-mono); letter-spacing:.02em; white-space:normal; overflow-wrap:anywhere; }
.plate-serial{ position:absolute; right:12px; top:8px; font:500 9px/1 var(--font-mono); letter-spacing:.14em; color:var(--muted); }
.led{ position:absolute; right:12px; bottom:12px; width:6px; height:6px; border-radius:50%; background:var(--accent); }

.plate--hero{ min-width:320px; }
.plate--hero .plate-grid{ gap:8px 0; }
.plate--big{ padding:26px clamp(24px,3vw,48px) 20px; }
.plate--big .plate-grid{ gap:0; align-content:space-between; height:100%; }
.plate--big .plate-row{ grid-template-columns:clamp(110px,12vw,160px) 1fr; border-bottom:1px solid var(--line-soft); padding-block:6px; }
.plate--big .plate-row:last-child{ border-bottom:0; padding-bottom:6px; }
.plate--big .plate-row dt{ font-size:11px; }
.plate--big .plate-row dd{ font-size:clamp(15px,1.3vw,18px); white-space:normal; }
.plate--big .plate-serial{ font-size:11px; right:18px; top:14px; }
.plate--big .led{ right:14px; bottom:12px; }
.plate--small{ padding:22px 16px 14px 12px; gap:0 12px; }
.plate--small .plate-grid{ gap:4px 0; align-content:center; }
.plate--small .plate-row{ grid-template-columns:96px 1fr; }
.plate--small .plate-row dd{ font-size:12px; }

/* ============================== STORY =============================== */
.story{ padding-bottom:clamp(56px,7vh,96px); }
.story-grid{ display:grid; grid-template-columns:minmax(min-content,1fr) minmax(0,700px); gap:clamp(24px,5vw,96px); align-items:stretch; padding-top:clamp(56px,8vh,112px); }
.story-year{
  font-size:clamp(112px,12vw,250px); font-weight:500; line-height:.8; letter-spacing:-.05em; color:var(--text);
  margin-left:-.04em;
  user-select:none;
}
.story-side{ display:flex; flex-direction:column; min-width:0; }
.story-legend{ margin-top:auto; padding-top:40px; width:min(100%,320px); }
.story-legend li{ font:500 11px/1.3 var(--font-mono); letter-spacing:.14em; color:var(--muted); padding:12px 0; border-bottom:1px solid var(--line); }
.story-col{ max-width:620px; padding-top:.5em; }
.story-col p{ color:var(--muted); }
.story-col .h-mid{ margin-bottom:28px; }
.story-punch{ color:var(--text) !important; font-size:clamp(22px,2vw,28px); line-height:1.3; letter-spacing:-.015em; margin-top:40px !important; }
.story-col .link{ margin-top:28px; }
.archive{ margin-top:80px; }
.archive img{ width:100%; height:auto; }
.archive figcaption{ margin-top:12px; color:var(--muted); }

/* ============================== NODE ================================ */
.node{ padding-block:clamp(96px,12vh,160px) clamp(120px,16vh,220px); }
.node > .mono-label{ margin-top:clamp(48px,7vh,96px); color:var(--muted); }
.node > .display-l{ margin-top:clamp(56px,8vh,112px); max-width:1100px; }
.node-grid{ display:grid; grid-template-columns:minmax(0,11fr) minmax(300px,9fr); gap:clamp(40px,6vw,96px); align-items:stretch; margin-top:clamp(56px,8vh,112px); }
.node-plate{ display:flex; }
.node-plate .plate{ flex:1; }
.node-copy{ display:flex; flex-direction:column; }
.node-copy p:last-of-type{ margin-bottom:0; }
.node-copy p{ color:var(--muted); max-width:520px; }
.node-copy .link{ margin-top:24px; }

.plate-row.latency{ margin-top:0; padding-top:6px; border-top:0; }
.plate-row.latency dt{ letter-spacing:.06em; }
.latency-value{ color:var(--text); font-variant-numeric:tabular-nums; }

/* tła techniczne: znaczniki pasowania, prowadnice kolumn, współrzędne */
.regmark{ position:absolute; width:10px; height:10px; pointer-events:none; }
.regmark::before,.regmark::after{ content:""; position:absolute; background:var(--line-soft); }
.regmark::before{ left:0; top:4.5px; width:10px; height:1px; }
.regmark::after{ left:4.5px; top:0; width:1px; height:10px; }
.regmark--tl{ left:calc(var(--inset) - 24px); top:64px; }
.regmark--tr{ right:calc(var(--inset) - 24px); top:64px; }
.regmark--bl{ left:calc(var(--inset) - 24px); bottom:48px; }
.regmark--br{ right:calc(var(--inset) - 24px); bottom:48px; }
.has-guides{ background-image:linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(237,235,226,.03) calc(33.333% - .5px), rgba(237,235,226,.03) calc(33.333% + .5px), transparent calc(33.333% + .5px)), linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(237,235,226,.03) calc(66.666% - .5px), rgba(237,235,226,.03) calc(66.666% + .5px), transparent calc(66.666% + .5px)); }

/* ============================== PICO ================================ */
.pico{ padding-block:0 clamp(120px,14vh,200px); }
.pico-intro{ padding-top:clamp(56px,8vh,112px); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--gutter); align-items:start; }
.pico-intro .lead{ padding-top:.3em; }
.pico-intro .lead{ color:var(--muted); max-width:460px; }
.ticket-wrap{ margin-top:clamp(64px,10vh,140px); display:flex; justify-content:center; padding-inline:12px; }
.ticket{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) 140px; width:100%; max-width:720px; min-height:240px;
  background:var(--surface-2); border:1px solid var(--line); transform:rotate(-.8deg);
  transition:transform var(--t-slow) var(--ease);
}
.ticket::after{ content:""; position:absolute; inset:-1px; border:1px solid var(--line); opacity:0; pointer-events:none; transition:transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease); }
.ticket:hover{ transform:rotate(-.8deg) translateY(-4px); }
.ticket:hover::after{ transform:translate(5px,5px); opacity:1; }
.ticket-main{ display:grid; grid-template-rows:auto 1fr auto; gap:24px; padding:28px 32px; }
.ticket-top{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:start; }
.ticket-title{ font-size:clamp(40px,4vw,56px); font-weight:500; line-height:1.06; letter-spacing:-.03em; }
.ticket-copy{ color:var(--muted); font-size:15px; line-height:1.5; max-width:320px; padding-top:6px; }
.ticket-specs{ display:grid; grid-template-columns:repeat(4,1fr); align-self:end; align-items:baseline; }
.ticket-specs dt{ font:500 10px/1.3 var(--font-mono); letter-spacing:.14em; color:var(--muted); margin-bottom:8px; }
.ticket-specs dd{ font:400 clamp(22px,2.2vw,28px)/1 var(--font-mono); letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.ticket-specs .is-accent{ color:var(--accent); }
.ticket-foot{ display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; }
.ticket-note{ color:var(--muted); }
.ticket-stub{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:24px 0; }
.ticket-stub::before{ content:""; position:absolute; left:-3px; top:4px; bottom:4px; width:6px; background:radial-gradient(circle at center, var(--bg) 2.6px, transparent 2.8px) center/6px 10px repeat-y; }
.ticket-stub-text{ writing-mode:vertical-rl; transform:rotate(180deg); font:500 11px/1 var(--font-mono); letter-spacing:.3em; }
.ticket-stub-no{ font:400 13px/1 var(--font-mono); letter-spacing:.1em; color:var(--muted); }

/* ============================== PRICING ============================= */
.pricing{ padding-bottom:clamp(96px,12vh,160px); }
.pricing > .mono-label{ margin-top:clamp(40px,6vh,72px); color:var(--muted); }
.pricing > .display-l{ margin-top:16px; }
.pricing-lead{ max-width:620px; margin-top:24px; color:var(--muted); }
.pricing-lead .lead{ margin-bottom:16px; }
.plan-list{ max-width:1180px; margin-top:clamp(40px,6vh,64px); border-top:1px solid var(--line); }
.plan{ border-bottom:1px solid var(--line); }
.plan-row{
  position:relative; width:100%; display:grid; align-items:center; min-height:132px; text-align:left;
  grid-template-columns:minmax(180px,1fr) 120px 200px 48px; gap:0 var(--gutter);
  padding:20px 0 20px 18px; transition:background var(--t-mid) var(--ease); font-variant-numeric:tabular-nums;
}
.plan-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--text); transition:width 220ms var(--ease); }
.plan-row:hover,.plan-row[aria-expanded="true"]{ background:var(--surface); }
.plan-row:hover::before,.plan-row[aria-expanded="true"]::before{ width:1px; }
.plan-row:focus-visible{ outline-offset:-2px; }
.plan-name-wrap{ display:grid; gap:6px; }
.plan-desc{ color:var(--muted); font-size:15px; }
.plan-bar{ display:block; width:100%; max-width:260px; height:2px; background:var(--line); margin-top:6px; }
.plan-bar i{ display:block; height:100%; background:var(--text); }
.plan-ram{ font:400 22px/1 var(--font-mono); letter-spacing:.02em; text-align:right; }
.plan-price{ display:flex; align-items:baseline; justify-content:flex-end; gap:6px; white-space:nowrap; }
.plan-unit{ font:400 14px/1 var(--font-mono); letter-spacing:.02em; }
.plan-period{ font:400 12px/1 var(--font-mono); letter-spacing:.02em; color:var(--muted); }
.plan-arrow{ font-size:22px; text-align:right; padding-right:18px; transition:transform var(--t-mid) var(--ease); }
.plan-row:hover .plan-arrow{ transform:translateY(8px); }
.plan-row[aria-expanded="true"] .plan-arrow{ transform:rotate(180deg); }
.acc-panel{ height:auto; overflow:hidden; transition:height 260ms var(--ease); }
.acc-inner{ opacity:1; transition:opacity 260ms var(--ease); }
.accordion-ready .acc-panel{ height:0; visibility:hidden; }
.accordion-ready .acc-inner{ opacity:0; }
.accordion-ready .acc-panel.is-open{ visibility:visible; }
.accordion-ready .acc-panel.is-open .acc-inner{ opacity:1; }
.plan-details-inner{ padding:8px 18px 40px 18px; }
.spec-title{ color:var(--muted); margin-bottom:16px; }
.star{ color:var(--accent); margin-left:.28em; }
.plans-note{ max-width:620px; margin-top:20px; font-size:13px; line-height:1.5; color:var(--muted); }
.spec{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px var(--gutter); max-width:820px; }
.spec-row{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline; font-family:var(--font-mono); border-bottom:1px solid var(--line-soft); padding-bottom:10px; }
.spec-row dt{ font:500 10px/1.3 var(--font-mono); letter-spacing:.14em; color:var(--muted); }
.spec-row dd{ font-size:15px; letter-spacing:.02em; text-align:right; font-variant-numeric:tabular-nums; }
.plan-details .btn{ margin-top:20px; }
.pricing-help{ margin-top:clamp(56px,8vh,96px); max-width:620px; }
.pricing-help p{ color:var(--muted); margin-top:16px; }
.pricing-help strong{ font-weight:500; color:var(--text); }
.pricing-help .btn{ margin-top:24px; }

/* ============================== PACKAGES ============================ */
.packages{ background:var(--surface); padding-bottom:clamp(96px,12vh,160px); }
.packages-intro{ padding-top:clamp(56px,8vh,112px); }
.packages-lead{ color:var(--muted); max-width:720px; margin-top:20px; }
.packages-title{ font-size:clamp(34px,4.1vw,58px); white-space:nowrap; }
.package-grid{ margin-top:clamp(48px,7vh,96px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.package{ display:flex; flex-direction:column; padding:clamp(28px,3vw,44px) clamp(24px,3vw,44px); }
.package + .package{ border-left:1px solid var(--line); }
.package-no{ font:400 13px/1 var(--font-mono); letter-spacing:.02em; color:var(--muted); }
.package-name{ margin-top:18px; }
.package-lead{ margin-top:14px; font-size:17px; line-height:1.45; }
.package-includes{ margin-top:clamp(28px,3vh,40px); display:grid; gap:16px; }
.package-includes li{ display:grid; grid-template-columns:20px 1fr; column-gap:14px; align-items:start; font-size:15px; line-height:1.5; color:var(--muted); }
.package-includes .ico{ width:20px; height:20px; margin-top:calc((1lh - 20px) / 2); align-self:start; color:var(--text); }
.package-includes li > span{ display:block; }
@supports not (margin-top:1lh){ .package-includes .ico{ margin-top:calc((1.5em - 20px) / 2); } }
.package-foot{ margin-top:auto; padding-top:clamp(32px,4vh,48px); display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.package-foot .mono-label{ color:var(--muted); min-height:44px; display:flex; align-items:flex-end; }
.price-line{ display:flex; align-items:baseline; gap:6px; min-height:44px; }
.packages-note{ margin-top:28px; color:var(--muted); font-size:15px; }
.packages-note strong{ font-weight:500; color:var(--text); }

@media (max-width:1279px){
  .package-grid{ grid-template-columns:1fr; }
  .package{ padding-inline:0; }
  .package + .package{ border-left:0; border-top:1px solid var(--line); }
}

/* ============================== SERVICES ============================ */
.services{ padding-bottom:clamp(96px,12vh,160px); }
.services-intro{ padding-top:clamp(56px,8vh,112px); max-width:620px; }
.services-intro p{ color:var(--muted); margin-top:16px; }
.services-intro strong{ font-weight:500; color:var(--text); }
.service-list{ max-width:720px; margin-top:clamp(36px,5vh,56px); border-top:1px solid var(--line); }
.service{ display:grid; grid-template-columns:32px 1fr auto; column-gap:20px; row-gap:16px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line); font:400 13px/1.45 var(--font-mono); letter-spacing:.02em; }
.service-no{ color:var(--muted); font-size:11px; }
.service-price{ margin-left:8px; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.services-cta{ margin-top:28px; }

/* ikony Tabler, ujednolicone z hairline reszty strony */
.ico{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.15; stroke-linecap:butt; stroke-linejoin:miter; flex:none; }

/* ============================== PANEL =============================== */
.panel{ padding-block:0 clamp(80px,10vh,140px); overflow:visible; }
.panel-copy{ padding-top:clamp(56px,8vh,112px); max-width:720px; }
.panel-copy .lead{ color:var(--muted); margin-top:24px; max-width:560px; }
.panel-shot{ position:relative; margin-top:clamp(40px,6vh,80px); }
.panel-shot img{ width:100%; height:auto; }
.panel-sketch{ width:100%; height:auto; aspect-ratio:1400/820; }
.panel-note{ margin-top:14px; color:var(--muted); }

/* ============================== PROCESS ============================= */
.more{ padding-block:0 clamp(96px,12vh,160px); }
.more-intro{ padding-top:clamp(56px,8vh,112px); max-width:620px; }
.more-intro p{ color:var(--muted); margin-top:16px; }
.process{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--gutter); row-gap:40px; align-items:start; margin-top:clamp(56px,8vh,96px); overflow:hidden; }
.process li{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-top:22px; }
.process li::before{ content:""; position:absolute; left:9.5px; top:0; width:1px; height:10px; background:var(--text); }
.process li::after{ content:""; position:absolute; left:9.5px; top:0; width:calc(100% + var(--gutter)); height:1px; background:var(--text); }
.p-head{ display:flex; align-items:center; gap:12px; height:20px; }
.process .ico{ width:20px; height:20px; color:var(--muted); }
.p-no{ font:400 13px/1 var(--font-mono); color:var(--muted); letter-spacing:.02em; }
.p-txt{ font:500 11px/1.4 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.p-desc{ color:var(--muted); font-size:15px; line-height:1.55; max-width:260px; }
.p-end{ color:var(--accent); }
.p-end .ico,.p-end .p-no{ color:var(--accent); }
.p-end .p-desc{ color:var(--accent); opacity:.8; }
.process li:last-child::after{ display:none; }

/* ============================== FAQ ================================= */
.faq-sheet{ padding-bottom:clamp(96px,12vh,160px); }
.faq-title{ padding-top:clamp(56px,8vh,112px); max-width:720px; }
.faq{ max-width:980px; margin-top:clamp(36px,5vh,56px); border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item h3{ font:inherit; }
.faq-q{ width:100%; text-align:left; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:22px 0; font-size:clamp(24px,2vw,28px); font-weight:500; line-height:1.15; letter-spacing:-.02em; }
.faq-q:focus-visible{ outline-offset:-2px; }
.faq-sign{ position:relative; width:16px; height:16px; }
.faq-sign::before,
.faq-sign::after{ content:""; position:absolute; background:var(--text); transition:transform var(--t-fast) var(--ease); }
.faq-sign::before{ left:0; top:7.5px; width:16px; height:1px; }
.faq-sign::after{ left:7.5px; top:0; width:1px; height:16px; }
.faq-q[aria-expanded="true"] .faq-sign::after{ transform:rotate(90deg); }
.faq-a .acc-inner{ padding:0 0 26px; max-width:700px; color:var(--muted); }

/* ============================== CTA ================================= */
.cta{ background:var(--surface); padding-block:0 clamp(56px,8vh,96px); }
.cta-body{ padding-top:clamp(48px,6vh,80px); }
.cta .lead{ color:var(--muted); margin-top:clamp(28px,4vh,44px); max-width:560px; }
.cta-actions{ display:flex; gap:32px; align-items:center; margin-top:clamp(28px,4vh,44px); }

/* ============================== FOOTER ============================== */
.site-footer{ width:min(100%,calc(var(--page) + 2 * var(--margin))); margin-inline:auto; padding:48px var(--margin) 24px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; align-items:start; justify-items:center; text-align:center; }
.footer-brand{ display:flex; flex-direction:column; align-items:center; }
.footer-home{ display:flex; align-items:center; justify-content:center; gap:16px; width:fit-content; max-width:100%; }
.footer-logo{ width:144px; height:144px; object-fit:contain; flex-shrink:0; }
.footer-wordmark{ display:grid; gap:10px; font-size:28px; font-weight:500; line-height:1; letter-spacing:-.03em; }
.footer-wordmark span{ max-width:150px; color:var(--muted); font:400 10px/1.5 var(--font-mono); letter-spacing:.1em; }
.footer-tagline{ color:var(--muted); font-size:16px; line-height:1.6; margin-top:8px; }
.footer-links{ display:flex; flex-direction:column; align-items:center; padding-top:20px; }
.footer-links .mono-label{ color:var(--muted); margin-bottom:18px; }
.footer-links a{ font-size:15px; line-height:1.4; min-height:40px; display:flex; align-items:center; padding:7px 0; overflow-wrap:anywhere; transition:color var(--t-fast) var(--ease); }
.footer-links a:hover{ color:var(--accent); }
.footer-bottom{ grid-column:1 / -1; display:flex; justify-content:center; align-items:center; gap:32px; border-top:1px solid var(--line); padding-top:20px; color:var(--muted); font:400 11px/1.5 var(--font-mono); }
.footer-bottom a{ display:flex; align-items:center; min-height:44px; color:var(--text); }

/* ============================== DOCS ================================ */
.doc{ padding-top:clamp(40px,6vh,72px); padding-bottom:clamp(96px,12vh,160px); }
.doc-head{ max-width:720px; }
.doc-head .h-mid{ margin-top:16px; }
.doc-meta{ color:var(--muted); }
.doc-body{ max-width:720px; margin-top:clamp(40px,6vh,64px); }
.doc-section{ padding:32px 0; border-top:1px solid var(--line); }
.doc-section h2{ font:500 11px/1.3 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.doc-section ol{ margin-top:18px; counter-reset:para; }
.doc-section ol > li{ position:relative; padding-left:48px; color:var(--text); font-size:16px; line-height:1.65; counter-increment:para; }
.doc-section ol > li + li{ margin-top:12px; }
.doc-section ol > li::before{ content:counter(para, decimal-leading-zero); position:absolute; left:0; top:.35em; font:400 12px/1 var(--font-mono); color:var(--muted); }
.doc-section a,
.doc-section .link{ display:inline; min-height:0; vertical-align:baseline; font:inherit; letter-spacing:inherit; text-transform:none; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; color:inherit; }
.doc-section .link::after{ display:none; }
.doc-section a:hover,
.doc-section .link:hover{ color:var(--accent); }
.doc-section ul{ margin-top:10px; padding-left:18px; list-style:disc; color:var(--muted); font-size:15px; }
.doc-section ul li + li{ margin-top:6px; }
.gap{ background:none; color:var(--accent); font:500 12px/1.3 var(--font-mono); letter-spacing:.06em; }

/* ============================== MOTION ============================== */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal{ transform:none; }
  .acc-panel,.acc-inner,.faq-sign::before,.faq-sign::after{ transition:none !important; }
  .site-nav,.site-nav a{ transition:none; transform:none; }
  .hero-img{ transform:none !important; }
  .ticket:hover{ transform:rotate(-.8deg); }
  .js .hero-drawing:not(.is-in) .hero-img{ opacity:.92; transform:none; }
}
@media (prefers-reduced-motion:reduce) and (max-width:640px){
  .ticket:hover{ transform:none; }
}

/* ============================== RESPONSIVE ========================== */
@media (max-width:1199px){
  .packages-title{ white-space:normal; }
  .site-header{ background:var(--bg); }
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; }
  .header-right{ gap:12px; }
  .site-nav{ position:absolute; left:0; right:0; top:88px; flex-direction:column; gap:0; background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px var(--margin); visibility:hidden; opacity:0; transform:translateY(-12px); transition:transform 260ms var(--ease), opacity 260ms var(--ease), visibility 0s linear 260ms; }
  .site-nav a{ opacity:0; transform:translateY(-6px); transition:transform 220ms var(--ease), opacity 220ms var(--ease); }
  .site-nav.is-open{ visibility:visible; opacity:1; transform:none; transition:transform 260ms var(--ease), opacity 260ms var(--ease); }
  .site-nav.is-open a{ opacity:1; transform:none; }
  .site-nav.is-open a:nth-child(1){ transition-delay:40ms; } .site-nav.is-open a:nth-child(2){ transition-delay:80ms; } .site-nav.is-open a:nth-child(3){ transition-delay:120ms; } .site-nav.is-open a:nth-child(4){ transition-delay:160ms; } .site-nav.is-open a:nth-child(5){ transition-delay:200ms; } .site-nav.is-open a:nth-child(6){ transition-delay:240ms; } .site-nav.is-open a:nth-child(7){ transition-delay:280ms; }
  .site-nav a{ min-height:48px; color:var(--text); align-self:flex-start; width:max-content; max-width:100%; }
}
@media (max-width:1023px){
  .process{ grid-template-columns:1fr; row-gap:22px; padding-left:22px; max-width:520px; overflow:visible; }
  .process li{ padding-top:0; }
  .process li::before{ left:-22px; top:10px; width:10px; height:1px; }
  .process li::after{ left:-22px; top:10px; width:1px; height:calc(100% + 22px); }
  .process li:last-child::after{ display:none; }
  .hero{ grid-template-rows:auto 1fr auto; padding-top:16px; min-height:0; }
  .hero{ grid-template-columns:minmax(0,1fr); }
  .hero-drawing{ position:relative; top:auto; right:auto; width:min(100%,500px); margin:32px 0 0 auto; order:3; }
  .hero-main h1{ white-space:normal; }
  .hero-body{ padding-top:12px; }
  .hero-foot{ grid-template-columns:minmax(0,1fr); }
  .hero-plate{ justify-content:flex-start; margin-top:16px; }
  .plate--hero{ min-width:0; width:100%; max-width:460px; }
  .story-grid{ grid-template-columns:1fr; }
  .story-year{ font-size:clamp(112px,30vw,220px); margin-bottom:.1em; }
  .node-grid{ grid-template-columns:1fr; align-items:start; }
  .pico-intro{ grid-template-columns:1fr; }
  .pico-intro .lead{ max-width:560px; }
  .ticket-wrap{ padding-inline:0; }
  .plan-row{ grid-template-columns:1fr auto 32px; grid-template-areas:"name ram arrow" "name price arrow"; gap:6px var(--gutter); min-height:120px; padding:18px 0 18px 12px; }
  .plan-name-wrap{ grid-area:name; }
  .plan-ram{ grid-area:ram; text-align:right; }
  .plan-price{ grid-area:price; }
  .plan-arrow{ grid-area:arrow; padding-right:8px; }
  .plan-details-inner{ padding:8px 12px 32px; }
  .spec{ grid-template-columns:1fr; }
  .packages-intro{ grid-template-columns:1fr; }
  .p-desc{ max-width:none; }
  .story-side{ display:block; }
  .story-legend{ margin-top:28px; padding-top:0; }
}
@media (max-width:767px){
  .site-footer{ grid-template-columns:1fr; gap:24px; }
  .footer-links{ padding-top:0; }
  .brand-name{ display:none; }
  .regmark{ display:none; }
}
@media (max-width:640px){
  .display-xl{ font-size:clamp(46px,13.5vw,62px); }
  .display-l{ font-size:clamp(30px,8.6vw,46px); }
  .hero-cta{ flex-wrap:wrap; gap:20px 28px; }
  .hero-cta .btn-box{ width:100%; }
  .ticket{ grid-template-columns:1fr; grid-template-rows:56px auto; transform:none; }
  .ticket:hover{ transform:translateY(-4px); }
  .ticket-stub{ order:-1; flex-direction:row; padding:0 24px; }
  .ticket-stub::before{ left:4px; right:4px; top:auto; bottom:-3px; width:auto; height:6px; background:radial-gradient(circle at center, var(--bg) 2.6px, transparent 2.8px) center/10px 6px repeat-x; }
  .ticket-specs{ grid-template-columns:repeat(2,1fr); gap:16px 0; }
  .ticket-stub-text{ writing-mode:horizontal-tb; transform:none; }
  .ticket-top{ grid-template-columns:1fr; gap:12px; }
  .ticket-specs dd{ font-size:20px; }
  .plate-row{ grid-template-columns:96px 1fr; }
  .plate--big{ padding:28px 20px 24px; }
  .plate--big .plate-row{ grid-template-columns:96px 1fr; }
  .plate--big .plate-row dd{ font-size:18px; }
  .dim--years{ width:100%; }
  .cta-actions{ flex-wrap:wrap; gap:20px 28px; }
}

/* Objaśnienia i układy wąskich ekranów. */
.pico-note{ max-width:720px; margin:24px auto 0; color:var(--muted); font-size:13px; }
.pico-note a{ text-decoration:underline; text-underline-offset:3px; }
.panel-copy > .link{ margin-top:20px; }
.panel-note{ margin-top:16px; }
.panel-shot img{ border:1px solid var(--line); }
@media (max-width:1199px){
  .site-nav{ max-height:calc(100svh - 88px); overflow-y:auto; }
  .footer-home{ gap:8px; }
  .footer-logo{ width:116px; height:116px; }
  .footer-wordmark{ font-size:24px; }
  html:not(.js) .site-header{ height:auto; flex-wrap:wrap; padding-block:8px; }
  html:not(.js) .header-right{ flex-wrap:wrap; width:100%; }
  html:not(.js) .menu-btn{ display:none; }
  html:not(.js) .site-nav{ position:static; visibility:visible; opacity:1; transform:none; flex-direction:row; flex-wrap:wrap; gap:0 16px; padding:0; border:0; }
  html:not(.js) .site-nav a{ opacity:1; transform:none; }
}
@media (max-width:767px){
  .brand-logo{ width:68px; height:68px; }
  .footer-home{ gap:16px; }
  .footer-logo{ width:128px; height:128px; }
  .footer-links a{ min-height:44px; }
  .footer-links .mono-label{ margin-bottom:10px; }
}
@media (max-width:480px){
  .plan-row{ gap:8px 12px; grid-template-columns:minmax(0,1fr) auto 20px; }
  .plan-price{ gap:4px; flex-wrap:wrap; }
  .plan-period{ font-size:11px; }
  .plan-desc{ font-size:14px; }
  .plan-arrow{ padding-right:0; }
  .hero-cta .btn-box{ min-width:0; }
  .btn{ font-size:10px; gap:12px; }
  .plate--hero .plate-row{ grid-template-columns:76px minmax(0,1fr); gap:10px; }
  .plate--hero .plate-row dd{ font-size:12px; }
  .service{ grid-template-columns:24px minmax(0,1fr); gap:14px 12px; padding:14px 0; }
  .service-price{ grid-column:2; margin-left:0; text-align:left; white-space:normal; color:var(--text); }
  .footer-wordmark{ font-size:23px; }
  .footer-logo{ width:108px; height:108px; }
  .footer-bottom{ flex-wrap:wrap; gap:8px; }
}