:root{
  --teal-500:#14b8a6;
  --teal-400:#2dd4bf;
  --muted:#64748b;
  --glass: rgba(255,255,255,0.78);
}
*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:#f8fafc;color:#0f1724}
.muted{color:var(--muted)}
.btn-primary{background:var(--teal-500);color:white;border-radius:12px;padding:.7rem 1rem;font-weight:600;display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 10px 30px rgba(16,24,32,0.08)}
.btn-primary:hover{transform:translateY(-2px)}
.card{background:white;border-radius:14px}
.field-error{color:#dc2626;font-size:.9rem;margin-top:.375rem}

/* === Global easing / transitions / performance hints === */
:root{
  --ui-ease: cubic-bezier(.22,.9,.35,1); /* smooth ease-in-out */
  --ui-duration: .36s;
}

img, picture, .card, .btn-primary, a, .testimonial-card, .group img {
  transition: transform var(--ui-duration) var(--ui-ease), opacity var(--ui-duration) var(--ui-ease);
  will-change: transform, opacity;
}

/* subtle lift on hover for interactive cards/links */
.card:hover, .group:hover .card, a:hover {
  transform: translateY(-4px);
}

/* nicer image hover scale where used */
.group img, img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* testimonial visible state (if using .visible from earlier) */
.testimonial-card { opacity: .85; transform: translateY(0); }
.testimonial-card.visible { opacity: 1; transform: translateY(-4px); }

/* ensure images don't overflow their containers */
img { max-width:100%; height:auto; display:block; }

/* small helper for elements loaded via data-bg-src */
.bg-lazy { background-size: cover; background-position: center; }

/* center-phone widoczny tylko < md (dodane też w HTML jako md:hidden) */
.center-phone { display: flex; align-items:center; gap:8px; }

/* top-right już ma .hidden md:flex w HTML; jeśli chcesz dodatkowo wymusić wyrównanie: */
@media (min-width: 768px) {
  .topbar { justify-content: flex-end; } /* masz to już, ale upewnij się że istnieje */
}