/* ===== Responsive polish + micro-interactions (all screen sizes) ===== */
html, body { overflow-x: clip; }
:where(img, svg, video) { max-width: 100%; height: auto; }

/* Fluid type & spacing — desktop, laptop, tablet, phone */
:where(h1) { font-size: clamp(1.85rem, 4.6vw, 3.1rem); line-height: 1.12; }
:where(h2) { font-size: clamp(1.4rem, 3vw, 2.05rem); }
:where(h3) { font-size: clamp(1.02rem, 2vw, 1.22rem); }
:where(.container) { padding-inline: clamp(16px, 4vw, 32px); }
:where(section) { padding-block: clamp(44px, 7vw, 84px); }

/* Tablet: two-column comfort zone */
@media (min-width: 761px) and (max-width: 1100px) {
  :where(.card-grid, .feature-grid) { grid-template-columns: repeat(2, 1fr); }
  :where(.pkg-grid) { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
  :where(.split) { gap: 34px; }
}
/* Small phones */
@media (max-width: 400px) {
  :where(.container) { padding-inline: 14px; }
  :where(.btn) { width: 100%; text-align: center; }
  :where(.hero-actions) { flex-direction: column; }
  :where(.hero-stats) { gap: 14px 18px; }
  :where(.size-table td) { font-size: .88rem; }
  .call-fab { padding: 12px 18px; }
}
/* Large desktop: keep line lengths readable */
@media (min-width: 1600px) {
  :where(.container) { max-width: 1240px; }
}

/* Touch targets */
@media (pointer: coarse) {
  :where(a, button, select, input, summary) { min-height: 42px; }
  :where(.main-nav a) { padding-block: 12px; }
}

/* ---- Highlight reactivity: hover / focus / active states ---- */
::selection { background: var(--gold, #c9a24b); color: #14100a; }
:where(a, button, .btn, .card, .feature, .pkg, .step, .why-item, .pf-item, .pf-btn,
       input, select, textarea, summary, .lang-select-btn, .call-fab) {
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease,
              background-color .18s ease, color .18s ease, opacity .18s ease;
}
:focus-visible { outline: 2px solid var(--gold, #c9a24b); outline-offset: 2px; border-radius: 4px; }

:where(.btn):hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.22); }
:where(.btn):active { transform: translateY(0) scale(.97); box-shadow: none; }

.main-nav a:not(.nav-cta) { position: relative; }
.main-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 12%; right: 88%; bottom: 2px; height: 2px;
  background: var(--gold, #c9a24b); border-radius: 2px; transition: right .22s ease; opacity: .9;
}
.main-nav a:not(.nav-cta):hover::after,
.main-nav a[aria-current="page"]:not(.nav-cta)::after { right: 12%; }

:where(.card, .feature, .why-item, .info-panel):hover {
  transform: translateY(-4px); box-shadow: 0 14px 30px rgba(10, 20, 35, .16);
}
:where(.pkg):hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(10, 20, 35, .2); }
:where(.pkg.featured):hover { transform: translateY(-5px) scale(1.01); }
:where(.step):hover::before { color: var(--gold, #c9a24b); }
:where(.pf-item):hover { transform: scale(1.02); }
:where(.pf-item):hover img { filter: saturate(1.12); }

:where(.card .card-topline) { transform-origin: left; transition: transform .25s ease; }
:where(.card):hover .card-topline { transform: scaleX(1.0); }

:where(input, select, textarea):hover { border-color: var(--gold, #c9a24b); }
:where(input, select, textarea):focus { box-shadow: 0 0 0 3px rgba(201, 162, 75, .18); }

.faq details summary { transition: color .18s ease; }
.faq details summary:hover { color: var(--gold, #c9a24b); }
.faq details[open] > p { animation: faq-open .28s ease; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.call-fab { animation: fab-pulse 3.2s ease-in-out infinite; }
.call-fab:active { transform: scale(.94); }
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(0,0,0,.35); }
  50% { box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 9px rgba(201,162,75,.14); }
}

.site-header { transition: box-shadow .25s ease, backdrop-filter .25s ease; }
.site-header.scrolled { box-shadow: 0 6px 22px rgba(8, 15, 26, .18); }

.back-to-top { opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; transform: translateY(8px); }
.back-to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top.show:hover { transform: translateY(-3px); }

#sent-banner.banner-ok, #sent-banner.banner-err { animation: faq-open .35s ease; }
.lang-menu.open .lang-item { animation: faq-open .22s ease backwards; }
.lang-menu.open .lang-item:nth-child(n+2) { animation-delay: .03s; }
.lang-menu.open .lang-item:nth-child(n+5) { animation-delay: .06s; }

/* ---- Scroll-reveal (activated by js/ux.js) ---- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.rv.rv-in { opacity: 1; transform: none; }

/* ---- Respect users who prefer stillness ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}