/* Style komponentów landingu AVE — wyciągnięte 1:1 z <style> referencji
   docs/new-design/.../handoff/Strona AVE - Ciecie i Giecie.dc.html (linie
   17-131) + dopiski wymagane przez WDROZENIE.md:59-62 (:focus-visible,
   prefers-reduced-motion) i MOTYWY.md sekcja 4 (::selection).
   ZERO hexów (tokeny w themes.css); świadome odstępstwa od referencji:
   biały tekst przycisków przez var(--btn-text), a hover przycisku ghost
   przez var(--fg-1) — biały byłby niewidoczny w motywach semi/light. */
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-canvas);color:var(--fg-1);font-family:var(--font-ui);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background 120ms ease,color 120ms ease}
a{color:var(--fg-link);text-decoration:none}
a:hover{color:var(--fg-link-2)}
::selection{background:var(--selection)}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.mono{font-family:var(--font-mono)}
.mut{color:var(--fg-2)}
.sec{padding:96px 0}
.navbar{position:sticky;top:0;z-index:50;background:var(--bg-canvas);border-bottom:1px solid var(--bg-surface-3)}
.navin{height:64px;display:flex;align-items:center;gap:20px}
.navlinks{display:flex;gap:22px;font-size:14px;flex:1}
.navlinks a{color:var(--fg-2)}
.navlinks a:hover{color:var(--fg-1)}
.logo{height:28px;color:var(--fg-1);display:block}
.logosep{width:1px;height:24px;background:var(--bg-surface-3)}
.navsub{font-size:13px;color:var(--fg-2);white-space:nowrap}
.navtel{font-family:var(--font-mono);font-size:13px;color:var(--fg-2);white-space:nowrap}
.seg{display:flex;border:1px solid var(--bg-surface-3);border-radius:6px;overflow:hidden}
.seg-i{background:transparent;border:none;color:var(--fg-2);font-size:12.5px;font-weight:600;padding:6px 10px;cursor:pointer;font-family:var(--font-ui);white-space:nowrap}
.seg-i:hover{color:var(--fg-1)}
.seg-i.on{background:var(--bg-surface-2);color:var(--fg-1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:6px;font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--btn-text);padding:10px 16px;cursor:pointer;transition:background 120ms ease;white-space:nowrap}
.btn-success{background:var(--grad-success)}
.btn-success:hover{background:var(--grad-success-hover);color:var(--btn-text)}
.btn-primary{background:var(--grad-primary)}
.btn-primary:hover{background:var(--grad-primary-hover);color:var(--btn-text)}
.btn-ghost{background:transparent;border:1px solid var(--bg-surface-3);color:var(--fg-1)}
.btn-ghost:hover{background:var(--bg-surface-2);color:var(--fg-1)}
.btn-lg{font-size:15px;padding:14px 24px}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--grad-header);border-left:3px solid var(--blue-500);border-radius:6px;padding:8px 14px;font-size:13px;color:var(--fg-1)}
.hero{padding:80px 0 72px;background:var(--grad-window)}
.hero-g{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.h1{font-size:52px;line-height:1.12;font-weight:700;letter-spacing:-.015em;margin:20px 0 0}
.h1 .acc{color:var(--fg-link)}
.lede{font-size:17px;line-height:1.7;color:var(--fg-2);margin-top:20px;max-width:540px;text-wrap:pretty}
.cta-row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hmeta{margin-top:22px;font-size:13px;color:var(--fg-2)}
.hero-art{background:var(--bg-surface);border:1px solid var(--bg-surface-3);border-radius:8px;overflow:hidden}
.artbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-bottom:1px solid var(--bg-surface-3);font-size:12px;color:var(--fg-2);font-family:var(--font-mono)}
.artgrid{display:block;width:100%;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:24px 24px;background-color:var(--bg-canvas)}
.legend{display:flex;gap:18px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--bg-surface-3);font-size:12px;color:var(--fg-2)}
.lkey{display:inline-flex;align-items:center;gap:7px}
.sw{width:16px;height:0;border-top:2px solid var(--dxf-outline);display:inline-block}
.sw.fold{border-top-style:dashed;border-top-color:var(--dxf-fold)}
.sw.axis{border-top-color:var(--dxf-axis)}
.sw.dim{border-top-color:var(--dxf-dimension)}
.ld{stroke-dasharray:1500;stroke-dashoffset:1500;animation:draw 9s linear infinite}
@keyframes draw{0%{stroke-dashoffset:1500}44%,100%{stroke-dashoffset:0}}
.dot{animation:ride 9s linear infinite}
@keyframes ride{0%{offset-distance:0%;opacity:1}44%{offset-distance:100%;opacity:1}46%,100%{offset-distance:100%;opacity:0}}
.fdin{opacity:0;animation:fdin 9s linear infinite}
@keyframes fdin{0%,46%{opacity:0}56%,100%{opacity:1}}
.fdin2{opacity:0;animation:fdin2 9s linear infinite}
@keyframes fdin2{0%,58%{opacity:0}68%,100%{opacity:1}}
.noanim .ld{animation:none;stroke-dashoffset:0}
.noanim .dot{animation:none;opacity:0}
.noanim .fdin{animation:none;opacity:1}
.noanim .fdin2{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){.ld{animation:none;stroke-dashoffset:0}.dot{animation:none;opacity:0}.fdin,.fdin2{animation:none;opacity:1}}
.statusbar{border-top:1px solid var(--bg-surface-3);border-bottom:1px solid var(--bg-surface-3);background:var(--bg-canvas)}
.statusin{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;font-size:12.5px;color:var(--fg-2);font-family:var(--font-mono)}
.gdot{width:8px;height:8px;border-radius:50%;background:var(--green-400);display:inline-block;flex:none}
.sdiv{color:var(--bg-surface-3)}
.shead{margin-bottom:44px}
.scap{font-family:var(--font-mono);font-size:13px;color:var(--fg-link);letter-spacing:.06em}
.sh2{font-size:32px;font-weight:700;letter-spacing:-.01em;margin:12px 0 0;line-height:1.2}
.slede{font-size:16px;color:var(--fg-2);max-width:660px;margin-top:14px;line-height:1.7;text-wrap:pretty}
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:stretch}
.gbox{position:relative;background:var(--bg-surface);border:1px solid var(--bg-surface-3);border-radius:8px;padding:28px 22px 22px;display:flex;flex-direction:column;gap:14px}
.gbox-t{position:absolute;top:-11px;left:12px;background:var(--bg-canvas);color:var(--fg-link);font-size:13px;font-weight:600;padding:2px 8px;border-radius:4px;border:1px solid var(--bg-surface-3)}
a.gbox{color:inherit;text-decoration:none;transition:border-color .15s ease}
a.gbox:hover{border-color:var(--fg-link);color:inherit}
.altcap{margin:34px 0 22px;font-size:13px;color:var(--fg-2);letter-spacing:.06em;text-transform:uppercase}
.golink{font-size:13px;color:var(--fg-link)}
.pathart{display:block;width:100%;height:auto;max-height:96px;margin-top:4px}
.paths3{margin-bottom:34px}
.gdesc{font-size:13.5px;color:var(--fg-2);line-height:1.65;margin:0}
.gspace{flex:1}
.drop{border:1px dashed var(--bg-border-strong);border-radius:6px;padding:24px 16px;text-align:center;color:var(--fg-2);font-size:13px;background:var(--bg-canvas)}
.dropfm{font-family:var(--font-mono);color:var(--fg-link-2);font-size:12.5px;margin-top:10px}
.readout{background:var(--bg-canvas);border:1px solid var(--bg-surface-3);border-radius:6px;padding:14px;display:flex;flex-direction:column;gap:9px}
.rline{display:flex;align-items:baseline;gap:8px;font-family:var(--font-mono);font-size:12.5px}
.rlab{color:var(--fg-2);white-space:nowrap}
.rfill{flex:1;border-bottom:1px dotted var(--bg-surface-3);transform:translateY(-3px)}
.rval{color:var(--fg-1);white-space:nowrap}
.rval.ok{color:var(--green-400)}
.pricebox{background:var(--bg-canvas);border:1px solid var(--bg-surface-3);border-radius:6px;padding:16px 14px;display:flex;flex-direction:column;gap:4px}
.price{font-size:30px;font-weight:700;font-family:var(--font-mono);color:var(--fg-1);margin:0}
.plab{font-size:12px;color:var(--fg-2)}
.pterm{font-size:12.5px;color:var(--green-400);font-family:var(--font-mono);margin-top:6px}
.note{display:flex;gap:12px;background:var(--tint-note);border-left:3px solid var(--blue-500);border-radius:6px;padding:14px 16px;font-size:13.5px;color:var(--fg-2);margin-top:28px;line-height:1.65}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.svc-art{background:var(--bg-canvas);border:1px solid var(--bg-surface-3);border-radius:6px;display:block;width:100%}
.h3{font-size:19px;font-weight:600;color:var(--fg-1);margin:0}
.spec{display:flex;flex-direction:column;margin-top:4px}
.sprow{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--bg-surface-2);font-size:13.5px}
.splab{color:var(--fg-2)}
.spval{font-family:var(--font-mono);color:var(--fg-1);font-size:13px;text-align:right}
.mtab{border:1px solid var(--bg-surface-3);border-radius:8px;overflow:hidden}
.mrow{display:grid;grid-template-columns:1.1fr 1.3fr .9fr 1.6fr;gap:16px;padding:14px 18px;border-top:1px solid var(--bg-surface-2);font-size:14px;background:var(--bg-surface);align-items:baseline}
.mrow:hover{background:var(--bg-surface-2)}
.mrow.mhead{border-top:none;background:var(--bg-surface-2);font-size:12px;color:var(--fg-2);font-weight:600;padding:10px 18px;letter-spacing:.03em}
.mname{font-weight:600}
.mgr{font-family:var(--font-mono);font-size:13px;color:var(--fg-link-2)}
.mth{font-family:var(--font-mono);font-size:13px}
.mnote{font-size:13px;color:var(--fg-2)}
.why{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px}
.wcard{background:var(--bg-surface);border:1px solid var(--bg-surface-3);border-radius:8px;padding:22px}
.wnum{font-family:var(--font-mono);font-size:12px;color:var(--fg-link)}
.wtit{font-size:16px;font-weight:600;margin:10px 0 0}
.wdesc{font-size:13.5px;color:var(--fg-2);line-height:1.65;margin-top:8px}
.band{background:var(--grad-header);border:1px solid var(--bg-surface-3);border-left:3px solid var(--blue-500);border-radius:8px;padding:48px 44px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.bh2{font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0;max-width:560px}
.bsub{font-size:15px;color:var(--fg-2);margin-top:12px;max-width:520px;line-height:1.65}
.bcta{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.footer{border-top:1px solid var(--bg-surface-3);padding:56px 0 32px;background:var(--bg-canvas)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.ftag{font-size:13.5px;color:var(--fg-2);margin-top:16px;max-width:300px;line-height:1.65}
.fh{font-size:12px;color:var(--fg-2);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px}
.fcol{display:flex;flex-direction:column;gap:10px;font-size:14px}
.fcol a{color:var(--fg-2)}
.fcol a:hover{color:var(--fg-1)}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--bg-surface-2);margin-top:48px;padding-top:24px;font-size:12.5px;color:var(--fg-3)}
@media (max-width:960px){.hero-g{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.svc{grid-template-columns:1fr}.why{grid-template-columns:1fr 1fr}.fgrid{grid-template-columns:1fr 1fr}.h1{font-size:38px}.navlinks{display:none}.navin .navtel{display:none}.mrow{grid-template-columns:1fr 1fr;padding:14px}.band{padding:32px 24px}.bcta{align-items:flex-start}}