/* skelbimofoto.lt — one stylesheet for the landing, the legal pages and 404.
   The look is QuickStaged's "Minimal Lines" (site/landing/index.html), the
   variant Vitali picked on 22.09, so the two products read as one family.
   Fonts are the system's, not Google Fonts: a font from Google's servers
   sends every visitor's IP address to Google before any consent, which a
   German court found unlawful under the GDPR in 2022 (LG München I, 3 O 17493/20). */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#ffffff; --ink:#000000; --grey:#c2c2c2; --soft:#f5f5f5; --sub:#6f6f6f;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --pad:clamp(1rem,3vw,2.5rem);
}
html { scroll-padding-top:4.5rem; background:var(--bg); }
@media (prefers-reduced-motion: no-preference){ html { scroll-behavior:smooth; } }
body { font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.55; font-size:.95rem; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img,svg { display:block; max-width:100%; height:auto; }
a { color:inherit; }
::selection { background:var(--ink); color:var(--bg); }

.mono { font-family:var(--mono); font-size:.7rem; letter-spacing:.02em; color:var(--sub); }
.fine { font-family:var(--mono); font-size:.68rem; color:var(--sub); }
.fine a { color:var(--ink); text-underline-offset:3px; }

/* lines, image wipes and fades — only hidden where <head> set .rv-on,
   so phones, reduced motion and a failed script all get a plain page */
.gl { background:var(--grey); }
.gl-h { height:1px; width:100%; }
.gl-v { width:1px; }
.rv-on .gl-h { transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease); }
.rv-on .gl-v { transform:scaleY(0); transform-origin:top; transition:transform 1.3s var(--ease); }
.rv-on .gl.in { transform:none; }
.rv-on .ir { clip-path:inset(0 0 100% 0); transition:clip-path 1s var(--ease); transition-delay:var(--d,0s); }
.rv-on .ir.in { clip-path:inset(0 0 0% 0); }
.rv-on .rv { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:var(--d,0s); }
.rv-on .rv.in { opacity:1; transform:none; }

.lu { position:relative; text-decoration:none; font-weight:500; }
.lu::after { content:''; position:absolute; bottom:-2px; left:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.65,0,.35,1); }
.lu:hover::after { transform:scaleX(1); }

/* header */
.hd { position:fixed; inset:0 0 auto; z-index:60; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); }
.hd-in { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem var(--pad); }
.hd::after { content:''; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px; background:var(--grey); }
.brand { font-weight:700; font-size:1.05rem; letter-spacing:-.02em; text-decoration:none; white-space:nowrap; }
.hd-nav { display:flex; gap:1.8rem; }
.hd-nav a { font-size:.82rem; font-weight:500; text-decoration:none; color:var(--sub); transition:color .25s; }
.hd-nav a:hover { color:var(--ink); }
.hd-right { display:flex; align-items:center; gap:1.2rem; }

/* language switch: three short links, the current one marked */
.langs { display:flex; gap:.15rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; }
.langs a { padding:.35rem .4rem; text-decoration:none; color:var(--sub); border:1px solid transparent; }
.langs a:hover { color:var(--ink); }
.langs a[aria-current="page"] { color:var(--ink); border-color:var(--grey); }

.menu-btn { display:none; background:none; border:1px solid var(--grey); padding:.55rem .85rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); cursor:pointer; transition:border-color .25s; }
.menu-btn:hover { border-color:var(--ink); }
.menu-btn .close { display:none; }
.hd.open .menu-btn .open { display:none; }
.hd.open .menu-btn .close { display:inline; }
.mmenu { padding:.2rem var(--pad) 1.6rem; }
.mmenu[hidden] { display:none; }
.mmenu nav { display:flex; flex-direction:column; }
.mmenu nav a { padding:.95rem 0; border-top:1px solid var(--grey); font-size:1.05rem; font-weight:500; text-decoration:none; }
.mmenu nav a:first-child { border-top:none; }
.mmenu .btn { margin-top:1.1rem; }
@media (max-width:980px){ .hd-nav { display:none; } .menu-btn { display:inline-flex; } }
@media (min-width:981px){ .mmenu { display:none !important; } }

.skip { position:absolute; left:var(--pad); top:-4rem; z-index:100; padding:.6rem 1rem; background:var(--ink); color:#fff; font-size:.82rem; text-decoration:none; }
.skip:focus { top:1rem; }

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.4rem; background:var(--ink); color:#fff; font-family:var(--sans); font-size:.82rem; font-weight:500; text-decoration:none; border:1px solid var(--ink); cursor:pointer; transition:background .3s, color .3s; }
.btn:hover { background:transparent; color:var(--ink); }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--grey); }
.btn.ghost:hover { border-color:var(--ink); }
.btn:focus-visible, .langs a:focus-visible, .menu-btn:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* hero */
.hero { padding:6.6rem var(--pad) var(--pad); }
.hero-top { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:flex-start; padding-bottom:1.4rem; }
.hero-h1 { max-width:56rem; font-size:clamp(1.5rem,3vw,2.3rem); font-weight:600; line-height:1.3; letter-spacing:-.02em; }
.hero-meta { text-align:right; }
@media (max-width:1100px){ .hero-meta { display:none; } }
.hero-band { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:center; padding:1.1rem 0; }
.hero-cta { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }

/* before/after slider — the pair shows split at 50% even without JS; the
   box keeps the photos' own 1400:930 ratio so their burned-in label is never cropped */
.ba { --pos:50%; position:relative; width:100%; aspect-ratio:1400/930; overflow:hidden; touch-action:pan-y; cursor:ew-resize; user-select:none; -webkit-user-select:none; background:var(--soft); }
.ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; }
.ba .ba-before { clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position:absolute; top:0; bottom:0; left:var(--pos); width:1px; margin-left:-.5px; background:var(--ink); cursor:ew-resize; }
.ba-handle span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:var(--bg); border:1px solid var(--ink); display:flex; }
.ba-handle span::before { content:'◂ ▸'; color:var(--ink); font-size:.72rem; margin:auto; letter-spacing:.06em; }
.ba-handle:focus { outline:none; }
.ba-handle:focus-visible span { outline:2px solid var(--ink); outline-offset:3px; }
.ba-tag { position:absolute; bottom:12px; font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; padding:.3rem .6rem; background:var(--bg); color:var(--ink); border:1px solid var(--grey); pointer-events:none; }
.ba-tag-b { left:12px; }
.ba-tag-a { right:12px; background:var(--ink); color:#fff; border-color:var(--ink); }

/* sections */
.sec { padding:0 var(--pad); position:relative; }
.sec-inner { padding:4.5rem 0 5.5rem; }
.sec-label { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:2.8rem; }
.h2 { font-size:clamp(2rem,4.2vw,3.6rem); font-weight:700; letter-spacing:-.035em; line-height:1.06; max-width:52rem; overflow-wrap:break-word; hyphens:auto; }
.lead { margin-top:1.1rem; max-width:36rem; color:var(--sub); }

/* three cells (why) */
.obj { display:grid; grid-template-columns:1fr; position:relative; }
@media (min-width:900px){ .obj { grid-template-columns:repeat(3,1fr); } }
.obj-cell { padding:1.8rem 0; position:relative; }
@media (min-width:900px){ .obj-cell { padding:0 2.2rem; } .obj-cell:first-child { padding-left:0; } .obj-cell:last-child { padding-right:0; } }
.obj-line-v { position:absolute; top:0; bottom:0; left:0; }
.obj-cell .mono { display:block; margin-bottom:1.4rem; }
.obj-cell h3 { font-size:1.2rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.6rem; }
.obj-cell p { color:var(--sub); font-size:.92rem; line-height:1.65; }
@media (max-width:899px){ .obj-cell + .obj-cell { border-top:1px solid var(--grey); } .obj-line-v { display:none; } }

/* gallery */
.gal { display:grid; grid-template-columns:1fr; column-gap:2.8rem; }
@media (min-width:700px){ .gal { grid-template-columns:1fr 1fr; } }
.gal-item { position:relative; padding:1.6rem 0 2rem; min-width:0; }
.gal-item .mono { display:block; margin-bottom:1.1rem; }
.gal-foot { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-top:1rem; }
.gal-foot b { font-weight:600; font-size:.92rem; }
.gal-note { padding-top:1.4rem; }

/* steps */
.step { display:grid; grid-template-columns:1fr; gap:1rem; padding:2.4rem 0; position:relative; }
@media (min-width:900px){ .step { grid-template-columns:180px 1fr 1fr; gap:2rem; align-items:center; } }
.step h3 { font-size:1.45rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.5rem; }
.step p { color:var(--sub); max-width:28rem; font-size:.92rem; }
.step-viz { position:relative; max-width:340px; width:100%; }
@media (min-width:900px){ .step-viz { justify-self:end; } }
.step-viz > img { width:100%; }
.step-viz > .ba-tag { bottom:10px; }
.step-note { padding:1.8rem 0 0; display:flex; align-items:center; gap:.8rem; }
.step-note .dot { width:7px; height:7px; border-radius:50%; background:var(--ink); flex-shrink:0; }
.step-note p { font-weight:500; font-size:.95rem; }

/* what never changes */
.keep { display:grid; grid-template-columns:1fr; gap:2.5rem; position:relative; }
@media (min-width:1000px){ .keep { grid-template-columns:1fr 1fr; gap:0; } .keep > div:last-child { padding-left:3rem; } .keep > div:nth-child(2) { padding-right:3rem; } }
.keep-line-v { position:absolute; top:0; bottom:0; left:50%; display:none; }
@media (min-width:1000px){ .keep-line-v { display:block; } }
.keep-item { padding:1.4rem 0; }
.keep-item .mono { display:block; margin-bottom:.5rem; }
.keep-item b { font-weight:600; display:block; margin-bottom:.3rem; }
.keep-item p { color:var(--sub); font-size:.92rem; line-height:1.65; }
.keep-closer { margin-top:1.8rem; font-weight:600; }

/* FAQ */
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:2rem; text-align:left; padding:1.5rem 0; background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:1.05rem; font-weight:600; color:var(--ink); letter-spacing:-.01em; transition:padding-left .35s var(--ease); }
.faq-q:hover { padding-left:.6rem; }
.faq-q:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.faq-q::after { content:'→'; font-weight:400; color:var(--sub); transition:transform .4s var(--ease); flex-shrink:0; }
.faq-item.open .faq-q::after { transform:rotate(90deg); }
.faq-a { overflow:hidden; transition:max-height .5s var(--ease); }
.js .faq-a { max-height:0; }
.faq-a p { padding:0 0 1.7rem; max-width:640px; color:var(--sub); line-height:1.7; }

/* final */
.fin { padding:6rem 0 7rem; }
.fin h2 { font-size:clamp(2.3rem,6vw,5.2rem); font-weight:700; letter-spacing:-.045em; line-height:1.02; max-width:64rem; overflow-wrap:break-word; hyphens:auto; }
.fin-cta { margin-top:2.8rem; display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; }

/* footer */
.ft { padding:2rem var(--pad) 2.4rem; position:relative; }
.ft::before { content:''; position:absolute; top:0; left:var(--pad); right:var(--pad); height:1px; background:var(--grey); }
.ft-in { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:center; }
.ft nav { display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; }
.ft a, .ft button.linkish { font-size:.8rem; color:var(--sub); text-decoration:none; }
.ft a:hover, .ft button.linkish:hover { color:var(--ink); }
button.linkish { background:none; border:0; padding:0; font-family:var(--sans); cursor:pointer; }

/* cookie banner — shown only when an analytics ID is configured; accept and
   reject are the same size and weight, as the EU regulators ask */
.cb { position:fixed; left:var(--pad); right:var(--pad); bottom:1rem; z-index:80; max-width:40rem; margin-left:auto; background:var(--bg); border:1px solid var(--ink); padding:1.1rem 1.2rem; box-shadow:0 8px 30px rgba(0,0,0,.08); }
.cb[hidden] { display:none; }
.cb p { font-size:.85rem; color:var(--ink); }
.cb p a { text-underline-offset:3px; }
.cb-btns { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.cb-btns .btn { flex:1 1 9rem; justify-content:center; }

/* legal pages and 404 */
.doc { max-width:46rem; margin:0 auto; padding:7rem var(--pad) 5rem; }
.doc h1 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.doc .meta { margin-top:.8rem; }
.doc h2 { font-size:1.15rem; font-weight:600; letter-spacing:-.01em; margin:2.4rem 0 .6rem; }
.doc p, .doc li { color:#2f2f2f; line-height:1.7; }
.doc p + p { margin-top:.8rem; }
.doc ul { margin:.6rem 0 0 1.2rem; }
.doc li + li { margin-top:.4rem; }
.doc table { width:100%; border-collapse:collapse; margin-top:.8rem; font-size:.88rem; }
.doc th, .doc td { text-align:left; vertical-align:top; padding:.6rem .6rem .6rem 0; border-bottom:1px solid var(--grey); }
.doc th { font-weight:600; }
.doc code { font-family:var(--mono); font-size:.8em; background:var(--soft); padding:.05rem .3rem; }
.doc .tablewrap { overflow-x:auto; }

@media (max-width:700px){
  .hd-in { padding:.85rem 1rem; }
  .hd-right { gap:.6rem; }
  .hd-right > .btn { display:none; }
  .hero { padding-top:5.6rem; }
  .doc { padding-top:5.6rem; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}