/*
Theme Name: 1PC Theme
Theme URI: https://1pc.lt
Author: 1PC Team
Author URI: https://1pc.lt
Description: Kompiuterių surinkimo, pardavimo ir remonto tema. Tamsi „atviro korpuso" estetika: industrinė tipografija, monospace duomenų sluoksnis, realios galerijos nuotraukos ir gyvas darbo laiko indikatorius.
Version: 2.9.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: onepc
Tags: custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/



/* ==========================================================================
1. DIZAINO TOKENAI
========================================================================== */
:root {
  /* Paviršiai */
  --void:        #07090b;
  --void-2:      #0a0e11;
  --panel:       #0f1418;
  --panel-2:     #141a1f;
  /* Kraštai */
  --edge:        rgba(255, 255, 255, 0.08);
  --edge-2:      rgba(255, 255, 255, 0.16);
  /* Signalinės spalvos */
  --signal:      #00ff66;
  --signal-08:   rgba(0, 255, 102, 0.08);
  --signal-16:   rgba(0, 255, 102, 0.16);
  --signal-30:   rgba(0, 255, 102, 0.30);
  --thermal:     #ff8a3d;
  --coolant:     #38d9ff;
  /* Tekstas */
  --ink:         #f2f5f4;
  --ink-2:       #a7b0ac;
  --ink-3:       #7c8783;
  /* Tipografija */
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  /* Ritmas */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px;
  /* Radius */
  --r-sm: 3px; --r: 6px; --r-lg: 12px;
  --nav-h: 68px;
  --wrap:  1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
2. BAZĖ
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Grain noise overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}
/* iOS Safari ignoruoja vien overflow:hidden — reikia position:fixed.
   Scroll pozicija atkuriama JS (initMobileMenu.unlockScroll). */
body.is-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--coolant); }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--signal); color: var(--void); }
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s5);
  z-index: 10000;
  background: var(--signal);
  color: var(--void);
  padding: var(--s3) var(--s5);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--s4); }

/* ==========================================================================
3. KOMPONENTAI (btn, wrap, band, label, title, desc)
========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 13px 24px;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.btn--primary {
  background: var(--signal);
  color: var(--void);
  border-color: var(--signal);
}
.btn--primary:hover {
  background: transparent;
  color: var(--signal);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--edge-2);
}
.btn--ghost:hover {
  border-color: var(--signal);
  color: var(--signal);
}
.btn--sm { padding: 9px 16px; font-size: 11px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s5);
}
@media (min-width: 900px) { .wrap { padding: 0 var(--s7); } }

.band { padding: clamp(64px, 10vw, 112px) 0; }

.section-label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--s4);
}
.section-title {
  font-family: var(--f-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--s5);
}
.section-desc {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 56ch;
}

/* ==========================================================================
4. NAVIGACIJA
========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: rgba(7, 9, 11, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s5);
}
@media (min-width: 900px) { .nav__inner { padding: 0 var(--s7); } }

.nav__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav__brand-text {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: uppercase;
}
.nav__brand-text:hover { color: var(--signal); }

.nav__links {
  display: none;
  gap: var(--s5);
}
.nav__links a {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--signal); }

.nav__call {
  display: none;
  white-space: nowrap;
}

/* Hamburger */
.nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--edge-2);
  border-radius: var(--r);
  cursor: pointer;
}
.nav__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}
.nav__hamburger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.3s var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__hamburger span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.nav__drawer {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  /* PATAISYTA: aiškus aukštis + slinkimas. Jei meniu punktų daugiau nei telpa
     (arba telefone matoma naršyklės juosta), skydelis slenka savyje, o ne
     išlenda už savo fono. dvh atsižvelgia į besitraukiančią adreso juostą. */
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Fonas privalo būti VISIŠKAI nepermatomas — jokio prasišviečiančio teksto,
     net jei naršyklė nepalaiko backdrop-filter. */
  background: #07090b;
  /* Sluoksniai: skip-link 10000 > grain 9999 > nav 1000 > drawer 998 > sticky-cta 900 */
  z-index: 998;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: var(--s7) var(--s5) var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.nav__drawer[hidden] { display: none; }
.nav__drawer:not(.is-open) { pointer-events: none; }
.nav__drawer.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.nav__drawer-list { list-style: none; margin: 0; padding: 0; display: block; }
.nav__drawer a {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--edge);
  display: block;
}
.nav__drawer a:hover { color: var(--signal); }
.nav__drawer .btn { margin-top: var(--s5); }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__call  { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__drawer { display: none; }
}

/* ==========================================================================
5. HERO (static gradient, no video)
========================================================================== */
.hero {
  position: relative;
  min-height: 85vh;
  min-height: 85svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + var(--s7));
  padding-bottom: var(--s5);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(0,255,102,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(56,217,255,0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--void) 0%, var(--void-2) 100%);
}
.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
  pointer-events:none;
  opacity:0;
  transition:opacity .8s ease;
}
.hero__bg.is-ready{ opacity:.55; }

@media (max-width:768px){
  .hero__bg.is-ready{ opacity:.4; }
}
@media (prefers-reduced-motion:reduce){
  .hero__bg{ display:none; }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(7,9,11,0.92) 0%, rgba(7,9,11,0.55) 45%, rgba(7,9,11,0.20) 100%),
    linear-gradient(180deg, rgba(7,9,11,0.80) 0%, rgba(7,9,11,0.10) 35%, rgba(7,9,11,0.88) 100%);
  pointer-events: none;
}
.hero__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s5);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(40px, 6vw, 72px);
}
@media (min-width: 900px) { .hero__inner { padding-left: var(--s7); padding-right: var(--s7); } }

.hero__overline {
  font-family: var(--f-mono);
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  opacity: 0.9;
  margin-bottom: var(--s4);
}
@media (max-width: 480px) {
  .hero__overline { letter-spacing: 0.12em; }
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: balance;
  max-width: 18ch;
}
.hero__title span { display: block; }
.hero__title .accent { color: var(--signal); }
.hero__sub {
  margin-top: var(--s5);
  max-width: 46ch;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* ==========================================================================
6. PLATE (būklės plokštelė)
========================================================================== */
.plate {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s5);
  transform: translateY(-50%);
  position: relative;
  z-index: 10;
}
@media (min-width: 900px) { .plate { padding: 0 var(--s7); } }
.plate__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--edge-2);
  border-radius: var(--r);
  background: rgba(10, 14, 17, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
@media (min-width: 760px) { .plate__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.1fr); } }
.plate__cell {
  padding: 14px 18px;
  border-top: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
  min-width: 0;
}
.plate__cell:nth-child(-n+2) { border-top: none; }
.plate__cell:nth-child(odd)  { border-left: none; }
@media (min-width: 760px) {
  .plate__cell { border-top: none; }
  .plate__cell:first-child { border-left: none; }
  .plate__cell:nth-child(odd) { border-left: 1px solid var(--edge); }
  .plate__cell:first-child { border-left: none; }
}
.plate__k {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.plate__v {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
  min-width: 0;
}
.plate__v .led {
  flex: 0 0 auto;
  margin-top: 5px;
}
a.plate__v:hover { color: var(--signal); }
.led {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--ink-3);
}
.led.is-on {
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal-30);
  animation: pulse 2.4s ease-in-out infinite;
}
.led.is-off { background: var(--thermal); box-shadow: 0 0 8px rgba(255,138,61,0.35); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ==========================================================================
7. PASLAUGŲ BENTO TINKLELIS
========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}
.bento__wide {
  grid-column: span 2;
}
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento__wide { grid-column: span 1; }
}
.card {
  position: relative;
  background: var(--panel);
  padding: var(--s6) var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  transition: background-color 0.3s var(--ease);
  border-radius: var(--r-lg);
  border: 1px solid var(--edge);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--signal-08), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.card:hover { background: var(--panel-2); }
.card:hover::before { opacity: 1; }
.card:focus-within::before { opacity: 1; }
.card__icon {
  width: 34px; height: 34px;
  color: var(--signal);
  stroke-width: 1.4;
  transition: transform 0.35s var(--ease);
}
.card:hover .card__icon { transform: translateY(-2px); }
.card__title {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.card__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.card__meta {
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px dashed var(--edge);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card__meta b { color: var(--ink-2); font-weight: 500; }

/* ==========================================================================
8. DUK (FAQ accordion)
========================================================================== */
.faq {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.faq__item {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--edge-2); }
.faq__q {
  list-style: none;
  cursor: pointer;
  padding: var(--s5) var(--s6);
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  transition: color 0.2s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+';
  font-family: var(--f-mono);
  font-size: 18px;
  color: var(--signal);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--signal); }
.faq__a {
  padding: 0 var(--s6) var(--s5);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
}

/* ==========================================================================
9. METRIC TICKER
========================================================================== */
.metrics { background: var(--void); }
.metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
  text-align: center;
}
@media (max-width: 768px) {
  .metrics__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
}
.metric__num {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--signal);
}
.metric__label {
  display: block;
  margin-top: var(--s3);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ==========================================================================
10. EIGA (kaip dirbame)
========================================================================== */
.flow {
  display: grid;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 700px)  { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .flow { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--void);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.step__n {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--signal);
}
.step__t {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.step__d { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }

/* ==========================================================================
9. KONTAKTAI
========================================================================== */
.contact {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 920px) { .contact { grid-template-columns: 0.85fr 1fr; } }

.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: flex;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--edge);
}
.facts li:first-child { border-top: 1px solid var(--edge); }
.facts svg {
  width: 20px; height: 20px;
  color: var(--signal);
  flex: none;
  margin-top: 3px;
  stroke-width: 1.5;
}
.facts__k {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.facts__v { display: block; font-size: 17px; color: var(--ink); }
.facts__v a { color: inherit; text-decoration: none; }
.facts__v a:hover { color: var(--signal); }
.facts__v--big {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.form {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.5vw, 40px);
}
.field { margin-bottom: var(--s4); }
.field label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s2);
}
.field label .req { color: var(--signal); }
.input {
  width: 100%;
  background: var(--void);
  border: 1px solid var(--edge-2);
  border-radius: var(--r);
  padding: 13px 15px;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: rgba(255,255,255,0.26); }
.input:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-16);
}
textarea.input { min-height: 130px; resize: vertical; }
.form__note {
  margin-top: var(--s3);
  font-family: var(--f-mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.trap {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0; width: 0;
  overflow: hidden;
}
.notice {
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid;
  font-size: 15px;
  margin-bottom: var(--s5);
}
.notice--ok  { border-color: var(--signal-30); background: var(--signal-08); color: var(--signal); }
.notice--err { border-color: rgba(255,138,61,0.4); background: rgba(255,138,61,0.08); color: var(--thermal); }
.map {
  margin-top: var(--s5);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--panel);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) invert(0.92) hue-rotate(180deg) contrast(0.9); }

/* ==========================================================================
11. PORAŠTĖ
========================================================================== */
.footer {
  border-top: 1px solid var(--edge);
  background: var(--void-2);
  padding: var(--s8) 0 var(--s5);
}
.footer__grid {
  display: grid;
  gap: var(--s6);
  margin-bottom: var(--s7);
}
@media (min-width: 780px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h3 {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s4);
}
.footer ul { list-style: none; margin: 0; display: grid; gap: 10px; }
.footer a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.footer a:hover { color: var(--signal); }
.footer__brand {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: uppercase;
}
.footer__blurb { color: var(--ink-2); font-size: 15px; max-width: 42ch; margin-top: var(--s3); }
.footer__tagline {
  font-size: 15px;
  color: var(--ink-2);
  font-style: italic;
  margin-top: var(--s3);
}
.footer__meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s2);
}
.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s5);
  border-top: 1px solid var(--edge);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* ===== ATSILIEPIMAI ===== */
.reviews-slideshow {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s4);
  margin-bottom: var(--s5);
}
.reviews-slideshow::-webkit-scrollbar { height: 4px; }
.reviews-slideshow::-webkit-scrollbar-thumb { background: var(--edge-2); border-radius: 2px; }
.review-card {
  flex: 0 0 min(100%, 380px);
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0;
}
.review-card__stars {
  color: var(--signal);
  font-size: 16px;
  letter-spacing: 2px;
}
.review-card__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  font-style: italic;
  margin: 0;
}
.review-card__author {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: auto;
}
.rating {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s6);
  flex-wrap: wrap;
}
.rating__stars {
  color: var(--signal);
  font-size: 18px;
  letter-spacing: 2px;
}
.rating__value {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}
.rating__count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s6);
}
.review {
  background: var(--panel);
  padding: var(--s6) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0;
}
.review__text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  font-style: italic;
  margin: 0;
}
.review__text::before { content: '"'; color: var(--signal); }
.review__text::after  { content: '"'; color: var(--signal); }
.review__author {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px dashed var(--edge);
}
.reviews__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
  margin-top: var(--s2);
}

/* ==========================================================================
12. TURINIO PUSLAPIAI
========================================================================== */
.page-head { padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 96px)); }
.prose { max-width: 68ch; font-size: 17px; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--f-display);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-top: 1.8em;
}
.prose h2 { font-size: 28px; }
.prose h3 { font-size: 21px; }
.prose a { color: var(--coolant); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose img, .prose figure { border-radius: var(--r-lg); }
.prose blockquote {
  border-left: 2px solid var(--signal);
  padding-left: var(--s5);
  color: var(--ink);
  font-size: 19px;
}

/* ==========================================================================
13. RESPONSYVUMAS
========================================================================== */
@media (max-width: 768px) {
  .plate__grid { grid-template-columns: 1fr 1fr; }
  .plate__cell:nth-child(-n+2) { border-top: none; }
  .plate__cell:nth-child(odd) { border-left: none; }
  .plate__cell:nth-child(even) { border-left: 1px solid var(--edge); }
}
@media (max-width: 480px) {
  .plate__grid { grid-template-columns: 1fr; }
  .plate__cell { border-left: none !important; }
  .plate__cell:first-child { border-top: none; }
}
@media (max-width: 380px) {
  .hero__title { font-size: 32px; }
}

/* ==========================================================================
14. prefers-reduced-motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
  .led.is-on { animation: none; }
}

/* ==========================================================================
   VIDEO SHOWCASE — scroll-driven full-bleed video section
   ========================================================================== */

.video-showcase {
  padding-top: var(--s8);
  padding-bottom: var(--s8);
}

.video-showcase__track {
  display: flex;
  flex-direction: column;
  gap: 120px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--s5);
}
@media (min-width: 900px) {
  .video-showcase__track {
    padding: 0 var(--s7);
  }
}

/* Individual video item */
.video-item {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--panel);
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  /* PATAISYTA (video strigo telefone): will-change buvo VISIEMS 9 video
     nuolat — naršyklė kiekvienam sukurdavo atskirą GPU sluoksnį ir laikydavo
     jį atmintyje visą laiką. Telefone tai pagrindinė trūkčiojimo priežastis.
     Dabar sluoksnis pažadamas tik tol, kol vyksta pasirodymo animacija, ir
     po jos atlaisvinamas (.is-visible). */
  will-change: opacity, transform;
}

.video-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  will-change: auto;
}

.video-item__media {
  position: relative;
  width: 100%;
  max-height: 80vh;
  max-height: 80svh;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  background: var(--void-2);
  overflow: hidden;
}

.video-item__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 24px;
}

/* Mute button removed — videos have no audio (-an) */

/* Mobile styles */
@media (max-width: 768px) {
  .video-showcase__track {
    gap: 48px;
    padding: 0 var(--s3);
  }

  .video-item {
    border-radius: 16px;
    transition-duration: 0.5s;
  }

  /* PATAISYTA: telefone kadras 4:5 (vertikalus), o ne 16:9.
     Kartu su apkarpytais _mobile.mp4 failais (720x900) tai reiškia, kad
     telefonas dekoduoja BŪTENT tiek pikselių, kiek parodo — nebelieka
     plataus kadro, kurio šonai vis tiek nukerpami object-fit: cover.
     Norite pilno ekrano 9:16 — pakeiskite į 9 / 16 čia IR video skripte. */
  .video-item__media {
    height: auto;
    max-height: none;
    aspect-ratio: 4 / 5;
    min-height: auto;
  }

  .video-item__video {
    border-radius: 16px;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .video-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .video-item__video {
    /* Show poster with play button instead of autoplaying */
    cursor: pointer;
  }

  .mute-btn {
    display: none;
  }
}

/* === Skelbiu.lt grid === */
.skelbimai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
.skelbimas {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--void-1);
}
.skelbimas img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.skelbimas figcaption {
  padding: var(--s3) var(--s4);
  font-size: 14px;
  color: var(--fg);
  text-align: center;
}
@media (max-width: 768px) {
  .skelimai-grid { grid-template-columns: 1fr; }
}

/* === Facebook embed === */
.facebook-embed {
  display: flex;
  justify-content: center;
  margin-top: var(--s5);
}
.facebook-embed iframe {
  max-width: 100%;
}

/* === Google reviews placeholder === */
#google-reviews {
  min-height: 100px;
  margin: var(--s5) 0;
  text-align: center;
  color: var(--muted);
}
#google-reviews.loading::before {
  content: 'Kraunama...';
}
#google-reviews.error::before {
  content: 'Atsiliepimų nepavyko užkrauti.';
}

/* === SKELBIU.LT — viena nuoroda ===
   PAKEISTA: penkių „kategorijų“ plytelių tinklelis pašalintas (visos vedė į
   tą patį adresą). Liko vienas mygtukas — jam pakanka .btn stilių. */
.skelbiu-cta { margin-top: var(--s6); }


/* === GOOGLE ATSILIEPIMAI — mažas widget === */
.google-reviews-widget {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--s5);
  background: var(--void-1);
  border-radius: 16px;
  text-align: center;
}
.google-reviews-widget .rating__stars {
  color: #fbbc04;
  font-size: 24px;
  letter-spacing: 2px;
}
.google-reviews-widget .rating__value {
  font-size: 42px;
  font-weight: 800;
  color: var(--fg);
  display: block;
  margin: var(--s2) 0;
}
.google-reviews-widget .rating__count {
  color: var(--muted);
  font-size: 14px;
}
.google-reviews-widget .reviews__actions {
  margin-top: var(--s4);
  display: flex;
  gap: var(--s3);
  justify-content: center;
  flex-wrap: wrap;
}

/* === FACEBOOK — static card === */
.facebook-card {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--s6);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
}
.facebook-card__header {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s5);
}
.facebook-card__icon {
  flex-shrink: 0;
}
.facebook-card__name {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s1) 0;
}
.facebook-card__desc {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
}
.facebook-card__actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .facebook-card { padding: var(--s5); }
}

/* ===== STICKY CTA ===== */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: linear-gradient(to top, rgba(7,9,11,0.95) 0%, rgba(7,9,11,0.85) 60%, transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
  pointer-events: none;
}
.sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta .btn { box-shadow: 0 4px 24px rgba(0,0,0,0.4); }

/* ===== GOOGLE ATSILIEPIMAI ===== */
.greviews{
  max-width:760px; margin:var(--s6) auto 0;
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  overflow:hidden;
}
.greviews__head{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--edge);
  background:var(--panel-2);
}
.greviews__meta{ display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap; }
.greviews__score{ font-family:var(--f-display); font-size:1.5rem; color:var(--ink); line-height:1; }
.greviews__stars{ color:#fbbc05; letter-spacing:.05em; }
.greviews__count{ font-family:var(--f-mono); font-size:.75rem; color:var(--ink-3); }
.greviews__link{
  margin-left:auto; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--signal); text-decoration:none; white-space:nowrap;
}
.greviews__link:hover{ text-decoration:underline; }

.greviews__viewport{ position:relative; min-height:190px; }
.greviews__track{ list-style:none; margin:0; padding:0; }
.greviews__slide{
  display:none; padding:var(--s5) var(--s6);
  animation:grFade .45s ease;
}
.greviews__slide.is-active{ display:block; }
@keyframes grFade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.greviews__author{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); }
.greviews__avatar{
  width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--signal-16); color:var(--signal);
  font-family:var(--f-display); font-size:1.05rem;
}
.greviews__name{ display:block; color:var(--ink); font-weight:600; font-size:.95rem; }
.greviews__date{ display:block; font-family:var(--f-mono); font-size:.7rem; color:var(--ink-3); }
.greviews__stars-row{ color:#fbbc05; margin:0 0 var(--s2); letter-spacing:.08em; }
.greviews__text{
  margin:0; color:var(--ink-2); font-size:1rem; line-height:1.65;
  border:0; padding:0; font-style:normal;
}

.greviews__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:var(--panel-2); color:var(--ink-2);
  border:1px solid var(--edge); cursor:pointer;
  font-size:1.2rem; line-height:1; display:grid; place-items:center;
  transition:border-color .2s, color .2s;
}
.greviews__nav:hover{ border-color:var(--signal-30); color:var(--signal); }
.greviews__nav:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }
.greviews__nav--prev{ left:6px; }
.greviews__nav--next{ right:6px; }

.greviews__dots{ display:flex; justify-content:center; gap:var(--s2); padding:0 0 var(--s4); }
.greviews__dot{
  width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--edge-2); border:0; transition:background .2s, width .2s;
}
.greviews__dot.is-active{ background:var(--signal); width:20px; border-radius:4px; }
.greviews__actions{ padding:0 var(--s5) var(--s5); text-align:center; }

@media (max-width:640px){
  .greviews{ margin-inline:var(--s3); border-radius:12px; }
  .greviews__head{ padding:var(--s3) var(--s4); flex-wrap:wrap; }
  .greviews__link{ margin-left:0; width:100%; }
  .greviews__slide{ padding:var(--s4); }
  .greviews__nav{ display:none; }
  .greviews__viewport{ min-height:220px; }
}
@media (prefers-reduced-motion:reduce){
  .greviews__slide{ animation:none; }
}

/* ==========================================================================
   NAVIGACIJOS INKARAI — pataisyta
   scroll-padding-top (html) veikia naršyklės natūraliam hash slinkimui,
   scroll-margin-top veikia programiniam slinkimui. Reikia ABIEJŲ.
   ========================================================================== */
section[id],
.band[id],
[id="home"] {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
/* Sekcijos gauna tabindex="-1" iš JS — outline nereikalingas */
section[id]:focus,
.band[id]:focus { outline: none; }

/* BDAR sutikimo laukas kontaktų formoje */
.field--consent { margin-bottom: var(--s5); }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--signal);
  cursor: pointer;
}
.consent a { color: var(--coolant); text-decoration: underline; }

/* ==========================================================================
   PATAISYMAI — trūkusios taisyklės
   ========================================================================== */

/* Google logotipas antraštėje traukdavosi flex'e (global taisyklė
   `svg { max-width:100% }`), todėl atrodydavo suplotas. */
.greviews__g { flex: 0 0 22px; width: 22px; height: 22px; }

/* Neužpildytos žvaigždutės — kad reitingas 4,9 vs 4,0 skirtųsi vizualiai. */
.greviews__stars { white-space: nowrap; }

/* Rodiklių blokui trūko konteinerio taisyklės. */
.metric { min-width: 0; }

/* Facebook kortelės teksto blokas be min-width:0 ištempdavo flex konteinerį
   ilgesniame pavadinime. */
.facebook-card__info { min-width: 0; }

/* --------------------------------------------------------------------------
   PATAISYTA: būklės plokštelė uždengdavo hero mygtukus telefone.
   .plate turi transform: translateY(-50%) ir z-index:10. Iki 760px pločio
   plokštelė persirikiuoja į 2 stulpelius / 2 eilutes, todėl tampa maždaug
   dvigubai aukštesnė — o -50% pakelia ją dvigubai aukščiau ir ji atsiduria
   VIRŠ „Peržiūrėti paslaugas“ / „Susisiekti“ mygtukų. Vizualiai mygtukai
   matomi, bet paspaudimas nueina į plokštelę.
   Sprendimas: siaurame ekrane pakeliame tik fiksuotu nedideliu dydžiu, o
   neigiama apatine paraštė kompensuoja likusį tarpą, kad maketas nešoktų.
   -------------------------------------------------------------------------- */
@media (max-width: 759px) {
  .plate {
    transform: translateY(-28px);
    margin-bottom: -28px;
  }
}

/* PATAISYTA: rodyklės ‹ › yra absoliučiai pozicionuotos ir uždengdavo
   atsiliepimo turinį (pirmą žvaigždutę / teksto kraštą). Rodyklės matomos
   tik nuo 641px, todėl tik ten skiriame joms vietos šonuose. */
@media (min-width: 641px) {
  .greviews__slide { padding-left: 56px; padding-right: 56px; }
}