:root {
  --bg: #070912;
  --panel: rgba(255,255,255,.07);
  --panel-strong: rgba(255,255,255,.11);
  --text: #f7f7fb;
  --muted: #b9bfd1;
  --accent: #ffba4a;
  --accent-2: #8a5cff;
  --border: rgba(255,255,255,.14);
  --shadow: 0 24px 80px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color: var(--text); background: radial-gradient(circle at 20% 10%, rgba(138,92,255,.18), transparent 32rem), radial-gradient(circle at 80% 30%, rgba(255,186,74,.12), transparent 28rem), var(--bg); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.site-header, .admin-header { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 4vw, 3rem); transition: .25s ease; }
.site-header.is-scrolled, .admin-header { background: rgba(7,9,18,.82); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); }
.brand { font-weight: 850; letter-spacing: .02em; font-size: 1.05rem; }
.brand span { color: var(--accent); }
.main-nav, .admin-header nav { display: flex; align-items: center; gap: 1.1rem; color: var(--muted); font-size: .95rem; }
.main-nav a:hover, .admin-header a:hover { color: var(--text); }
.nav-toggle { display: none; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px; padding: .45rem .65rem; font-size: .86rem; }
.hero { min-height: 100vh; display: grid; place-items: center; padding: 8rem 1.2rem 4rem; position: relative; overflow: hidden; }
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3,4,10,.82) 0%, rgba(3,4,10,.42) 38%, rgba(3,4,10,.48) 68%, rgba(3,4,10,.86) 100%),
    linear-gradient(180deg, rgba(3,4,10,.74) 0%, rgba(3,4,10,.18) 34%, rgba(3,4,10,.38) 66%, rgba(3,4,10,.90) 100%),
    radial-gradient(circle at 48% 42%, rgba(138,92,255,.08), transparent 34rem),
    url('../img/hero-macio.jpg') center center / cover no-repeat,
    linear-gradient(120deg, #101327, #070912);
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(255,186,74,.08), transparent 18rem),
    radial-gradient(circle at 72% 24%, rgba(191,64,255,.16), transparent 24rem),
    radial-gradient(circle at 24% 60%, rgba(60,190,255,.10), transparent 22rem);
  mix-blend-mode: screen;
  opacity: .62;
}
.hero-bg::after { content: ''; position: absolute; inset: 10%; background: conic-gradient(from 140deg, transparent, rgba(255,255,255,.055), transparent, rgba(138,92,255,.13), transparent); filter: blur(48px); opacity: .58; animation: slowSpin 18s linear infinite; }
@keyframes slowSpin { to { transform: rotate(1turn); } }
.hero-content { max-width: 980px; text-align: center; }
.eyebrow, .section-kicker { margin: 0 0 .8rem; color: var(--accent); text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3rem, 9vw, 7rem); line-height: .9; margin-bottom: 1.2rem; letter-spacing: -.06em; }
h2 { font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.02; letter-spacing: -.045em; margin-bottom: 1.3rem; }
h3 { line-height: 1.15; }
.hero-lead { max-width: 720px; margin: 0 auto 2rem; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.35rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; border-radius: 999px; padding: .58rem .9rem; border: 1px solid var(--border); font-size: .88rem; line-height: 1.1; font-weight: 800; transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; cursor: pointer; }
.btn::after { content: ''; position: absolute; z-index: -1; inset: -40% -70%; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.34), transparent 65%); transform: translateX(-75%) rotate(8deg); opacity: 0; transition: transform .55s ease, opacity .2s ease; }
.btn:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 14px 30px rgba(0,0,0,.24); }
.btn:hover::after { transform: translateX(75%) rotate(8deg); opacity: 1; }
.btn:active { transform: translateY(0) scale(.97); }
.btn-primary { background: linear-gradient(135deg, var(--accent), #ff7a45); color: #150d04; border-color: transparent; box-shadow: 0 10px 26px rgba(255, 139, 69, .18); }
.btn-primary:hover { box-shadow: 0 16px 34px rgba(255, 139, 69, .28); }
.btn-outline { background: rgba(255,255,255,.08); }
.btn-ghost { color: var(--muted); background: rgba(255,255,255,.035); }
.scroll-hint { position: absolute; bottom: 1.5rem; color: var(--muted); font-size: .8rem; }
.section { padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 4rem); max-width: 1220px; margin: 0 auto; }
.section-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.text-card, .service-card, .relation-card, .audio-card, .testimonial, .contact-form, .admin-tile, .admin-hero, .login-card, .empty-state { background: var(--panel); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow); }
.text-card { padding: clamp(1.4rem, 3vw, 2.2rem); color: var(--muted); font-size: 1.08rem; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.service-card { padding: 1.4rem; transition: transform .2s ease, background .2s ease; }
.service-card:hover, .relation-card:hover, .audio-card:hover { transform: translateY(-4px); background: var(--panel-strong); }
.card-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 16px; background: rgba(255,186,74,.14); color: var(--accent); margin-bottom: 1rem; }
.service-card p, .relation-card p, .audio-card p, .muted { color: var(--muted); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.relation-card { overflow: hidden; transition: .2s ease; }
.relation-card img, .placeholder-image { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.placeholder-image { display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,186,74,.18), rgba(138,92,255,.2)); color: var(--muted); }
.relation-body { padding: 1.2rem; }
.date { font-size: .85rem; color: var(--accent) !important; }
.audio-list { display: grid; gap: 1rem; }
.audio-card { padding: 1.2rem; display: grid; grid-template-columns: 1fr minmax(260px, 380px); gap: 1rem; align-items: center; transition: .2s ease; }
audio { width: 100%; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.testimonial { margin: 0; padding: 1.4rem; }
.testimonial footer { color: var(--accent); font-weight: 800; }
.empty-state { padding: 2rem; color: var(--muted); grid-column: 1 / -1; }
.contact-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; align-items: start; }
.contact-form { padding: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label { display: grid; gap: .4rem; color: var(--muted); font-weight: 700; font-size: .92rem; }
input, textarea { width: 100%; border: 1px solid var(--border); background: rgba(0,0,0,.22); color: var(--text); border-radius: 16px; padding: .78rem .9rem; outline: none; font: inherit; }
textarea { min-height: 140px; resize: vertical; }
.full { grid-column: 1 / -1; }
.flash { margin: 1rem 0; padding: .9rem 1rem; border-radius: 16px; background: rgba(255,186,74,.14); border: 1px solid rgba(255,186,74,.3); color: #ffe3ae; }
.site-footer { padding: 2rem clamp(1rem, 5vw, 4rem); border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--muted); }
.section-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.section-reveal.is-visible { opacity: 1; transform: none; }
.admin-body { min-height: 100vh; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(460px, 100%); padding: 2rem; }
.login-card h1 { font-size: 2.2rem; letter-spacing: -.04em; }
.admin-main { padding: 7rem clamp(1rem, 5vw, 4rem) 3rem; max-width: 1180px; margin: 0 auto; }
.admin-hero { padding: 2rem; margin-bottom: 1rem; }
.admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.admin-tile { padding: 1.2rem; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .main-nav { position: absolute; top: calc(100% + .5rem); right: 1rem; left: 1rem; flex-direction: column; align-items: stretch; background: rgba(7,9,18,.96); border: 1px solid var(--border); border-radius: 22px; padding: 1rem; display: none; }
  .main-nav.is-open { display: flex; }
  .section-grid, .contact-section, .audio-card { grid-template-columns: 1fr; }
  .cards, .gallery-grid, .testimonial-grid, .admin-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  h1 { font-size: 3.3rem; }
  .hero-actions, .site-footer { flex-direction: column; }
  .cards, .gallery-grid, .testimonial-grid, .contact-form, .admin-grid { grid-template-columns: 1fr; }
  .site-header { padding: .8rem 1rem; }
}

/* Admin v4 */
.admin-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }
.admin-section { margin-top: 1.4rem; }
.admin-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2.2rem 0 1rem; }
.admin-section-head h2 { margin-bottom: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); }
.admin-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.admin-table th, .admin-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.admin-table th { color: var(--accent); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-muted { color: var(--muted); font-size: .92rem; }
.admin-thumb { width: 78px; height: 58px; border-radius: 14px; object-fit: cover; border: 1px solid var(--border); }
.admin-preview { max-width: 280px; border-radius: 18px; border: 1px solid var(--border); }
.badge { display: inline-flex; border-radius: 999px; padding: .35rem .65rem; font-size: .78rem; font-weight: 800; }
.badge.ok { background: rgba(60, 220, 145, .16); color: #9df0c8; border: 1px solid rgba(60, 220, 145, .28); }
.badge.off { background: rgba(255,255,255,.08); color: var(--muted); border: 1px solid var(--border); }
.actions-cell { display: flex; gap: .65rem; align-items: center; }
.actions-cell form { margin: 0; }
.small-link, .danger-link { position: relative; overflow: hidden; border: 1px solid var(--border); background: rgba(255,255,255,.07); color: var(--text); border-radius: 999px; padding: .38rem .62rem; font: inherit; font-size: .82rem; line-height: 1.05; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; transition: transform .18s ease, background .2s ease, border-color .2s ease; }
.small-link:hover, .danger-link:hover { transform: translateY(-1px) scale(1.015); background: rgba(255,255,255,.11); }
.small-link:active, .danger-link:active { transform: translateY(0) scale(.97); }
.danger-link { color: #ffb6b6; border-color: rgba(255,120,120,.35); }
.admin-form { background: var(--panel); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow); padding: clamp(1rem, 3vw, 2rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.admin-form textarea { min-height: 170px; }
.admin-form input[type="file"] { padding: .75rem; }
.check-row { display: flex; align-items: center; gap: .7rem; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 18px; padding: .9rem 1rem; }
.check-row input { width: auto; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.current-file { display: grid; gap: .75rem; color: var(--muted); }
.admin-hero.compact h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.admin-table audio { min-width: 220px; max-width: 320px; }
@media (max-width: 800px) {
  .admin-header { position: sticky; top: 0; flex-direction: column; align-items: flex-start; }
  .admin-header nav { flex-wrap: wrap; gap: .75rem; }
  .admin-main { padding-top: 2rem; }
  .admin-form { grid-template-columns: 1fr; }
  .admin-section-head { align-items: flex-start; flex-direction: column; }
}
.contact-details { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.contact-details a { border: 1px solid var(--border); background: var(--panel); border-radius: 999px; padding: .52rem .78rem; color: var(--text); font-size: .88rem; font-weight: 800; transition: transform .18s ease, background .2s ease; }
.contact-details a:hover { transform: translateY(-2px); background: var(--panel-strong); }


/* UI update v5 */
.admin-actions { gap: .55rem; }
.admin-section-head .btn { min-height: 34px; padding: .5rem .78rem; font-size: .84rem; }
.form-actions { gap: .55rem; }
.date-field { display: grid; gap: .4rem; color: var(--muted); font-weight: 700; font-size: .92rem; }
.date-input-wrap { position: relative; display: flex; align-items: center; }
.date-input-wrap input[type="date"] { padding-right: 3rem; }
.date-picker-btn { position: absolute; right: .42rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 999px; display: inline-grid; place-items: center; background: rgba(255,255,255,.08); color: var(--accent); cursor: pointer; transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.date-picker-btn:hover { transform: translateY(-50%) scale(1.08); background: rgba(255,186,74,.15); border-color: rgba(255,186,74,.42); box-shadow: 0 10px 24px rgba(255,186,74,.12); }
.date-picker-btn:active { transform: translateY(-50%) scale(.94); }
.date-picker-btn svg { width: 16px; height: 16px; }
@media (max-width: 620px) {
  .btn { width: auto; min-height: 36px; padding: .55rem .82rem; font-size: .85rem; }
  .hero-actions .btn, .form-actions .btn { width: 100%; }
  .actions-cell { gap: .45rem; }
}

/* UI update v11: smooth full-title outline with diagonal corner sweep */
.admin-welcome { padding: 1.15rem 1.3rem; border-radius: 22px; }
.admin-welcome .section-kicker { margin-bottom: .45rem; font-size: .68rem; letter-spacing: .14em; }
.admin-welcome h1 { font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.05; letter-spacing: -.035em; margin-bottom: .55rem; }
.admin-welcome p:not(.section-kicker) { max-width: 760px; margin-bottom: .85rem; color: var(--muted); font-size: .95rem; }
.admin-welcome .admin-actions { margin-top: .75rem; }

.hero-title {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: transparent;
  -webkit-text-stroke: 1.55px rgba(255,255,255,.92);
  text-stroke: 1.55px rgba(255,255,255,.92);
  text-shadow: 0 0 18px rgba(255,255,255,.10), 0 0 48px rgba(138,92,255,.14);
  filter: drop-shadow(0 0 20px rgba(255,186,74,.10));
  transform-origin: center;
  will-change: clip-path, opacity, filter;
}
.hero-title::before,
.hero-title::after {
  content: attr(data-outline-title);
  position: absolute;
  inset: 0;
  pointer-events: none;
  white-space: inherit;
}
.hero-title::before {
  color: transparent;
  -webkit-text-stroke: 1.55px rgba(255,186,74,.48);
  text-stroke: 1.55px rgba(255,186,74,.48);
  opacity: .72;
  filter: blur(.12px);
}
.hero-title::after {
  color: var(--accent);
  -webkit-text-stroke: 0;
  text-stroke: 0;
  text-shadow: 0 0 10px rgba(255,186,74,.52), 0 0 28px rgba(255,186,74,.30), 0 0 55px rgba(138,92,255,.16);
  opacity: .98;
  clip-path: polygon(0 0, 0 0, 0 0);
  will-change: clip-path, opacity, filter;
}
.outline-fill-title.fill-tl::after { animation: heroFillTl 2.45s cubic-bezier(.16,.88,.22,1) forwards; }
.outline-fill-title.fill-tr::after { animation: heroFillTr 2.45s cubic-bezier(.16,.88,.22,1) forwards; }
.outline-fill-title.fill-br::after { animation: heroFillBr 2.45s cubic-bezier(.16,.88,.22,1) forwards; }
.outline-fill-title.fill-bl::after { animation: heroFillBl 2.45s cubic-bezier(.16,.88,.22,1) forwards; }
.outline-fill-title.clear-tl::after { animation: heroClearTl 1.8s cubic-bezier(.68,0,.3,1) forwards; }
.outline-fill-title.clear-tr::after { animation: heroClearTr 1.8s cubic-bezier(.68,0,.3,1) forwards; }
.outline-fill-title.clear-br::after { animation: heroClearBr 1.8s cubic-bezier(.68,0,.3,1) forwards; }
.outline-fill-title.clear-bl::after { animation: heroClearBl 1.8s cubic-bezier(.68,0,.3,1) forwards; }
.outline-fill-title.is-flashing::after { filter: brightness(1.18); }
.outline-fill-title.is-title-sweep { animation: titleSweepLeftRight 1.08s cubic-bezier(.55,.02,.17,1) 1; }

/* The final shape is a large triangle outside the title box. This avoids the half-title pause/jump that happened when a triangle was changed into a rectangle. */
@keyframes heroFillTl {
  0% { clip-path: polygon(0 0, 0 0, 0 0); opacity: .92; }
  100% { clip-path: polygon(-220% -220%, 520% -220%, -220% 520%); opacity: 1; }
}
@keyframes heroFillTr {
  0% { clip-path: polygon(100% 0, 100% 0, 100% 0); opacity: .92; }
  100% { clip-path: polygon(320% -220%, 320% 520%, -420% -220%); opacity: 1; }
}
@keyframes heroFillBr {
  0% { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); opacity: .92; }
  100% { clip-path: polygon(320% 320%, -420% 320%, 320% -420%); opacity: 1; }
}
@keyframes heroFillBl {
  0% { clip-path: polygon(0 100%, 0 100%, 0 100%); opacity: .92; }
  100% { clip-path: polygon(-220% 320%, -220% -420%, 520% 320%); opacity: 1; }
}
@keyframes heroClearTl {
  0% { clip-path: polygon(-220% -220%, 520% -220%, -220% 520%); opacity: 1; }
  100% { clip-path: polygon(0 0, 0 0, 0 0); opacity: .82; }
}
@keyframes heroClearTr {
  0% { clip-path: polygon(320% -220%, 320% 520%, -420% -220%); opacity: 1; }
  100% { clip-path: polygon(100% 0, 100% 0, 100% 0); opacity: .82; }
}
@keyframes heroClearBr {
  0% { clip-path: polygon(320% 320%, -420% 320%, 320% -420%); opacity: 1; }
  100% { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); opacity: .82; }
}
@keyframes heroClearBl {
  0% { clip-path: polygon(-220% 320%, -220% -420%, 520% 320%); opacity: 1; }
  100% { clip-path: polygon(0 100%, 0 100%, 0 100%); opacity: .82; }
}
@keyframes titleSweepLeftRight {
  0% { opacity: 1; clip-path: inset(0 0 0 0); filter: drop-shadow(0 0 22px rgba(255,186,74,.10)); }
  36% { opacity: .96; clip-path: inset(0 0 0 100%); filter: blur(.4px) drop-shadow(0 0 28px rgba(255,186,74,.18)); }
  42% { opacity: 0; clip-path: inset(0 0 0 100%); filter: blur(2px); }
  58% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(2px); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: drop-shadow(0 0 22px rgba(255,186,74,.10)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-title.is-title-sweep { animation: none !important; }
  .hero-title::after { animation: none !important; clip-path: polygon(-220% -220%, 520% -220%, -220% 520%); }
}
@media (max-width: 620px) {
  .admin-welcome { padding: 1rem; }
  .admin-welcome h1 { font-size: 1.45rem; }
  .hero-title { -webkit-text-stroke-width: 1px; text-stroke-width: 1px; }
  .hero-title::before { -webkit-text-stroke-width: 1px; text-stroke-width: 1px; }
}

/* UI update v12: hero photo background */
@media (max-width: 900px) {
  .hero-bg {
    background-position: center center, center center, center center, 56% center, center center;
  }
}
@media (max-width: 620px) {
  .hero-bg {
    background-position: center center, center center, center center, 58% center, center center;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(3,4,10,.18), rgba(3,4,10,.62));
    z-index: -1;
  }
}


/* UI update v13: floating music notes in hero background */
.hero-content { position: relative; z-index: 2; }
.hero-notes-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-note {
  position: absolute;
  left: var(--note-x, 50%);
  top: var(--note-y, 50%);
  transform: translate3d(0, 18px, 0) scale(.55) rotate(0deg);
  font-size: var(--note-size, 28px);
  line-height: 1;
  font-weight: 800;
  color: rgba(255,255,255,.72);
  text-shadow:
    0 0 10px rgba(255,255,255,.20),
    0 0 16px rgba(255,186,74,.20),
    0 0 28px rgba(138,92,255,.22);
  opacity: 0;
  filter: blur(0px);
  will-change: transform, opacity, filter;
  animation: heroNoteFloat var(--note-duration, 5.4s) ease-out forwards;
}
.hero-note.note-alt {
  color: rgba(255,186,74,.70);
}
@keyframes heroNoteFloat {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.55) rotate(0deg);
    filter: blur(0px);
  }
  12% {
    opacity: .38;
  }
  28% {
    opacity: .82;
  }
  70% {
    opacity: .54;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift-x, 20px), var(--drift-y, -120px), 0) scale(1.16) rotate(var(--note-rotate, 10deg));
    filter: blur(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-notes-layer { display: none; }
}


/* UI update v14: full-page sections and enhanced about section */
.section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-section {
  max-width: 1320px;
}
.about-shell {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.about-photo-panel {
  position: relative;
  border-radius: 34px;
  padding: .9rem;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}
.about-photo-panel::before {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: -1;
  background: radial-gradient(circle at 20% 20%, rgba(255,186,74,.18), transparent 42%), radial-gradient(circle at 80% 80%, rgba(138,92,255,.22), transparent 46%);
  filter: blur(24px);
  opacity: .85;
}
.about-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 26px;
}
.about-copy {
  display: grid;
  gap: 1.15rem;
}
.about-card {
  font-size: clamp(1.05rem, 1.2vw, 1.16rem);
  line-height: 1.82;
}
#oferta .cards,
#relacje .gallery-grid,
#opinie .testimonial-grid,
#nagrania .audio-list {
  width: 100%;
}
@media (max-width: 900px) {
  .about-shell {
    grid-template-columns: 1fr;
  }
  .about-photo-panel {
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
  }
}


/* UI update v15: centered contact section, date icon color and contact validation hints */
.contact-section-centered {
  grid-template-columns: minmax(0, 920px);
  justify-content: center;
  justify-items: center;
  text-align: center;
  gap: 1.4rem;
}
.contact-section-centered .contact-intro,
.contact-section-centered .contact-form {
  width: min(920px, 100%);
}
.contact-section-centered .contact-details {
  justify-content: center;
}
.contact-section-centered .flash {
  text-align: left;
}
.contact-section-centered .contact-form {
  text-align: left;
}
.contact-date-wrap .date-picker-btn.static {
  color: var(--accent);
  border-color: rgba(255,186,74,.45);
  background: rgba(255,186,74,.12);
  pointer-events: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  filter: sepia(1) saturate(7) hue-rotate(340deg) brightness(1.1);
  cursor: pointer;
}
.admin-note {
  color: var(--muted);
  background: rgba(255,186,74,.08);
  border: 1px solid rgba(255,186,74,.22);
  border-radius: 18px;
  padding: .9rem 1rem;
  font-size: .92rem;
}
@media (max-width: 900px) {
  .contact-section-centered {
    grid-template-columns: 1fr;
  }
}


/* UI update v16: active calendar icon, WhatsApp button and admin message statuses */
.contact-date-wrap input[type="date"] {
  padding-right: 3rem;
}
.contact-date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
}
.contact-date-wrap .date-picker-btn {
  color: var(--accent);
  border-color: rgba(255,186,74,.48);
  background: rgba(255,186,74,.13);
  z-index: 2;
}
.contact-details .whatsapp-link {
  color: #c9ffd9;
  border-color: rgba(63, 220, 115, .36);
  background: rgba(63, 220, 115, .10);
}
.site-footer {
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer strong {
  color: var(--accent);
}
.badge.new {
  background: rgba(255,186,74,.15);
  color: #ffde9a;
  border: 1px solid rgba(255,186,74,.36);
}
.message-unread {
  background: rgba(255,186,74,.045);
}
.message-unread td {
  border-bottom-color: rgba(255,186,74,.13);
}
.actions-cell form {
  display: inline-flex;
}


/* UI update v17: compact admin dashboard and grouped sections */
.admin-main {
  max-width: 1240px;
}
.admin-hero.admin-welcome {
  padding: 1.05rem 1.15rem;
  margin-bottom: 1.2rem;
  border-radius: 22px;
}
.admin-hero.admin-welcome h1 {
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.08;
  margin-bottom: .45rem;
  letter-spacing: -.03em;
}
.admin-hero.admin-welcome p:not(.section-kicker) {
  max-width: 760px;
  color: var(--muted);
  font-size: .94rem;
  margin-bottom: .9rem;
}
.admin-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .95rem 0 1rem;
}
.admin-section-nav a {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 999px;
  padding: .48rem .72rem;
  font-size: .84rem;
  font-weight: 800;
  transition: transform .18s ease, background .2s ease, border-color .2s ease;
}
.admin-section-nav a:hover {
  transform: translateY(-2px);
  background: rgba(255,186,74,.12);
  border-color: rgba(255,186,74,.35);
}
.admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.admin-quick-card {
  display: grid;
  gap: .18rem;
  min-height: 86px;
  padding: .85rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.055);
  transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.admin-quick-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,186,74,.30);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
.admin-quick-card span {
  color: var(--accent);
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1;
}
.admin-quick-card strong {
  font-size: .94rem;
  line-height: 1.15;
}
.admin-quick-card small {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.25;
}
.admin-block {
  scroll-margin-top: 95px;
  padding: 1.15rem;
  margin-top: 1.15rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.032);
  border-radius: 28px;
}
.admin-block .admin-section-head {
  margin: .25rem 0 .9rem;
}
.admin-block .admin-section-head h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
}
.admin-block .admin-table-wrap {
  box-shadow: 0 18px 52px rgba(0,0,0,.28);
}
.admin-header nav {
  gap: .8rem;
}
@media (max-width: 900px) {
  .admin-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-section-nav {
    gap: .45rem;
  }
}
@media (max-width: 560px) {
  .admin-quick-actions {
    grid-template-columns: 1fr;
  }
  .admin-section-nav a {
    width: 100%;
    text-align: center;
  }
  .admin-block {
    padding: .85rem;
    border-radius: 22px;
  }
}


/* UI update v18: relation emoji palette and compact message table */
.emoji-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: .75rem .85rem;
}
.emoji-palette span {
  font-size: .86rem;
  font-weight: 800;
  margin-right: .15rem;
}
.emoji-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.075);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform .16s ease, background .2s ease, border-color .2s ease;
}
.emoji-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background: rgba(255,186,74,.13);
  border-color: rgba(255,186,74,.38);
}
.emoji-btn:active {
  transform: translateY(0) scale(.94);
}
#admin-wiadomosci .admin-table {
  font-size: .84rem;
}
#admin-wiadomosci .admin-table th,
#admin-wiadomosci .admin-table td {
  padding: .62rem .58rem;
}
#admin-wiadomosci .small-link,
#admin-wiadomosci .danger-link {
  font-size: .76rem;
  min-height: 29px;
  padding: .32rem .5rem;
}
#admin-wiadomosci .badge {
  font-size: .72rem;
  padding: .22rem .42rem;
}


/* UI update v19: testimonial satisfaction rating */
.testimonial-rating {
  display: flex;
  gap: .18rem;
  margin-bottom: .75rem;
  font-size: 1.05rem;
  line-height: 1;
}
.testimonial-rating span {
  color: rgba(255,255,255,.24);
  text-shadow: none;
}
.testimonial-rating span.is-filled {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(255,186,74,.28);
}
.rating-field {
  display: grid;
  gap: .55rem;
  color: var(--muted);
  font-weight: 800;
  font-size: .92rem;
}
.rating-options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.rating-option {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: auto;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: .42rem .62rem;
  cursor: pointer;
  transition: transform .16s ease, background .2s ease, border-color .2s ease;
}
.rating-option input {
  width: auto;
  accent-color: var(--accent);
}
.rating-option span {
  color: var(--accent);
  letter-spacing: .03em;
  line-height: 1;
}
.rating-option:hover {
  transform: translateY(-2px);
  background: rgba(255,186,74,.11);
  border-color: rgba(255,186,74,.34);
}
.admin-stars {
  white-space: nowrap;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(255,186,74,.16);
  font-size: .92rem;
}
.admin-stars span {
  color: rgba(255,255,255,.24);
}


/* UI update v20: visible rating selector in testimonial form */
.rating-field-large {
  background: rgba(255,255,255,.055);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1rem;
}
.rating-field-large > span {
  display: block;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 900;
  margin-bottom: .55rem;
}
.rating-select {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
}
.rating-choice {
  display: grid;
  gap: .35rem;
  place-items: center;
  width: 100%;
  cursor: pointer;
  padding: .72rem .5rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(0,0,0,.14);
  transition: transform .16s ease, background .2s ease, border-color .2s ease;
}
.rating-choice:hover {
  transform: translateY(-2px);
  background: rgba(255,186,74,.10);
  border-color: rgba(255,186,74,.35);
}
.rating-choice input {
  width: auto;
  accent-color: var(--accent);
}
.rating-choice input:checked + .rating-stars {
  filter: drop-shadow(0 0 8px rgba(255,186,74,.35));
}
.rating-choice input:checked ~ em {
  color: var(--accent);
}
.rating-stars {
  display: inline-flex;
  gap: .08rem;
  font-size: 1rem;
  line-height: 1;
}
.rating-stars span {
  color: rgba(255,255,255,.22);
}
.rating-stars span.is-filled {
  color: var(--accent);
}
.rating-choice em {
  font-style: normal;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
}
@media (max-width: 760px) {
  .rating-select {
    grid-template-columns: 1fr;
  }
  .rating-choice {
    grid-template-columns: auto 1fr auto;
    justify-items: start;
  }
}


/* UI update v21: relation multi-image gallery and responsive event slider */
.relations-slider {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: center;
}
.relations-viewport {
  overflow: hidden;
  width: 100%;
}
.relations-track {
  display: flex;
  gap: 1rem;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.relation-slide {
  flex: 0 0 calc((100% - 2rem) / 3);
}
.relations-arrow {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,186,74,.38);
  background: rgba(255,186,74,.10);
  color: var(--accent);
  font-size: 2rem;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: transform .18s ease, background .2s ease, opacity .2s ease;
}
.relations-arrow:hover {
  transform: translateY(-2px) scale(1.04);
  background: rgba(255,186,74,.16);
}
.relations-arrow:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}
.relations-pagination {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .85rem;
}
.relations-page-dot {
  min-width: 32px;
  height: 32px;
  padding: 0 .55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s ease, background .2s ease, border-color .2s ease;
}
.relations-page-dot:hover,
.relations-page-dot.is-active {
  transform: translateY(-1px);
  background: rgba(255,186,74,.14);
  border-color: rgba(255,186,74,.38);
  color: var(--accent);
}
.relation-mini-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
  margin-top: .85rem;
}
.relation-mini-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
}
.form-hint {
  margin-top: -.45rem;
}
.relation-gallery-admin {
  display: grid;
  gap: .75rem;
  color: var(--muted);
  font-weight: 800;
}
.relation-gallery-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .75rem;
}
.relation-gallery-admin-grid figure {
  margin: 0;
  display: grid;
  gap: .45rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .5rem;
}
.relation-gallery-admin-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}
.relation-gallery-admin-grid .danger-link {
  width: 100%;
}
@media (max-width: 1024px) {
  .relation-slide {
    flex-basis: calc((100% - 1rem) / 2);
  }
}
@media (max-width: 680px) {
  .relations-slider {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: .45rem;
  }
  .relation-slide {
    flex-basis: 100%;
  }
  .relations-arrow {
    width: 38px;
    height: 38px;
    font-size: 1.7rem;
  }
}


/* UI update v22: hide native date icon and style file upload buttons */
.date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
  pointer-events: none;
}
.date-input-wrap input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3rem;
}
.admin-form input[type="file"] {
  cursor: pointer;
  border-style: dashed;
  background: rgba(255,255,255,.055);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.admin-form input[type="file"]:hover {
  border-color: rgba(255,186,74,.42);
  background: rgba(255,186,74,.075);
  box-shadow: 0 12px 28px rgba(255,186,74,.07);
}
.admin-form input[type="file"]::file-selector-button {
  margin-right: .85rem;
  border: 1px solid rgba(255,186,74,.38);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #ff7a45);
  color: #150d04;
  font: inherit;
  font-size: .84rem;
  font-weight: 900;
  padding: .48rem .78rem;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.admin-form input[type="file"]::file-selector-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 22px rgba(255,139,69,.20);
}
.admin-form input[type="file"]::-webkit-file-upload-button {
  margin-right: .85rem;
  border: 1px solid rgba(255,186,74,.38);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #ff7a45);
  color: #150d04;
  font: inherit;
  font-size: .84rem;
  font-weight: 900;
  padding: .48rem .78rem;
  cursor: pointer;
}


/* UI update v23: image zoom lightbox and emoji insertion support */
#relacje .relation-card img.is-zoomable {
  cursor: zoom-in;
}
#relacje .relation-card img.is-zoomable:hover {
  filter: brightness(1.08);
}
.has-lightbox-open {
  overflow: hidden;
}
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3,4,10,.88);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.image-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.image-lightbox img {
  max-width: min(1120px, 92vw);
  max-height: 84vh;
  object-fit: contain;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 90px rgba(0,0,0,.62);
  transform: scale(.96);
  transition: transform .22s ease;
}
.image-lightbox.is-open img {
  transform: scale(1);
}
.image-lightbox-close,
.image-lightbox-nav {
  position: absolute;
  border: 1px solid rgba(255,186,74,.38);
  background: rgba(255,186,74,.12);
  color: var(--accent);
  border-radius: 999px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: transform .18s ease, background .2s ease, border-color .2s ease;
}
.image-lightbox-close:hover,
.image-lightbox-nav:hover {
  transform: translateY(-2px) scale(1.04);
  background: rgba(255,186,74,.18);
  border-color: rgba(255,186,74,.55);
}
.image-lightbox-close {
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 44px;
  height: 44px;
  font-size: 2rem;
  line-height: 1;
}
.image-lightbox-nav {
  top: 50%;
  width: 48px;
  height: 48px;
  font-size: 2.4rem;
  line-height: 1;
}
.image-lightbox-prev {
  left: clamp(.8rem, 3vw, 2rem);
}
.image-lightbox-next {
  right: clamp(.8rem, 3vw, 2rem);
}
@media (max-width: 680px) {
  .image-lightbox {
    padding: 4.5rem .8rem 1.2rem;
  }
  .image-lightbox img {
    max-width: 96vw;
    max-height: 76vh;
    border-radius: 18px;
  }
  .image-lightbox-nav {
    top: auto;
    bottom: 1rem;
    width: 42px;
    height: 42px;
    font-size: 2rem;
  }
  .image-lightbox-prev {
    left: calc(50% - 54px);
  }
  .image-lightbox-next {
    right: calc(50% - 54px);
  }
}


/* UI update v24: relation lightbox now uses event-scoped image groups */
.image-lightbox .image-lightbox-nav[style*="display: none"] {
  display: none !important;
}


/* UI update v25: fix relation edit form spacing and non-nested delete buttons */
.relation-edit-form {
  row-gap: 1.15rem;
  column-gap: 1rem;
}
.relation-edit-form > label,
.relation-edit-form > .emoji-palette,
.relation-edit-form > .current-file,
.relation-edit-form > .relation-gallery-admin,
.relation-edit-form > .check-row,
.relation-edit-form > .form-hint {
  margin-bottom: .35rem;
}
.relation-edit-form .current-file,
.relation-edit-form .relation-gallery-admin {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: .9rem;
}
.relation-edit-form .current-file {
  display: grid;
  gap: .7rem;
}
.relation-edit-form .current-file span,
.relation-gallery-admin > span {
  color: var(--muted);
  font-weight: 900;
  font-size: .9rem;
}
.relation-gallery-admin-grid figure {
  position: relative;
}
.relation-gallery-admin-grid figure .danger-link {
  margin-top: .1rem;
}
.relation-form-actions {
  margin-top: .9rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.10);
  gap: .75rem;
}
.admin-form .form-actions {
  align-items: center;
}
.admin-form > * {
  min-width: 0;
}


/* UI update v26: full message preview modal in admin panel */
#admin-wiadomosci .actions-cell {
  gap: .35rem;
  align-items: center;
}
#admin-wiadomosci .actions-cell > button,
#admin-wiadomosci .actions-cell form {
  margin: .08rem;
}
.admin-message-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.admin-message-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.admin-message-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,4,10,.82);
  backdrop-filter: blur(16px);
}
.admin-message-modal-card {
  position: relative;
  z-index: 1;
  width: min(760px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at top left, rgba(255,186,74,.14), transparent 36%),
    rgba(15,18,31,.96);
  box-shadow: 0 32px 90px rgba(0,0,0,.58);
  padding: clamp(1.2rem, 3vw, 2rem);
  transform: translateY(14px) scale(.98);
  transition: transform .22s ease;
}
.admin-message-modal.is-open .admin-message-modal-card {
  transform: translateY(0) scale(1);
}
.admin-message-modal-card h2 {
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  margin: .15rem 0 1rem;
  letter-spacing: -.03em;
}
.admin-message-modal-close {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,186,74,.38);
  background: rgba(255,186,74,.12);
  color: var(--accent);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.admin-message-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}
.admin-message-details div,
.admin-message-content {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 18px;
  padding: .8rem .9rem;
}
.admin-message-details span,
.admin-message-content span {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .3rem;
}
.admin-message-details strong {
  display: block;
  color: var(--text);
  font-size: .95rem;
  overflow-wrap: anywhere;
}
.admin-message-content p {
  margin: 0;
  color: var(--text);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 680px) {
  .admin-message-details {
    grid-template-columns: 1fr;
  }
  .admin-message-modal-card {
    border-radius: 22px;
  }
}


/* UI update v27: compact messages table, auto-read and followed messages */
.badge.follow {
  background: rgba(255,186,74,.16);
  color: #ffde9a;
  border: 1px solid rgba(255,186,74,.42);
}
.message-followed {
  background: rgba(255,186,74,.055);
}
.message-followed td {
  border-bottom-color: rgba(255,186,74,.16);
}
.admin-message-modal-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.10);
}
.admin-message-modal-actions span {
  color: var(--muted);
  font-size: .86rem;
}
.admin-message-modal-actions .is-followed {
  background: rgba(255,186,74,.16);
  border-color: rgba(255,186,74,.46);
  color: var(--accent);
}
#admin-wiadomosci .admin-table th,
#admin-wiadomosci .admin-table td {
  white-space: nowrap;
}
#admin-wiadomosci .admin-table td:nth-child(4) {
  white-space: normal;
}


/* UI update v28: readable follow button and messages pagination */
.admin-message-modal-actions .btn,
.admin-message-modal-actions .btn.btn-outline {
  color: #ffde9a;
  border-color: rgba(255,186,74,.52);
  background: rgba(255,186,74,.12);
}
.admin-message-modal-actions .btn:hover,
.admin-message-modal-actions .btn.btn-outline:hover {
  color: #150d04;
  background: linear-gradient(135deg, var(--accent), #ff7a45);
  border-color: rgba(255,186,74,.75);
}
.admin-message-modal-actions .btn.is-followed {
  color: #150d04;
  background: linear-gradient(135deg, var(--accent), #ff7a45);
  border-color: rgba(255,186,74,.75);
  box-shadow: 0 12px 26px rgba(255,139,69,.18);
}
.admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.10);
}
.admin-pagination a,
.admin-pagination span {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.055);
  color: var(--text);
  padding: .48rem .75rem;
  font-size: .84rem;
  font-weight: 900;
}
.admin-pagination a {
  transition: transform .16s ease, background .2s ease, border-color .2s ease;
}
.admin-pagination a:hover {
  transform: translateY(-2px);
  background: rgba(255,186,74,.12);
  border-color: rgba(255,186,74,.38);
  color: var(--accent);
}
.admin-pagination .disabled {
  opacity: .42;
}
.admin-pagination .pagination-info {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}
@media (max-width: 620px) {
  .admin-pagination {
    align-items: stretch;
  }
  .admin-pagination a,
  .admin-pagination span {
    width: 100%;
    text-align: center;
  }
}


/* UI update v29: client-side messages pagination without full reload */
.admin-pagination button {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.055);
  color: var(--text);
  padding: .48rem .75rem;
  font-size: .84rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.admin-pagination button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: rgba(255,186,74,.12);
  border-color: rgba(255,186,74,.38);
  color: var(--accent);
}
.admin-pagination button:disabled {
  opacity: .42;
  cursor: not-allowed;
}
#admin-wiadomosci tbody tr {
  transition: opacity .18s ease, transform .18s ease;
}
#admin-wiadomosci tbody tr.is-page-hidden {
  display: none;
}
#admin-wiadomosci tbody.is-switching tr:not(.is-page-hidden) {
  opacity: .35;
  transform: translateY(3px);
}
@media (max-width: 620px) {
  .admin-pagination button {
    width: 100%;
    text-align: center;
  }
}


/* UI update v30: styled admin delete confirmation modal */
.btn-danger {
  border-color: rgba(255,88,88,.48);
  background: rgba(255,88,88,.12);
  color: #ffb7b7;
}
.btn-danger:hover {
  background: linear-gradient(135deg, #ff6b6b, #ff3b3b);
  color: #180404;
  border-color: rgba(255,120,120,.72);
}
.admin-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.admin-confirm-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.admin-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,4,10,.82);
  backdrop-filter: blur(16px);
}
.admin-confirm-card {
  position: relative;
  z-index: 1;
  width: min(520px, 95vw);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at top left, rgba(255,88,88,.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255,186,74,.12), transparent 38%),
    rgba(15,18,31,.96);
  box-shadow: 0 32px 90px rgba(0,0,0,.58);
  padding: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
  transform: translateY(14px) scale(.98);
  transition: transform .22s ease;
}
.admin-confirm-modal.is-open .admin-confirm-card {
  transform: translateY(0) scale(1);
}
.admin-confirm-close {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,186,74,.38);
  background: rgba(255,186,74,.12);
  color: var(--accent);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.admin-confirm-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto .85rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffd2d2;
  font-size: 1.65rem;
  font-weight: 1000;
  border: 1px solid rgba(255,88,88,.42);
  background: rgba(255,88,88,.12);
  box-shadow: 0 0 34px rgba(255,88,88,.14);
}
.admin-confirm-card h2 {
  margin: .15rem 0 .55rem;
  font-size: clamp(1.35rem, 3vw, 2rem);
  letter-spacing: -.03em;
}
.admin-confirm-card p[data-admin-confirm-message] {
  margin: 0 auto 1.25rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 390px;
}
.admin-confirm-actions {
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.admin-confirm-actions .btn {
  min-width: 130px;
}
@media (max-width: 560px) {
  .admin-confirm-actions .btn {
    width: 100%;
  }
  .admin-confirm-card {
    border-radius: 22px;
  }
}


/* UI update v31: client-side pagination for Relations and Audio */
.admin-block tbody tr.is-admin-page-hidden {
  display: none;
}
.admin-block tbody.is-admin-page-switching tr:not(.is-admin-page-hidden) {
  opacity: .35;
  transform: translateY(3px);
}
.section-pagination {
  margin-top: 1rem;
}


/* UI update v32: order arrows and safer confirmation for relation images */
.order-cell {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.order-cell form {
  display: inline-flex;
}
.order-btn {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,186,74,.32);
  background: rgba(255,186,74,.09);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .16s ease, background .2s ease, border-color .2s ease;
}
.order-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,186,74,.16);
  border-color: rgba(255,186,74,.48);
}
.order-btn:active {
  transform: translateY(0) scale(.94);
}
@media (max-width: 720px) {
  .order-cell {
    display: flex;
  }
}


/* UI update v33: separate Pozycja/Akcje columns and AJAX order buttons */
.admin-table td.order-cell {
  display: table-cell;
  vertical-align: middle;
  min-width: 86px;
}
.order-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
}
.order-form {
  display: inline-flex;
}
.order-btn.is-working {
  opacity: .55;
  pointer-events: none;
}
tr.is-order-moving {
  opacity: .55;
  transform: scale(.995);
}
.actions-cell {
  min-width: 130px;
}
@media (max-width: 720px) {
  .admin-table td.order-cell {
    display: table-cell;
  }
  .order-actions {
    justify-content: flex-start;
  }
}


/* UI update v34: confirmation modal is global in admin footer */
.admin-confirm-modal {
  z-index: 9999;
}


/* UI update v35: testimonial pagination and preview modal */
.admin-testimonial-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.admin-testimonial-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.admin-testimonial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,4,10,.82);
  backdrop-filter: blur(16px);
}
.admin-testimonial-card {
  position: relative;
  z-index: 1;
  width: min(700px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at top left, rgba(255,186,74,.14), transparent 36%),
    rgba(15,18,31,.96);
  box-shadow: 0 32px 90px rgba(0,0,0,.58);
  padding: clamp(1.2rem, 3vw, 2rem);
  transform: translateY(14px) scale(.98);
  transition: transform .22s ease;
}
.admin-testimonial-modal.is-open .admin-testimonial-card {
  transform: translateY(0) scale(1);
}
.admin-testimonial-close {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,186,74,.38);
  background: rgba(255,186,74,.12);
  color: var(--accent);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.admin-testimonial-card h2 {
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  margin: .15rem 0 1rem;
  letter-spacing: -.03em;
}
.admin-testimonial-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}
.admin-testimonial-meta div,
.admin-testimonial-content {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 18px;
  padding: .8rem .9rem;
}
.admin-testimonial-meta span,
.admin-testimonial-content span {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .3rem;
}
.admin-testimonial-meta strong {
  display: block;
  color: var(--text);
  font-size: .95rem;
  overflow-wrap: anywhere;
}
.admin-testimonial-stars {
  color: var(--accent) !important;
  letter-spacing: .08em;
}
.admin-testimonial-content p {
  margin: 0;
  color: var(--text);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .admin-testimonial-meta {
    grid-template-columns: 1fr;
  }
  .admin-testimonial-card {
    border-radius: 22px;
  }
}


/* UI update v36: dashboard counters and improved admin quick navigation */
.admin-dashboard-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .65rem;
  align-items: stretch;
}
.admin-dashboard-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  min-height: 54px;
  padding: .72rem .82rem;
  text-align: left;
}
.admin-dashboard-nav a span {
  color: var(--text);
  font-size: .82rem;
  line-height: 1.2;
}
.admin-dashboard-nav a strong {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,186,74,.12);
  border: 1px solid rgba(255,186,74,.32);
  color: var(--accent);
  font-size: .92rem;
}
.admin-dashboard-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.admin-dashboard-cards .admin-quick-card {
  position: relative;
  overflow: hidden;
}
.admin-dashboard-cards .admin-quick-card.has-alert {
  border-color: rgba(255,186,74,.45);
  background:
    radial-gradient(circle at top right, rgba(255,186,74,.17), transparent 42%),
    rgba(255,255,255,.055);
}
.admin-dashboard-cards .admin-quick-card.has-alert::after {
  content: "";
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(255,186,74,.7);
}
@media (max-width: 1180px) {
  .admin-dashboard-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-dashboard-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .admin-dashboard-nav,
  .admin-dashboard-cards {
    grid-template-columns: 1fr;
  }
  .admin-dashboard-nav a {
    min-height: 48px;
  }
}


/* UI update v37: compact top dashboard navigation */
.admin-dashboard-nav-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 760px;
}
@media (max-width: 720px) {
  .admin-dashboard-nav-compact {
    grid-template-columns: 1fr;
    max-width: none;
  }
}


/* UI update v38: admin account settings */
.admin-account-form {
  margin-top: 0;
}
.admin-account-form label {
  min-width: 0;
}
.admin-dashboard-cards {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1300px) {
  .admin-dashboard-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .admin-dashboard-cards {
    grid-template-columns: 1fr;
  }
}


/* UI update v40: login button spacing */
.login-card .btn,
.login-card button[type="submit"] {
  margin-top: 1.15rem;
}
.login-card label + .btn,
.login-card label + button[type="submit"] {
  margin-top: 1.25rem;
}


/* UI update v41: service-only data export */
.service-only-card {
  border-color: rgba(255,186,74,.42);
  background:
    radial-gradient(circle at top right, rgba(255,186,74,.16), transparent 44%),
    rgba(255,255,255,.055);
}
.service-only-card span {
  color: var(--accent);
}


/* UI update v42: MySQL export card */
.service-only-card strong {
  letter-spacing: -.01em;
}


/* UI update v43: service diagnostics */
.service-diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}
.service-diagnostic-card {
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.045);
  border-radius: 20px;
  padding: 1rem;
}
.service-diagnostic-card span {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .4rem;
}
.service-diagnostic-card strong {
  display: block;
  font-size: 1.25rem;
  color: var(--text);
}
.service-diagnostic-card small {
  display: block;
  margin-top: .35rem;
  color: var(--muted);
  line-height: 1.45;
}
.service-diagnostic-card.is-ok {
  border-color: rgba(72, 211, 138, .28);
  background: rgba(72, 211, 138, .06);
}
.service-diagnostic-card.is-ok strong {
  color: #9af0c0;
}
.service-diagnostic-card.is-error {
  border-color: rgba(255, 88, 88, .32);
  background: rgba(255, 88, 88, .07);
}
.service-diagnostic-card.is-error strong {
  color: #ffb7b7;
}
.service-diagnostic-table td:nth-child(3),
.service-diagnostic-table th:nth-child(3) {
  text-align: right;
}
@media (max-width: 1100px) {
  .service-diagnostics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .service-diagnostics-grid {
    grid-template-columns: 1fr;
  }
}


/* UI update v44: service uploads export */
.service-only-card[href$="/export-uploads"] {
  border-color: rgba(255,186,74,.42);
}


/* UI update v45: public FAQ section */
.faq-section {
  justify-content: center;
}
.faq-list {
  width: min(920px, 100%);
  margin: 2rem auto 0;
  display: grid;
  gap: .8rem;
}
.faq-item {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(255,186,74,.07), transparent 34%),
    rgba(255,255,255,.045);
  overflow: hidden;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.faq-item:hover {
  border-color: rgba(255,186,74,.25);
  transform: translateY(-2px);
}
.faq-question {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  cursor: pointer;
}
.faq-question span {
  font-size: clamp(1rem, 2vw, 1.16rem);
  font-weight: 900;
  letter-spacing: -.02em;
}
.faq-question strong {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,186,74,.32);
  background: rgba(255,186,74,.10);
  color: var(--accent);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform .2s ease, background .2s ease;
}
.faq-item.is-open .faq-question strong {
  transform: rotate(45deg);
  background: rgba(255,186,74,.16);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.faq-answer p {
  margin: 0;
  padding: 0 1.1rem 1.05rem;
  color: var(--muted);
  line-height: 1.65;
}
.faq-item.is-open .faq-answer {
  max-height: 240px;
}
.faq-cta {
  width: min(920px, 100%);
  margin: 1.2rem auto 0;
  padding: 1rem;
  border-radius: 22px;
  border: 1px solid rgba(255,186,74,.18);
  background: rgba(255,186,74,.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-cta p {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}
@media (max-width: 720px) {
  .faq-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .faq-cta .btn {
    justify-content: center;
  }
}


/* UI update v46: public CTA strips */
.section-mini.public-cta {
  width: min(1180px, calc(100% - 2rem));
  margin: clamp(1.4rem, 4vw, 2.5rem) auto;
  min-height: auto;
  padding: clamp(1.15rem, 3vw, 1.65rem);
  border-radius: 28px;
  border: 1px solid rgba(255,186,74,.20);
  background:
    radial-gradient(circle at top left, rgba(255,186,74,.16), transparent 36%),
    radial-gradient(circle at bottom right, rgba(255,122,69,.12), transparent 40%),
    rgba(255,255,255,.045);
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.public-cta h2 {
  margin: .15rem 0 .4rem;
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  letter-spacing: -.04em;
}
.public-cta p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 720px;
}
.public-cta .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.public-cta-after-opinions {
  border-color: rgba(255,255,255,.13);
  background:
    radial-gradient(circle at top right, rgba(255,186,74,.13), transparent 38%),
    rgba(255,255,255,.04);
}
@media (max-width: 760px) {
  .section-mini.public-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    border-radius: 24px;
  }
  .public-cta .btn {
    justify-content: center;
    width: 100%;
  }
}


/* UI update v47: AJAX contact form status */
.contact-form {
  position: relative;
}
.contact-form.is-sending {
  opacity: .78;
  pointer-events: none;
}
.contact-form-status {
  display: none;
  grid-column: 1 / -1;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: var(--text);
  padding: .9rem 1rem;
  line-height: 1.55;
  font-weight: 800;
}
.contact-form-status.is-visible {
  display: block;
}
.contact-form-status.is-success {
  border-color: rgba(72, 211, 138, .30);
  background:
    radial-gradient(circle at top left, rgba(72, 211, 138, .16), transparent 40%),
    rgba(72, 211, 138, .07);
  color: #c9f8dd;
}
.contact-form-status.is-error {
  border-color: rgba(255,88,88,.34);
  background:
    radial-gradient(circle at top left, rgba(255,88,88,.16), transparent 40%),
    rgba(255,88,88,.07);
  color: #ffd0d0;
}
.contact-form-status strong {
  color: inherit;
}
.contact-form .btn[disabled] {
  opacity: .68;
  cursor: wait;
}


/* UI update v48: contact form success panel */
.contact-form.is-hidden-after-success {
  display: none;
}
.contact-success-panel {
  display: none;
  width: min(620px, 100%);
  margin: 0 auto;
  text-align: center;
  border-radius: 28px;
  border: 1px solid rgba(72, 211, 138, .28);
  background:
    radial-gradient(circle at top left, rgba(72, 211, 138, .16), transparent 40%),
    radial-gradient(circle at bottom right, rgba(255,186,74,.12), transparent 42%),
    rgba(255,255,255,.045);
  box-shadow: 0 22px 70px rgba(0,0,0,.24);
  padding: clamp(1.25rem, 4vw, 2rem);
}
.contact-success-panel.is-visible {
  display: block;
}
.contact-success-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto .85rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(72, 211, 138, .34);
  background: rgba(72, 211, 138, .11);
  color: #9af0c0;
  font-size: 1.65rem;
  font-weight: 1000;
  box-shadow: 0 0 34px rgba(72, 211, 138, .12);
}
.contact-success-panel h3 {
  margin: .2rem 0 .45rem;
  font-size: clamp(1.35rem, 3vw, 2rem);
  letter-spacing: -.035em;
}
.contact-success-panel p:not(.section-kicker) {
  margin: 0 auto 1rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 440px;
}
.contact-success-panel .btn {
  justify-content: center;
}


/* UI update v49: simplified contact success message */
.contact-success-panel h3 {
  margin-top: .35rem;
}
.contact-success-panel .section-kicker {
  display: none;
}


/* UI update v50: message counter and honeypot anti-spam field */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.message-field {
  position: relative;
}
.message-counter {
  display: block;
  margin-top: .42rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-align: right;
}
.message-counter.is-warning {
  color: #ffde9a;
}
.message-counter.is-limit {
  color: #ffb7b7;
}


/* UI update v51: compact right-aligned mobile navigation */
@media (max-width: 820px) {
  .site-header,
  .header-inner,
  .nav-wrap,
  .main-nav,
  .site-nav,
  .nav {
    position: relative;
  }

  .main-nav.is-open,
  .site-nav.is-open,
  .nav.is-open {
    position: absolute;
    top: calc(100% + .7rem);
    right: 0;
    left: auto;
    width: min(260px, calc(100vw - 2rem));
    align-items: stretch;
    text-align: right;
    padding: .65rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.13);
    background:
      radial-gradient(circle at top right, rgba(255,186,74,.13), transparent 42%),
      rgba(16, 13, 22, .96);
    box-shadow: 0 24px 70px rgba(0,0,0,.38);
    backdrop-filter: blur(18px);
    z-index: 80;
  }

  .main-nav.is-open a,
  .site-nav.is-open a,
  .nav.is-open a {
    justify-content: flex-end;
    text-align: right;
    width: 100%;
    padding: .72rem .82rem;
    border-radius: 14px;
  }

  .main-nav.is-open a:hover,
  .site-nav.is-open a:hover,
  .nav.is-open a:hover {
    background: rgba(255,255,255,.07);
  }
}


/* UI update v52: fixed mobile hamburger position + admin mobile tables */
@media (max-width: 820px) {
  .site-header {
    position: fixed;
  }

  .site-header .main-nav,
  .site-header .site-nav,
  .site-header .nav {
    position: fixed;
    top: 4.35rem;
    right: 1rem;
    left: auto;
  }

  .site-header .main-nav.is-open,
  .site-header .site-nav.is-open,
  .site-header .nav.is-open {
    position: fixed;
    top: 4.35rem;
    right: 1rem;
    left: auto;
    width: min(270px, calc(100vw - 2rem));
  }
}

@media (max-width: 700px) {
  .admin-header {
    position: sticky;
    top: 0;
  }

  .admin-section-head {
    align-items: stretch;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.5rem;
  }

  .admin-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  .admin-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .85rem;
  }

  .admin-table thead {
    display: none;
  }

  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
  }

  .admin-table tr {
    padding: .85rem;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.11);
    background:
      radial-gradient(circle at top right, rgba(255,186,74,.08), transparent 38%),
      rgba(255,255,255,.045);
    box-shadow: 0 16px 42px rgba(0,0,0,.18);
  }

  .admin-table td {
    border: 0;
    padding: .42rem 0;
    text-align: left;
    word-break: break-word;
  }

  .admin-table td:first-child {
    padding-top: 0;
  }

  .admin-table td:last-child {
    padding-bottom: 0;
  }

  .admin-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .12rem;
    color: var(--accent);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .admin-table td:not([data-label])::before,
  .admin-table td[data-label=""]::before {
    display: none;
  }

  .actions-cell {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .35rem;
  }

  .actions-cell .btn,
  .actions-cell button,
  .actions-cell a {
    min-height: 38px;
  }

  .admin-thumb {
    width: 100%;
    max-width: 180px;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .admin-preview {
    max-width: 100%;
  }
}


/* UI update v53: logo in hero section */
.hero {
  isolation: isolate;
}
.hero-logo-badge {
  position: absolute;
  right: clamp(1rem, 5vw, 4rem);
  bottom: clamp(4.4rem, 10vw, 7rem);
  z-index: 0;
  pointer-events: none;
}
.hero-logo-shell {
  position: relative;
  width: clamp(170px, 18vw, 250px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2.2vw, 1.35rem);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.16), transparent 32%),
    radial-gradient(circle at 70% 75%, rgba(255,186,74,.12), transparent 38%),
    rgba(8,10,18,.42);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 24px 80px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,186,74,.08) inset;
  backdrop-filter: blur(16px);
}
.hero-logo-shell::before {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,186,74,.18) 0%, rgba(255,186,74,.06) 36%, transparent 72%);
  filter: blur(18px);
  z-index: -1;
}
.hero-logo-mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .92;
  filter:
    drop-shadow(0 0 14px rgba(255,186,74,.18))
    drop-shadow(0 0 38px rgba(255,186,74,.12));
}
.hero-content {
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  .hero-logo-badge {
    right: 1rem;
    bottom: 5rem;
  }
  .hero-logo-shell {
    width: clamp(145px, 26vw, 190px);
  }
}
@media (max-width: 720px) {
  .hero {
    padding-bottom: 6rem;
  }
  .hero-logo-badge {
    position: static;
    margin-top: 1.6rem;
    display: flex;
    justify-content: center;
  }
  .hero-logo-shell {
    width: min(180px, 48vw);
  }
}


/* UI update v54: hero logo position and subtle glow pulse */
@media (min-width: 721px) {
  .hero-logo-badge {
    left: clamp(1rem, 5vw, 4rem);
    right: auto;
    top: clamp(6.4rem, 10vw, 8.2rem);
    bottom: auto;
  }

  .hero-logo-shell {
    width: clamp(145px, 15vw, 215px);
  }
}

.hero-logo-shell::before {
  animation: heroLogoGlowPulse 3.8s ease-in-out infinite;
}

@keyframes heroLogoGlowPulse {
  0%, 100% {
    opacity: .48;
    transform: scale(.96);
  }
  50% {
    opacity: .88;
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-shell::before {
    animation: none;
  }
}


/* UI update v55: stronger visible glow pulse under hero logo */
.hero-logo-shell::before {
  inset: -24%;
  background:
    radial-gradient(circle, rgba(255,186,74,.36) 0%, rgba(255,186,74,.18) 34%, rgba(255,122,69,.09) 54%, transparent 74%);
  filter: blur(24px);
  opacity: .72;
  animation: heroLogoGlowPulseStrong 3.2s ease-in-out infinite;
}

.hero-logo-shell::after {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,186,74,.18) 32%, transparent 68%);
  filter: blur(12px);
  opacity: .5;
  z-index: -1;
  animation: heroLogoGlowPulseSoft 3.2s ease-in-out infinite;
}

@keyframes heroLogoGlowPulseStrong {
  0%, 100% {
    opacity: .48;
    transform: scale(.92);
  }
  50% {
    opacity: .95;
    transform: scale(1.12);
  }
}

@keyframes heroLogoGlowPulseSoft {
  0%, 100% {
    opacity: .28;
    transform: scale(.98);
  }
  50% {
    opacity: .72;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-shell::after {
    animation: none;
  }
}


/* UI update v56: white hero title and stronger tablet-safe animation */
.hero-title {
  -webkit-text-stroke: 1.45px rgba(255,255,255,.96);
  text-stroke: 1.45px rgba(255,255,255,.96);
  text-shadow:
    0 0 16px rgba(255,255,255,.18),
    0 0 44px rgba(255,255,255,.10),
    0 0 58px rgba(255,186,74,.10);
}

.hero-title::before {
  -webkit-text-stroke: 1.45px rgba(255,255,255,.42);
  text-stroke: 1.45px rgba(255,255,255,.42);
  opacity: .82;
}

.hero-title::after {
  color: #ffffff;
  text-shadow:
    0 0 12px rgba(255,255,255,.48),
    0 0 28px rgba(255,255,255,.22),
    0 0 54px rgba(255,186,74,.14);
}

/* Tablet fallback — keeps the fill animation visible on devices that render clip-path text less reliably */
@media (min-width: 721px) and (max-width: 1180px) {
  .hero-title {
    -webkit-text-stroke-width: 1.25px;
    text-stroke-width: 1.25px;
  }

  .outline-fill-title.fill-tl::after,
  .outline-fill-title.fill-tr::after,
  .outline-fill-title.fill-br::after,
  .outline-fill-title.fill-bl::after {
    animation-duration: 2.2s;
  }

  .outline-fill-title.clear-tl::after,
  .outline-fill-title.clear-tr::after,
  .outline-fill-title.clear-br::after,
  .outline-fill-title.clear-bl::after {
    animation-duration: 1.65s;
  }
}

/* Mobile keeps the title fully readable even if the browser limits text clipping */
@media (max-width: 720px) {
  .hero-title::after {
    color: #ffffff;
  }
}


/* UI update v57: tablet fix for hero title animation after logo glow */
.hero-content {
  position: relative;
  z-index: 3;
}

.hero-title,
.hero-title::before,
.hero-title::after {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.hero-logo-badge {
  z-index: 1;
}

/*
  On tablets some browsers struggle with simultaneous text clip-path animation
  and large blurred animated logo glow. Keep the logo position, but make the
  glow static/lighter so the main hero title animation remains visible.
*/
@media (min-width: 721px) and (max-width: 1180px) {
  .hero-logo-badge {
    z-index: 1;
  }

  .hero-logo-shell::before,
  .hero-logo-shell::after {
    animation: none !important;
    transform: none !important;
  }

  .hero-logo-shell::before {
    inset: -16%;
    filter: blur(16px);
    opacity: .45;
  }

  .hero-logo-shell::after {
    inset: -9%;
    filter: blur(8px);
    opacity: .28;
  }

  .hero-logo-mark {
    filter:
      drop-shadow(0 0 10px rgba(255,186,74,.14))
      drop-shadow(0 0 24px rgba(255,186,74,.08));
  }

  .outline-fill-title::after {
    will-change: clip-path, opacity;
  }
}


/* UI update v61: cookies banner and privacy policy page */
.cookie-banner {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 120;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-radius: 24px;
  border: 1px solid rgba(255,186,74,.22);
  background:
    radial-gradient(circle at top left, rgba(255,186,74,.14), transparent 36%),
    rgba(8,10,18,.94);
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  backdrop-filter: blur(18px);
}
.cookie-banner[hidden] {
  display: none !important;
}
.cookie-banner strong {
  display: block;
  margin-bottom: .22rem;
  color: var(--text);
}
.cookie-banner p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: .92rem;
}
.cookie-actions {
  display: flex;
  flex: 0 0 auto;
  gap: .55rem;
  align-items: center;
  justify-content: flex-end;
}
.legal-page {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,186,74,.10), transparent 28rem),
    radial-gradient(circle at 82% 24%, rgba(138,92,255,.12), transparent 30rem),
    var(--bg);
}
.legal-main {
  width: min(980px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 8rem 0 3rem;
}
.legal-card {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(255,186,74,.08), transparent 34%),
    rgba(255,255,255,.045);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  padding: clamp(1.25rem, 4vw, 2.4rem);
}
.legal-card h1 {
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: .96;
  margin-bottom: .65rem;
}
.legal-card h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin: 2rem 0 .7rem;
}
.legal-card p,
.legal-card li {
  color: var(--muted);
}
.legal-card strong,
.legal-card a {
  color: var(--text);
}
.legal-card ul {
  margin: .4rem 0 0;
  padding-left: 1.25rem;
}
.legal-updated {
  color: var(--accent) !important;
  font-weight: 800;
}
.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
.legal-footer {
  width: min(980px, calc(100% - 2rem));
}
@media (max-width: 720px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-actions .btn {
    width: 100%;
  }
}


/* UI update v64: admin brand switcher */
.admin-site-switcher {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.admin-site-switcher label {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}
.admin-site-switcher select,
.admin-current-site-card select {
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: var(--text);
  padding: 0 .85rem;
  font-weight: 800;
  outline: none;
}
.admin-current-site-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.2rem 0 1.35rem;
  padding: 1rem;
  border-radius: 24px;
  border: 1px solid rgba(255,186,74,.22);
  background:
    radial-gradient(circle at top left, rgba(255,186,74,.12), transparent 38%),
    rgba(255,255,255,.045);
}
.admin-current-site-card span,
.admin-current-site-card small {
  display: block;
  color: var(--muted);
  font-size: .86rem;
}
.admin-current-site-card strong {
  display: block;
  color: var(--text);
  font-size: 1.35rem;
  margin: .1rem 0;
}
.admin-current-site-card form {
  display: flex;
  gap: .55rem;
  align-items: center;
  margin: 0;
}
.btn-small {
  min-height: 42px;
  padding: .62rem .95rem;
}
@media (max-width: 820px) {
  .admin-header {
    align-items: stretch;
  }
  .admin-site-switcher {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
  .admin-site-switcher label,
  .admin-site-switcher select {
    width: 100%;
  }
  .admin-current-site-card {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-current-site-card form {
    flex-direction: column;
    align-items: stretch;
  }
}


/* UI update v66: refined admin service switcher */
.admin-header {
  gap: .8rem;
}
.admin-site-switcher {
  flex: 0 1 310px;
  margin-left: auto;
  max-width: 310px;
}
.admin-site-switcher-control {
  width: 100%;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  margin: 0 !important;
  padding: .38rem .45rem .38rem .8rem;
  border: 1px solid rgba(255, 186, 74, .24);
  border-radius: 999px;
  background:
    radial-gradient(circle at top left, rgba(255,186,74,.11), transparent 44%),
    rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.18);
}
.admin-site-switcher-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-site-switcher-select-wrap {
  position: relative;
  display: block;
  min-width: 0;
}
.admin-site-switcher-select-wrap::after {
  content: "⌄";
  position: absolute;
  right: .82rem;
  top: 50%;
  transform: translateY(-55%);
  color: var(--accent);
  font-weight: 900;
  pointer-events: none;
}
.admin-site-switcher select {
  width: 100%;
  min-height: 40px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  color: var(--text);
  padding: .55rem 2.05rem .55rem .9rem;
  font-size: .94rem;
  font-weight: 900;
  line-height: 1.1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  cursor: pointer;
}
.admin-site-switcher select:focus {
  box-shadow: inset 0 0 0 1px rgba(255,186,74,.72), 0 0 0 3px rgba(255,186,74,.13);
}
.admin-site-switcher select option,
.admin-current-site-card select option {
  background: #0b0d16;
  color: #fff;
}
.admin-current-site-card select {
  appearance: none;
  -webkit-appearance: none;
  border-color: rgba(255,186,74,.25);
  background:
    linear-gradient(135deg, rgba(255,186,74,.10), rgba(255,255,255,.05)),
    #0b0d16;
  color: var(--text);
  padding-right: 2rem;
}
@media (max-width: 980px) {
  .admin-site-switcher {
    flex-basis: 100%;
    max-width: none;
    width: 100%;
    order: 3;
    margin-left: 0;
  }
  .admin-site-switcher-control {
    grid-template-columns: 1fr;
    border-radius: 20px;
    padding: .75rem;
  }
  .admin-site-switcher-label {
    text-align: left;
  }
  .admin-site-switcher select {
    min-height: 46px;
  }
}


/* UI update v68: safer composition for Macio Band about photo */
.about-photo {
  object-position: center center;
}


/* UI update v69: Macio Band "O nas" section uses natural team photo proportions */
.about-section-band .about-shell {
  align-items: center;
}
.about-section-band .about-photo-panel {
  min-height: auto;
  aspect-ratio: auto;
  padding: clamp(.45rem, 1vw, .7rem);
}
.about-section-band .about-photo {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center center;
  border-radius: 26px;
  display: block;
}
@media (min-width: 981px) {
  .about-section-band .about-shell {
    grid-template-columns: minmax(520px, 1.2fr) minmax(320px, .8fr);
  }
}
@media (max-width: 980px) {
  .about-section-band .about-shell {
    grid-template-columns: 1fr;
  }
  .about-section-band .about-photo-panel {
    max-width: 760px;
    margin: 0 auto;
  }
}


/* UI update v71: cross-brand choice between Macio Wodzirej and Macio Band */
.nav-brand-switch {
  border: 1px solid rgba(255,186,74,.34);
  border-radius: 999px;
  padding: .48rem .85rem !important;
  color: var(--accent) !important;
  background: rgba(255,186,74,.08);
}
.nav-brand-switch:hover {
  background: rgba(255,186,74,.16);
}
.brand-choice-section {
  padding-top: clamp(3rem, 7vw, 5.5rem);
}
.brand-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 1.5rem);
  margin-top: 1.6rem;
}
.brand-choice-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at top left, rgba(255,186,74,.09), transparent 42%),
    rgba(255,255,255,.045);
  box-shadow: 0 20px 70px rgba(0,0,0,.24);
  padding: clamp(1.15rem, 3vw, 1.65rem);
}
.brand-choice-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 35%);
}
.brand-choice-card.is-current {
  border-color: rgba(255,186,74,.34);
  background:
    radial-gradient(circle at top left, rgba(255,186,74,.15), transparent 42%),
    rgba(255,255,255,.055);
}
.brand-choice-label {
  display: inline-flex;
  margin-bottom: .85rem;
  padding: .34rem .65rem;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(255,186,74,.10);
  border: 1px solid rgba(255,186,74,.18);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand-choice-card h3 {
  margin: 0 0 .55rem;
  font-size: clamp(1.55rem, 4vw, 2.4rem);
}
.brand-choice-card p {
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.1rem;
}
@media (max-width: 760px) {
  .brand-choice-grid {
    grid-template-columns: 1fr;
  }
  .nav-brand-switch {
    justify-content: center;
    text-align: center;
  }
}



/* Relation video card v89 */
.relation-video-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 148px;
    margin: 1rem 0 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1.35rem;
    background: linear-gradient(135deg, rgba(255, 186, 74, .16), rgba(255, 255, 255, .05));
    color: inherit;
    text-decoration: none;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.relation-video-card > img,
.relation-video-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 148px;
    object-fit: cover;
}

.relation-video-placeholder {
    display: grid;
    place-items: center;
    padding: 1.5rem;
    color: rgba(255, 255, 255, .74);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.relation-video-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 186, 74, .30), transparent 34%),
        linear-gradient(180deg, rgba(7, 9, 18, .05), rgba(7, 9, 18, .72));
    pointer-events: none;
}

.relation-video-overlay {
    position: absolute;
    inset: auto 1rem 1rem 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    width: fit-content;
    max-width: calc(100% - 2rem);
    padding: .62rem .9rem .62rem .68rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(7, 9, 18, .72);
    color: #fff;
    font-size: .9rem;
    font-weight: 800;
    backdrop-filter: blur(10px);
}

.relation-video-play {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffba4a, #ffdf8a);
    box-shadow: 0 10px 25px rgba(255, 186, 74, .32);
    flex: 0 0 auto;
}

.relation-video-play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: .16rem;
    border-top: .45rem solid transparent;
    border-bottom: .45rem solid transparent;
    border-left: .68rem solid #11131d;
}

.relation-video-card:hover .relation-video-play,
.relation-video-card:focus-visible .relation-video-play {
    transform: scale(1.06);
}

@media (max-width: 640px) {
    .relation-video-card {
        min-height: 128px;
        border-radius: 1rem;
    }

    .relation-video-overlay {
        font-size: .82rem;
    }
}



/* Cursor and relation video modal v90 */
body,
.site-main,
.site-main p,
.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main li,
.site-main span:not(a span):not(button span),
.public-cta p,
.section-kicker {
    cursor: default;
}

a,
button,
.btn,
.relation-video-card,
.relation-mini-gallery img,
.relation-card > img {
    cursor: pointer;
}

input,
textarea,
select,
[contenteditable="true"] {
    cursor: text;
}

.relation-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
}

.relation-video-modal.is-open {
    display: grid;
}

.relation-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 186, 74, .14), transparent 36%),
        rgba(4, 6, 14, .86);
    backdrop-filter: blur(8px);
}

.relation-video-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1.4rem;
    background: linear-gradient(145deg, rgba(17, 21, 35, .96), rgba(7, 9, 18, .98));
    box-shadow: 0 28px 90px rgba(0, 0, 0, .48);
    overflow: hidden;
}

.relation-video-frame-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #050711;
}

.relation-video-frame-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.relation-video-modal-close {
    position: absolute;
    top: .8rem;
    right: .8rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(7, 9, 18, .74);
    color: #fff;
    font-size: 1.85rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.relation-video-modal-close:hover,
.relation-video-modal-close:focus-visible {
    background: rgba(255, 186, 74, .92);
    color: #11131d;
}

.relation-video-open-original {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .95rem 1rem 1rem;
    color: #ffcf7a;
    font-weight: 700;
    text-decoration: none;
}

.relation-video-open-original:hover,
.relation-video-open-original:focus-visible {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .relation-video-modal {
        padding: .75rem;
    }

    .relation-video-modal-dialog {
        border-radius: 1rem;
    }

    .relation-video-modal-close {
        top: .55rem;
        right: .55rem;
        width: 2.35rem;
        height: 2.35rem;
    }
}