/* generowane przez tools/build_site.py: CSS strony z eksportu Claude Design (blok 2) */
:root{--ease-entrance:cubic-bezier(.16,1,.3,1);--ease-standard:cubic-bezier(.25,1,.5,1);--ease-state:cubic-bezier(.4,0,.2,1);--ease-exit:cubic-bezier(.5,0,.75,0);--dur-micro:150ms;--dur-fast:200ms;--dur-medium:320ms;--dur-slow:480ms;--dur-hero:700ms}
html{scroll-behavior:smooth}
body{margin:0;background:#FCFCFA;color:#101C30;font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:#7A5822;text-decoration:underline;text-underline-offset:2px}
a:hover{color:#101C30}
.dark a{color:#C9A05A}.dark a:hover{color:#FCFCFA}
:focus-visible{outline:2px solid #2A4066;outline-offset:2px}
.dark :focus-visible{outline-color:#C9A05A}
.skip{position:fixed;top:8px;left:8px;z-index:300;background:#B5873C;color:#101C30;font:600 15px Inter,sans-serif;padding:12px 20px;border-radius:6px;text-decoration:none;transform:translateY(-300%)}
.skip:focus{transform:none}
@keyframes reveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes dashx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drawy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes glowin{from{opacity:0;transform:translateY(72px)}to{opacity:.55;transform:translateY(0)}}
@keyframes risef{from{transform:translateY(46%)}to{transform:translateY(0)}}
@keyframes motef{0%{transform:translateY(52px) scale(.55);opacity:0}45%{opacity:var(--mo,.5)}100%{transform:translateY(-72px) scale(1);opacity:0}}
@keyframes numglow{from{text-shadow:0 0 0 rgba(201,160,90,0)}to{text-shadow:0 0 36px rgba(201,160,90,.55)}}
@keyframes hdr{to{background:rgba(252,252,250,.88);box-shadow:0 1px 0 rgba(16,28,48,.08),0 4px 16px rgba(16,28,48,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
@supports (animation-timeline: view()){
.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 15% entry 60%}
.casc{animation:reveal linear both;animation-timeline:view();animation-range:entry calc(15% + var(--i,0)*7%) entry calc(60% + var(--i,0)*7%)}
.dash-a{transform-origin:left;animation:dashx linear both;animation-timeline:view();animation-range:entry 20% entry 45%}
.draw-y{animation:drawy linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
.draw-x{transform-origin:left;animation:dashx linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
.glow-a{animation:glowin linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
.dawn-rise{animation:risef linear both;animation-timeline:view();animation-range:entry 0% cover 75%}
.mote{animation:motef linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.num-glow{animation:numglow linear both;animation-timeline:view();animation-range:entry 30% cover 65%}
}
@supports (animation-timeline: scroll()){
header.sticky{animation:hdr linear both;animation-timeline:scroll(root block);animation-range:0 80px}
.prog{animation:dashx linear both;animation-timeline:scroll(root block)}
}
.prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#B5873C,#C9A05A);transform:scaleX(0);transform-origin:left;pointer-events:none}
.mote{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E9CD9C,#B5873C 62%,transparent 78%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal,.casc,.dash-a,.draw-y,.draw-x,.glow-a,.dawn-rise,.mote,.num-glow,.prog{animation-timeline:none;animation:none}
}
.nav-mid{display:none}
@media (min-width:900px){.nav-mid{display:flex;gap:32px}}
.g3{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:820px){.g3{grid-template-columns:repeat(3,1fr);gap:24px}}
.g2{display:grid;gap:36px;grid-template-columns:1fr}
@media (min-width:820px){.g2{grid-template-columns:1fr 1fr;gap:56px}}
.models{display:grid;gap:36px;grid-template-columns:1fr;align-items:start}
.mdiv{width:48px;height:2px;background:#B5873C;transform-origin:left}
@media (min-width:900px){.models{grid-template-columns:1.05fr 2px .95fr;gap:56px}.mdiv{width:2px;height:100%;min-height:280px;transform-origin:top}}
.kgrid{display:grid;gap:44px;grid-template-columns:1fr;align-items:start}
@media (min-width:980px){.kgrid{grid-template-columns:minmax(300px,430px) minmax(340px,600px);gap:72px;justify-content:center}}
.mobile-bar{display:block}
@media (min-width:900px){.mobile-bar{display:none!important}}
.steps{display:flex;flex-direction:column;gap:20px;position:relative;padding-left:24px;border-left:2px solid rgba(201,160,90,.45)}
.sline{display:none}
@media (min-width:640px){.steps{flex-direction:row;justify-content:space-between;gap:24px;padding-left:0;border-left:none;padding-top:0}.sline{display:block;position:absolute;left:16px;right:16px;top:15px;height:2px;background:rgba(201,160,90,.55)}}
.hero{height:100vh;height:100svh;min-height:580px}
::selection{background:#F5EDDF;color:#02102B}

/* style-hover / style-active z eksportu → klasy */
.hx-1:hover{color:#7A5822;text-decoration:underline}
.hx-2:hover{background:#A67B34;color:#101C30}
.hx-2:active{transform:translateY(1px)}
.hx-3:hover{box-shadow:0 0 0 1px rgba(16,28,48,.08),0 1px 2px -1px rgba(16,28,48,.08),0 2px 4px 0 rgba(16,28,48,.06);transform:translateY(-2px)}
.hx-4:active{transform:translateY(1px)}